import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "About AdultWorld.ai",
  description:
    "Learn about AdultWorld.ai — the world's most advanced AI-powered escort directory connecting people through a safe, premium platform.",
  openGraph: {
    title: "About AdultWorld.ai",
    description:
      "The world's most advanced AI-powered escort directory. Safe, premium, and global.",
  },
};

const values = [
  {
    title: "Safety First",
    description:
      "Every profile is reviewed and verified. We invest heavily in moderation, reporting tools, and cooperation with authorities to keep our community safe.",
    icon: (
      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
      </svg>
    ),
  },
  {
    title: "Privacy",
    description:
      "Your data belongs to you. We use end-to-end encryption for messages, never sell personal information, and give you full control over your profile visibility.",
    icon: (
      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
      </svg>
    ),
  },
  {
    title: "Inclusivity",
    description:
      "We welcome all genders, orientations, and backgrounds. AdultWorld is built to be a respectful space for everyone in the adult industry.",
    icon: (
      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
      </svg>
    ),
  },
  {
    title: "Technology-Driven",
    description:
      "From AI-powered search to smart matching algorithms, we leverage cutting-edge technology to deliver the best experience in the industry.",
    icon: (
      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
    ),
  },
];

const differentiators = [
  {
    title: "AI-Powered Search",
    description:
      "Our proprietary AI understands natural language queries and matches you with the most relevant results, going far beyond simple keyword filters.",
  },
  {
    title: "Verified Profiles",
    description:
      "Multi-step verification ensures every provider is real. Look for the verified badge to browse with confidence.",
  },
  {
    title: "Secure Messaging",
    description:
      "End-to-end encrypted messaging keeps conversations private. No third parties can read your messages — ever.",
  },
  {
    title: "Global Reach",
    description:
      "With providers in over 100 countries, find companions wherever you travel. Localised search, multi-currency support, and multilingual profiles.",
  },
];

const stats = [
  { value: "172K+", label: "Escorts Worldwide" },
  { value: "100+", label: "Countries" },
  { value: "24/7", label: "Support" },
];

export default function AboutPage() {
  return (
    <div className="max-w-5xl mx-auto py-8 px-4">
      {/* Hero */}
      <div className="text-center mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-gold mb-4 font-heading">
          The World&apos;s Most Advanced Escort Directory
        </h1>
        <p className="text-text-muted text-lg max-w-2xl mx-auto">
          AdultWorld.ai combines cutting-edge AI technology with a commitment to
          safety and privacy, creating the premier platform for adult services
          worldwide.
        </p>
      </div>

      {/* Mission */}
      <section className="mb-16">
        <div className="bg-surface rounded-2xl p-8 md:p-10 border border-surface-light">
          <h2 className="text-2xl font-bold text-text mb-4">Our Mission</h2>
          <p className="text-text-muted text-lg leading-relaxed">
            Connecting people through a safe, premium platform. We believe the
            adult industry deserves the same quality, innovation, and respect as
            any other sector. Our mission is to build the most trusted and
            technologically advanced escort directory in the world — one that
            empowers providers, protects clients, and raises the standard for
            everyone.
          </p>
        </div>
      </section>

      {/* What Makes Us Different */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          What Makes Us Different
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {differentiators.map((item) => (
            <div
              key={item.title}
              className="bg-surface rounded-xl p-6 border border-surface-light hover:border-gold/30 transition-colors"
            >
              <h3 className="text-lg font-semibold text-gold mb-2">
                {item.title}
              </h3>
              <p className="text-text-muted text-sm leading-relaxed">
                {item.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Our Values */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          Our Values
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          {values.map((value) => (
            <div
              key={value.title}
              className="bg-surface rounded-xl p-6 border border-surface-light"
            >
              <div className="flex items-center gap-3 mb-3">
                <span className="text-gold">{value.icon}</span>
                <h3 className="text-lg font-semibold text-text">
                  {value.title}
                </h3>
              </div>
              <p className="text-text-muted text-sm leading-relaxed">
                {value.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Stats */}
      <section className="mb-16">
        <div className="bg-gradient-to-r from-gold/10 via-gold/5 to-gold/10 rounded-2xl border border-gold/20 p-8">
          <div className="grid grid-cols-3 gap-8 text-center">
            {stats.map((stat) => (
              <div key={stat.label}>
                <div className="text-3xl md:text-4xl font-bold text-gold mb-1">
                  {stat.value}
                </div>
                <div className="text-text-muted text-sm">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact CTA */}
      <section className="text-center">
        <div className="bg-surface rounded-2xl p-8 border border-surface-light">
          <h2 className="text-2xl font-bold text-text mb-3">Get in Touch</h2>
          <p className="text-text-muted mb-6 max-w-lg mx-auto">
            Have questions, feedback, or partnership inquiries? We&apos;d love to
            hear from you.
          </p>
          <div className="flex items-center justify-center gap-4 flex-wrap">
            <Link
              href="/contact"
              className="bg-gold hover:bg-gold/90 text-black px-8 py-3 rounded-xl font-semibold transition-colors"
            >
              Contact Us
            </Link>
            <Link
              href="/help"
              className="bg-surface-light hover:bg-surface-light/80 text-text px-8 py-3 rounded-xl font-semibold transition-colors"
            >
              Help Center
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}