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

export const metadata: Metadata = {
  title: "How Credits Work — AdultWorld.ai",
  description:
    "Learn how credits work on AdultWorld.ai. Discover credit packages, what you can spend credits on, how to earn credits, and secure payment processing.",
  openGraph: {
    title: "How Credits Work — AdultWorld.ai",
    description:
      "Credits are the virtual currency that powers messaging, LiveCam, tips, and more on AdultWorld.ai.",
  },
};

const creditPackages = [
  { credits: 100, price: 20, perCredit: "0.20" },
  { credits: 250, price: 50, perCredit: "0.20" },
  { credits: 500, price: 90, perCredit: "0.18", popular: true },
  { credits: 750, price: 140, perCredit: "0.19" },
  { credits: 1000, price: 170, perCredit: "0.17", bestValue: true },
  { credits: 2000, price: 320, perCredit: "0.16" },
];

const spendingOptions = [
  {
    title: "Messaging",
    description:
      "Each escort sets their own per-message price in credits. When you send a message, the credit cost is deducted from your balance automatically. This model ensures escorts are compensated for their time and attention.",
    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="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: "LiveCam",
    description:
      "Watch live streams and interact with performers in real time. LiveCam sessions are billed per minute, with rates set by each performer. Enter and leave sessions freely — you only pay for the time you spend.",
    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="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: "Tips",
    description:
      "Show appreciation by sending tips to your favourite escorts. Tips go directly to the recipient and are a great way to build rapport and stand out from other clients.",
    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="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: "Boosts & Featured Placement",
    description:
      "Escorts can spend credits to boost their profile to the top of search results and directory listings. Featured placement dramatically increases visibility and enquiries for a set period.",
    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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
      </svg>
    ),
  },
  {
    title: "PPV Content",
    description:
      "Unlock pay-per-view photos and videos shared by escorts. Each piece of PPV content has a credit price set by the creator — pay once and access it forever from your account.",
    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="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: "Store Purchases",
    description:
      "Browse the AdultWorld marketplace and purchase digital items, custom content, and exclusive offerings from escorts using your credit balance.",
    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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
      </svg>
    ),
  },
];

const earningMethods = [
  {
    title: "Provider Referral Bonus",
    amount: "5,000 credits",
    description:
      "Refer a new escort to AdultWorld.ai. When they complete registration and verification, you receive 5,000 credits added to your balance.",
  },
  {
    title: "Client Referral Bonus",
    amount: "1,000 credits",
    description:
      "Refer a new client who creates an account and makes their first credit purchase. You earn 1,000 credits as a thank-you.",
  },
  {
    title: "Receiving Tips",
    amount: "Varies",
    description:
      "Escorts earn credits whenever a client sends them a tip — whether on a profile, in a message, or during a LiveCam session.",
  },
  {
    title: "Content Sales",
    amount: "Varies",
    description:
      "Sell PPV content, store items, or custom offerings. Every sale deposits credits directly into your account balance.",
  },
];

export default function HowCreditsWorkPage() {
  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 Credits Work
        </h1>
        <p className="text-text-muted text-lg max-w-2xl mx-auto">
          Credits are the virtual currency that powers AdultWorld.ai. Use them
          to message escorts, watch LiveCam streams, send tips, unlock content,
          and much more.
        </p>
      </div>

      {/* What Are Credits */}
      <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">
            What Are Credits?
          </h2>
          <p className="text-text-muted text-center max-w-2xl mx-auto leading-relaxed">
            Credits are AdultWorld.ai&apos;s platform virtual currency. Instead
            of individual transactions for every feature, you purchase credits
            in bulk and spend them across the entire platform. This keeps
            things simple, private, and flexible — one balance for everything
            from messaging to LiveCam to marketplace purchases.
          </p>
        </div>
      </section>

      {/* Credit Packages */}
      <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">
            Credit Packages
          </h2>
          <div className="h-px flex-1 bg-surface-light" />
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          {creditPackages.map((pkg) => (
            <div
              key={pkg.credits}
              className={`relative rounded-2xl border p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${
                pkg.bestValue
                  ? "border-gold bg-gradient-to-b from-gold/10 via-surface to-surface shadow-gold/20 shadow-lg"
                  : pkg.popular
                    ? "border-gold/50 bg-surface"
                    : "border-surface-light bg-surface hover:border-gold/40"
              }`}
            >
              {pkg.bestValue && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 rounded-full bg-gold text-black text-xs font-bold uppercase tracking-wider whitespace-nowrap">
                  Best Value
                </div>
              )}
              {pkg.popular && !pkg.bestValue && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 rounded-full bg-gold/80 text-black text-xs font-bold uppercase tracking-wider">
                  Popular
                </div>
              )}
              <div className="text-2xl font-bold text-gold mt-1">
                {pkg.credits.toLocaleString()}
              </div>
              <div className="text-xs text-text-muted mb-2">credits</div>
              <div className="text-xl font-bold text-text">
                &euro;{pkg.price}
              </div>
              <div className="text-xs text-text-muted">
                &euro;{pkg.perCredit}/credit
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* What You Can Spend Credits On */}
      <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">
            What You Can Spend Credits On
          </h2>
          <div className="h-px flex-1 bg-surface-light" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {spendingOptions.map((option) => (
            <div
              key={option.title}
              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">{option.icon}</span>
                <h3 className="text-lg font-semibold text-text">
                  {option.title}
                </h3>
              </div>
              <p className="text-text-muted text-sm leading-relaxed">
                {option.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* How to Earn Credits */}
      <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 Earn Credits
          </h2>
          <div className="h-px flex-1 bg-surface-light" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {earningMethods.map((method) => (
            <div
              key={method.title}
              className="bg-surface rounded-xl p-6 border border-surface-light"
            >
              <div className="flex items-center justify-between mb-2">
                <h3 className="text-base font-semibold text-text">
                  {method.title}
                </h3>
                <span className="text-gold font-bold text-sm">
                  {method.amount}
                </span>
              </div>
              <p className="text-text-muted text-sm leading-relaxed">
                {method.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Promo Codes */}
      <section className="mb-16">
        <div className="bg-surface rounded-2xl p-8 border border-surface-light text-center">
          <h2 className="text-xl font-bold text-text mb-3">
            Promo Codes & Discounts
          </h2>
          <p className="text-text-muted max-w-xl mx-auto leading-relaxed">
            From time to time we release promotional discount codes that give
            you bonus credits or a percentage off your next purchase. Follow us
            on social media and check your email for exclusive offers. Promo
            codes can be applied at checkout when buying credits.
          </p>
        </div>
      </section>

      {/* Security */}
      <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="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>
            <h2 className="text-2xl font-bold text-text">
              Secure Payments
            </h2>
          </div>
          <p className="text-text-muted leading-relaxed">
            All credit purchases are processed securely through Stripe, a
            PCI-DSS Level 1 certified payment processor trusted by millions of
            businesses worldwide. We never store your card details on our
            servers. Your financial information is handled entirely by Stripe,
            and transactions appear discreetly on your bank statement. We
            support all major credit and debit cards as well as selected
            regional payment methods.
          </p>
        </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 Started?
          </h2>
          <p className="text-text-muted mb-6 max-w-lg mx-auto">
            Purchase credits and unlock the full AdultWorld.ai experience.
            Messaging, LiveCam, tips, and more — all in one balance.
          </p>
          <Link
            href="/credits/buy"
            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"
          >
            Buy Credits Now
            <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="/credits/buy" className="text-gold hover:underline">Buy Credits</Link>
          {" · "}
          <Link href="/pricing" className="text-gold hover:underline">View Pricing</Link>
          {" · "}
          <Link href="/how-verification-works" className="text-gold hover:underline">How Verification Works</Link>
        </p>
      </div>
    </div>
  );
}