"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  FileText,
  Layers,
  MousePointer2,
  Download,
  Cpu,
  CheckCircle2,
  ArrowRight,
  Layout,
  PieChart,
  FileSpreadsheet,
  Presentation,
  MessageSquare,
  ShieldCheck,
  Menu,
  X,
  Languages,
  Monitor,
  Eye,
  Sparkles,
  Check,
  Table as TableIcon,
} from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { useI18n } from "@/lib/i18n";
import { HeroVisual } from "./hero-visual";
import { API_BASE } from "@/lib/config";
import { LanguageSwitcher } from "@/components/ui/language-switcher";

const Logo = () => (
  <div className="flex items-center gap-3.5 group cursor-pointer">
    <div className="w-10 h-10 bg-gradient-to-br from-brand-dark to-[#333] dark:from-brand-accent dark:to-[#8B6F47] rounded-xl flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-xl shadow-lg shadow-black/10 transition-transform duration-300 group-hover:scale-105">
      W
    </div>
    <span className="text-2xl font-bold tracking-tight text-brand-dark dark:text-white">
      Wordly<span className="text-brand-goldink dark:text-brand-accent">.art</span>
    </span>
  </div>
);

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const { t } = useI18n();

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-brand-bg/85 dark:bg-[#0d0d0d]/85 backdrop-blur-xl border-b border-black/5 dark:border-white/5 transition-colors">
      <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
        <Link href="/">
          <Logo />
        </Link>

        <div className="hidden md:flex items-center space-x-9">
          <a href="#how" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.steps.title')}</a>
          <a href="#fidelity" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.nav.why')}</a>
          <a href="#formats" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.nav.formats')}</a>
          <a href="#pricing" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.nav.pricing')}</a>
          <div className="h-4 w-[1px] bg-black/10 dark:bg-white/10"></div>
          <LanguageSwitcher className="h-9 w-auto gap-1.5 rounded-full border-black/10 dark:border-white/10 bg-transparent dark:bg-transparent px-4 text-[11px] font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-dark dark:hover:text-white shadow-none" />
          <Link href="/auth/login" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-dark dark:hover:text-white transition-colors">{t('landing.nav.login')}</Link>
          <Link href="/auth/register" className="relative group overflow-hidden rounded-xl bg-brand-dark dark:bg-brand-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white dark:text-brand-dark shadow-lg shadow-black/15 dark:shadow-brand-accent/20 hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
            <span className="relative z-10 flex items-center gap-2">
              <span>{t('landing.nav.startFree')}</span>
              <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
            </span>
          </Link>
        </div>

        <div className="md:hidden">
          <button onClick={() => setIsOpen(!isOpen)} className="text-brand-dark dark:text-white p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg transition-colors">
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden bg-white dark:bg-[#141414] border-b border-black/5 dark:border-white/5 overflow-hidden"
          >
            <div className="px-6 pt-4 pb-10 space-y-4 text-center">
              <div className="flex justify-center">
                <LanguageSwitcher className="w-full h-11 rounded-2xl border-2 border-black/5 dark:border-white/10 bg-transparent dark:bg-transparent font-bold text-brand-dark dark:text-white shadow-none" />
              </div>
              <a href="#how" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.steps.title')}</a>
              <a href="#fidelity" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.why')}</a>
              <a href="#formats" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.formats')}</a>
              <a href="#pricing" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.pricing')}</a>
              <div className="pt-6 grid grid-cols-2 gap-4">
                <Link href="/auth/login" onClick={() => setIsOpen(false)} className="flex items-center justify-center py-4 text-brand-dark/70 dark:text-white/70 font-bold border-2 border-black/5 dark:border-white/10 rounded-2xl">{t('landing.nav.login')}</Link>
                <Link href="/auth/register" onClick={() => setIsOpen(false)} className="flex items-center justify-center py-4 bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark rounded-2xl font-bold">{t('landing.nav.startFree')}</Link>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};

const Hero = () => {
  const { t } = useI18n();

  return (
    <section className="relative pt-36 pb-20 md:pt-48 md:pb-32 px-4 hero-glow overflow-hidden text-center">
      {/* Halo d'ambiance doré d'arrière-plan */}
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-tr from-brand-accent/20 to-amber-200/10 dark:from-brand-accent/15 dark:to-transparent rounded-full blur-3xl pointer-events-none -z-10" />

      <div className="max-w-6xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          {/* Pastille / Pill */}
          <div className="inline-flex items-center gap-2.5 px-4 py-1.5 mb-8 rounded-full border border-brand-accent/40 bg-brand-accent/10 dark:bg-brand-accent/5 backdrop-blur-md shadow-xs">
            <span className="w-2 h-2 rounded-full bg-brand-goldink dark:bg-brand-accent animate-pulse" />
            <span className="text-[11px] font-bold tracking-[0.25em] uppercase text-brand-goldink dark:text-brand-accent">
              <Languages size={12} className="inline mr-1 -mt-0.5" /> {t('landing.hero.tag')}
            </span>
          </div>

          {/* Grand Titre Élégant */}
          <h1 className="text-5xl sm:text-7xl md:text-8xl font-serif font-medium tracking-tight text-brand-dark dark:text-white leading-[1.08] mb-8">
            {t('landing.hero.titleLine1')}<br />
            <span className="italic gradient-text-gold font-serif">{t('landing.hero.titleLine2')}</span>
          </h1>

          {/* Sous-titre */}
          <p className="max-w-2xl mx-auto text-lg sm:text-xl text-brand-dark/75 dark:text-white/70 font-light leading-relaxed mb-12">
            {t('landing.hero.description')}
          </p>

          {/* Boutons d'action */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
            <Link href="/auth/register" className="w-full sm:w-auto px-9 py-4 rounded-2xl bg-brand-dark hover:bg-brand-goldink dark:bg-brand-accent dark:hover:bg-amber-400 text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-xl shadow-brand-dark/20 dark:shadow-brand-accent/25 hover:shadow-2xl hover:scale-[1.02] active:scale-98 transition-all flex items-center justify-center gap-2.5">
              <Sparkles size={16} />
              <span>{t('landing.hero.ctaMain')}</span>
              <ArrowRight size={16} />
            </Link>

            <a href="#fidelity" className="w-full sm:w-auto px-8 py-4 rounded-2xl border border-black/15 dark:border-white/15 hover:border-brand-accent bg-white/70 dark:bg-white/5 backdrop-blur-md text-brand-dark dark:text-white font-bold text-xs uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/10 transition-all flex items-center justify-center gap-2">
              <Eye size={16} className="text-brand-goldink dark:text-brand-accent" />
              <span>{t('landing.hero.ctaSec')}</span>
            </a>
          </div>
        </motion.div>

        {/* Simulateur Bureautique Interactif */}
        <motion.div
          initial={{ opacity: 0, scale: 0.98, y: 30 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
          className="relative max-w-5xl mx-auto"
        >
          <HeroVisual />
          <p className="mt-6 text-center text-xs font-light uppercase tracking-[0.25em] text-brand-dark/50 dark:text-white/50">
            {t('landing.hero.visualCaption')}
          </p>
        </motion.div>
      </div>
    </section>
  );
};

const MetricsBanner = () => {
  return (
    <section className="border-y border-black/10 dark:border-white/10 bg-white/70 dark:bg-[#141414]/70 backdrop-blur-xl py-10 px-6">
      <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
        <div className="space-y-1">
          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">+250 000</div>
          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Pages traduites</div>
        </div>
        <div className="space-y-1">
          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">99.8%</div>
          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Fidélité visuelle</div>
        </div>
        <div className="space-y-1">
          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">13</div>
          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Langues majeures</div>
        </div>
        <div className="space-y-1">
          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">0 Jour</div>
          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Rétention données</div>
        </div>
      </div>
    </section>
  );
};

const Steps = () => {
  const { t } = useI18n();
  const steps = [
    { num: t('landing.steps.step1.num'), title: t('landing.steps.step1.title'), desc: t('landing.steps.step1.desc'), icon: <MousePointer2 size={24} /> },
    { num: t('landing.steps.step2.num'), title: t('landing.steps.step2.title'), desc: t('landing.steps.step2.desc'), icon: <Cpu size={24} /> },
    { num: t('landing.steps.step3.num'), title: t('landing.steps.step3.title'), desc: t('landing.steps.step3.desc'), icon: <Download size={24} /> },
  ];

  return (
    <section id="how" className="py-28 px-6">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-20">
          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
            {t('landing.steps.process')}
          </span>
          <h2 className="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
            {t('landing.steps.title')}
          </h2>
          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
            {t('landing.steps.subtitle')}
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {steps.map((st, i) => (
            <div key={i} className="luxury-card p-8 rounded-3xl relative">
              <div className="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
                {st.num}
              </div>
              <h3 className="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">{st.title}</h3>
              <p className="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">{st.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FeaturesContext = () => {
  const { t } = useI18n();
  return (
    <section id="features" className="py-28 px-6 bg-brand-muted/30 dark:bg-[#151515]/30">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-20">
          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
            {t('landing.features.tag')}
          </span>
          <h2 className="text-4xl sm:text-5xl text-brand-dark dark:text-white font-serif font-medium tracking-tight">
            {t('landing.features.title')}
          </h2>
          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
            {t('landing.features.description')}
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {[
            { icon: <Monitor className="text-brand-goldink dark:text-brand-accent" size={24} />, title: t('landing.features.context.title'), desc: t('landing.features.context.desc') },
            { icon: <Layers className="text-brand-goldink dark:text-brand-accent" size={24} />, title: t('landing.features.glossary.title'), desc: t('landing.features.glossary.desc') },
            { icon: <Eye className="text-brand-goldink dark:text-brand-accent" size={24} />, title: t('landing.features.vision.title'), desc: t('landing.features.vision.desc') },
          ].map((item, i) => (
            <div key={i} className="luxury-card p-8 sm:p-10 flex flex-col items-start gap-6 rounded-3xl">
              <div className="w-12 h-12 rounded-2xl bg-brand-accent/10 border border-brand-accent/30 flex items-center justify-center">
                {item.icon}
              </div>
              <div>
                <h4 className="text-xl font-serif font-bold mb-3 text-brand-dark dark:text-white">{item.title}</h4>
                <p className="text-brand-dark/75 dark:text-white/70 leading-relaxed font-light text-sm">{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const LayoutFeatures = () => {
  const { t } = useI18n();

  return (
    <section id="fidelity" className="py-28 px-6 bg-brand-dark text-white relative overflow-hidden">
      {/* Lueur dorée centrale */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[350px] bg-brand-accent/15 blur-[120px] pointer-events-none" />

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="text-center mb-16">
          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/20 text-brand-accent mb-4 border border-brand-accent/30">
            {t("landing.layout.title")}
          </span>
          <h2 className="text-4xl sm:text-6xl font-serif font-medium tracking-tight mb-4">
            {t("landing.layout.title")} <span className="italic text-brand-accent">{t("landing.layout.title2")}</span>
          </h2>
          <p className="text-white/70 text-lg max-w-2xl mx-auto font-light">
            {t("landing.layout.subtitle")}
          </p>
        </div>

        {/* Comparaison 2 colonnes */}
        <div className="grid md:grid-cols-2 gap-8 relative">
          
          {/* Document Source FR */}
          <div className="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-white/10 shadow-2xl">
            <div className="flex items-center justify-between mb-6">
              <span className="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-white/10 text-white/80 border border-white/15">
                FR — Original
              </span>
              <span className="text-xs text-white/50 font-mono">cahier-des-charges.docx</span>
            </div>

            <h4 className="text-2xl font-serif font-bold text-white mb-4">
              {t("landing.beforeAfter.sourceTitle")}
            </h4>
            <p className="text-sm text-white/80 leading-relaxed mb-4">
              {t("landing.beforeAfter.sourcePara1")}
            </p>
            <p className="text-sm text-white/80 leading-relaxed mb-6">
              {t("landing.beforeAfter.sourcePara2Before")}{" "}
              <strong className="font-bold text-brand-accent">{t("landing.beforeAfter.sourceTerm")}</strong>{" "}
              {t("landing.beforeAfter.sourcePara2After")}
            </p>
            <div className="p-4 rounded-xl bg-black/40 border border-white/10 text-xs text-white/90 space-y-2">
              <div className="flex justify-between">
                <span>{t("landing.beforeAfter.sourceItem1")}</span>
                <strong className="text-brand-accent font-mono">42 kW</strong>
              </div>
              <div className="flex justify-between">
                <span>{t("landing.beforeAfter.sourceItem2")}</span>
                <strong className="text-brand-accent font-mono">&le; 45 dB(A)</strong>
              </div>
            </div>
          </div>

          {/* Document Traduit EN */}
          <div className="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-brand-accent/40 shadow-2xl relative">
            <div className="flex items-center justify-between mb-6">
              <span className="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-brand-accent/20 text-brand-accent border border-brand-accent/40">
                EN — Traduit (Wordly)
              </span>
              <span className="text-xs text-brand-accent font-mono font-bold">100% Alignement</span>
            </div>

            <h4 className="text-2xl font-serif font-bold text-white mb-4">
              {t("landing.beforeAfter.targetTitle")}
            </h4>
            <p className="text-sm text-white/80 leading-relaxed mb-4">
              {t("landing.beforeAfter.targetPara1")}
            </p>
            <p className="text-sm text-white/80 leading-relaxed mb-6">
              {t("landing.beforeAfter.targetPara2Before")}{" "}
              <strong className="font-bold text-brand-accent">{t("landing.beforeAfter.targetTerm")}</strong>{" "}
              {t("landing.beforeAfter.targetPara2After")}
            </p>
            <div className="p-4 rounded-xl bg-black/40 border border-brand-accent/30 text-xs text-white/90 space-y-2">
              <div className="flex justify-between">
                <span>{t("landing.beforeAfter.targetItem1")}</span>
                <strong className="text-brand-accent font-mono">42 kW</strong>
              </div>
              <div className="flex justify-between">
                <span>{t("landing.beforeAfter.targetItem2")}</span>
                <strong className="text-brand-accent font-mono">&le; 45 dB(A)</strong>
              </div>
            </div>
          </div>
        </div>

        {/* 3 Cartes de preuves */}
        <div className="grid sm:grid-cols-3 gap-5 mt-10">
          <div className="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
            <div className="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
              <Layout size={20} />
            </div>
            <span className="text-sm font-medium text-white/90">{t("landing.beforeAfter.proof1")}</span>
          </div>

          <div className="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
            <div className="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
              <PieChart size={20} />
            </div>
            <span className="text-sm font-medium text-white/90">{t("landing.beforeAfter.proof2")}</span>
          </div>

          <div className="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
            <div className="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
              <TableIcon size={20} />
            </div>
            <span className="text-sm font-medium text-white/90">{t("landing.beforeAfter.proof3")}</span>
          </div>
        </div>
      </div>
    </section>
  );
};

const FormatsSection = () => {
  const { t } = useI18n();
  const formats = [
    { id: ".DOCX", name: t('landing.formats.word.name'), color: "text-[#185ABD]", bg: "bg-[#185ABD]/10", icon: <FileText className="w-6 h-6 text-[#185ABD]" />, items: [t('landing.formats.word.i1'), t('landing.formats.word.i2'), t('landing.formats.word.i3'), t('landing.formats.word.i4')] },
    { id: ".XLSX", name: t('landing.formats.excel.name'), color: "text-[#107C41]", bg: "bg-[#107C41]/10", icon: <FileSpreadsheet className="w-6 h-6 text-[#107C41]" />, items: [t('landing.formats.excel.i1'), t('landing.formats.excel.i2'), t('landing.formats.excel.i3'), t('landing.formats.excel.i4')] },
    { id: ".PPTX", name: t('landing.formats.pptx.name'), color: "text-[#C43E1C]", bg: "bg-[#C43E1C]/10", icon: <Presentation className="w-6 h-6 text-[#C43E1C]" />, items: [t('landing.formats.pptx.i1'), t('landing.formats.pptx.i2'), t('landing.formats.pptx.i3'), t('landing.formats.pptx.i4')] },
    { id: ".PDF", name: t('landing.formats.pdf.name'), color: "text-[#E03E2D]", bg: "bg-[#E03E2D]/10", icon: <FileText className="w-6 h-6 text-[#E03E2D]" />, items: [t('landing.formats.pdf.i1'), t('landing.formats.pdf.i2'), t('landing.formats.pdf.i3'), t('landing.formats.pdf.i4')] },
  ];

  return (
    <section id="formats" className="py-28 px-6">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-20">
          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
            {t('landing.formats.pill')}
          </span>
          <h2 className="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
            {t('landing.formats.title')} <span className="italic text-brand-goldink dark:text-brand-accent">{t('landing.formats.title2')}</span>
          </h2>
          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
            {t('landing.formats.subtitle')}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {formats.map((f, i) => (
            <div key={i} className="luxury-card p-8 rounded-3xl group">
              <div className={`w-12 h-12 rounded-2xl ${f.bg} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
                {f.icon}
              </div>
              <div className={`text-[11px] font-bold font-mono ${f.color} mb-2 uppercase tracking-wider`}>{f.id}</div>
              <h3 className="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">{f.name}</h3>
              <ul className="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
                {f.items.map((item, j) => (
                  <li key={j} className="flex items-center gap-2">
                    <Check size={14} className="text-emerald-500 shrink-0" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingSection = () => {
  const { t } = useI18n();
  const [isAnnual, setIsAnnual] = useState(true);
  const [livePrices, setLivePrices] = useState<Record<string, { monthly: number; annualMonthly: number }>>({});

  useEffect(() => {
    fetch(`${API_BASE}/api/v1/auth/plans`, { cache: 'no-store' })
      .then(r => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
      .then(json => {
        const d = json.data ?? json;
        const map: Record<string, { monthly: number; annualMonthly: number }> = {};
        for (const plan of d.plans ?? []) {
          if (typeof plan.price_monthly === 'number' && plan.price_monthly > 0) {
            map[plan.id] = {
              monthly: plan.price_monthly,
              annualMonthly: plan.price_yearly > 0 ? plan.price_yearly / 12 : plan.price_monthly,
            };
          }
        }
        setLivePrices(map);
      })
      .catch(() => { /* keep marketing defaults */ });
  }, []);

  const priceFor = (id: string, fallbackMonthly: number, fallbackAnnual: number): string => {
    const live = livePrices[id];
    const value = live
      ? (isAnnual ? live.annualMonthly : live.monthly)
      : (isAnnual ? fallbackAnnual : fallbackMonthly);
    return Number.isInteger(value) ? String(value) : value.toFixed(2);
  };

  const plans = [
    { id: 'starter', name: t('landing.pricing.starter.name'), desc: t('landing.pricing.starter.desc'), monthlyPrice: 9, annualPrice: 7, features: [t('landing.pricing.starter.f1'), t('landing.pricing.starter.f2'), t('landing.pricing.starter.f3'), t('landing.pricing.starter.f4')], cta: t('landing.pricing.starter.cta'), popular: false },
    { id: 'pro', name: t('landing.pricing.pro.name'), desc: t('landing.pricing.pro.desc'), monthlyPrice: 19, annualPrice: 15, features: [t('landing.pricing.pro.f1'), t('landing.pricing.pro.f2'), t('landing.pricing.pro.f3'), t('landing.pricing.pro.f4'), t('landing.pricing.pro.f5')], cta: t('landing.pricing.pro.cta'), popular: true },
    { id: 'business', name: t('landing.pricing.business.name'), desc: t('landing.pricing.business.desc'), monthlyPrice: 49, annualPrice: 39, features: [t('landing.pricing.business.f1'), t('landing.pricing.business.f2'), t('landing.pricing.business.f3'), t('landing.pricing.business.f4')], cta: t('landing.pricing.business.cta'), popular: false },
  ];

  return (
    <section id="pricing" className="py-28 px-6 bg-brand-muted/40 dark:bg-[#121212]/40">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
            {t('landing.nav.pricing')}
          </span>
          <h2 className="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
            {t('landing.pricing.title')}
          </h2>
          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
            {t('landing.pricing.subtitle')}
          </p>

          {/* Bascule Mensuel / Annuel */}
          <div className="inline-flex items-center gap-3 p-1.5 rounded-2xl bg-white dark:bg-[#222] border border-black/10 dark:border-white/10 mt-8 shadow-xs">
            <button
              onClick={() => setIsAnnual(false)}
              className={`px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all ${!isAnnual ? 'bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-sm' : 'text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white'}`}
            >
              {t('landing.pricing.monthly')}
            </button>
            <button
              onClick={() => setIsAnnual(true)}
              className={`px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all flex items-center gap-1.5 ${isAnnual ? 'bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-sm' : 'text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white'}`}
            >
              <span>{t('landing.pricing.annual')}</span>
              <span className="px-1.5 py-0.5 rounded-full text-[9px] bg-brand-accent dark:bg-brand-dark text-brand-dark dark:text-brand-accent font-black">-20%</span>
            </button>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-8 items-stretch">
          {plans.map((p, i) => (
            p.popular ? (
              <div key={i} className="popular-glow rounded-3xl">
                <div className="luxury-card p-8 sm:p-10 rounded-3xl h-full flex flex-col justify-between bg-gradient-to-b from-white to-amber-50/20 dark:from-[#222] dark:to-[#181818] border-brand-accent relative">
                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-[10px] font-black uppercase tracking-widest shadow-md">
                    ★ {t('landing.pricing.bestValue')}
                  </div>

                  <div>
                    <h3 className="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">{p.name}</h3>
                    <p className="text-xs text-brand-goldink dark:text-brand-accent font-bold uppercase tracking-widest mb-8">{p.desc}</p>
                    
                    <div className="flex items-baseline gap-2 mb-8">
                      <span className="text-5xl font-serif font-bold text-brand-dark dark:text-white">{priceFor(p.id, p.monthlyPrice, p.annualPrice)} €</span>
                      <span className="text-xs text-brand-dark/60 dark:text-white/60">/ {t('landing.pricing.month')}</span>
                    </div>

                    <ul className="space-y-4 text-xs text-brand-dark/90 dark:text-white/90 mb-10 font-medium">
                      {p.features.map((f, j) => (
                        <li key={j} className="flex items-center gap-3">
                          <CheckCircle2 size={16} className="text-brand-goldink dark:text-brand-accent shrink-0" />
                          <span>{f}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <Link
                    href={`/pricing?plan=${p.id}${isAnnual ? '&billing=yearly' : ''}`}
                    className="w-full py-4 rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-center text-xs font-bold uppercase tracking-widest shadow-xl hover:shadow-2xl hover:scale-[1.02] transition-all block"
                  >
                    {p.cta}
                  </Link>
                </div>
              </div>
            ) : (
              <div key={i} className="luxury-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between">
                <div>
                  <h3 className="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">{p.name}</h3>
                  <p className="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest mb-8">{p.desc}</p>
                  
                  <div className="flex items-baseline gap-2 mb-8">
                    <span className="text-5xl font-serif font-bold text-brand-dark dark:text-white">{priceFor(p.id, p.monthlyPrice, p.annualPrice)} €</span>
                    <span className="text-xs text-brand-dark/60 dark:text-white/60">/ {t('landing.pricing.month')}</span>
                  </div>

                  <ul className="space-y-4 text-xs text-brand-dark/80 dark:text-white/80 mb-10">
                    {p.features.map((f, j) => (
                      <li key={j} className="flex items-center gap-3">
                        <Check size={16} className="text-emerald-500 shrink-0" />
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <Link
                  href={`/pricing?plan=${p.id}${isAnnual ? '&billing=yearly' : ''}`}
                  className="w-full py-3.5 rounded-xl border border-black/15 dark:border-white/15 text-center text-xs font-bold uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/5 transition-all text-brand-dark dark:text-white block"
                >
                  {p.cta}
                </Link>
              </div>
            )
          ))}
        </div>

        <p className="text-center mt-12 text-brand-dark/60 dark:text-white/60 text-xs font-bold uppercase tracking-widest">{t('landing.pricing.footer')}</p>
      </div>
    </section>
  );
};

const CTASection = () => {
  const { t } = useI18n();
  return (
    <section className="py-28 px-6 text-center relative overflow-hidden">
      <div className="max-w-4xl mx-auto luxury-card p-12 sm:p-20 rounded-[40px] relative overflow-hidden border-brand-accent/30">
        <div className="absolute -top-24 -right-24 w-72 h-72 bg-brand-accent/20 rounded-full blur-3xl pointer-events-none" />

        <h2 className="text-4xl sm:text-6xl font-serif font-bold text-brand-dark dark:text-white tracking-tight mb-6">
          {t('landing.cta.title')}
        </h2>
        <p className="text-brand-dark/75 dark:text-white/70 text-base sm:text-lg max-w-xl mx-auto font-light leading-relaxed mb-10">
          {t('landing.cta.subtitle')}
        </p>

        <Link
          href="/auth/register"
          className="inline-flex items-center gap-3 px-10 py-5 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-2xl hover:scale-105 transition-all"
        >
          <span>{t('landing.cta.button')}</span>
          <ArrowRight size={16} />
        </Link>
      </div>
    </section>
  );
};

const Footer = () => {
  const { t } = useI18n();
  return (
    <footer className="border-t border-black/10 dark:border-white/10 bg-white dark:bg-[#0a0a0a] py-16 px-6">
      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-brand-dark dark:bg-brand-accent rounded-lg flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-base">
            W
          </div>
          <span className="font-bold text-lg text-brand-dark dark:text-white">
            Wordly<span className="text-brand-goldink dark:text-brand-accent">.art</span>
          </span>
        </div>

        <div className="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest font-mono">
          © 2026 Wordly.art • Traduction certifiée haute fidélité
        </div>

        <div className="flex items-center gap-6 text-xs font-bold text-brand-dark/70 dark:text-white/70 uppercase tracking-wider">
          <Link href="/privacy" className="hover:text-brand-dark dark:hover:text-white">Confidentialité</Link>
          <a href="#pricing" className="hover:text-brand-dark dark:hover:text-white">Tarifs</a>
          <button
            type="button"
            onClick={() => import('@/components/ui/cookie-consent').then(m => m.reopenCookieConsent())}
            className="hover:text-brand-dark dark:hover:text-white transition-colors cursor-pointer"
          >
            {t('cookieConsent.reopen')}
          </button>
        </div>
      </div>
    </footer>
  );
};

export default function LandingPage() {
  return (
    <div className="min-h-screen font-sans bg-brand-bg dark:bg-[#0a0a0a] text-brand-dark dark:text-white selection:bg-brand-accent/20 overflow-x-hidden">
      <Navbar />
      <main>
        <Hero />
        <MetricsBanner />
        <Steps />
        <FeaturesContext />
        <LayoutFeatures />
        <FormatsSection />
        <PricingSection />
        <CTASection />
      </main>
      <Footer />
    </div>
  );
}

