// Bottom sections: Pricing, FAQ, Final CTA, Footer
const { Reveal: R_b, Stagger: S_b, StaggerItem: SI_b, Container: C_b, Section: Sec_b, Eyebrow: Eb_b, Pill: P_b, Button: Btn_b } = window.UI;
const { motion: mb_, AnimatePresence: AP_b } = window.framerMotion || {};


// ===== PRICING — single plan, professional-stacking, with calculator =====
// Modelo escalonado: quem tem mais paga menos por profissional (volume discount).
// Anual base R$ 97 (inclui 1º prof). Tiers: 2-5º @ R$ 100, 6-10º @ R$ 90, 11-20º @ R$ 70, 21+ @ R$ 50.
function Pricing() {
  const [annual, setAnnual] = React.useState(true);
  const [profs, setProfs] = React.useState(3);

  // Tiered marginal pricing (anual) — base inclui o 1º profissional
  const TIERS_ANNUAL = [
    { upTo: 5,   rate: 100 }, // profs 2-5
    { upTo: 10,  rate: 90  }, // profs 6-10
    { upTo: 20,  rate: 70  }, // profs 11-20
    { upTo: 999, rate: 50  }, // profs 21+
  ];
  const TIERS_MONTHLY = [
    { upTo: 5,   rate: 150 },
    { upTo: 10,  rate: 135 },
    { upTo: 20,  rate: 105 },
    { upTo: 999, rate: 75  },
  ];
  const BASE_ANNUAL = 97;
  const BASE_MONTHLY = 147;

  function calc(n, base, tiers) {
    if (n <= 1) return base;
    let total = base;
    let remaining = n - 1; // profs after the 1st (which is in the base)
    let cursor = 1;
    for (const t of tiers) {
      const slotAvailable = Math.max(0, t.upTo - cursor);
      const take = Math.min(remaining, slotAvailable);
      total += take * t.rate;
      remaining -= take;
      cursor += take;
      if (remaining <= 0) break;
    }
    return total;
  }

  // Marginal rate for the *next* (profs+1)-th professional — used in the breakdown line
  function marginalRate(n, tiers) {
    if (n <= 1) return tiers[0].rate;
    const tier = tiers.find(t => n <= t.upTo) || tiers[tiers.length - 1];
    return tier.rate;
  }

  const base = annual ? BASE_ANNUAL : BASE_MONTHLY;
  const tiers = annual ? TIERS_ANNUAL : TIERS_MONTHLY;
  const totalMonth = calc(profs, base, tiers);
  const monthlyEquiv = calc(profs, BASE_MONTHLY, TIERS_MONTHLY);
  const yearTotal = totalMonth * 12;
  const yearSaved = (monthlyEquiv - totalMonth) * 12;
  const additional = Math.max(0, profs - 1);
  const additionalCost = totalMonth - base;
  const avgPerAdditional = additional > 0 ? additionalCost / additional : 0;
  const perProfEffective = totalMonth / profs;
  const currentMarginal = marginalRate(profs, tiers);

  // Suggested presets
  const presets = [
    { n: 1, label: 'Solo' },
    { n: 3, label: 'Pequena' },
    { n: 5, label: 'Média' },
    { n: 8, label: 'Grande' },
    { n: 12, label: 'Multi' },
  ];

  // What's included — single plan, everything destravado
  const features = [
    { icon: 'Calendar',     t: 'Agenda + check-in + fila de espera' },
    { icon: 'FileText',     t: 'Prontuário eletrônico + receita digital' },
    { icon: 'Sparkles',     t: 'IA Clínica · sugestão de CID-10 + relatório' },
    { icon: 'Stamp',        t: 'Assinatura digital ICP-Brasil' },
    { icon: 'FileText',     t: 'NFS-e automática (20+ municípios)' },
    { icon: 'Activity',     t: 'Audiometria + Imitanciometria com laudo' },
    { icon: 'Wallet',       t: 'Repasse + fechamento mensal' },
    { icon: 'Tv',           t: 'Painel TV + chamada de pacientes' },
    { icon: 'Phone',        t: 'Confirmação automática (WhatsApp)' },
    { icon: 'Database',     t: 'Importação do sistema antigo' },
    { icon: 'Shield',       t: 'LGPD + auditoria de acessos' },
    { icon: 'Users',        t: 'Suporte por chat · SLA 4h úteis' },
  ];

  return (
    <Sec_b id="precos" className="py-24 lg:py-32">
      <C_b>
        <R_b>
          <div className="text-center max-w-2xl mx-auto">
            <Eb_b>Preços</Eb_b>
            <h2 className="font-display font-bold text-[clamp(2rem,4.4vw,3.4rem)] tracking-tight leading-[1.05] mt-3 text-pretty">Pague pelo time que você tem hoje.</h2>
            <p className="mt-4 text-[16px] text-ink-600 dark:text-ink-300">Plano único com tudo destravado. <span className="text-ink-900 dark:text-white font-medium">Quanto maior o time, menor o preço por profissional</span> — desconto de volume automático em 4 faixas. Sem letra miúda, sem feature gate.</p>
          </div>
        </R_b>

        {/* Toggle anual / mensal */}
        <div className="flex flex-col items-center gap-3 mt-8">
          <div className="inline-flex items-center gap-1 p-1 rounded-xl bg-ink-100 dark:bg-ink-800/60 border border-ink-200/60 dark:border-ink-700">
            <button onClick={() => setAnnual(false)} className={`px-4 h-9 rounded-lg text-[13px] font-medium transition ${!annual ? 'bg-white dark:bg-ink-900 text-ink-900 dark:text-white shadow-sm' : 'text-ink-500'}`}>Mensal</button>
            <button onClick={() => setAnnual(true)} className={`px-4 h-9 rounded-lg text-[13px] font-medium transition inline-flex items-center gap-2 ${annual ? 'bg-white dark:bg-ink-900 text-ink-900 dark:text-white shadow-sm' : 'text-ink-500'}`}>
              Anual <span className="px-1.5 py-0.5 rounded text-[10px] bg-emerald-500/15 text-emerald-600 dark:text-emerald-300 border border-emerald-500/20">economize 33%</span>
            </button>
          </div>
        </div>

        {/* Calculator — the centerpiece */}
        <R_b delay={0.1}>
          <div className="mt-10 max-w-5xl mx-auto rounded-3xl border border-ink-200/70 dark:border-ink-800 bg-white dark:bg-ink-900/60 shadow-card overflow-hidden">
            <div className="grid lg:grid-cols-[1.05fr_1fr]">
              {/* Left: calculator UI */}
              <div className="p-7 lg:p-10 border-b lg:border-b-0 lg:border-r border-ink-200/60 dark:border-ink-800">
                <div className="flex items-center gap-2 text-[11px] font-mono uppercase tracking-[0.2em] text-cyan-600 dark:text-cyan-400">
                  <span className="w-1.5 h-1.5 rounded-full bg-cyan-500"/> Calculadora de plano
                </div>
                <h3 className="font-display font-bold text-[26px] tracking-tight mt-3">Quantos profissionais atendem na sua clínica?</h3>
                <p className="text-[13.5px] text-ink-500 dark:text-ink-400 mt-1.5">Conta médicos, fonoaudiólogos e qualquer pessoa que cria prontuário. Recepção e financeiro são sempre inclusos.</p>

                {/* Slider */}
                <div className="mt-7">
                  <div className="flex items-end justify-between mb-3">
                    <div className="text-[11px] font-mono uppercase tracking-wider text-ink-500 dark:text-ink-400">Profissionais</div>
                    <div className="text-[40px] font-display font-bold tabular leading-none text-ink-900 dark:text-white">{profs}</div>
                  </div>
                  <input
                    type="range" min="1" max="20" step="1" value={profs}
                    onChange={(e) => setProfs(parseInt(e.target.value, 10))}
                    className="cliniset-range w-full"
                    style={{ '--p': `${((profs - 1) / 19) * 100}%` }}
                  />
                  <div className="flex justify-between mt-1.5 text-[10px] font-mono text-ink-400 dark:text-ink-500">
                    <span>1</span><span>5</span><span>10</span><span>15</span><span>20+</span>
                  </div>
                </div>

                {/* Presets */}
                <div className="mt-5 flex flex-wrap gap-1.5">
                  {presets.map((p) => (
                    <button
                      key={p.n}
                      onClick={() => setProfs(p.n)}
                      className={`px-3 h-8 rounded-lg text-[12px] font-medium border transition ${profs === p.n ? 'bg-cyan-500 text-white border-cyan-500' : 'bg-ink-100 dark:bg-ink-800/60 text-ink-700 dark:text-ink-200 border-ink-200/60 dark:border-ink-700 hover:border-cyan-500/40'}`}
                    >
                      {p.label} <span className="opacity-60 ml-1">{p.n} prof</span>
                    </button>
                  ))}
                </div>

                {/* Breakdown */}
                <div className="mt-7 rounded-xl bg-ink-50 dark:bg-ink-950/60 border border-ink-200/60 dark:border-ink-800 p-4 text-[13px] space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-ink-600 dark:text-ink-300">Base do sistema</span>
                    <span className="tabular font-medium text-ink-900 dark:text-white">R$ {base.toLocaleString('pt-BR')}<span className="text-ink-500 text-[11px]">/mês</span></span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-ink-600 dark:text-ink-300">+ {additional} profissional{additional !== 1 ? 'is' : ''} adicional{additional !== 1 ? 'is' : ''}</span>
                    <span className="tabular font-medium text-ink-900 dark:text-white">R$ {additionalCost.toLocaleString('pt-BR')}<span className="text-ink-500 text-[11px]">/mês</span></span>
                  </div>
                  {additional > 0 && (
                    <div className="text-[11.5px] text-ink-500 dark:text-ink-400 -mt-1 pl-0.5">
                      faixa atual: <span className="text-cyan-600 dark:text-cyan-400 font-medium">R$ {currentMarginal}/prof</span> · média: R$ {Math.round(avgPerAdditional)}/prof
                    </div>
                  )}
                  <div className="h-px bg-ink-200/70 dark:bg-ink-800 my-1.5"/>
                  <div className="flex items-center justify-between">
                    <span className="text-ink-700 dark:text-ink-200 font-medium">Total mensal</span>
                    <span className="tabular font-display font-bold text-ink-900 dark:text-white text-[16px]">R$ {totalMonth.toLocaleString('pt-BR')}</span>
                  </div>
                </div>
              </div>

              {/* Right: result + CTA */}
              <div className="relative p-7 lg:p-10 bg-gradient-to-br from-cyan-500/5 via-transparent to-brand-500/5 flex flex-col">
                <div className="flex items-center gap-2 text-[11px] font-mono uppercase tracking-[0.2em] text-emerald-600 dark:text-emerald-400">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse-soft"/> Sua clínica paga
                </div>

                <div className="mt-3">
                  {annual && (
                    <div className="text-[14px] text-ink-400 dark:text-ink-500 mb-1.5">
                      <span className="line-through">de R$ {monthlyEquiv.toLocaleString('pt-BR')}/mês</span>
                      <span className="ml-2 text-emerald-600 dark:text-emerald-400 font-semibold">por</span>
                    </div>
                  )}
                  <div className="flex items-baseline gap-1">
                    <span className="text-ink-500 text-[18px] font-medium mr-1">R$</span>
                    <span className="font-display font-bold text-[64px] tracking-tight tabular leading-none">{totalMonth.toLocaleString('pt-BR')}</span>
                    <span className="text-ink-500 text-[14px] ml-1.5">/mês</span>
                  </div>
                  <div className="text-[12.5px] text-ink-500 dark:text-ink-400 mt-2.5">
                    {annual ? (
                      <>Cobrado <span className="font-medium text-ink-700 dark:text-ink-200">R$ {yearTotal.toLocaleString('pt-BR')}/ano</span> · você economiza <span className="text-emerald-600 dark:text-emerald-400 font-semibold">R$ {yearSaved.toLocaleString('pt-BR')}/ano</span></>
                    ) : (
                      <>Cobrado mensalmente · ou <span className="text-cyan-600 dark:text-cyan-400 font-medium">R$ {calc(profs, BASE_ANNUAL, TIERS_ANNUAL).toLocaleString('pt-BR')}/mês no anual</span></>
                    )}
                  </div>
                </div>

                {/* Per-professional efficiency */}
                <div className="mt-6 rounded-xl border border-ink-200/60 dark:border-ink-800 bg-white/60 dark:bg-ink-900/40 backdrop-blur-sm p-3.5 flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-cyan-500/15 text-cyan-500 flex items-center justify-center flex-shrink-0"><I.Users className="w-4.5 h-4.5"/></div>
                  <div className="flex-1">
                    <div className="text-[12.5px] text-ink-500 dark:text-ink-400">Custo por profissional</div>
                    <div className="text-[18px] font-display font-bold tabular text-ink-900 dark:text-white">R$ {Math.round(perProfEffective).toLocaleString('pt-BR')}<span className="text-ink-400 text-[11px] font-normal ml-1">/mês</span></div>
                  </div>
                  <div className="text-[10.5px] font-mono uppercase tracking-wider text-emerald-600 dark:text-emerald-400 text-right leading-tight">
                    {profs >= 5 ? 'preço de café' : profs >= 3 ? 'menos que 1 paciente' : '~ 1 consulta/mês'}
                  </div>
                </div>

                <Btn_b size="md" className="w-full mt-5">Quero CliniSet pra {profs} profissional{profs !== 1 ? 'is' : ''} <I.ArrowRight className="w-3.5 h-3.5"/></Btn_b>
                <div className="text-[11px] text-center text-ink-500 dark:text-ink-400 mt-2.5">12× sem juros no cartão · ou 1× boleto com 5% off · cancele quando quiser</div>

                {/* Tier ladder — volume discount visualization */}
                <div className="mt-6 rounded-xl border border-ink-200/60 dark:border-ink-800 bg-white/40 dark:bg-ink-900/30 p-4">
                  <div className="flex items-center justify-between mb-3">
                    <div className="text-[10.5px] font-mono uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">Desconto por volume</div>
                    <div className="text-[10.5px] font-mono text-emerald-600 dark:text-emerald-400">{annual ? 'preço anual' : 'preço mensal'}</div>
                  </div>
                  <div className="space-y-1.5">
                    {[
                      { label: '1º profissional',     range: [1, 1],   rate: base, isBase: true },
                      { label: '2º ao 5º',            range: [2, 5],   rate: tiers[0].rate },
                      { label: '6º ao 10º',           range: [6, 10],  rate: tiers[1].rate },
                      { label: '11º ao 20º',          range: [11, 20], rate: tiers[2].rate },
                      { label: '21º+',                range: [21, 999],rate: tiers[3].rate },
                    ].map((t, i) => {
                      const isActive = profs >= t.range[0] && profs <= t.range[1];
                      const isPast = profs > t.range[1];
                      return (
                        <div key={i} className={`flex items-center justify-between rounded-lg px-3 py-2 transition-all border ${isActive ? 'bg-cyan-500/10 border-cyan-500/30' : isPast ? 'bg-ink-100/50 dark:bg-ink-800/30 border-transparent opacity-60' : 'bg-transparent border-transparent opacity-50'}`}>
                          <div className="flex items-center gap-2">
                            <span className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-cyan-500' : isPast ? 'bg-emerald-500' : 'bg-ink-300 dark:bg-ink-700'}`}/>
                            <span className={`text-[12.5px] ${isActive ? 'text-ink-900 dark:text-white font-medium' : 'text-ink-600 dark:text-ink-300'}`}>{t.label}</span>
                          </div>
                          <div className={`text-[12.5px] tabular ${isActive ? 'text-cyan-600 dark:text-cyan-400 font-semibold' : 'text-ink-500 dark:text-ink-400'}`}>
                            {t.isBase ? `R$ ${t.rate} base` : `R$ ${t.rate}/prof`}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>

                {/* Decorative orbits */}
                <div className="absolute -bottom-12 -right-12 w-40 h-40 rounded-full bg-cyan-500/15 blur-3xl pointer-events-none"/>
                <div className="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-brand-500/15 blur-3xl pointer-events-none"/>
              </div>
            </div>

            {/* Bottom: what's included */}
            <div className="border-t border-ink-200/60 dark:border-ink-800 bg-ink-50/50 dark:bg-ink-950/40 px-7 lg:px-10 py-7">
              <div className="text-[11px] font-mono uppercase tracking-[0.2em] text-ink-500 dark:text-ink-400 mb-4">Tudo destravado · todos os planos</div>
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2.5">
                {features.map((f, i) => {
                  const Ic = I[f.icon] || I.Check;
                  return (
                    <div key={i} className="flex items-start gap-2.5 text-[13px] text-ink-700 dark:text-ink-200">
                      <Ic className="w-4 h-4 text-cyan-500 mt-0.5 flex-shrink-0"/>
                      <span>{f.t}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </R_b>

        {/* Add-ons / trust band */}
        <R_b delay={0.2}>
          <div className="mt-8 grid sm:grid-cols-3 gap-4 max-w-5xl mx-auto">
            {[
              { ic: 'Wallet', t: 'Sem cobrança escondida', s: 'Recepção, financeiro e administrador são sempre inclusos. Você paga só pelos profissionais que atendem.' },
              { ic: 'Shield', t: 'Migração inclusa no anual', s: 'Trazemos seus dados do sistema antigo sem custo no compromisso anual. R$ 997 única vez no mensal.' },
              { ic: 'CheckCircle', t: 'Cancele quando quiser', s: 'Sem multa, sem fidelidade. Seus dados saem em CSV ou PDF a qualquer momento.' },
            ].map((c, i) => {
              const Ic = I[c.ic];
              return (
                <div key={i} className="rounded-xl border border-ink-200/70 dark:border-ink-800 bg-white dark:bg-ink-900/40 p-4 flex items-start gap-3">
                  <div className="w-9 h-9 rounded-lg bg-cyan-500/10 text-cyan-500 flex items-center justify-center flex-shrink-0"><Ic className="w-4 h-4"/></div>
                  <div>
                    <div className="text-[13.5px] font-semibold text-ink-900 dark:text-white">{c.t}</div>
                    <div className="text-[12.5px] text-ink-500 dark:text-ink-400 mt-0.5 leading-relaxed">{c.s}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </R_b>

        {/* Add-ons */}
        <R_b delay={0.25}>
          <div className="mt-6 max-w-5xl mx-auto rounded-2xl border border-dashed border-ink-300/60 dark:border-ink-700/60 p-5 sm:p-6 flex flex-col sm:flex-row sm:items-center gap-4">
            <div className="flex-1">
              <div className="text-[11px] font-mono uppercase tracking-[0.2em] text-ink-500 dark:text-ink-400 mb-1">Add-ons opcionais</div>
              <div className="text-[14px] text-ink-700 dark:text-ink-200 leading-relaxed">
                <span className="font-semibold text-ink-900 dark:text-white">Multi-unidade</span> +R$ 197/mês por unidade extra · <span className="font-semibold text-ink-900 dark:text-white">IA Plus</span> (limites maiores) +R$ 97/mês por profissional · <span className="font-semibold text-ink-900 dark:text-white">Suporte prioritário 24/7</span> +R$ 297/mês · <span className="font-semibold text-ink-900 dark:text-white">Migração assistida</span> R$ 997 única vez (grátis no anual)
              </div>
            </div>
            <a href="#" className="text-[13px] font-medium text-cyan-600 dark:text-cyan-400 hover:underline whitespace-nowrap">Falar com vendas →</a>
          </div>
        </R_b>
      </C_b>
    </Sec_b>
  );
}

// ===== FAQ =====
function FAQ() {
  const items = [
    { q: 'Posso migrar do meu sistema atual?', a: 'Sim. Migramos prontuários, exames, receitas, faturas e anexos do seu sistema atual — com ambiente de teste dedicado e validação manual com sua equipe antes do go-live. Migração inclusa no plano Clínica e disponível como serviço nos demais.' },
    { q: 'A IA Clínica é segura? Os dados do paciente vazam?', a: 'Não. As chamadas de IA passam por um proxy auditável dentro do nosso ambiente. Nenhum dado é usado para treinar modelos externos, e cada interação fica registrada com timestamp, usuário e contexto. A IA pode ser desligada por usuário, papel ou clínica inteira a qualquer momento.' },
    { q: 'Funciona offline?', a: 'A interface principal é cloud, mas o app de prontuário tem modo de contingência: se cair a internet por algumas horas, você continua atendendo e os dados sincronizam automaticamente quando voltar. Para clínicas com internet instável recomendamos plano com link redundante.' },
    { q: 'Tem aplicativo para celular?', a: 'A interface é responsiva e funciona em qualquer celular ou tablet via navegador. Apps nativos iOS e Android (com biometria e notificações push) estão em beta para o plano Clínica e devem ser liberados gerais até dezembro de 2026.' },
    { q: 'Quanto tempo dura a migração?', a: 'Depende do volume da sua base e da quantidade de unidades. Apresentamos um cronograma com prazos no momento do diagnóstico, e você só vai ao ar com sua equipe treinada e os dados conferidos. Sem surpresa.' },
    { q: 'Vocês emitem NFS-e em qual cidade?', a: 'Atualmente homologados em São Paulo/SP, Belo Horizonte/MG, Curitiba/PR, Porto Alegre/RS, Salvador/BA e mais 15 capitais. Se sua cidade não está na lista, integramos sob demanda em até 30 dias — falamos com a sua prefeitura, você não precisa fazer nada.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Sec_b id="faq" className="py-24 lg:py-32">
      <C_b>
        <div className="grid lg:grid-cols-[0.9fr_1.1fr] gap-12 lg:gap-20">
          <R_b>
            <Eb_b>FAQ</Eb_b>
            <h2 className="font-display font-bold text-[clamp(2rem,4vw,3rem)] tracking-tight leading-[1.05] mt-3 text-pretty">Dúvidas que aparecem antes da gente fechar contrato.</h2>
            <p className="mt-4 text-[15px] text-ink-600 dark:text-ink-300">Não encontrou a sua? <a href="#" className="text-cyan-600 dark:text-cyan-400 underline underline-offset-2">Mande pra gente</a> — respondemos em até 1 dia útil.</p>
          </R_b>

          <div className="space-y-2">
            {items.map((it, i) => {
              const isOpen = i === open;
              return (
                <div key={i} className={`rounded-xl border transition-colors ${isOpen ? 'border-cyan-500/30 bg-cyan-500/5' : 'border-ink-200/70 dark:border-ink-800 bg-white dark:bg-ink-900/60'}`}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen} className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left">
                    <span className="text-[15px] font-medium text-ink-900 dark:text-white">{it.q}</span>
                    <span className={`w-6 h-6 rounded-md flex items-center justify-center transition-transform ${isOpen ? 'rotate-180 bg-cyan-500/15 text-cyan-500' : 'text-ink-500'}`}><I.ChevronDown className="w-4 h-4"/></span>
                  </button>
                  {AP_b && (
                    <AP_b initial={false}>
                      {isOpen && (
                        <mb_.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }} className="overflow-hidden">
                          <div className="px-5 pb-5 text-[14px] text-ink-600 dark:text-ink-300 leading-relaxed">{it.a}</div>
                        </mb_.div>
                      )}
                    </AP_b>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </C_b>
    </Sec_b>
  );
}

// ===== FINAL CTA =====
function FinalCTA() {
  return (
    <Sec_b className="py-24 lg:py-32">
      <C_b>
        <div className="relative rounded-3xl overflow-hidden bg-gradient-to-br from-brand-700 via-brand-700 to-brand-900 border border-brand-500/20 p-10 lg:p-20 text-center">
          {/* Decorative grid */}
          <div className="absolute inset-0 opacity-30">
            <svg className="w-full h-full" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid slice">
              <defs>
                <pattern id="dotgrid" x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
                  <circle cx="2" cy="2" r="1" fill="white" opacity="0.4"/>
                </pattern>
                <radialGradient id="cgrad" cx="50%" cy="50%">
                  <stop offset="0%" stopColor="#0EA5E9" stopOpacity="0.6"/>
                  <stop offset="100%" stopColor="#0EA5E9" stopOpacity="0"/>
                </radialGradient>
              </defs>
              <rect width="800" height="400" fill="url(#dotgrid)"/>
              <circle cx="400" cy="200" r="240" fill="url(#cgrad)"/>
            </svg>
          </div>
          <div className="absolute -top-40 -right-40 w-80 h-80 conic-glow blur-3xl"/>
          <div className="absolute -bottom-32 -left-32 w-64 h-64 bg-cyan-500/30 blur-3xl rounded-full"/>

          <div className="relative">
            <R_b>
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-cyan-400/30 bg-cyan-400/10">
                <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"/>
                <span className="eyebrow text-cyan-200">Pronto pra começar</span>
              </div>
            </R_b>
            <R_b delay={0.1}>
              <h2 className="font-display font-bold text-white text-[clamp(2.4rem,5.5vw,4.5rem)] tracking-[-0.045em] leading-[1.02] mt-6 max-w-4xl mx-auto text-pretty">
                Sua clínica merece um sistema feito em 2026, <span className="text-cyan-300">não em 1998.</span>
              </h2>
            </R_b>
            <R_b delay={0.2}>
              <p className="mt-6 text-[17px] text-cyan-100/80 max-w-xl mx-auto">Demonstração de 30 minutos com seu time. Migração inclusa no plano Performance. Cancele quando quiser, sem multa.</p>
            </R_b>
            <R_b delay={0.3}>
              <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
                <Btn_b size="lg" magnetic className="!h-13 !px-7 !text-[16px]">Agendar demonstração <I.ArrowRight className="w-4 h-4"/></Btn_b>
                <Btn_b variant="ghost" size="lg" magnetic className="!text-cyan-100 hover:!bg-white/10"><I.Phone className="w-3.5 h-3.5"/> Falar com vendas</Btn_b>
              </div>
            </R_b>
            <R_b delay={0.4}>
              <div className="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-[12px] text-cyan-100/60">
                {['LGPD compliant', 'CFM/CFFa válido', 'ICP-Brasil', 'ISO 27001', 'Suporte em PT-BR'].map(t => (
                  <span key={t} className="inline-flex items-center gap-1.5"><I.CheckCircle className="w-3.5 h-3.5"/>{t}</span>
                ))}
              </div>
            </R_b>
          </div>
        </div>
      </C_b>
    </Sec_b>
  );
}

// ===== FOOTER =====
function Footer() {
  const cols = [
    { t: 'Produto', items: ['Funcionalidades', 'Preços', 'Demonstração', 'Migração', 'Roadmap', 'Status'] },
    { t: 'Empresa', items: ['Sobre', 'Clientes', 'Carreiras', 'Imprensa', 'Contato'] },
    { t: 'Recursos', items: ['Documentação', 'API', 'Blog', 'Webinars', 'Comparativos'] },
    { t: 'Legal', items: ['Política de privacidade', 'Termos de uso', 'LGPD', 'Segurança', 'DPA'] },
  ];
  return (
    <footer className="border-t border-ink-200/60 dark:border-ink-800 pt-16 pb-10">
      <C_b>
        <div className="grid lg:grid-cols-[1.4fr_repeat(4,1fr)] gap-10">
          <div>
            <div className="flex items-center gap-2.5">
              <I.Logo className="w-7 h-7"/>
              <span className="font-display font-semibold text-[17px] tracking-tight">Cliniset<span className="text-cyan-500">.</span></span>
            </div>
            <p className="text-[13px] text-ink-500 dark:text-ink-400 mt-4 leading-relaxed max-w-xs">Sistema de gestão para clínicas de Fonoaudiologia e Otorrinolaringologia, com IA Clínica e migração 100% do sistema antigo.</p>
            <div className="mt-6">
              <div className="text-[11px] uppercase tracking-wider text-ink-500 mb-2">Receba atualizações</div>
              <form className="flex gap-2" onSubmit={(e) => e.preventDefault()}>
                <input type="email" placeholder="seu@email.com" className="flex-1 h-10 px-3 rounded-lg bg-white dark:bg-ink-900 border border-ink-200 dark:border-ink-700 text-[13px] focus:outline-none focus:border-cyan-500"/>
                <button className="h-10 px-3 rounded-lg bg-ink-900 dark:bg-white text-white dark:text-ink-900 text-[13px] font-medium">Inscrever</button>
              </form>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.t}>
              <div className="text-[11px] uppercase tracking-wider text-ink-500 dark:text-ink-400 font-bold">{c.t}</div>
              <ul className="mt-4 space-y-2.5">
                {c.items.map(it => <li key={it}><a href="#" className="text-[13.5px] text-ink-600 dark:text-ink-300 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors">{it}</a></li>)}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-14 pt-7 border-t border-ink-200/60 dark:border-ink-800 flex flex-wrap items-center justify-between gap-4 text-[12px] text-ink-500 dark:text-ink-400">
          <div>© 2026 Cliniset Sistemas LTDA · CNPJ 52.341.892/0001-73</div>
          <div className="flex flex-wrap gap-x-5 gap-y-2">
            <span className="inline-flex items-center gap-1.5"><I.Shield className="w-3.5 h-3.5 text-emerald-500"/> ICP-Brasil A1/A3</span>
            <span className="inline-flex items-center gap-1.5"><I.Lock className="w-3.5 h-3.5 text-emerald-500"/> LGPD</span>
            <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"/> Todos os sistemas operacionais</span>
          </div>
        </div>
      </C_b>
    </footer>
  );
}

window.SectionsBottom = { Pricing, FAQ, FinalCTA, Footer };