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

export const metadata: Metadata = {
  title: "For Clients — Discover AdultWorld.ai",
  description:
    "Discover verified escorts worldwide on AdultWorld.ai. Advanced AI search, secure messaging, reviews, and a trusted credits system.",
  openGraph: {
    title: "For Clients — Discover AdultWorld.ai",
    description:
      "Find your perfect companion with AI-powered search, verified profiles, and secure messaging.",
  },
};

const features = [
  {
    title: "Advanced AI Search",
    description:
      "Describe what you're looking for in plain language. Our AI understands preferences, location, availability, and more to surface the best matches.",
    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 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    ),
  },
  {
    title: "Verified Escorts",
    description:
      "Every verified profile has been through our multi-step verification process. Look for the badge and browse with confidence.",
    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 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
      </svg>
    ),
  },
  {
    title: "Secure Messaging",
    description:
      "Communicate directly with escorts through our encrypted messaging system. Your conversations are private and never shared.",
    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 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: "Credits System",
    description:
      "Purchase credits to unlock premium features, send priority messages, and access exclusive content. Simple, transparent, and secure.",
    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: "Trusted Reviews",
    description:
      "Read authentic reviews from other clients. Our verified review system helps you make informed decisions with real feedback.",
    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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
      </svg>
    ),
  },
];

const steps = [
  {
    step: "1",
    title: "Browse",
    description:
      "Search by location, availability, services, or simply describe your ideal companion using our AI-powered search.",
  },
  {
    step: "2",
    title: "Message",
    description:
      "Found someone you like? Send a secure message to introduce yourself, ask questions, and arrange the details.",
  },
  {
    step: "3",
    title: "Meet",
    description:
      "Meet your verified companion with confidence. After your experience, leave a review to help the community.",
  },
];

const safetyTips = [
  "Always communicate through the platform's messaging system for your protection",
  "Verify the escort's profile — look for the verified badge",
  "Never share personal financial information like bank details or passwords",
  "Meet in a safe, agreed-upon location for your first encounter",
  "Trust your instincts — if something feels off, walk away",
  "Report any suspicious behaviour through the platform's reporting tools",
  "Read reviews from other clients before making your decision",
  "Be respectful, communicate boundaries clearly, and obtain consent",
];

export default function ForClientsPage() {
  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">
          Find Your Perfect Companion
        </h1>
        <p className="text-text-muted text-lg max-w-2xl mx-auto">
          Discover verified escorts worldwide with AI-powered search, secure
          messaging, and a trusted review system. Your next experience starts
          here.
        </p>
      </div>

      {/* Features */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          Everything You Need
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature) => (
            <div
              key={feature.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">{feature.icon}</span>
              <h3 className="text-lg font-semibold text-text mb-2">
                {feature.title}
              </h3>
              <p className="text-text-muted text-sm leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* How It Works */}
      <section className="mb-16">
        <h2 className="text-2xl font-bold text-text mb-8 text-center">
          How It Works
        </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>

      {/* Safety Tips */}
      <section className="mb-16">
        <div className="bg-surface rounded-2xl p-8 border border-surface-light">
          <div className="flex items-center gap-3 mb-6">
            <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">Safety Tips</h2>
          </div>
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {safetyTips.map((tip, i) => (
              <li
                key={i}
                className="flex items-start gap-2 text-sm text-text-muted"
              >
                <svg
                  className="w-4 h-4 text-gold flex-shrink-0 mt-0.5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 13l4 4L19 7"
                  />
                </svg>
                {tip}
              </li>
            ))}
          </ul>
          <div className="mt-6 pt-4 border-t border-surface-light">
            <Link
              href="/safety"
              className="text-gold hover:text-gold/80 text-sm font-medium transition-colors"
            >
              View all safety resources &rarr;
            </Link>
          </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">
            Start Exploring Today
          </h2>
          <p className="text-text-muted mb-6 max-w-lg mx-auto">
            Browse verified escorts in your area or anywhere in the world. No
            account required to start searching.
          </p>
          <Link
            href="/escorts"
            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 Browsing
            <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">
          Related:{" "}
          <Link href="/client-etiquette" className="text-gold hover:underline">Client Etiquette</Link>
          {" · "}
          <Link href="/how-credits-work" className="text-gold hover:underline">How Credits Work</Link>
          {" · "}
          <Link href="/safety" className="text-gold hover:underline">Safety Tips</Link>
        </p>
      </div>
    </div>
  );
}