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

export const metadata: Metadata = {
  title: "How AdultWorld.ai Works",
  description:
    "Learn how AdultWorld.ai works for escorts and clients. Step-by-step guide to profiles, search, messaging, credits, and safety.",
  openGraph: {
    title: "How AdultWorld.ai Works",
    description:
      "Step-by-step guide for escorts and clients on AdultWorld.ai.",
  },
};

const escortSteps = [
  {
    step: "1",
    title: "Create Your Account",
    description:
      "Sign up for free and select 'Escort' as your account type. Fill in your basic details — name, location, and a brief introduction.",
  },
  {
    step: "2",
    title: "Complete Verification",
    description:
      "Upload a verification photo to earn your verified badge. This builds trust with clients and significantly boosts your visibility in search results.",
  },
  {
    step: "3",
    title: "Build Your Profile",
    description:
      "Add your best photos, set your rates, list your services, and write a compelling bio. The more complete your profile, the better your search ranking.",
  },
  {
    step: "4",
    title: "Get Discovered",
    description:
      "Your profile goes live and appears in AI-powered search results. Clients can find you by location, services, availability, and natural language queries.",
  },
  {
    step: "5",
    title: "Connect & Earn",
    description:
      "Receive messages from interested clients, manage bookings, go live on LiveCam, and earn credits. Track everything through your analytics dashboard.",
  },
];

const clientSteps = [
  {
    step: "1",
    title: "Browse or Search",
    description:
      "Explore escorts by city, country, or use our AI search to describe exactly what you're looking for in plain language.",
  },
  {
    step: "2",
    title: "View Profiles",
    description:
      "Check photos, reviews, rates, and services. Verified profiles have been through our trust & safety process — look for the badge.",
  },
  {
    step: "3",
    title: "Send a Message",
    description:
      "Reach out through our encrypted messaging system. Introduce yourself, ask questions, and discuss details privately.",
  },
  {
    step: "4",
    title: "Meet with Confidence",
    description:
      "Arrange your meeting at a safe, agreed-upon location. After your experience, leave a review to help the community.",
  },
];

const creditFeatures = [
  {
    title: "Priority Messages",
    description:
      "Your message appears at the top of an escort's inbox, increasing your response rate.",
  },
  {
    title: "Unlock Premium Content",
    description:
      "Access exclusive photos, videos, and galleries from your favourite escorts.",
  },
  {
    title: "LiveCam Access",
    description:
      "Join live streams, interact in real time, and send tips to performers.",
  },
  {
    title: "Profile Boosts",
    description:
      "Escorts can boost their profile visibility in search results with credits.",
  },
  {
    title: "Gift & Tips",
    description:
      "Send virtual gifts and tips to show appreciation or stand out.",
  },
  {
    title: "Secure Payments",
    description:
      "All credit purchases are processed securely. Multiple payment methods accepted.",
  },
];

const faqs = [
  {
    question: "Is it free to sign up?",
    answer:
      "Yes, creating an account is completely free for both escorts and clients. Escorts can list a basic profile at no cost, and clients can browse profiles and use basic search for free.",
  },
  {
    question: "How does verification work?",
    answer:
      "Escorts submit a verification photo holding a handwritten note with their username and the date. Our team reviews submissions within 24 hours. Once verified, a badge appears on your profile.",
  },
  {
    question: "What are credits and how do I get them?",
    answer:
      "Credits are our in-platform currency used for premium features like priority messages, LiveCam access, and unlocking exclusive content. You can purchase credits securely through your dashboard.",
  },
  {
    question: "Is my information private?",
    answer:
      "Absolutely. We use end-to-end encryption for messages, never sell personal data, and give you full control over what's visible on your profile. Read our Privacy Policy for details.",
  },
  {
    question: "How do I report suspicious activity?",
    answer:
      "Use the 'Report' button on any profile or message, or contact our support team directly. All reports are confidential and reviewed within 24 hours.",
  },
  {
    question: "Can I use AdultWorld while travelling?",
    answer:
      "Yes. Our platform works globally with escorts in 100+ countries. Use location-based search or set your destination city to browse escorts at your travel destination.",
  },
  {
    question: "What is the 6 months free Premium offer?",
    answer:
      "New escort accounts automatically receive 6 months of Premium membership at no cost — no credit card required. This includes all Premium features like VIP badge, advanced analytics, and priority search.",
  },
  {
    question: "How do I cancel my subscription?",
    answer:
      "You can cancel anytime from your dashboard under Settings > Subscription. Your plan remains active until the end of the billing period. No cancellation fees.",
  },
];

export default function HowItWorksPage() {
  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 AdultWorld.ai Works
        </h1>
        <p className="text-text-muted text-lg max-w-2xl mx-auto">
          Whether you&apos;re an escort looking to grow your business or a client
          searching for the perfect companion, here&apos;s everything you need to
          know.
        </p>
      </div>

      {/* For 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">
            For Escorts
          </h2>
          <div className="h-px flex-1 bg-surface-light" />
        </div>
        <div className="relative">
          {/* Vertical line connector */}
          <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>
        <div className="mt-8 text-center">
          <Link
            href="/for-escorts"
            className="text-gold hover:text-gold/80 font-medium transition-colors"
          >
            Learn more about joining as an escort &rarr;
          </Link>
        </div>
      </section>

      {/* For Clients */}
      <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">
            For Clients
          </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">
            {clientSteps.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>
        <div className="mt-8 text-center">
          <Link
            href="/for-clients"
            className="text-gold hover:text-gold/80 font-medium transition-colors"
          >
            Learn more about using AdultWorld as a client &rarr;
          </Link>
        </div>
      </section>

      {/* Credits System */}
      <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">
            The Credits System
          </h2>
          <p className="text-text-muted text-center mb-8 max-w-xl mx-auto">
            Credits are the flexible in-platform currency that powers premium
            features on AdultWorld.ai.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {creditFeatures.map((feature) => (
              <div
                key={feature.title}
                className="bg-background rounded-xl p-5 border border-surface-light"
              >
                <h3 className="text-gold font-semibold mb-1 text-sm">
                  {feature.title}
                </h3>
                <p className="text-text-muted text-sm leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
          <div className="mt-6 text-center">
            <Link
              href="/credits"
              className="text-gold hover:text-gold/80 font-medium text-sm transition-colors"
            >
              Buy credits &rarr;
            </Link>
          </div>
        </div>
      </section>

      {/* Safety */}
      <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">
              Your Safety Matters
            </h2>
          </div>
          <p className="text-text-muted leading-relaxed mb-4">
            Safety is built into every layer of AdultWorld.ai. We verify
            profiles, encrypt messages, provide reporting tools, and maintain a
            dedicated trust & safety team available 24/7. If you ever feel
            unsafe, use the Report button or contact our support team
            immediately.
          </p>
          <Link
            href="/safety"
            className="inline-flex items-center gap-2 text-gold hover:text-gold/80 font-medium transition-colors"
          >
            View safety resources
            <svg className="w-4 h-4" 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>

      {/* FAQs */}
      <section className="mb-8">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          Frequently Asked Questions
        </h2>
        <div className="space-y-4">
          {faqs.map((faq) => (
            <div
              key={faq.question}
              className="bg-surface rounded-xl p-6 border border-surface-light"
            >
              <h3 className="text-base font-semibold text-text mb-2">
                {faq.question}
              </h3>
              <p className="text-text-muted text-sm leading-relaxed">
                {faq.answer}
              </p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}