// Sections of the landing page
const { useState, useEffect, useRef } = React;
const M = window.Mockups;
const I = window.Icons;

// Reveal hook
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Immediate check: if element is already in viewport, reveal now
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      el.classList.add('visible');
      return;
    }
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('visible');
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.05, rootMargin: '0px 0px -10% 0px' }
    );
    obs.observe(el);
    // Safety fallback: force visible after 1.5s no matter what
    const fallback = setTimeout(() => {
      el.classList.add('visible');
      obs.disconnect();
    }, 1500);
    return () => { obs.disconnect(); clearTimeout(fallback); };
  }, []);
  return ref;
}

const Reveal = ({ children, delay = 0, className = "" }) => {
  const ref = useReveal();
  return (
    <div ref={ref} className={`reveal ${className}`} style={{ transitionDelay: `${delay}ms` }}>
      {children}
    </div>
  );
};

// Logo
const Logo = ({ light = false }) => (
  <div className="flex items-center gap-2.5">
    <img
      src="logo-ecclesiahub.png"
      alt="Ecclesia Hub"
      className={`w-10 h-10 object-contain ${light ? 'logo-light' : 'logo-dark'}`}
    />
    <span className={`font-display text-lg font-bold ${light ? 'text-white' : 'text-slate-900'}`}>
      Ecclesia <span className="text-amber-500">Hub</span>
    </span>
  </div>
);

// Header
const Header = ({ lang, setLang, t }) => {
  const [scrolled, setScrolled] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const current = window.LANGS.find(l => l.code === lang);

  return (
    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'header-scrolled py-3' : 'py-5'}`}>
      <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
        <Logo light={!scrolled} />

        <nav className="hidden lg:flex items-center gap-8">
          {[
            { href: '#features', label: t.nav.features },
            { href: '#how', label: t.nav.how },
            { href: '#pricing', label: t.nav.pricing },
            { href: '#faq', label: t.nav.faq }
          ].map(link => (
            <a key={link.href} href={link.href} className={`text-sm font-medium transition-colors ${scrolled ? 'text-slate-700 hover:text-blue-600' : 'text-slate-200 hover:text-white'}`}>
              {link.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          {/* Lang selector */}
          <div className="relative">
            <button
              onClick={() => setLangOpen(!langOpen)}
              className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${scrolled ? 'text-slate-700 hover:bg-slate-100' : 'text-white hover:bg-white/10'}`}
              aria-label="Select language"
            >
              <span className="text-base">{current.flag}</span>
              <span className="hidden sm:inline">{current.label}</span>
              <I.ChevronDown size={14} className={`transition-transform ${langOpen ? 'rotate-180' : ''}`} />
            </button>
            {langOpen && (
              <div className="lang-dropdown absolute right-0 mt-2 w-44 bg-white rounded-xl border border-slate-100 overflow-hidden">
                {window.LANGS.map(l => (
                  <button
                    key={l.code}
                    onClick={() => { setLang(l.code); setLangOpen(false); }}
                    className={`w-full flex items-center gap-3 px-3 py-2.5 text-sm hover:bg-slate-50 ${l.code === lang ? 'bg-blue-50 text-blue-700' : 'text-slate-700'}`}
                  >
                    <span className="text-lg">{l.flag}</span>
                    <span className="font-medium">{l.name}</span>
                    {l.code === lang && <I.Check size={14} className="ml-auto" />}
                  </button>
                ))}
              </div>
            )}
          </div>

          <button className="hidden md:flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-5 py-2.5 rounded-lg shadow-lg shadow-blue-600/25 transition-all">
            {t.nav.cta} <I.ArrowRight size={14} />
          </button>

          <button
            onClick={() => setMobileOpen(!mobileOpen)}
            className={`lg:hidden p-2 rounded-lg ${scrolled ? 'text-slate-700' : 'text-white'}`}
            aria-label="Menu"
          >
            {mobileOpen ? <I.X size={22} /> : <I.Menu size={22} />}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="lg:hidden mt-3 mx-6 bg-white rounded-2xl border border-slate-100 shadow-xl p-4">
          {[t.nav.features, t.nav.how, t.nav.pricing, t.nav.faq].map((l, i) => (
            <a key={i} href={['#features','#how','#pricing','#faq'][i]} onClick={() => setMobileOpen(false)} className="block py-2.5 text-slate-700 font-medium">{l}</a>
          ))}
          <button className="w-full mt-3 bg-blue-600 text-white py-2.5 rounded-lg font-semibold">{t.nav.cta}</button>
        </div>
      )}
    </header>
  );
};

// Hero
const Hero = ({ t }) => (
  <section className="relative hero-gradient overflow-hidden pt-32 pb-24">
    <div className="absolute inset-0 hero-grid opacity-60"></div>
    <div className="absolute inset-0 hero-glow"></div>
    <div className="absolute top-1/4 -left-20 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl"></div>
    <div className="absolute bottom-0 right-0 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl"></div>

    <div className="relative max-w-7xl mx-auto px-6">
      <div className="grid lg:grid-cols-2 gap-12 items-center">
        <Reveal>
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass text-xs text-blue-200 font-medium mb-6">
            <I.Sparkles size={12} className="text-amber-400" /> {t.hero.eyebrow}
          </div>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-[1.05] mb-6 text-balance">
            {t.hero.headline}
          </h1>
          <p className="text-lg text-slate-300 mb-8 max-w-xl leading-relaxed">
            {t.hero.sub}
          </p>
          <div className="flex flex-col sm:flex-row gap-3 mb-10">
            <button className="group flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-500 text-white font-semibold px-6 py-3.5 rounded-xl shadow-xl shadow-blue-600/30 transition-all">
              {t.hero.ctaPrimary}
              <I.ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="flex items-center justify-center gap-2 border border-white/20 hover:bg-white/10 text-white font-semibold px-6 py-3.5 rounded-xl transition-all">
              {t.hero.ctaSecondary}
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {t.hero.badges.map((b, i) => (
              <div key={i} className="glass rounded-full px-3 py-1.5 text-xs text-slate-200 flex items-center gap-1.5">
                {[<I.Check size={12} className="text-emerald-400" />, <I.Star size={12} className="text-amber-400" />, <I.Lock size={12} className="text-blue-300" />][i]}
                {b}
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={200}>
          <div className="relative">
            <div className="animate-float">
              <M.DashboardMockup t={t} />
            </div>
            <div className="absolute -bottom-8 -right-4 lg:right-0 animate-float-delay">
              <M.PhoneMockup t={t} />
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

// Trust Bar
const TrustBar = ({ t }) => {
  const icons = [I.Building, I.Users, I.Shield, I.Cloud, I.Lock, I.RefreshCw];
  return (
    <section className="bg-white py-10 border-y border-slate-100">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center text-xs uppercase tracking-widest text-slate-400 mb-6">{t.trust.title}</div>
        <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
          {t.trust.items.map((item, i) => {
            const Ic = icons[i];
            return (
              <div key={i} className="flex items-center gap-2 text-sm text-slate-600">
                <Ic size={16} className="text-blue-500" />
                <span className="font-medium">{item}</span>
                {i < t.trust.items.length - 1 && <span className="hidden md:inline text-slate-200 ml-8">•</span>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Features (3 pillars)
const Features = ({ t }) => {
  const icons = [I.Globe, I.Users, I.LayoutDashboard];
  const colors = ['blue', 'amber', 'emerald'];
  return (
    <section id="features" className="py-24 bg-slate-50 relative overflow-hidden">
      <div className="absolute inset-0 dots-pattern opacity-40" style={{ backgroundImage: 'radial-gradient(rgba(15,23,42,0.04) 1px, transparent 1px)' }}></div>
      <div className="relative max-w-7xl mx-auto px-6">
        <Reveal>
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">3 Pilares</div>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4 text-balance">{t.features.title}</h2>
            <p className="text-lg text-slate-600">{t.features.sub}</p>
          </div>
        </Reveal>

        <div className="grid md:grid-cols-3 gap-6">
          {t.features.items.map((f, i) => {
            const Ic = icons[i];
            const c = colors[i];
            return (
              <Reveal key={i} delay={i * 100}>
                <div className="group relative bg-white rounded-3xl p-8 border border-slate-100 hover:border-blue-200 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 h-full">
                  <div className={`w-14 h-14 rounded-2xl bg-${c}-50 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform`}>
                    <Ic size={26} className={`text-${c}-600`} />
                  </div>
                  <div className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">0{i + 1}</div>
                  <h3 className="text-xl font-bold text-slate-900 mb-3">{f.title}</h3>
                  <p className="text-slate-600 leading-relaxed">{f.desc}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Benefits
const Benefits = ({ t }) => {
  const icons = [I.Clock, I.DollarSign, I.BookOpen, I.BarChart, I.Palette, I.Cloud];
  return (
    <section className="py-24 bg-slate-900 relative overflow-hidden">
      <div className="absolute inset-0 hero-grid opacity-40"></div>
      <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-600/10 rounded-full blur-3xl"></div>

      <div className="relative max-w-7xl mx-auto px-6">
        <Reveal>
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="text-sm font-semibold text-amber-400 uppercase tracking-wider mb-3">Por que Ecclesia Hub</div>
            <h2 className="text-3xl md:text-5xl font-bold text-white mb-4 text-balance">{t.benefits.title}</h2>
            <p className="text-lg text-slate-400">{t.benefits.sub}</p>
          </div>
        </Reveal>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          {t.benefits.items.map((b, i) => {
            const Ic = icons[i];
            return (
              <Reveal key={i} delay={(i % 3) * 100}>
                <div className="glass rounded-2xl p-6 hover:bg-white/10 transition-all duration-300 h-full">
                  <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center mb-4 shadow-lg shadow-blue-500/20">
                    <Ic size={20} className="text-white" />
                  </div>
                  <h3 className="text-lg font-bold text-white mb-2">{b.title}</h3>
                  <p className="text-slate-400 text-sm leading-relaxed">{b.desc}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// How it works
const HowItWorks = ({ t }) => (
  <section id="how" className="py-24 bg-white">
    <div className="max-w-7xl mx-auto px-6">
      <Reveal>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">Como Funciona</div>
          <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4 text-balance">{t.how.title}</h2>
          <p className="text-lg text-slate-600">{t.how.sub}</p>
        </div>
      </Reveal>

      <div className="relative grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <div className="hidden md:block absolute top-10 left-[16%] right-[16%] h-0.5 step-line opacity-30"></div>
        {t.how.steps.map((s, i) => (
          <Reveal key={i} delay={i * 150}>
            <div className="relative text-center">
              <div className="relative inline-flex items-center justify-center w-20 h-20 mb-6">
                <div className="absolute inset-0 bg-blue-100 rounded-full"></div>
                <div className="absolute inset-2 bg-gradient-to-br from-blue-500 to-blue-700 rounded-full flex items-center justify-center text-white text-2xl font-bold shadow-xl shadow-blue-500/30">
                  {i + 1}
                </div>
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">{s.title}</h3>
              <p className="text-slate-600 leading-relaxed">{s.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// Showcase (zigzag)
const Showcase = ({ t }) => {
  const mockups = [M.FinancialMockup, M.CheckinMockup, M.EADMockup];
  const icons = [I.DollarSign, I.QrCode, I.BookOpen];
  const accents = ['blue', 'amber', 'emerald'];

  return (
    <section className="py-24 bg-gradient-to-b from-white to-slate-50">
      <div className="max-w-7xl mx-auto px-6">
        <Reveal>
          <div className="text-center max-w-3xl mx-auto mb-20">
            <div className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">Recursos</div>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4 text-balance">{t.showcase.title}</h2>
            <p className="text-lg text-slate-600">{t.showcase.sub}</p>
          </div>
        </Reveal>

        <div className="space-y-24">
          {t.showcase.items.map((item, i) => {
            const Mock = mockups[i];
            const Ic = icons[i];
            const c = accents[i];
            const reverse = i % 2 === 1;
            return (
              <Reveal key={i}>
                <div className={`grid lg:grid-cols-2 gap-12 items-center ${reverse ? 'lg:flex-row-reverse' : ''}`}>
                  <div className={reverse ? 'lg:order-2' : ''}>
                    <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-${c}-50 text-${c}-700 text-xs font-bold uppercase tracking-wider mb-4`}>
                      <Ic size={14} /> Recurso {i + 1}
                    </div>
                    <h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-5 text-balance">{item.title}</h3>
                    <p className="text-lg text-slate-600 leading-relaxed mb-6">{item.desc}</p>
                    <button className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-semibold text-sm">
                      Saiba mais <I.ArrowRight size={14} />
                    </button>
                  </div>
                  <div className={reverse ? 'lg:order-1' : ''}>
                    <Mock t={t} />
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Testimonials
const Testimonials = ({ t }) => {
  const gradients = ['from-blue-500 to-indigo-600', 'from-amber-500 to-orange-600', 'from-emerald-500 to-teal-600'];
  return (
    <section className="py-24 bg-slate-900 relative overflow-hidden">
      <div className="absolute inset-0 hero-grid opacity-40"></div>
      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-600/10 rounded-full blur-3xl"></div>

      <div className="relative max-w-7xl mx-auto px-6">
        <Reveal>
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="text-sm font-semibold text-amber-400 uppercase tracking-wider mb-3">Prova Social</div>
            <h2 className="text-3xl md:text-5xl font-bold text-white mb-4 text-balance">{t.testimonials.title}</h2>
            <p className="text-lg text-slate-400">{t.testimonials.sub}</p>
          </div>
        </Reveal>

        <div className="grid md:grid-cols-3 gap-6">
          {t.testimonials.items.map((tst, i) => {
            const initials = tst.name.split(' ').slice(-2).map(w => w[0]).join('');
            return (
              <Reveal key={i} delay={i * 100}>
                <div className="glass rounded-3xl p-7 h-full flex flex-col">
                  <div className="flex gap-1 mb-4">
                    {[...Array(5)].map((_, j) => <I.Star key={j} size={16} className="text-amber-400 fill-amber-400" />)}
                  </div>
                  <blockquote className="text-slate-200 leading-relaxed mb-6 flex-1 text-[15px]">
                    "{tst.quote}"
                  </blockquote>
                  <div className="flex items-center gap-3 pt-4 border-t border-white/10">
                    <div className={`w-12 h-12 rounded-full bg-gradient-to-br ${gradients[i]} flex items-center justify-center text-white font-bold text-sm shadow-lg`}>
                      {initials}
                    </div>
                    <div className="flex-1">
                      <div className="font-bold text-white text-sm">{tst.name}</div>
                      <div className="text-xs text-slate-400">{tst.role} · {tst.church}</div>
                      <div className="text-xs text-amber-400 mt-0.5">{tst.size}</div>
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Pricing
const Pricing = ({ t, currency }) => {
  const [yearly, setYearly] = useState(true);
  const p = window.PRICING[currency.code];

  const fmt = (v) => {
    if (currency.code === 'BRL') return `${currency.symbol} ${v}`;
    if (currency.code === 'EUR') return `${currency.symbol} ${v}`;
    if (currency.code === 'GBP') return `${currency.symbol}${v}`;
    return `${currency.symbol}${v}`;
  };

  return (
    <section id="pricing" className="py-24 bg-slate-50">
      <div className="max-w-7xl mx-auto px-6">
        <Reveal>
          <div className="text-center max-w-3xl mx-auto mb-12">
            <div className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">Preços</div>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4 text-balance">{t.pricing.title}</h2>
            <p className="text-lg text-slate-600">{t.pricing.sub}</p>
          </div>
        </Reveal>

        <Reveal>
          <div className="flex items-center justify-center gap-3 mb-10">
            <button
              onClick={() => setYearly(false)}
              className={`px-5 py-2 rounded-full text-sm font-semibold transition-all ${!yearly ? 'bg-slate-900 text-white shadow-lg' : 'text-slate-600 hover:bg-slate-200'}`}
            >
              {t.pricing.monthly}
            </button>
            <button
              onClick={() => setYearly(true)}
              className={`px-5 py-2 rounded-full text-sm font-semibold transition-all flex items-center gap-2 ${yearly ? 'bg-slate-900 text-white shadow-lg' : 'text-slate-600 hover:bg-slate-200'}`}
            >
              {t.pricing.yearly}
              <span className="bg-emerald-500 text-white text-[10px] px-2 py-0.5 rounded-full">{t.pricing.saveBadge}</span>
            </button>
          </div>
        </Reveal>

        <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
          {/* Monthly card */}
          <Reveal delay={0}>
            <div className={`bg-white rounded-3xl p-8 border-2 transition-all h-full ${!yearly ? 'border-blue-500 shadow-2xl shadow-blue-500/10' : 'border-slate-100'}`}>
              <div className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">{t.pricing.monthlyPlan.label}</div>
              <h3 className="text-2xl font-bold text-slate-900 mb-5">{t.pricing.monthlyPlan.name}</h3>
              <div className="flex items-baseline gap-1 mb-1">
                <span className="text-5xl font-bold text-slate-900">{fmt(p.monthly)}</span>
                <span className="text-slate-500">{t.pricing.monthlyPlan.period}</span>
              </div>
              <div className="text-sm text-slate-400 mb-6">&nbsp;</div>
              <button className={`w-full py-3.5 rounded-xl font-bold text-sm transition-all mb-6 ${!yearly ? 'bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-600/30' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
                {t.pricing.monthlyPlan.cta}
              </button>
              <ul className="space-y-3">
                {t.pricing.features.map((f, i) => (
                  <li key={i} className="flex items-start gap-2.5 text-sm text-slate-700">
                    <I.Check size={16} className="text-emerald-500 mt-0.5 flex-shrink-0" strokeWidth={3} />
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>

          {/* Yearly card */}
          <Reveal delay={100}>
            <div className={`relative bg-white rounded-3xl p-8 border-2 transition-all h-full ${yearly ? 'border-blue-500 shadow-2xl shadow-blue-500/20' : 'border-slate-100'}`}>
              <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-amber-500 text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-lg flex items-center gap-1.5">
                <I.Award size={12} /> {t.pricing.bestValue}
              </div>
              <div className="text-xs font-bold text-amber-600 uppercase tracking-wider mb-2">{t.pricing.yearlyPlan.label}</div>
              <h3 className="text-2xl font-bold text-slate-900 mb-5">{t.pricing.yearlyPlan.name}</h3>
              <div className="flex items-baseline gap-1 mb-1">
                <span className="text-5xl font-bold text-slate-900">{fmt(p.yearly)}</span>
                <span className="text-slate-500">{t.pricing.yearlyPlan.period}</span>
              </div>
              <div className="text-sm text-emerald-600 font-medium mb-6">
                ≈ {fmt(p.perMonthYearly)}/mês · {t.pricing.yearlyPlan.save} {fmt(p.savings)}
              </div>
              <button className={`w-full py-3.5 rounded-xl font-bold text-sm transition-all mb-6 ${yearly ? 'bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-600/30' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
                {t.pricing.yearlyPlan.cta}
              </button>
              <ul className="space-y-3">
                {t.pricing.yearlyExtras.map((f, i) => (
                  <li key={i} className="flex items-start gap-2.5 text-sm text-slate-700">
                    <I.Check size={16} className={`${i === 0 ? 'text-emerald-500' : 'text-amber-500'} mt-0.5 flex-shrink-0`} strokeWidth={3} />
                    <span className={i > 0 ? 'font-semibold' : ''}>{f}</span>
                  </li>
                ))}
                {t.pricing.features.slice(0, -1).map((f, i) => (
                  <li key={`f${i}`} className="flex items-start gap-2.5 text-sm text-slate-600">
                    <I.Check size={16} className="text-slate-300 mt-0.5 flex-shrink-0" strokeWidth={3} />
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>

        <Reveal>
          <div className="flex flex-wrap items-center justify-center gap-6 mt-10 text-sm text-slate-600">
            {[I.Lock, I.RefreshCw, I.Check].map((Ic, i) => (
              <div key={i} className="flex items-center gap-2">
                <Ic size={14} className="text-blue-500" />
                {t.pricing.seals[i]}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// FAQ
const FAQ = ({ t }) => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="py-24 bg-white">
      <div className="max-w-3xl mx-auto px-6">
        <Reveal>
          <div className="text-center mb-12">
            <div className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">FAQ</div>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4 text-balance">{t.faq.title}</h2>
            <p className="text-lg text-slate-600">{t.faq.sub}</p>
          </div>
        </Reveal>

        <div className="space-y-3">
          {t.faq.items.map((item, i) => (
            <Reveal key={i} delay={i * 50}>
              <div className={`bg-slate-50 rounded-2xl border transition-all ${open === i ? 'border-blue-200 shadow-lg shadow-blue-500/5' : 'border-slate-100'}`}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left"
                  aria-expanded={open === i}
                >
                  <span className="font-semibold text-slate-900">{item.q}</span>
                  <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-all ${open === i ? 'bg-blue-600 text-white rotate-180' : 'bg-white text-slate-600 border border-slate-200'}`}>
                    {open === i ? <I.Minus size={14} strokeWidth={3} /> : <I.Plus size={14} strokeWidth={3} />}
                  </div>
                </button>
                <div className={`faq-content ${open === i ? 'open' : ''}`}>
                  <div className="px-6 pb-5 text-slate-600 leading-relaxed">{item.a}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

// Final CTA
const FinalCTA = ({ t }) => (
  <section className="py-24 cta-gradient relative overflow-hidden">
    <div className="absolute inset-0 hero-grid opacity-30"></div>
    <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-32 bg-gradient-to-b from-amber-500/10 to-transparent blur-3xl"></div>

    <div className="relative max-w-4xl mx-auto px-6 text-center">
      <Reveal>
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-white font-medium mb-6">
          <I.Heart size={14} className="text-rose-400" /> Junte-se à comunidade
        </div>
        <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 text-balance leading-tight">
          {t.finalCta.title}
        </h2>
        <p className="text-lg md:text-xl text-blue-100 mb-10 max-w-2xl mx-auto leading-relaxed">
          {t.finalCta.sub}
        </p>
        <button className="group inline-flex items-center gap-3 bg-white text-slate-900 hover:bg-slate-100 font-bold px-8 py-4 rounded-2xl shadow-2xl text-lg transition-all hover:scale-105">
          {t.finalCta.button}
          <I.ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
        </button>
        <p className="text-sm text-blue-200 mt-6">{t.finalCta.support}</p>
      </Reveal>
    </div>
  </section>
);

// Footer
const Footer = ({ t }) => {
  const socials = [I.Instagram, I.Youtube, I.Facebook];
  return (
    <footer className="bg-slate-950 text-slate-400 pt-16 pb-8">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid md:grid-cols-4 gap-10 mb-12">
          <div>
            <Logo light />
            <p className="mt-4 text-sm leading-relaxed">{t.footer.tagline}</p>
            <div className="flex gap-3 mt-5">
              {socials.map((Ic, i) => (
                <a key={i} href="#" className="w-9 h-9 rounded-lg bg-white/5 hover:bg-blue-600 hover:text-white flex items-center justify-center transition-all" aria-label="Social">
                  <Ic size={16} />
                </a>
              ))}
            </div>
          </div>

          {[t.footer.product, t.footer.company].map((col, i) => (
            <div key={i}>
              <h4 className="font-bold text-white text-sm uppercase tracking-wider mb-4">{col.title}</h4>
              <ul className="space-y-2.5">
                {col.items.map((it, j) => (
                  <li key={j}><a href="#" className="text-sm hover:text-white transition-colors">{it}</a></li>
                ))}
              </ul>
            </div>
          ))}

          <div>
            <h4 className="font-bold text-white text-sm uppercase tracking-wider mb-4">{t.footer.newsletter.title}</h4>
            <p className="text-sm mb-4 leading-relaxed">{t.footer.newsletter.desc}</p>
            <a
              href="https://wa.me/5543996393421"
              target="_blank"
              rel="noopener noreferrer"
              className="w-full bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold py-2.5 rounded-lg flex items-center justify-center gap-2 transition-colors shadow-lg shadow-emerald-600/20"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.949h.004c4.368 0 7.927-3.558 7.93-7.93a7.9 7.9 0 0 0-2.327-5.592M7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.69-4.98c-.202-.1-1.195-.59-1.378-.657-.183-.067-.317-.1-.45.1-.132.2-.511.657-.626.793-.114.137-.229.153-.43.053-.2-.1-.847-.312-1.614-.997-.597-.533-1-1.192-1.118-1.393-.118-.2-.013-.308.088-.408.09-.089.202-.234.302-.35a1.5 1.5 0 0 0 .2-.33c.067-.137.034-.257-.017-.358-.05-.1-.45-1.083-.615-1.485-.162-.396-.326-.34-.45-.346-.114-.006-.245-.006-.376-.006a.75.75 0 0 0-.543.25c-.183.202-.697.683-.697 1.667s.715 1.933.815 2.067c.099.133 1.406 2.146 3.407 3.012.476.206.848.33 1.139.424.477.15.91.13 1.253.08.384-.057 1.195-.487 1.365-.957.17-.468.17-.87.119-.957-.05-.087-.183-.138-.38-.239"/>
              </svg>
              {t.footer.newsletter.button}
            </a>
          </div>
        </div>

        <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4 text-xs">
          <div>{t.footer.copy}</div>
          <div className="flex gap-6">
            {t.footer.legal.map((l, i) => (
              <a key={i} href="#" className="hover:text-white transition-colors">{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Sections = { Header, Hero, TrustBar, Features, Benefits, HowItWorks, Showcase, Testimonials, Pricing, FAQ, FinalCTA, Footer };
