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

export const metadata: Metadata = {
  title: "For Escorts — Join AdultWorld.ai",
  description:
    "Join 172K+ escorts on AdultWorld.ai. Get 6 months FREE Premium, AI-powered visibility, secure messaging, LiveCam, and analytics tools.",
  openGraph: {
    title: "For Escorts — Join AdultWorld.ai",
    description:
      "Grow your business with the world's most advanced escort directory. 6 months FREE Premium for new providers.",
  },
};

const benefits = [
  {
    title: "Global Reach",
    description:
      "Get discovered by clients in 100+ countries. Set tour dates, multiple locations, and reach an international audience.",
    icon: (
      <svg className="w-8 h-8" 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: "AI-Powered Search",
    description:
      "Our AI matches your profile with the right clients. Natural language search means you show up for exactly what you offer.",
    icon: (
      <svg className="w-8 h-8" 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>
    ),
  },
  {
    title: "Secure Messaging",
    description:
      "End-to-end encrypted messages keep your conversations private. Screen clients before meeting with built-in chat tools.",
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
      </svg>
    ),
  },
  {
    title: "Credits System",
    description:
      "Earn credits from client interactions, tips, and premium content. A flexible monetisation model that works alongside bookings.",
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  {
    title: "LiveCam",
    description:
      "Go live and earn from anywhere. Our built-in LiveCam feature lets you connect with clients in real time — no third-party platform needed.",
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
      </svg>
    ),
  },
  {
    title: "Analytics Dashboard",
    description:
      "Track profile views, search impressions, message rates, and more. Understand what works and optimise your profile for maximum visibility.",
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
    ),
  },
];

const plans = [
  {
    name: "Free",
    price: "0",
    period: "",
    features: [
      "Basic profile listing",
      "10 photos",
      "3 galleries",
      "Standard search placement",
    ],
  },
  {
    name: "Basic",
    price: "35",
    period: "/mo",
    features: [
      "25 photos",
      "5 galleries",
      "Basic analytics",
      "Priority search",
      "Unlimited messages",
    ],
  },
  {
    name: "Premium",
    price: "100",
    period: "/mo",
    highlighted: true,
    badge: "Most Popular",
    features: [
      "50 photos",
      "10 galleries",
      "VIP badge",
      "Advanced analytics",
      "Tour listings",
      "Priority search",
      "Unlimited messages",
    ],
  },
  {
    name: "Premium+",
    price: "150",
    period: "/mo",
    features: [
      "Unlimited photos & galleries",
      "Featured profile rotation",
      "Multiple home bases",
      "Exclusive provider tools",
      "Dedicated support",
      "Everything in Premium",
    ],
  },
];

const steps = [
  {
    step: "1",
    title: "Register",
    description:
      "Create your free account in under 2 minutes. Choose 'Escort' as your account type and complete the basic details.",
  },
  {
    step: "2",
    title: "Verify",
    description:
      "Complete our quick verification process to earn a verified badge. This builds trust and significantly increases your visibility.",
  },
  {
    step: "3",
    title: "Publish",
    description:
      "Add your photos, set your rates and services, and publish your profile. You'll start appearing in search results immediately.",
  },
];

const testimonials = [
  {
    quote:
      "Since joining AdultWorld, my bookings have increased by 40%. The AI search means clients who find me are actually looking for what I offer.",
    name: "Verified Provider",
    location: "London, UK",
  },
  {
    quote:
      "The analytics dashboard is a game-changer. I can see exactly when my profile gets the most views and adjust my availability accordingly.",
    name: "Verified Provider",
    location: "Amsterdam, NL",
  },
  {
    quote:
      "I love the LiveCam feature. It lets me earn from home on quiet days and gives clients a real preview before booking.",
    name: "Verified Provider",
    location: "Berlin, DE",
  },
];

export default function ForEscortsPage() {
  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">
          Grow Your Business with AdultWorld.ai
        </h1>
        <p className="text-text-muted text-lg max-w-2xl mx-auto mb-6">
          Join 172,000+ escorts on the world&apos;s most advanced directory.
          AI-powered visibility, secure tools, and a global audience — all in one
          platform.
        </p>
        <div className="inline-flex items-center gap-2 bg-gold/15 border border-gold/30 text-gold rounded-full px-6 py-2 font-semibold text-lg">
          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm4.707 3.707a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L8.414 9H10a3 3 0 013 3v1a1 1 0 102 0v-1a5 5 0 00-5-5H8.414l1.293-1.293z" clipRule="evenodd" />
          </svg>
          6 Months FREE Premium
        </div>
      </div>

      {/* Benefits Grid */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          Why Escorts Choose AdultWorld
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {benefits.map((benefit) => (
            <div
              key={benefit.title}
              className="bg-surface rounded-xl p-6 border border-surface-light hover:border-gold/30 transition-colors"
            >
              <span className="text-gold mb-4 block">{benefit.icon}</span>
              <h3 className="text-lg font-semibold text-text mb-2">
                {benefit.title}
              </h3>
              <p className="text-text-muted text-sm leading-relaxed">
                {benefit.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Pricing Table */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-3 text-center">
          Simple, Transparent Pricing
        </h2>
        <p className="text-text-muted text-center mb-8 max-w-xl mx-auto">
          Start free and upgrade when you&apos;re ready. New providers get 6 months
          of Premium at no cost.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={`relative rounded-2xl border p-6 flex flex-col transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${
                plan.highlighted
                  ? "border-gold bg-gradient-to-b from-gold/10 via-surface to-surface shadow-gold/20 shadow-lg"
                  : "border-surface-light bg-surface hover:border-gold/40"
              }`}
            >
              {plan.badge && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-gold text-black text-xs font-bold uppercase tracking-wider">
                  {plan.badge}
                </div>
              )}
              <h3 className="text-xl font-bold text-text mt-2">{plan.name}</h3>
              <div className="flex items-baseline gap-1 my-4">
                <span className="text-3xl font-bold text-gold">
                  {plan.price === "0" ? "Free" : `\u20AC${plan.price}`}
                </span>
                {plan.period && (
                  <span className="text-text-muted text-sm">{plan.period}</span>
                )}
              </div>
              <ul className="space-y-2 mb-6 flex-1">
                {plan.features.map((feature, i) => (
                  <li
                    key={i}
                    className="flex items-start gap-2 text-sm text-text"
                  >
                    <svg
                      className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? "text-gold" : "text-green-400"}`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                    {feature}
                  </li>
                ))}
              </ul>
              <Link
                href="/pricing"
                className={`block w-full text-center py-2.5 px-4 rounded-xl font-semibold text-sm transition-all ${
                  plan.highlighted
                    ? "bg-gold text-black hover:bg-gold/90"
                    : "bg-surface-light text-text hover:bg-gold/20 hover:text-gold border border-surface-light"
                }`}
              >
                View Details
              </Link>
            </div>
          ))}
        </div>
      </section>

      {/* How to Get Started */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          Get Started in 3 Easy Steps
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {steps.map((step) => (
            <div key={step.step} className="text-center">
              <div className="w-14 h-14 rounded-full bg-gold/15 border-2 border-gold text-gold flex items-center justify-center text-2xl font-bold mx-auto mb-4">
                {step.step}
              </div>
              <h3 className="text-lg font-semibold text-text mb-2">
                {step.title}
              </h3>
              <p className="text-text-muted text-sm leading-relaxed">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          What Providers Say
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {testimonials.map((t, i) => (
            <div
              key={i}
              className="bg-surface rounded-xl p-6 border border-surface-light"
            >
              <svg
                className="w-8 h-8 text-gold/40 mb-3"
                fill="currentColor"
                viewBox="0 0 24 24"
              >
                <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zM0 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151C7.546 6.068 5.983 8.789 5.983 11H10v10H0z" />
              </svg>
              <p className="text-text-muted text-sm leading-relaxed mb-4">
                {t.quote}
              </p>
              <div className="text-xs text-text-muted">
                <span className="text-gold font-medium">{t.name}</span>
                <span className="mx-1">&middot;</span>
                {t.location}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Join Now 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 Grow Your Business?
          </h2>
          <p className="text-text-muted mb-6 max-w-lg mx-auto">
            Join thousands of escorts already thriving on AdultWorld.ai. Your
            first 6 months of Premium are on us.
          </p>
          <Link
            href="/register"
            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"
          >
            Join Now — It&apos;s Free
            <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>
      {/* Related Guides */}
      <div className="mt-12 pt-6 border-t border-surface-light">
        <p className="text-sm text-text-muted">
          Next steps:{" "}
          <Link href="/escort-guide" className="text-gold hover:underline">Escort Guide</Link>
          {" · "}
          <Link href="/how-verification-works" className="text-gold hover:underline">How Verification Works</Link>
          {" · "}
          <Link href="/pricing" className="text-gold hover:underline">View Pricing</Link>
        </p>
      </div>
    </div>
  );
}