/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { 
  FileText, 
  Layers, 
  MousePointer2, 
  Download, 
  Globe, 
  Cpu, 
  CheckCircle2, 
  ArrowRight, 
  Layout, 
  PieChart, 
  FileSpreadsheet, 
  Presentation, 
  MessageSquare,
  ShieldCheck,
  Zap,
  Menu,
  X,
  Languages,
  Monitor,
  Eye,
  Lock,
  Clock
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

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

  const toggleLanguage = () => {
    const nextLang = i18n.language === 'fr' ? 'en' : 'fr';
    i18n.changeLanguage(nextLang);
  };

  return (
    <nav className="fixed top-4 left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-7xl z-50">
      <div className="glass rounded-3xl px-6 py-4 shadow-warm">
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-primary via-secondary to-accent rounded-xl flex items-center justify-center shadow-lg shadow-primary/10">
              <span className="text-white font-black text-xl">W</span>
            </div>
            <div className="flex flex-col -gap-1">
              <span className="text-xl font-black tracking-tight text-primary">WORDLY<span className="text-secondary">.art</span></span>
              <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-400 leading-none">Translation Suite</span>
            </div>
          </div>
          
          <div className="hidden md:flex items-center space-x-8">
            <a href="#features" className="text-gray-500 hover:text-primary transition-colors text-sm font-semibold tracking-tight">{t('nav.why')}</a>
            <a href="#formats" className="text-gray-500 hover:text-primary transition-colors text-sm font-semibold tracking-tight">{t('nav.formats')}</a>
            <a href="#pricing" className="text-gray-500 hover:text-primary transition-colors text-sm font-semibold tracking-tight">{t('nav.pricing')}</a>
            <div className="h-4 w-[1px] bg-gray-200"></div>
            <button 
              onClick={toggleLanguage}
              className="text-[10px] font-black bg-gray-50 px-2 py-1 rounded border border-gray-100 text-primary hover:bg-gray-100 transition-colors uppercase"
            >
              {i18n.language === 'fr' ? 'EN' : 'FR'}
            </button>
            <a href="#" className="text-primary hover:opacity-80 transition-opacity text-sm font-bold tracking-tight">{t('nav.login')}</a>
            <a href="#" className="bg-primary text-white px-6 py-2.5 rounded-2xl text-sm font-bold hover:shadow-lg hover:shadow-primary/20 transition-all active:scale-95">
              {t('nav.startFree')}
            </a>
          </div>

          <div className="md:hidden">
            <button onClick={() => setIsOpen(!isOpen)} className="text-primary p-2 hover:bg-gray-100 rounded-lg transition-colors">
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </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 border-b border-gray-100 overflow-hidden"
          >
            <div className="px-6 pt-4 pb-10 space-y-4 text-center">
              <button 
                onClick={toggleLanguage}
                className="w-full py-2 text-sm font-black text-[#004777] bg-gray-50 rounded-xl"
              >
                {t('common.language', { lang: i18n.language === 'fr' ? 'English' : 'Français' })} 
                <span className="ml-2 opacity-50 uppercase">{i18n.language === 'fr' ? 'en' : 'fr'}</span>
              </button>
              <a href="#features" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-gray-700">{t('nav.why')}</a>
              <a href="#formats" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-gray-700">{t('nav.formats')}</a>
              <a href="#pricing" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-gray-700">{t('nav.pricing')}</a>
              <div className="pt-6 grid grid-cols-2 gap-4">
                <a href="#" className="flex items-center justify-center py-4 text-[#004777] font-black border-2 border-[#004777]/10 rounded-2xl">{t('nav.login')}</a>
                <a href="#" className="flex items-center justify-center py-4 bg-[#004777] text-white rounded-2xl font-black">{t('nav.startFree')}</a>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};

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

  return (
    <section className="relative pt-40 pb-24 lg:pt-56 lg:pb-40 px-4 overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-secondary/5 via-white to-white">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl pointer-events-none -z-10">
        <div className="absolute top-[-10%] right-[-10%] w-[600px] h-[600px] bg-secondary/10 blur-[120px] rounded-full"></div>
        <div className="absolute bottom-[20%] left-[-10%] w-[500px] h-[500px] bg-accent/10 blur-[120px] rounded-full"></div>
      </div>

      <div className="max-w-7xl mx-auto grid lg:grid-cols-12 gap-16 items-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="lg:col-span-7"
        >
          <div className="inline-flex items-center gap-2 px-3 py-1 mb-8 text-[10px] font-black tracking-[0.25em] text-secondary uppercase bg-secondary/5 rounded-full border border-secondary/10">
            <Languages size={12} /> {t('hero.tag')}
          </div>
          <h1 className="text-6xl lg:text-[5.5rem] font-black tracking-tight text-primary mb-8 leading-[0.9] lg:max-w-3xl">
            {t('hero.titleLine1')}<br />
            <span className="gradient-text">{t('hero.titleLine2')}</span>
          </h1>
          <p className="text-xl text-gray-500 mb-10 max-w-xl leading-relaxed font-medium">
            {t('hero.description')}
          </p>
          
          <div className="flex flex-col sm:flex-row gap-5 mb-16">
            <button className="flex items-center justify-center gap-3 bg-primary text-white px-10 py-5 rounded-2xl text-lg font-bold hover:scale-[1.02] active:scale-95 transition-all shadow-xl shadow-primary/20">
              {t('hero.ctaMain')} <ArrowRight size={20} className="text-accent" />
            </button>
            <button className="flex items-center justify-center gap-2 text-primary font-bold text-lg hover:translate-x-1 transition-transform bg-white border border-gray-200 px-8 py-5 rounded-2xl shadow-sm hover:shadow-md">
              {t('hero.ctaSec')}
            </button>
          </div>

          <div className="flex flex-wrap gap-8 items-center pt-8 border-t border-gray-100">
            {[
              { icon: <Clock size={16} className="text-accent" />, text: t('hero.deleted') },
              { icon: <ShieldCheck size={16} className="text-secondary" />, text: t('hero.noHidden') },
              { icon: <Eye size={16} className="text-primary" />, text: t('hero.preview') }
            ].map((item, i) => (
              <div key={i} className="flex items-center gap-2.5 text-[10px] font-black uppercase tracking-widest text-gray-400">
                {item.icon} {item.text}
              </div>
            ))}
          </div>
        </motion.div>

        <motion.div
           initial={{ opacity: 0, scale: 0.95, y: 40 }}
           animate={{ opacity: 1, scale: 1, y: 0 }}
           transition={{ duration: 1, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
           className="lg:col-span-5 relative"
        >
          <div className="absolute -inset-4 bg-gradient-to-tr from-primary/10 via-secondary/10 to-accent/10 rounded-[40px] blur-2xl opacity-50"></div>
          <div className="relative bg-white p-4 rounded-[36px] shadow-2xl border border-white/50">
            <div className="aspect-[4/5] lg:aspect-[4/3] bg-[#F1F5F9] rounded-[28px] relative overflow-hidden group">
               <div className="absolute inset-0 flex items-center justify-center">
                 <div className="text-center p-8">
                    <div className="relative mb-10 inline-block">
                      <div className="absolute inset-0 bg-secondary/10 blur-3xl rounded-full scale-150"></div>
                      <motion.div 
                        animate={{ rotate: [12, -12, 12] }}
                        transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
                        className="relative z-10 w-28 h-28 bg-white rounded-[32px] shadow-2xl flex items-center justify-center"
                      >
                        <FileText size={56} className="text-primary" />
                      </motion.div>
                      <motion.div 
                        animate={{ rotate: [-12, 12, -12] }}
                        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
                        className="absolute -bottom-4 -right-4 w-14 h-14 bg-secondary rounded-2xl shadow-lg flex items-center justify-center text-white"
                      >
                        <Languages size={24} />
                      </motion.div>
                    </div>
                    
                    <div className="space-y-4 max-w-[200px] mx-auto">
                      <div className="h-1.5 w-full bg-gray-200 rounded-full"></div>
                      <div className="h-1.5 w-[80%] bg-gray-200 rounded-full mx-auto opacity-60"></div>
                      <div className="h-1.5 w-[60%] bg-gray-200 rounded-full mx-auto opacity-40"></div>
                      <div className="pt-6">
                        <span className="text-2xl font-black text-primary tracking-tight">WORDLY<span className="text-secondary">.art</span></span>
                      </div>
                    </div>
                 </div>
               </div>

               <div className="absolute top-6 right-6 p-4 glass shadow-lg rounded-2xl text-[10px] font-bold">
                 <div className="flex items-center gap-2 text-secondary"><CheckCircle2 size={14} /> {t('hero.formattedOk')}</div>
               </div>
               <div className="absolute bottom-6 left-6 p-4 bg-primary text-white shadow-xl rounded-2xl text-[10px] font-bold ring-1 ring-white/20">
                 <div className="flex items-center gap-2"><Zap size={14} className="text-accent" /> {t('hero.aiActive')}</div>
               </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

const Steps = () => {
  const { t } = useTranslation();
  const steps = [
    {
      num: t('steps.step1.num'),
      title: t('steps.step1.title'),
      desc: t('steps.step1.desc'),
      icon: <MousePointer2 size={28} />,
      gradient: "from-blue-500/10 to-primary/10",
      iconColor: "text-primary"
    },
    {
      num: t('steps.step2.num'),
      title: t('steps.step2.title'),
      desc: t('steps.step2.desc'),
      icon: <Cpu size={28} />,
      gradient: "from-secondary/10 to-secondary/20",
      iconColor: "text-secondary"
    },
    {
      num: t('steps.step3.num'),
      title: t('steps.step3.title'),
      desc: t('steps.step3.desc'),
      icon: <Download size={28} />,
      gradient: "from-accent/20 to-accent/40",
      iconColor: "text-primary"
    }
  ];

  return (
    <section className="py-24 px-4 bg-white relative overflow-hidden">
      <div className="max-w-7xl mx-auto text-center relative z-10">
        <h2 className="text-4xl lg:text-5xl font-black text-primary mb-6">{t('steps.title')}</h2>
        <p className="text-gray-400 mb-20 text-lg max-w-2xl mx-auto">{t('steps.subtitle')}</p>
        
        <div className="grid md:grid-cols-3 gap-8 relative">
          {steps.map((st, i) => (
            <div key={i} className="group p-10 rounded-[40px] bg-gray-50/50 hover:bg-white border border-transparent hover:border-gray-100 hover:shadow-warm transition-all duration-500 text-left">
              <div className={`w-16 h-16 bg-gradient-to-br ${st.gradient} rounded-2xl flex items-center justify-center ${st.iconColor} mb-8 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3`}>
                {st.icon}
              </div>
              <div className="text-[10px] font-black tracking-[0.25em] text-secondary mb-4 uppercase">{t('steps.stepLabel', { num: st.num })}</div>
              <h3 className="text-2xl font-black text-primary mb-4">{st.title}</h3>
              <p className="text-gray-500 leading-relaxed text-sm font-medium">{st.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
const FeaturesContext = () => {
  const { t } = useTranslation();
  return (
    <section id="features" className="py-24 px-4 bg-gray-50/30">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-20 items-center">
          <div>
            <div className="inline-flex items-center gap-2 text-[10px] font-black tracking-[0.2em] text-secondary uppercase mb-6">
              <Zap size={14} className="text-accent" /> {t('features.tag')}
            </div>
            <h2 className="text-4xl lg:text-5xl font-black text-primary mb-8 leading-tight">
              {t('features.title')}
            </h2>
            <p className="text-lg text-gray-500 mb-12 font-medium">
              {t('features.description')}
            </p>
            
            <div className="space-y-8">
              {[
                { icon: <Monitor className="text-primary" />, title: t('features.context.title'), desc: t('features.context.desc') },
                { icon: <Layers className="text-secondary" />, title: t('features.glossary.title'), desc: t('features.glossary.desc') },
                { icon: <Eye className="text-primary" />, title: t('features.vision.title'), desc: t('features.vision.desc') }
              ].map((item, i) => (
                <div key={i} className="flex gap-6 group">
                  <div className="flex-shrink-0 w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center border border-gray-100 group-hover:shadow-md transition-shadow">
                    {item.icon}
                  </div>
                  <div>
                    <h4 className="text-lg font-black text-primary mb-1">{item.title}</h4>
                    <p className="text-gray-500 text-sm leading-relaxed font-medium">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="relative">
             <div className="absolute -inset-10 bg-primary/5 blur-[100px] rounded-full"></div>
             <div className="relative bg-white rounded-[48px] shadow-warm border border-gray-100 p-8 lg:p-12">
                <div className="space-y-8">
                  <div>
                    <span className="text-[10px] font-black uppercase tracking-widest text-primary/40 block mb-4">{t('features.demo.source')}</span>
                    <div className="text-sm font-bold bg-gray-50 p-6 rounded-2xl italic text-primary/80">“La batterie de chauffe est raccordée sur la CTA”</div>
                  </div>
                  <div className="grid sm:grid-cols-2 gap-6">
                    <div className="p-6 border border-red-50 bg-red-50/10 rounded-2xl">
                      <span className="text-[10px] font-black uppercase tracking-widest text-red-400 block mb-3">{t('features.demo.google')}</span>
                      <div className="text-xs font-semibold text-red-900/40 line-through">“The heating battery is connected on the <span className="text-red-700">call to action</span>”</div>
                    </div>
                    <div className="p-6 bg-secondary/5 rounded-2xl ring-1 ring-secondary/20 shadow-sm">
                      <span className="text-[10px] font-black uppercase tracking-widest text-secondary block mb-3">{t('features.demo.ours')}</span>
                      <div className="text-sm font-bold text-primary">“The heating coil is connected to the <span className="bg-accent/30 px-1 rounded">AHU</span>”</div>
                    </div>
                  </div>
                </div>
             </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const LayoutFeatures = () => {
  const { t } = useTranslation();
  const points = (t('layout.points', { returnObjects: true }) as any[]).map((p, i) => ({
    ...p,
    icon: i === 0 ? <Layers size={22} /> : 
          i === 1 ? <Layout size={22} /> :
          i === 2 ? <PieChart size={22} /> :
          i === 3 ? <Zap size={22} /> :
          i === 4 ? <MessageSquare size={22} /> :
          <Globe size={22} />
  }));

  return (
    <section className="py-24 px-4 bg-white relative overflow-hidden">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-24 transition-opacity">
          <h2 className="text-4xl lg:text-6xl font-black text-primary mb-8 leading-tight">
            {t('layout.title')}<br /> <span className="gradient-text">{t('layout.title2')}</span>
          </h2>
          <p className="text-gray-400 max-w-2xl mx-auto text-lg font-medium">
            {t('layout.subtitle')}
          </p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {points.map((p, i) => (
             <motion.div 
               key={i} 
               whileHover={{ y: -8 }}
               className="group p-10 bg-gray-50/50 hover:bg-white rounded-[40px] border border-transparent hover:border-gray-100 hover:shadow-warm transition-all duration-500"
             >
               <div className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-primary mb-8 shadow-sm group-hover:bg-primary group-hover:text-white transition-all transform group-hover:rotate-6">
                 {p.icon}
               </div>
               <h4 className="text-xl font-black text-primary mb-4">{p.title}</h4>
               <p className="text-gray-500 text-sm leading-relaxed font-medium">{p.desc}</p>
             </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FormatsSection = () => {
  const { t } = useTranslation();
  const formats = [
    { 
      id: ".DOCX", 
      name: t('formats.word.name'), 
      icon: <FileText className="text-blue-500" />,
      items: t('formats.word.items', { returnObjects: true }) as string[],
    },
    { 
      id: ".XLSX", 
      name: t('formats.excel.name'), 
      icon: <FileSpreadsheet className="text-green-600" />,
      items: t('formats.excel.items', { returnObjects: true }) as string[],
    },
    { 
      id: ".PPTX", 
      name: t('formats.pptx.name'), 
      icon: <Presentation className="text-orange-500" />,
      items: t('formats.pptx.items', { returnObjects: true }) as string[],
    },
    { 
      id: ".PDF", 
      name: t('formats.pdf.name'), 
      icon: <FileText className="text-red-500" />,
      items: t('formats.pdf.items', { returnObjects: true }) as string[],
    }
  ];

  return (
    <section id="formats" className="py-24 px-4 bg-primary text-white overflow-hidden relative">
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20">
         <div className="absolute top-[-20%] right-[-10%] w-[800px] h-[800px] bg-secondary/30 blur-[150px] rounded-full"></div>
         <div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-accent/20 blur-[120px] rounded-full"></div>
      </div>

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="text-center mb-24">
          <h2 className="text-4xl lg:text-6xl font-black mb-8 leading-tight">{t('formats.title')} <span className="text-accent">{t('formats.title2')}</span></h2>
          <p className="text-gray-300 max-w-xl mx-auto text-lg font-medium">{t('formats.subtitle')}</p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {formats.map((f, i) => (
             <motion.div 
               key={i}
               whileHover={{ y: -10 }}
               className="p-10 rounded-[48px] bg-white/5 border border-white/10 backdrop-blur-xl group hover:bg-white/10 transition-all duration-300"
             >
               <div className="flex justify-between items-start mb-10">
                 <div className={`w-16 h-16 bg-white rounded-[20px] flex items-center justify-center text-3xl group-hover:rotate-12 transition-transform shadow-2xl`}>
                   {f.icon}
                 </div>
                 <span className="text-[10px] font-black text-white/30 tracking-[0.2em]">{f.id}</span>
               </div>
               <h3 className="text-2xl font-black mb-8">{f.name}</h3>
               <ul className="space-y-4">
                 {f.items.map((item, j) => (
                   <li key={j} className="flex items-start gap-3 text-xs text-white/60 group-hover:text-white transition-colors tracking-tight font-medium">
                     <div className="w-1.5 h-1.5 bg-accent rounded-full mt-1 shrink-0"></div> {item}
                   </li>
                 ))}
               </ul>
             </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingSection = () => {
  const { t } = useTranslation();
  const [isAnnual, setIsAnnual] = useState(true);

  const plans = [
    {
      name: t('pricing.starter.name'),
      desc: t('pricing.starter.desc'),
      monthlyPrice: 9,
      annualPrice: 7,
      features: t('pricing.starter.features', { returnObjects: true }) as string[],
      cta: t('pricing.starter.cta'),
      popular: false
    },
    {
      name: t('pricing.pro.name'),
      desc: t('pricing.pro.desc'),
      monthlyPrice: 25,
      annualPrice: 19,
      features: t('pricing.pro.features', { returnObjects: true }) as string[],
      cta: t('pricing.pro.cta'),
      popular: true
    },
    {
      name: t('pricing.business.name'),
      desc: t('pricing.business.desc'),
      monthlyPrice: 65,
      annualPrice: 49,
      features: t('pricing.business.features', { returnObjects: true }) as string[],
      cta: t('pricing.business.cta'),
      popular: false
    }
  ];

  return (
    <section id="pricing" className="py-24 px-4 bg-white relative">
      <div className="max-w-7xl mx-auto text-center">
        <h2 className="text-4xl lg:text-6xl font-black text-primary mb-8 leading-tight">{t('pricing.title')}</h2>
        <p className="text-gray-400 mb-16 text-lg font-medium max-w-2xl mx-auto">{t('pricing.subtitle')}</p>

        <div className="flex items-center justify-center gap-4 mb-24 bg-gray-50 p-2 rounded-2xl w-fit mx-auto border border-gray-100">
           <button 
             onClick={() => setIsAnnual(false)}
             className={`px-10 py-3 rounded-xl font-bold text-sm transition-all ${!isAnnual ? 'bg-white shadow-lg text-primary' : 'text-gray-400'}`}
           >
             {t('pricing.monthly')}
           </button>
           <button 
             onClick={() => setIsAnnual(true)}
             className={`px-10 py-3 rounded-xl font-bold text-sm transition-all relative ${isAnnual ? 'bg-white shadow-lg text-primary' : 'text-gray-400'}`}
           >
             {t('pricing.annual')}
             <span className="absolute -top-3 -right-4 bg-accent text-primary px-2.5 py-1 rounded-full text-[9px] font-black uppercase shadow-sm">
               -20%
             </span>
           </button>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 items-start">
           {plans.map((p, i) => (
             <motion.div 
               key={i} 
               whileHover={{ y: -10 }}
               className={`p-12 rounded-[56px] border flex flex-col text-left transition-all duration-500 ${p.popular ? 'border-primary shadow-teal border-2 ring-8 ring-primary/5 scale-[1.05] bg-white relative z-10' : 'border-gray-50 bg-white hover:border-gray-100'}`}
             >
               {p.popular && (
                  <div className="absolute top-0 left-12 -translate-y-1/2 bg-primary text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest shadow-xl">
                    {t('pricing.bestValue')}
                  </div>
               )}
               <h3 className="text-2xl font-black text-primary mb-2">{p.name}</h3>
               <p className="text-gray-400 text-xs font-bold mb-10 tracking-tight">{p.desc}</p>
               
               <div className="mb-12">
                 <span className="text-6xl font-black text-primary tracking-tighter">€{isAnnual ? p.annualPrice : p.monthlyPrice}</span>
                 <span className="text-gray-400 font-black ml-2 uppercase text-[10px] tracking-widest">{t('pricing.month')}</span>
               </div>

               <ul className="space-y-5 mb-12 flex-grow">
                 {p.features.map((f, j) => (
                   <li key={j} className="flex items-start gap-4 text-sm text-gray-500 font-bold leading-snug">
                     <CheckCircle2 size={18} className="text-secondary shrink-0 mt-0.5" /> {f}
                   </li>
                 ))}
               </ul>

               <button className={`w-full py-6 rounded-3xl font-black text-lg transition-all active:scale-95 shadow-sm ${p.popular ? 'bg-primary text-white hover:bg-primary/95 shadow-primary/20 shadow-xl' : 'bg-gray-50 text-primary hover:bg-gray-100'}`}>
                 {p.cta}
               </button>
             </motion.div>
           ))}
        </div>
        
        <p className="mt-20 text-[10px] font-black text-gray-300 uppercase tracking-[0.3em]">
          {t('pricing.footer')}
        </p>
      </div>
    </section>
  );
};

const CTASection = () => {
  const { t } = useTranslation();
  return (
    <section className="py-24 px-4">
      <div className="max-w-6xl mx-auto rounded-[80px] bg-gradient-to-br from-primary via-primary to-secondary p-12 lg:p-24 text-center text-white relative overflow-hidden shadow-teal shadow-2xl">
        <div className="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,#fff_0%,transparent_50%)] overflow-hidden"></div>
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,var(--color-accent)_0%,transparent_50%)]"></div>
        </div>
        
        <div className="relative z-10">
          <h2 className="text-5xl lg:text-8xl font-black mb-10 leading-[0.9] tracking-tighter">
            {t('cta.title')}
          </h2>
          <p className="text-xl opacity-80 mb-12 max-w-2xl mx-auto font-bold text-blue-50 leading-relaxed">
            {t('cta.subtitle')}
          </p>
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
            <button className="bg-accent text-primary px-14 py-6 rounded-[34px] text-xl font-black hover:scale-105 active:scale-95 transition-all shadow-2xl shadow-black/20">
              {t('cta.button')}
            </button>
            <div className="flex items-center gap-3 text-xs font-black uppercase tracking-[0.2em] text-white/50">
              <ShieldCheck size={16} /> {t('cta.secure')}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const { t } = useTranslation();
  return (
    <footer className="bg-white border-t border-gray-100 pt-32 pb-12 px-4">
      <div className="max-w-7xl mx-auto grid md:grid-cols-12 gap-16 mb-32 text-left">
        <div className="md:col-span-4 lg:col-span-5">
          <div className="flex items-center gap-3 mb-10">
            <div className="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center text-white font-black">W</div>
            <span className="text-2xl font-black tracking-tight text-primary">WORDLY<span className="text-secondary">.art</span></span>
          </div>
          <p className="text-gray-400 text-base font-medium leading-relaxed mb-10 max-w-xs">
            {t('footer.desc')}
          </p>
          <div className="flex gap-4">
             {[Globe, MessageSquare, Zap].map((Icon, i) => (
                <div key={i} className="w-12 h-12 bg-gray-50 rounded-2xl flex items-center justify-center text-gray-300 hover:text-primary transition-all cursor-pointer border border-transparent hover:border-gray-100 shadow-sm">
                  <Icon size={20} />
                </div>
             ))}
          </div>
        </div>
        
        <div className="md:col-span-2 lg:col-span-2">
          <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-primary mb-10">{t('footer.product')}</h4>
          <ul className="space-y-5 text-sm text-gray-500 font-bold">
            <li><a href="#features" className="hover:text-primary transition-colors">{t('nav.why')}</a></li>
            <li><a href="#formats" className="hover:text-primary transition-colors">{t('nav.formats')}</a></li>
            <li><a href="#pricing" className="hover:text-primary transition-colors">{t('nav.pricing')}</a></li>
            <li><a href="#" className="hover:text-primary transition-colors">Integrations</a></li>
          </ul>
        </div>
        
        <div className="md:col-span-3 lg:col-span-2">
          <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-primary mb-10">{t('footer.resources')}</h4>
          <ul className="space-y-5 text-sm text-gray-500 font-bold">
            <li><a href="#" className="hover:text-primary transition-colors">Documentation</a></li>
            <li><a href="#" className="hover:text-primary transition-colors">Security</a></li>
            <li><a href="#" className="hover:text-primary transition-colors">Developer Portal</a></li>
            <li><a href="#" className="hover:text-primary transition-colors">API Docs</a></li>
          </ul>
        </div>

        <div className="md:col-span-3 lg:col-span-3">
          <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-primary mb-10">{t('footer.legal')}</h4>
          <ul className="space-y-5 text-sm text-gray-500 font-bold">
            <li><a href="#" className="hover:text-primary transition-colors">Privacy Policy</a></li>
            <li><a href="#" className="hover:text-primary transition-colors">Terms of Service</a></li>
            <li><a href="#" className="hover:text-primary transition-colors">Cookie Policy</a></li>
            <li><a href="#" className="hover:text-primary transition-colors">Contact</a></li>
          </ul>
        </div>
      </div>
      
      <div className="max-w-7xl mx-auto pt-10 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-8">
        <div className="text-[10px] font-black text-gray-300 uppercase tracking-[0.3em]">
          {t('footer.rights')}
        </div>
        <div className="flex items-center gap-10 text-[10px] font-black text-gray-400 uppercase tracking-[0.3em]">
          <div className="flex items-center gap-3">
             <span className="opacity-50">Translation engine</span> 
             <div className="flex gap-2">
               <div className="w-1.5 h-1.5 bg-secondary rounded-full"></div>
               <div className="w-1.5 h-1.5 bg-accent rounded-full"></div>
             </div>
          </div>
          <span>v2.4.0</span>
        </div>
      </div>
    </footer>
  );
};

export default function App() {
  return (
    <div className="min-h-screen font-sans bg-white selection:bg-[#00A8A8]/30 overflow-x-hidden">
      <Navbar />
      <main>
        <Hero />
        <Steps />
        <FeaturesContext />
        <LayoutFeatures />
        <FormatsSection />
        <PricingSection />
        <CTASection />
      </main>
      <Footer />
    </div>
  );
}
