/* ───────── ROI Calculator — Cotação / Compras ───────── */
const ROICalculator = () => {
  const [compras, setCompras] = React.useState(80000);   // R$/mês em compras
  const [fornecedores, setFornecedores] = React.useState(3);
  const [tempo, setTempo] = React.useState(8);           // horas/semana cotando manualmente

  // Savings model (conservative restaurant industry averages)
  // - each added supplier bid reduces input cost ~2.5% (diminishing returns capped)
  // - direct price negotiation baseline: 4%
  // - time saved automating quotes: R$ 60/h × 52 semanas ÷ 12
  const supplierUplift = Math.min(fornecedores, 5) * 0.025;
  const negotiationSaving = Math.round(compras * (0.04 + supplierUplift));
  const wasteSaving       = Math.round(compras * 0.018); // menos pedido errado / perda por falta de ficha
  const timeSaving        = Math.round(tempo * 4.33 * 60 * 0.85); // hora gestor
  const monthlyTotal      = negotiationSaving + wasteSaving + timeSaving;
  const yearlyTotal       = monthlyTotal * 12;
  const multiple          = Math.max(1, Math.round(monthlyTotal / 699));

  // Mock "live quote battle" — winner changes w/ suppliers slider
  const mockItem = { nome:'Contra-filé bovino · 10kg', base: 890 };
  const bids = React.useMemo(() => {
    const pool = [
      { f:'Distribuidora Atacadão', v:890, flag:'🟡' },
      { f:'Frigorífico Premium',    v:862, flag:'🔵' },
      { f:'Açougue Central',        v:843, flag:'🟠' },
      { f:'Carnes do Vale',         v:821, flag:'🟢' },
      { f:'Boi Forte Atacado',      v:799, flag:'🟣' },
    ];
    return pool.slice(0, Math.min(fornecedores+1, pool.length));
  }, [fornecedores]);
  const winner = bids.reduce((a,b) => a.v < b.v ? a : b, bids[0]);
  const savedOnItem = mockItem.base - winner.v;

  const sliders = [
    {l:'Compras de insumos / mês', v:compras, set:setCompras, min:10000, max:400000, step:5000,
     fmt:v=>`R$ ${(v/1000).toFixed(0)}k`, sub:'total gasto com fornecedores'},
    {l:'Fornecedores cotando por item', v:fornecedores, set:setFornecedores, min:1, max:5, step:1,
     fmt:v=>`${v} fornecedor${v>1?'es':''}`, sub:'quanto mais, melhor a cotação'},
    {l:'Horas/semana em cotação manual', v:tempo, set:setTempo, min:0, max:40, step:1,
     fmt:v=>`${v}h`, sub:'tempo gasto hoje pelo gestor'},
  ];

  return (
    <section id="roi" className="relative py-14 lg:py-20 bg-white overflow-hidden border-t border-ink-100">
      <div className="absolute inset-0 grid-bg opacity-40 pointer-events-none"></div>
      <div className="absolute top-20 right-0 w-[40%] h-[60%] bg-brand-50 blur-3xl rounded-full pointer-events-none"></div>

      <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
        {/* Header */}
        <div className="max-w-3xl mb-12">
          <span className="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-600 mb-4">
            <span className="w-6 h-px bg-brand-500"></span> Cotação inteligente
          </span>
          <h2 className="text-[38px] sm:text-[48px] lg:text-[56px] font-bold text-ink-900 tracking-[-0.02em] leading-[1.04] mb-5">
            Fornecedor bom é <span className="serif italic text-brand-600 font-normal">fornecedor em disputa.</span>
          </h2>
          <p className="text-[17px] text-ink-500 leading-relaxed">
            O sistema de cotação envia sua lista para todos os fornecedores ao mesmo tempo,
            compara preços item a item e escolhe o melhor de cada um. Restaurantes economizam
            <span className="font-bold text-ink-900"> em média 8 a 15% do CMV</span> — só organizando a compra.
          </p>
        </div>

        <div className="grid lg:grid-cols-[0.85fr_1.15fr] gap-10 items-start">
          {/* LEFT — Inputs */}
          <div className="rounded-2xl bg-ink-50 p-7 lg:p-8 ring-1 ring-ink-100">
            <div className="flex items-center gap-2 mb-6 pb-5 border-b border-dashed border-ink-200">
              <div className="w-8 h-8 rounded-lg bg-brand-500 flex items-center justify-center text-white text-[13px] font-bold">1</div>
              <div>
                <div className="text-[12px] font-bold text-ink-900">Seu restaurante hoje</div>
                <div className="text-[10px] text-ink-500">Ajuste os valores para simular</div>
              </div>
            </div>

            {sliders.map(i => (
              <div key={i.l} className="mb-6 last:mb-0">
                <div className="flex items-baseline justify-between mb-1">
                  <label className="text-[13px] font-semibold text-ink-800">{i.l}</label>
                  <span className="mono text-[14px] font-bold text-brand-600">{i.fmt(i.v)}</span>
                </div>
                <div className="text-[11px] text-ink-400 mb-2.5">{i.sub}</div>
                <input type="range" min={i.min} max={i.max} step={i.step} value={i.v}
                       onChange={e => i.set(+e.target.value)} className="w-full cursor-pointer"/>
                <div className="flex justify-between text-[9px] text-ink-400 mono mt-1">
                  <span>{i.fmt(i.min)}</span><span>{i.fmt(i.max)}</span>
                </div>
              </div>
            ))}

            {/* Visual: supplier battle */}
            <div className="mt-7 pt-6 border-t border-dashed border-ink-200">
              <div className="flex items-center justify-between mb-3">
                <div className="text-[10px] font-bold uppercase tracking-[0.14em] text-ink-500">Cotação ao vivo</div>
                <div className="flex items-center gap-1.5 text-[10px] text-green-600 mono">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse-soft"></span> disputando
                </div>
              </div>
              <div className="text-[12px] font-semibold text-ink-900 mb-3">{mockItem.nome}</div>
              <div className="space-y-1.5">
                {bids.map(b => {
                  const isWin = b.f === winner.f;
                  const pct = 100 - ((b.v - (winner.v - 60)) / (mockItem.base - (winner.v - 60))) * 80;
                  return (
                    <div key={b.f} className={`relative px-3 py-2 rounded-lg overflow-hidden transition-all ${isWin ? 'bg-green-50 ring-1 ring-green-300' : 'bg-white ring-1 ring-ink-100'}`}>
                      <div className="absolute inset-y-0 left-0 bg-gradient-to-r from-brand-100/60 to-brand-50/0" style={{width:`${Math.max(15,pct)}%`, opacity: isWin ? 1 : 0.4}}></div>
                      <div className="relative flex items-center justify-between gap-2">
                        <div className="flex items-center gap-2 min-w-0">
                          <span className="text-[11px]">{b.flag}</span>
                          <span className={`text-[12px] truncate ${isWin?'font-bold text-green-800':'text-ink-700'}`}>{b.f}</span>
                          {isWin && <span className="text-[8px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded bg-green-500 text-white">melhor</span>}
                        </div>
                        <span className={`mono text-[12px] font-bold shrink-0 ${isWin?'text-green-700':'text-ink-500'}`}>R$ {b.v}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="mt-3 flex items-center justify-between text-[11px]">
                <span className="text-ink-500">Economia neste item:</span>
                <span className="font-bold text-green-600 mono">−R$ {savedOnItem} <span className="text-[10px] text-ink-400">(−{Math.round((savedOnItem/mockItem.base)*100)}%)</span></span>
              </div>
            </div>
          </div>

          {/* RIGHT — Results */}
          <div className="rounded-2xl bg-ink-950 p-7 lg:p-10 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-[60%] h-[80%] bg-brand-500/15 blur-[100px] rounded-full pointer-events-none"></div>
            <div className="absolute bottom-0 left-0 w-[40%] h-[50%] bg-brand-400/10 blur-[80px] rounded-full pointer-events-none"></div>

            <div className="relative">
              <div className="flex items-center gap-2 mb-3">
                <div className="w-8 h-8 rounded-lg bg-brand-500 flex items-center justify-center text-white text-[13px] font-bold">2</div>
                <div>
                  <div className="text-[12px] font-bold text-white">Economia projetada</div>
                  <div className="text-[10px] text-white/50">Com cotação automatizada no RestaurantePro</div>
                </div>
              </div>

              {/* Big number */}
              <div className="flex items-baseline gap-3 mb-2 mt-6">
                <span className="serif text-[86px] lg:text-[110px] leading-none text-white tracking-[-0.03em]">
                  R$ {monthlyTotal.toLocaleString('pt-BR')}
                </span>
              </div>
              <div className="flex items-center gap-3 mb-8">
                <span className="text-[14px] text-white/50">/ mês</span>
                <span className="text-[12px] px-2 py-0.5 rounded-full bg-green-500/20 text-green-300 font-bold mono">
                  R$ {yearlyTotal.toLocaleString('pt-BR')} / ano
                </span>
              </div>

              {/* breakdown */}
              <div className="space-y-1 mb-8">
                {[
                  {l:'Disputa entre fornecedores', v:negotiationSaving, d:`${Math.round((0.04+supplierUplift)*100)}% no preço final · ${fornecedores} cotando`, icon:'⚔'},
                  {l:'Menos perda e pedido errado',  v:wasteSaving,       d:'Fichas técnicas evitam compra em excesso', icon:'📦'},
                  {l:'Horas do gestor devolvidas',   v:timeSaving,        d:`${tempo}h/sem × R$ 60/h · reduzidas em 85%`, icon:'⏱'},
                ].map(r => (
                  <div key={r.l} className="flex items-start gap-4 py-3 border-t border-white/10">
                    <div className="w-9 h-9 rounded-lg bg-white/5 flex items-center justify-center shrink-0 text-[16px]">{r.icon}</div>
                    <div className="flex-1 min-w-0">
                      <div className="text-[13.5px] text-white font-semibold">{r.l}</div>
                      <div className="text-[11px] text-white/50 mt-0.5 truncate">{r.d}</div>
                    </div>
                    <div className="mono text-[16px] font-bold text-brand-300 shrink-0">
                      R$ {r.v.toLocaleString('pt-BR')}
                    </div>
                  </div>
                ))}
              </div>

              {/* CTA */}
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 p-5 rounded-xl bg-gradient-to-br from-brand-500/25 to-brand-400/10 border border-brand-400/30">
                <div className="flex-1">
                  <div className="text-[11px] text-brand-200 uppercase tracking-[0.14em] font-bold">Retorno do investimento</div>
                  <div className="text-[15px] text-white mt-0.5">
                    <span className="serif text-[28px] text-white">{multiple}×</span> o valor do plano Premium — todo mês
                  </div>
                </div>
                <a href="#precos" className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-lg bg-brand-500 hover:bg-brand-400 text-[13px] font-semibold text-white transition-colors shrink-0">
                  Começar a economizar <I.arrow size={13}/>
                </a>
              </div>

              <p className="text-[10px] text-white/35 mt-5 leading-relaxed">
                * Estimativas com base em dados médios de clientes ativos em 2025. Variações reais dependem
                de segmento, região, volume de compras e disciplina de uso. Não é proposta comercial.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ───────── Integrations Grid ───────── */
const IntegrationsGrid = () => {
  const integrations = [
    {n:'WhatsApp',d:'API Oficial Meta',tag:'Nativo',color:'#25D366'},
    {n:'Asaas',d:'Cobranças PIX',tag:'Nativo',color:'#00c06b'},
    {n:'iFood',d:'Importação de pedidos',color:'#ea1d2c'},
    {n:'Google',d:'Reservas + Business',color:'#4285f4'},
    {n:'Instagram',d:'DMs centralizadas',color:'#e1306c'},
    {n:'Meta',d:'Ads e eventos',color:'#1877f2'},
    {n:'Stone',d:'TEF e maquininha',color:'#00c37a'},
    {n:'Cielo',d:'Maquininha integrada',color:'#0a53a9'},
    {n:'Zapier',d:'5.000+ apps',color:'#ff4a00'},
    {n:'Excel',d:'Import/export',color:'#107c41'},
    {n:'Webhooks',d:'API REST completa',color:'#0ea5e9'},
    {n:'Calendário',d:'Google & Apple',color:'#ef4444'},
  ];

  return (
    <section className="relative py-14 lg:py-20 bg-ink-50 overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-50"></div>
      <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
        <div className="text-center mb-14 max-w-2xl mx-auto">
          <span className="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-600 mb-4">
            <span className="w-6 h-px bg-brand-500"></span> Integrações <span className="w-6 h-px bg-brand-500"></span>
          </span>
          <h2 className="text-[36px] sm:text-[44px] font-bold text-ink-900 tracking-[-0.02em] leading-[1.05] mb-4">
            Conecta com as ferramentas que você <span className="serif italic text-brand-600 font-normal">já usa.</span>
          </h2>
          <p className="text-[16px] text-ink-500">
            WhatsApp, iFood, maquininhas, Asaas, planilhas. Tudo no mesmo painel, sem trabalho duplicado.
          </p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3">
          {integrations.map((it,i) => (
            <div key={it.n} data-reveal style={{transitionDelay:`${i*30}ms`}}
                 className="group relative flex flex-col items-start p-4 rounded-xl bg-white border border-ink-100 hover:border-brand-300 hover:shadow-[0_8px_24px_-8px_rgba(14,165,233,0.15)] transition-all">
              <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3 font-bold text-white text-[13px]" style={{background:it.color}}>
                {it.n[0]}
              </div>
              <div className="text-[13px] font-semibold text-ink-900">{it.n}</div>
              <div className="text-[11px] text-ink-500 mt-0.5">{it.d}</div>
              {it.tag && <span className="absolute top-3 right-3 text-[8px] font-bold uppercase tracking-wider text-brand-600 bg-brand-50 px-1.5 py-0.5 rounded">{it.tag}</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───────── Video Testimonial block ───────── */
const VideoTestimonials = () => {
  const [active, setActive] = React.useState(0);
  const items = [
    { n:'Ricardo Mendes', r:'Gerente · Tennessee Steak', initials:'RM',
      q:'O delivery sem comissão nos economiza mais de R$ 4.000 por mês. A IA atende 60% das mensagens sozinha. Incrível.',
      stat:{l:'economia/mês',v:'R$ 4,2k'} },
    { n:'Fernanda Costa', r:'Chef · Villa Gourmet', initials:'FC',
      q:'As fichas técnicas me deram controle total do CMV. Reduzi o custo em 12% no primeiro mês. A integração com compras é um diferencial.',
      stat:{l:'redução CMV',v:'−12%'} },
    { n:'Ana Beatriz', r:'Proprietária · Cascata Bistro', initials:'AB',
      q:'Antes tínhamos 3 sistemas diferentes. Agora tudo em um só lugar. As reservas online reduziram 80% das ligações.',
      stat:{l:'menos ligações',v:'−80%'} },
  ];
  const cur = items[active];

  return (
    <section className="relative py-14 lg:py-20 bg-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        <div className="mb-14">
          <span className="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-600 mb-4">
            <span className="w-6 h-px bg-brand-500"></span> Depoimentos
          </span>
          <h2 className="text-[36px] sm:text-[44px] font-bold text-ink-900 tracking-[-0.02em] leading-[1.05]">
            Quem usa, <span className="serif italic text-brand-600 font-normal">fala por nós.</span>
          </h2>
        </div>

        <div className="grid lg:grid-cols-[1.3fr_1fr] gap-10 items-center">
          {/* Video player mockup */}
          <div className="relative aspect-video rounded-2xl overflow-hidden bg-ink-950 placeholder-stripes cursor-pointer group">
            <div className="absolute inset-0 bg-gradient-to-br from-brand-900/40 to-ink-950/80"></div>
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-20 h-20 rounded-full bg-white/95 text-ink-900 flex items-center justify-center group-hover:scale-110 transition-transform shadow-2xl">
                <I.play size={28}/>
              </div>
            </div>
            <div className="absolute bottom-0 inset-x-0 p-5 bg-gradient-to-t from-black/80 to-transparent">
              <div className="flex items-center gap-3">
                <div className="w-11 h-11 rounded-full bg-gradient-to-br from-brand-400 to-brand-600 text-white font-bold flex items-center justify-center text-[14px]">{cur.initials}</div>
                <div>
                  <div className="text-white font-semibold text-[14px]">{cur.n}</div>
                  <div className="text-white/60 text-[12px]">{cur.r}</div>
                </div>
                <div className="ml-auto flex items-center gap-1.5 text-white/50 mono text-[11px]">
                  <span className="w-1.5 h-1.5 rounded-full bg-red-500"></span> 02:14
                </div>
              </div>
            </div>
            <div className="absolute top-4 left-4 text-[10px] font-bold mono text-white/60 uppercase tracking-wider">Vídeo case · Napoleon Cuisine</div>
          </div>

          {/* Selector + quote */}
          <div>
            <blockquote className="serif text-[26px] lg:text-[30px] leading-[1.2] text-ink-900 mb-6">
              "{cur.q}"
            </blockquote>
            <div className="flex items-baseline gap-3 mb-8 pb-6 border-b border-ink-100">
              <span className="serif text-[48px] leading-none text-brand-600">{cur.stat.v}</span>
              <span className="text-[11px] uppercase tracking-wider font-bold text-ink-400">{cur.stat.l}</span>
            </div>

            <div className="space-y-2">
              {items.map((it,i) => (
                <button key={i} onClick={()=>setActive(i)}
                        className={`w-full flex items-center gap-3 p-3 rounded-lg text-left transition-all ${
                          i===active ? 'bg-ink-900 text-white' : 'bg-ink-50 hover:bg-ink-100 text-ink-900'
                        }`}>
                  <div className={`w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-bold shrink-0 ${
                    i===active ? 'bg-brand-500 text-white' : 'bg-gradient-to-br from-brand-400 to-brand-600 text-white'
                  }`}>{it.initials}</div>
                  <div className="flex-1 min-w-0">
                    <div className="text-[13px] font-semibold">{it.n}</div>
                    <div className={`text-[11px] ${i===active ? 'text-white/60' : 'text-ink-500'}`}>{it.r}</div>
                  </div>
                  {i===active ? <I.play size={12}/> : <I.play size={12} className="opacity-40"/>}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ───────── Pricing ───────── */
const Pricing = () => {
  const plans = [
    { n:'Básico', p:'R$ 299', op:'R$ 499', sv:'Economize R$ 200',
      d:'Para pequenos estabelecimentos',
      f:['Reservas ilimitadas','Fila de espera digital','Cardápio digital & delivery','Gestão de tarefas','Avaliações & NPS','Suporte por email em até 72h'] },
    { n:'Profissional', p:'R$ 499', op:'R$ 699', sv:'Economize R$ 200', pop:true,
      d:'Para restaurantes em crescimento',
      f:['Chatbot no WhatsApp','Reservas ilimitadas','Fila de espera digital','Checklists digitais','Avaliações & NPS','Sistema de compras','Suporte em até 24h'] },
    { n:'Premium', p:'R$ 699', op:'R$ 1.099', sv:'Economize R$ 400', hl:true,
      d:'Para franquias e redes',
      f:['Tudo do Profissional','IA + Chatbot no WhatsApp','CRM integrado','Fichas técnicas com CMV','Usuários ilimitados','Gerente de sucesso dedicado','SLA garantido'] },
  ];

  return (
    <section id="precos" className="relative py-14 lg:py-20 bg-ink-50 overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-40"></div>
      <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
        <div className="text-center mb-14 max-w-2xl mx-auto">
          <span className="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-600 mb-4">
            <span className="w-6 h-px bg-brand-500"></span> Preços <span className="w-6 h-px bg-brand-500"></span>
          </span>
          <h2 className="text-[36px] sm:text-[44px] font-bold text-ink-900 tracking-[-0.02em] leading-[1.05] mb-4">
            Planos que cabem no <span className="serif italic text-brand-600 font-normal">bolso</span>.
          </h2>
          <p className="text-[16px] text-ink-500">Sem taxa por pedido. Sem fidelidade. Cancele quando quiser.</p>
        </div>

        <div className="grid md:grid-cols-3 gap-5 items-start">
          {plans.map((p,i) => (
            <div key={p.n} data-reveal style={{transitionDelay:`${i*80}ms`}}
                 className={`relative rounded-2xl p-7 transition-all ${
                   p.pop ? 'bg-ink-900 text-white shadow-[0_30px_80px_-20px_rgba(12,10,9,.4)] md:-translate-y-3' :
                   'bg-white border border-ink-200'
                 }`}>
              {p.pop && <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-brand-500 text-white text-[10px] font-bold uppercase tracking-wider shadow-lg shadow-brand-500/30">Mais popular</div>}
              {p.hl && <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-amber-500 text-white text-[10px] font-bold uppercase tracking-wider shadow-lg">Abrasel</div>}

              <h3 className={`text-[16px] font-bold mb-1 ${p.pop?'text-white':'text-ink-900'}`}>{p.n}</h3>
              <p className={`text-[12px] mb-5 ${p.pop?'text-white/60':'text-ink-500'}`}>{p.d}</p>

              <div className="flex items-center gap-2 mb-1">
                <span className={`text-[14px] line-through decoration-red-400 ${p.pop?'text-white/50':'text-ink-400'}`}>{p.op}</span>
                <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${p.pop?'bg-green-500/20 text-green-300':'bg-green-100 text-green-700'}`}>{p.sv}</span>
              </div>
              <div className="flex items-baseline gap-1 mb-5">
                <span className={`text-[42px] font-bold tracking-[-0.02em] ${p.pop?'text-white':'text-ink-900'}`}>{p.p}</span>
                <span className={`text-[13px] ${p.pop?'text-white/50':'text-ink-400'}`}>/mês</span>
              </div>

              <ul className="space-y-2.5 mb-7 pb-7 border-b border-dashed">
                {p.f.map(ft => (
                  <li key={ft} className={`flex items-start gap-2 text-[13px] ${p.pop?'text-white/80':'text-ink-600'}`}>
                    <I.check size={14} className={`${p.pop?'text-brand-400':'text-brand-500'} mt-0.5 shrink-0`}/>
                    {ft}
                  </li>
                ))}
              </ul>

              <a href="https://painel.restaurantepro.com.br/cadastro"
                 className={`w-full inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-[13px] font-semibold transition-colors ${
                   p.pop ? 'bg-white text-ink-900 hover:bg-brand-50' : 'bg-ink-900 text-white hover:bg-ink-800'
                 }`}>
                Começar teste grátis <I.arrow size={13}/>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───────── FAQ ───────── */
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q:'Preciso instalar algo?', a:'É opcional. O RestaurantePro é 100% web e você pode instalar nosso app PWA em qualquer dispositivo.' },
    { q:'Tem app para celular?', a:'Sim — totalmente responsivo com app PWA. Todas as funcionalidades em qualquer dispositivo.' },
    { q:'Posso cancelar a qualquer momento?', a:'Sim, sem multa ou fidelidade. Cancele pelo próprio painel. Seus dados ficam salvos por 30 dias.' },
    { q:'Como é feita a atualização do CMV?', a:'Em tempo real, via fichas técnicas. Ao registrar compras, o sistema recalcula automaticamente o custo de cada prato.' },
    { q:'O WhatsApp é integrado?', a:'Sim — chat completo dentro do sistema estilo WhatsApp Web, com IA respondendo automaticamente quando você quiser.' },
    { q:'Posso gerenciar mais de um restaurante?', a:'Sim! O plano Premium suporta multi-unidades com dashboard consolidado.' },
    { q:'Posso cobrar minhas reservas?', a:'Sim, crie sua conta digital Asaas no aplicativo e cobre por mesa ou por pessoa com PIX.' },
    { q:'Qual o diferencial do checklist?', a:'Vai além de lista. Cada item pode exigir evidência fotográfica, tudo registrado e auditável em tempo real — o gestor acompanha sem estar presente.' },
    { q:'A produção de insumos tem impressão?', a:'Sim, o módulo gera etiquetas automaticamente com lote, validade e identificação.' },
    { q:'Como funciona o suporte?', a:'Básico: e-mail. Profissional: e-mail + WhatsApp em até 72h. Premium: e-mail + WhatsApp + vídeo em até 24h.' },
  ];

  return (
    <section id="faq" className="relative py-14 lg:py-20 bg-white border-t border-ink-100">
      <div className="max-w-3xl mx-auto px-6 lg:px-8">
        <div className="text-center mb-14">
          <span className="inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-600 mb-4">
            <span className="w-6 h-px bg-brand-500"></span> FAQ <span className="w-6 h-px bg-brand-500"></span>
          </span>
          <h2 className="text-[36px] sm:text-[44px] font-bold text-ink-900 tracking-[-0.02em] leading-[1.05]">
            Perguntas <span className="serif italic text-brand-600 font-normal">frequentes</span>.
          </h2>
        </div>

        <div>
          {faqs.map((f,i) => (
            <div key={i} className="border-b border-ink-200">
              <button onClick={()=>setOpen(open===i?-1:i)}
                      className="w-full flex items-center justify-between gap-6 py-5 text-left group">
                <span className={`text-[15.5px] font-semibold transition-colors ${open===i?'text-brand-600':'text-ink-900 group-hover:text-brand-600'}`}>{f.q}</span>
                <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 transition-colors ${open===i?'bg-brand-500 text-white':'bg-ink-100 text-ink-500'}`}>
                  {open===i ? <I.minus size={14}/> : <I.plus size={14}/>}
                </div>
              </button>
              <div className={`overflow-hidden transition-all duration-300 ${open===i?'max-h-96 pb-5':'max-h-0'}`}>
                <p className="text-[14px] text-ink-500 leading-relaxed">{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───────── CTA Final ───────── */
const CTAFinal = () => (
  <section className="relative py-14 lg:py-20 bg-ink-950 overflow-hidden">
    <div className="absolute top-0 left-1/3 w-[500px] h-[500px] bg-brand-500/20 rounded-full blur-[120px]"></div>
    <div className="absolute bottom-0 right-1/3 w-[400px] h-[400px] bg-brand-400/10 rounded-full blur-[100px]"></div>
    <div className="absolute inset-0 grid-bg-dark opacity-30"></div>
    <div className="relative max-w-4xl mx-auto px-6 lg:px-8 text-center">
      <span className="inline-block text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-400 mb-5">
        Comece hoje
      </span>
      <h2 className="text-[40px] sm:text-[52px] lg:text-[64px] font-bold text-white tracking-[-0.03em] leading-[1.05] mb-6">
        Pronto para transformar<br/>seu <span className="serif italic text-brand-400 font-normal">restaurante?</span>
      </h2>
      <p className="text-[17px] text-white/60 mb-10 max-w-lg mx-auto">
        7 dias grátis. Sem cartão. Junte-se a centenas de restaurantes que já simplificaram a operação.
      </p>
      <div className="flex flex-col sm:flex-row gap-3 justify-center">
        <a href="#precos" className="inline-flex items-center justify-center gap-2 px-8 py-4 text-[14px] font-semibold text-ink-900 bg-white hover:bg-brand-50 rounded-xl shadow-[0_8px_32px_-8px_rgba(255,255,255,.3)] transition-all hover:-translate-y-0.5 group">
          Começar teste grátis
          <I.arrow size={16} className="group-hover:translate-x-1 transition-transform"/>
        </a>
        <a href="#demo" className="inline-flex items-center justify-center gap-2 px-8 py-4 text-[14px] font-semibold text-white bg-white/10 border border-white/15 rounded-xl hover:bg-white/15 transition-colors">
          <I.play size={14}/> Agendar demonstração
        </a>
      </div>
    </div>
  </section>
);

/* ───────── Footer ───────── */
const Footer = () => {
  const cols = {
    Produto: [
      {label:'Módulos', href:'#modulos'},
      {label:'Funcionalidades', href:'#funcionalidades'},
      {label:'Preços', href:'#precos'},
      {label:'Atualizações', href:'#'},
    ],
    Suporte: [
      {label:'Contato', href:'contato.html'},
    ],
    Legal: [
      {label:'Termos de Uso', href:'termos-de-uso.html'},
      {label:'Privacidade', href:'privacidade.html'},
      {label:'LGPD', href:'lgpd.html'},
    ],
  };
  return (
    <footer className="bg-black text-white/70">
      <div className="max-w-7xl mx-auto px-6 lg:px-8 pt-16 pb-10">
        <div className="grid grid-cols-2 md:grid-cols-5 gap-10 mb-14">
          <div className="col-span-2">
            <a href="#" className="flex items-center gap-2.5 mb-4">
              <div className="w-8 h-8 rounded-lg bg-brand-500 flex items-center justify-center"><I.building size={16} className="text-white"/></div>
              <span className="text-[17px] font-bold text-white">Restaurante<span className="text-brand-400">Pro</span></span>
            </a>
            <p className="text-[13px] text-white/50 leading-relaxed max-w-xs mb-5">
              Sistema completo de gestão para restaurantes, bares e estabelecimentos gastronômicos.
            </p>
            <div className="flex gap-2">
              {[I.instagram,I.linkedin,I.whatsapp].map((Ico,i) => (
                <a key={i} href="#" className="w-8 h-8 rounded-lg bg-white/5 hover:bg-brand-500 flex items-center justify-center transition-colors">
                  <Ico size={15}/>
                </a>
              ))}
            </div>
          </div>
          {Object.entries(cols).map(([t,items]) => (
            <div key={t}>
              <h4 className="text-[11px] font-bold text-white uppercase tracking-[0.14em] mb-4">{t}</h4>
              <ul className="space-y-2.5">
                {items.map(l => <li key={l.label}><a href={l.href} className="text-[13px] text-white/50 hover:text-brand-400 transition-colors">{l.label}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-6 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-3">
          <p className="text-[12px] text-white/40">© 2026 RestaurantePro. Todos os direitos reservados.</p>
          <p className="text-[11px] text-white/30">Feito com cuidado para restaurantes brasileiros.</p>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { ROICalculator, IntegrationsGrid, VideoTestimonials, Pricing, FAQ, CTAFinal, Footer });