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

export const metadata: Metadata = {
  title: "How Verification Works — AdultWorld.ai",
  description:
    "Learn how AdultWorld.ai verifies escorts and clients. Understand verification levels, the review process, benefits of being verified, and our privacy commitment.",
  openGraph: {
    title: "How Verification Works — AdultWorld.ai",
    description:
      "Understand how AdultWorld.ai verification keeps the community safe and trustworthy.",
  },
};

const verificationLevels = [
  {
    name: "Email Verified",
    icon: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
    ),
    description:
      "The first step for every account. You confirm ownership of your email address via a one-time verification link. This ensures we can reach you for important account notifications and security alerts.",
  },
  {
    name: "Phone Verified",
    icon: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
      </svg>
    ),
    description:
      "A one-time SMS code sent to your mobile number. Phone verification adds another layer of identity confirmation and helps prevent duplicate or fraudulent accounts on the platform.",
  },
  {
    name: "ID Verified",
    icon: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
      </svg>
    ),
    description:
      "You submit a government-issued photo ID (passport, driving licence, or national ID card). Our team verifies your identity against your profile information. This is the gold standard for trust on AdultWorld.ai.",
  },
  {
    name: "Photo Verified",
    icon: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
    ),
    description:
      "You take a live selfie holding a handwritten note with your username and today&apos;s date. This proves that the person behind the profile matches the photos displayed. Clients especially value this level of verification.",
  },
];

const escortSteps = [
  {
    step: "1",
    title: "Go to Your Verification Page",
    description:
      "Log in to your account and navigate to Manage > Verification, or use the direct link below. You will see which verification levels you have already completed and which are still pending.",
  },
  {
    step: "2",
    title: "Upload Your ID",
    description:
      "Submit a clear photo of your government-issued ID. Accepted documents include passports, driving licences, and national identity cards. Make sure all text is legible and the photo is not blurry.",
  },
  {
    step: "3",
    title: "Take a Verification Selfie",
    description:
      "Take a selfie holding a handwritten sign that includes your AdultWorld username and today's date. This confirms you are the person shown in your profile photos. Natural lighting works best.",
  },
  {
    step: "4",
    title: "Wait for Admin Review",
    description:
      "Our trust and safety team reviews every submission manually. Most verifications are processed within 24 to 48 hours. You will receive an email notification once your status is updated.",
  },
];

export default function HowVerificationWorksPage() {
  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">
          How Verification Works
        </h1>
        <p className="text-text-muted text-lg max-w-2xl mx-auto">
          Verification is the foundation of trust on AdultWorld.ai. It protects
          escorts, reassures clients, and keeps the entire community safer.
        </p>
      </div>

      {/* Why Verification Matters */}
      <section className="mb-16">
        <div className="bg-gold/10 border border-gold/20 rounded-2xl p-8">
          <div className="flex items-center gap-3 mb-4">
            <svg
              className="w-7 h-7 text-gold"
              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>
            <h2 className="text-2xl font-bold text-text">
              Why Verification Matters
            </h2>
          </div>
          <p className="text-text-muted leading-relaxed">
            In the adult services industry, trust is everything. Clients want to
            know that the person they are contacting is real, and escorts want to
            know they are dealing with genuine individuals. Verification bridges
            that gap. A verified profile signals credibility, reduces the risk of
            scams or catfishing, and creates a safer environment for everyone
            involved. On AdultWorld.ai, verified escorts consistently receive
            more messages, more bookings, and higher-quality enquiries than
            unverified profiles.
          </p>
        </div>
      </section>

      {/* Verification Levels */}
      <section className="mb-16">
        <div className="flex items-center gap-3 mb-8">
          <div className="h-px flex-1 bg-surface-light" />
          <h2 className="text-2xl font-bold text-gold font-heading px-4">
            Verification Levels
          </h2>
          <div className="h-px flex-1 bg-surface-light" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {verificationLevels.map((level) => (
            <div
              key={level.name}
              className="bg-surface rounded-xl p-6 border border-surface-light hover:border-gold/30 transition-colors"
            >
              <div className="flex items-center gap-3 mb-3">
                <span className="text-gold">{level.icon}</span>
                <h3 className="text-lg font-semibold text-text">
                  {level.name}
                </h3>
              </div>
              <p className="text-text-muted text-sm leading-relaxed">
                {level.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* How to Get Verified — Escorts */}
      <section className="mb-16">
        <div className="flex items-center gap-3 mb-8">
          <div className="h-px flex-1 bg-surface-light" />
          <h2 className="text-2xl font-bold text-gold font-heading px-4">
            How to Get Verified (Escorts)
          </h2>
          <div className="h-px flex-1 bg-surface-light" />
        </div>
        <div className="relative">
          <div className="absolute left-7 top-8 bottom-8 w-px bg-gold/20 hidden md:block" />
          <div className="space-y-8">
            {escortSteps.map((step) => (
              <div key={step.step} className="flex gap-6 items-start">
                <div className="w-14 h-14 rounded-full bg-gold/15 border-2 border-gold text-gold flex items-center justify-center text-xl font-bold shrink-0 relative z-10">
                  {step.step}
                </div>
                <div className="pt-2">
                  <h3 className="text-lg font-semibold text-text mb-1">
                    {step.title}
                  </h3>
                  <p className="text-text-muted text-sm leading-relaxed max-w-xl">
                    {step.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* For Clients */}
      <section className="mb-16">
        <div className="bg-surface rounded-2xl p-8 border border-surface-light">
          <h2 className="text-2xl font-bold text-text mb-3 text-center">
            Verification for Clients
          </h2>
          <p className="text-text-muted text-center mb-6 max-w-xl mx-auto">
            Clients are encouraged to verify their email and phone number.
            While ID verification is not required for clients, completing these
            steps shows escorts that you are a serious and respectful individual.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
            <div className="bg-background rounded-xl p-5 border border-surface-light">
              <h3 className="text-gold font-semibold mb-1 text-sm">
                Email Verification
              </h3>
              <p className="text-text-muted text-sm leading-relaxed">
                Required for all accounts. Confirm your email address when you
                register to activate messaging and other platform features.
              </p>
            </div>
            <div className="bg-background rounded-xl p-5 border border-surface-light">
              <h3 className="text-gold font-semibold mb-1 text-sm">
                Phone Verification
              </h3>
              <p className="text-text-muted text-sm leading-relaxed">
                Optional but recommended. A verified phone number increases your
                credibility and shows providers you are a genuine user.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          Benefits of Being Verified
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {[
            {
              title: "Higher Search Ranking",
              description:
                "Verified profiles are prioritised in search results and directory listings. The more verification levels you complete, the higher you appear.",
            },
            {
              title: "Verified Badge",
              description:
                "A visible verification badge is displayed on your profile, instantly communicating trust and authenticity to anyone browsing your page.",
            },
            {
              title: "More Client Trust",
              description:
                "Clients are far more likely to reach out to verified escorts. Verification removes doubt and makes clients feel confident about making contact.",
            },
          ].map((benefit) => (
            <div
              key={benefit.title}
              className="bg-surface rounded-xl p-6 border border-surface-light"
            >
              <h3 className="text-gold font-semibold mb-2">{benefit.title}</h3>
              <p className="text-text-muted text-sm leading-relaxed">
                {benefit.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Timeline & Privacy */}
      <section className="mb-16">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-surface rounded-xl p-6 border border-surface-light">
            <h3 className="text-lg font-semibold text-text mb-3 flex items-center gap-2">
              <svg className="w-5 h-5 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              Review Timeline
            </h3>
            <p className="text-text-muted text-sm leading-relaxed">
              Most verification submissions are reviewed and approved within
              <strong className="text-text"> 24 to 48 hours</strong>. During
              peak periods it may take slightly longer, but we aim to process
              every submission as quickly as possible. You will receive an email
              as soon as your verification status changes.
            </p>
          </div>
          <div className="bg-surface rounded-xl p-6 border border-surface-light">
            <h3 className="text-lg font-semibold text-text mb-3 flex items-center gap-2">
              <svg className="w-5 h-5 text-gold" 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>
              Your Privacy is Protected
            </h3>
            <p className="text-text-muted text-sm leading-relaxed">
              We never share your verification documents with other users,
              third parties, or advertisers. All submitted ID photos and selfies
              are stored in encrypted storage and are only accessible to our
              trust and safety team during the review process. Documents are
              permanently deleted after verification is complete.
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="text-center">
        <div className="bg-gradient-to-r from-gold/10 via-gold/5 to-gold/10 rounded-2xl border border-gold/20 p-8 md:p-12">
          <h2 className="text-3xl font-bold text-text mb-3">
            Ready to Get Verified?
          </h2>
          <p className="text-text-muted mb-6 max-w-lg mx-auto">
            Complete your verification today and start building trust with
            clients. The process takes just a few minutes.
          </p>
          <Link
            href="/manage/verification"
            className="inline-flex items-center gap-2 bg-gold hover:bg-gold/90 text-black px-10 py-3.5 rounded-xl font-bold text-lg transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-gold/30"
          >
            Start Verification
            <svg
              className="w-5 h-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M13 7l5 5m0 0l-5 5m5-5H6"
              />
            </svg>
          </Link>
        </div>
      </section>
    </div>
  );
}