'use client';

import { useState } from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { DollarSign, Users, TrendingUp, Shield, Check, ArrowRight, Copy, Mail, Share2 } from 'lucide-react';
import { useLanguage } from '@/hooks/use-language';
import { LanguageSwitcher } from '@/components/language-switcher';
import { t } from '@/lib/i18n';

export default function AffiliatePage() {
  const { lang } = useLanguage();
  const [copied, setCopied] = useState(false);

  const copyReferralLink = () => {
    navigator.clipboard.writeText('https://momira.app?ref=YOUR_CODE');
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const benefits = [
    {
      icon: DollarSign,
      title: '20% Commission',
      description: 'Earn 20% recurring commission on every subscription you refer.',
      color: 'text-green-400',
      bg: 'from-green-500/15 to-green-500/0',
    },
    {
      icon: Users,
      title: 'Unlimited Earnings',
      description: 'No cap on how much you can earn. The more you refer, the more you make.',
      color: 'text-blue-400',
      bg: 'from-blue-500/15 to-blue-500/0',
    },
    {
      icon: TrendingUp,
      title: '30-Day Cookie',
      description: 'Get credit for referrals who sign up within 30 days of clicking your link.',
      color: 'text-purple-400',
      bg: 'from-purple-500/15 to-purple-500/0',
    },
    {
      icon: Shield,
      title: 'Reliable Payouts',
      description: 'Monthly payouts via PayPal or bank transfer. Minimum $50 threshold.',
      color: 'text-amber-400',
      bg: 'from-amber-500/15 to-amber-500/0',
    },
  ];

  const steps = [
    {
      step: '1',
      title: 'Sign Up',
      description: 'Create your free affiliate account in under 2 minutes.',
    },
    {
      step: '2',
      title: 'Share Your Link',
      description: 'Use your unique referral link across social media, email, or your website.',
    },
    {
      step: '3',
      title: 'Earn Commissions',
      description: 'Get paid 20% on every subscription, month after month.',
    },
  ];

  const faqs = [
    {
      q: 'How much can I earn?',
      a: 'There is no limit to your earnings. You earn 20% of every subscription payment from users you refer, for as long as they remain subscribed.',
    },
    {
      q: 'When do I get paid?',
      a: 'Commissions are calculated monthly and paid out via PayPal or bank transfer on the 15th of each month. Minimum payout is $50.',
    },
    {
      q: 'How do I track my referrals?',
      a: 'You get access to a real-time dashboard showing clicks, signups, conversions, and earnings. Track performance across all your campaigns.',
    },
    {
      q: 'What is the cookie duration?',
      a: 'We use a 30-day cookie. If someone clicks your link and signs up within 30 days, you get credit for the referral.',
    },
    {
      q: 'Can I promote Momira on social media?',
      a: 'Yes! You can promote on Instagram, TikTok, Twitter, Facebook, YouTube, or any platform. Just follow our brand guidelines.',
    },
  ];

  return (
    <div className="min-h-screen bg-background text-white">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-zinc-900 bg-background/80 backdrop-blur-md">
        <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
          <Link href="/" className="text-lg font-bold">Momira</Link>
          <div className="flex items-center gap-4">
            <LanguageSwitcher />
            <Link
              href="/auth"
              className="inline-flex items-center h-9 px-4 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
            >
              Sign In
            </Link>
          </div>
        </div>
      </header>

      <main>
        {/* Hero */}
        <section className="py-24 px-6">
          <div className="max-w-4xl mx-auto text-center">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-500/10 border border-amber-500/30 text-amber-300 text-sm mb-6"
            >
              <DollarSign className="h-4 w-4" />
              <span>Earn money sharing Momira</span>
            </motion.div>
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-4xl sm:text-5xl font-bold mb-4"
            >
              Partner with Momira
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="text-xl text-zinc-400 mb-8"
            >
              Earn 20% recurring commission by sharing the app that captures life's moments
            </motion.p>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="flex flex-col sm:flex-row gap-4 justify-center"
            >
              <Link
                href="/auth"
                className="inline-flex items-center justify-center h-12 px-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
              >
                Become an Affiliate
                <ArrowRight className="h-4 w-4 ml-2" />
              </Link>
              <Link
                href="/pricing"
                className="inline-flex items-center justify-center h-12 px-8 rounded-full border border-zinc-700 text-white font-medium hover:bg-zinc-800 transition-colors"
              >
                View Pricing
              </Link>
            </motion.div>
          </div>
        </section>

        {/* Benefits */}
        <section className="py-20 px-6 border-t border-zinc-900">
          <div className="max-w-5xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl font-bold mb-3">Why Partner with Us?</h2>
              <p className="text-zinc-400">Competitive commissions and reliable payouts</p>
            </motion.div>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {benefits.map((benefit, i) => (
                <motion.div
                  key={benefit.title}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  className={`p-6 rounded-2xl border border-zinc-800 bg-gradient-to-br ${benefit.bg}`}
                >
                  <benefit.icon className={`h-8 w-8 ${benefit.color} mb-4`} />
                  <h3 className="font-semibold mb-2">{benefit.title}</h3>
                  <p className="text-sm text-zinc-400">{benefit.description}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* How It Works */}
        <section className="py-20 px-6 border-t border-zinc-900">
          <div className="max-w-5xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl font-bold mb-3">How It Works</h2>
              <p className="text-zinc-400">Start earning in 3 simple steps</p>
            </motion.div>
            <div className="grid sm:grid-cols-3 gap-8">
              {steps.map((step, i) => (
                <motion.div
                  key={step.step}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  className="text-center"
                >
                  <div className="w-16 h-16 rounded-full bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-2xl font-bold text-amber-300 mx-auto mb-4">
                    {step.step}
                  </div>
                  <h3 className="font-semibold mb-2">{step.title}</h3>
                  <p className="text-sm text-zinc-400">{step.description}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Referral Link Demo */}
        <section className="py-20 px-6 border-t border-zinc-900">
          <div className="max-w-2xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="p-8 rounded-2xl border border-zinc-800 bg-zinc-900/50"
            >
              <h2 className="text-2xl font-bold mb-4 text-center">Your Referral Link</h2>
              <p className="text-zinc-400 text-sm text-center mb-6">
                Share this unique link to earn commissions on every signup
              </p>
              <div className="flex gap-2">
                <input
                  type="text"
                  value="https://momira.app?ref=YOUR_CODE"
                  readOnly
                  className="flex-1 h-12 px-4 rounded-lg bg-zinc-950 border border-zinc-800 text-sm text-zinc-400"
                />
                <button
                  onClick={copyReferralLink}
                  className="h-12 px-4 rounded-lg bg-zinc-800 hover:bg-zinc-700 transition-colors flex items-center gap-2"
                >
                  {copied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
                  {copied ? 'Copied!' : 'Copy'}
                </button>
              </div>
              <div className="flex gap-4 mt-6 justify-center">
                <button className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors">
                  <Mail className="h-4 w-4" />
                  Share via Email
                </button>
                <button className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors">
                  <Share2 className="h-4 w-4" />
                  Share on Social
                </button>
              </div>
            </motion.div>
          </div>
        </section>

        {/* FAQ */}
        <section className="py-20 px-6 border-t border-zinc-900">
          <div className="max-w-3xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl font-bold mb-3">Frequently Asked Questions</h2>
            </motion.div>
            <div className="space-y-4">
              {faqs.map((faq, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.05 }}
                  className="p-6 rounded-xl border border-zinc-800 bg-zinc-900/30"
                >
                  <h3 className="font-semibold mb-2">{faq.q}</h3>
                  <p className="text-sm text-zinc-400">{faq.a}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-20 px-6 border-t border-zinc-900">
          <div className="max-w-4xl mx-auto text-center">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <h2 className="text-3xl font-bold mb-4">Ready to Start Earning?</h2>
              <p className="text-zinc-400 mb-8">
                Join thousands of affiliates earning passive income with Momira
              </p>
              <Link
                href="/auth"
                className="inline-flex items-center justify-center h-12 px-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
              >
                Apply Now
                <ArrowRight className="h-4 w-4 ml-2" />
              </Link>
            </motion.div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="py-12 px-6 border-t border-zinc-900">
        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2 text-sm">
            <div className="h-7 w-7 rounded-full bg-amber-300 flex items-center justify-center text-zinc-950 font-bold text-xs">○</div>
            <span className="font-semibold">Momira</span>
            <span className="text-zinc-600">·</span>
            <span className="text-zinc-500 text-xs">Capture moments together. Reveal them after.</span>
          </div>
          <div className="flex items-center gap-6 text-xs text-zinc-500">
            <Link href="/pricing" className="hover:text-white">Pricing</Link>
            <Link href="/auth" className="hover:text-white">Sign in</Link>
            <span>© 2026 Momira.app</span>
          </div>
        </div>
      </footer>
    </div>
  );
}