// LANDING — Dark mode v2 with purple/blue gradient + 3 hero variants
const Landing = ({ onNavigate, tweaks = {} }) => {
  const variant = tweaks.heroVariant || 'split';
  const showTerminal = tweaks.showTerminal !== false;
  return (
    <div style={{ background: 'var(--bg-base)', color: 'var(--text-1)', minHeight: '100vh' }}>
      <LandingHeader onNavigate={onNavigate}/>
      {variant === 'split' && <HeroSplit onNavigate={onNavigate} showTerminal={showTerminal}/>}
      {variant === 'centered' && <HeroCentered onNavigate={onNavigate} showTerminal={showTerminal}/>}
      {variant === 'video' && <HeroVideo onNavigate={onNavigate}/>}
      <IntegrationsStrip/>
      <ModulesSection/>
      <NumbersSection/>
      <CompareSection/>
      <PlansSection onNavigate={onNavigate}/>
      <FaqSection/>
      <CtaSection onNavigate={onNavigate}/>
      <LandingFooter/>
    </div>
  );
};

// ─── Header ───────────────────────────────
const LandingHeader = ({ onNavigate }) => {
  const [mobOpen, setMobOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  const links = [
    ['Módulos', '#modulos'],
    ['Comparativo', '#comparativo'],
    ['Números', '#numeros'],
    ['Onboarding', null, () => onNavigate('onboarding')],
    ['Integrações', '#integracoes'],
    ['Planos', '#planos'],
    ['FAQ', '#faq'],
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(7,6,15,.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(18px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-1)' : '1px solid transparent',
      transition: 'all .2s',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', height: 72, gap: 24 }}>
        <a href="#" onClick={e => { e.preventDefault(); onNavigate('landing'); }}>
          <BrandMark size={34} textSize={20}/>
        </a>
        <nav className="hide-mobile" style={{ display: 'flex', gap: 6, marginLeft: 24 }}>
          {links.map(([label, href, onClick]) => (
            <a key={label} href={href || '#'}
              onClick={onClick ? (e) => { e.preventDefault(); onClick(); } : undefined}
              style={{
                padding: '8px 14px', borderRadius: 8, fontSize: 14, fontWeight: 500,
                color: 'var(--text-2)', transition: 'color .15s',
              }}
              onMouseEnter={e => e.target.style.color = 'var(--text-0)'}
              onMouseLeave={e => e.target.style.color = 'var(--text-2)'}>
              {label}
            </a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
          <button onClick={() => onNavigate('login')} className="btn btn-ghost hide-mobile" style={{ fontSize: 14 }}>
            Entrar
          </button>
          <button onClick={() => onNavigate('login')} className="btn btn-primary">
            Acessar sistema
            <Icon name="arrowRight" size={14}/>
          </button>
          <button className="show-mobile" onClick={() => setMobOpen(!mobOpen)} style={{
            width: 40, height: 40, borderRadius: 10, border: '1px solid var(--line-2)',
            display: 'grid', placeItems: 'center', color: 'var(--text-1)',
          }}>
            <Icon name={mobOpen ? 'close' : 'menu'} size={18}/>
          </button>
        </div>
      </div>
      {mobOpen && (
        <div className="show-mobile" style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'var(--bg-glass-strong)', backdropFilter: 'blur(20px)',
          borderTop: '1px solid var(--line-2)', padding: 12,
        }}>
          {links.map(([label, href, onClick]) => (
            <a key={label} href={href || '#'}
              onClick={(e) => { if (onClick) { e.preventDefault(); onClick(); } setMobOpen(false); }}
              style={{ display: 'block', padding: '12px 8px', fontSize: 14, color: 'var(--text-1)' }}>
              {label}
            </a>
          ))}
        </div>
      )}
    </header>
  );
};

// ─── Hero variants ────────────────────────
const HeroBadge = () => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '7px 14px', borderRadius: 999,
    background: 'rgba(139,92,246,.1)', border: '1px solid rgba(139,92,246,.28)',
    fontSize: 13, fontWeight: 500, color: '#c4b5fd',
  }}>
    <span style={{
      display: 'inline-block', width: 7, height: 7, borderRadius: '50%',
      background: 'var(--green)', boxShadow: '0 0 10px var(--green-glow)',
    }}/>
    Sistema em produção · automatiza.scorp.digital
  </div>
);

const HeroHeadline = ({ align = 'left', size = 'large' }) => {
  const fs = size === 'huge' ? 'clamp(48px, 8vw, 92px)' : 'clamp(40px, 6.2vw, 76px)';
  return (
    <h1 style={{
      fontFamily: 'var(--font-display)',
      fontSize: fs,
      fontWeight: 800,
      lineHeight: 1.02,
      letterSpacing: '-0.035em',
      color: 'var(--text-0)',
      margin: 0,
      textAlign: align,
      textWrap: 'balance',
    }}>
      Dez sistemas, <span className="grad-text">um único login</span>.{' '}
      Sua <span style={{ fontStyle: 'italic', fontWeight: 400 }}>operação</span>, finalmente, em um lugar só.
    </h1>
  );
};

const HeroSub = ({ align = 'left' }) => (
  <p style={{
    fontSize: 'clamp(16px, 1.6vw, 19px)',
    lineHeight: 1.55, color: 'var(--text-2)',
    maxWidth: 560, margin: align === 'center' ? '0 auto' : 0,
    textAlign: align,
  }}>
    Automatiza é a plataforma operacional brasileira que substitui <strong style={{ color: 'var(--text-1)', fontWeight: 600 }}>CRM, ERP financeiro, folha CLT, PDV fiscal, help desk e marketing</strong> — com IA nativa e conformidade CLT 2026, NF-e, PIX e LGPD de série.
  </p>
);

const HeroCTAs = ({ onNavigate, align = 'left' }) => (
  <div style={{
    display: 'flex', gap: 12, flexWrap: 'wrap',
    justifyContent: align === 'center' ? 'center' : 'flex-start',
  }}>
    <button className="btn btn-primary" onClick={() => onNavigate('onboarding')} style={{ padding: '14px 22px', fontSize: 15 }}>
      Testar o sistema grátis <Icon name="arrowRight" size={15}/>
    </button>
    <button className="btn btn-outline" onClick={() => { document.getElementById('modulos')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} style={{ padding: '14px 22px', fontSize: 15 }}>
      Ver módulos
    </button>
  </div>
);

const HeroSeal = ({ align = 'left' }) => (
  <div style={{
    display: 'flex', gap: 20, flexWrap: 'wrap', fontSize: 13, color: 'var(--text-3)',
    justifyContent: align === 'center' ? 'center' : 'flex-start',
  }}>
    {['14 dias grátis', 'Sem cartão de crédito', 'Migração assistida'].map(t => (
      <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <Icon name="check" size={14} color="var(--green)"/> {t}
      </span>
    ))}
  </div>
);

// Variant A — Split
const HeroSplit = ({ onNavigate, showTerminal }) => (
  <section className="glow-bg" style={{ padding: '56px 0 100px', position: 'relative' }}>
    <div className="container" style={{
      display: 'grid', gridTemplateColumns: showTerminal ? 'minmax(0,1.1fr) minmax(0,.9fr)' : 'minmax(0,1fr)', gap: 56, alignItems: 'center', position: 'relative', zIndex: 1,
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
        <HeroBadge/>
        <HeroHeadline/>
        <HeroSub/>
        <HeroCTAs onNavigate={onNavigate}/>
        <HeroSeal/>
      </div>
      {showTerminal && (
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: '-40px -40px -40px -20px',
            background: 'radial-gradient(circle at 60% 40%, rgba(139,92,246,.22), transparent 60%)',
            filter: 'blur(40px)', zIndex: 0,
          }}/>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <TerminalWidget/>
          </div>
        </div>
      )}
    </div>
    <style>{`
      @media (max-width: 900px) {
        section.glow-bg > .container { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

// Variant B — Centered
const HeroCentered = ({ onNavigate, showTerminal }) => (
  <section className="glow-bg" style={{ padding: '80px 0 110px', position: 'relative' }}>
    <div className="container" style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 26, textAlign: 'center' }}>
      <HeroBadge/>
      <HeroHeadline align="center" size="huge"/>
      <HeroSub align="center"/>
      <HeroCTAs onNavigate={onNavigate} align="center"/>
      <HeroSeal align="center"/>
      {showTerminal && (
        <div style={{ width: '100%', maxWidth: 720, marginTop: 40 }}>
          <TerminalWidget/>
        </div>
      )}
    </div>
  </section>
);

// Variant C — With video-ish preview (dashboard mock)
const HeroVideo = ({ onNavigate }) => (
  <section className="glow-bg" style={{ padding: '64px 0 80px', position: 'relative' }}>
    <div className="container" style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 26, textAlign: 'center' }}>
      <HeroBadge/>
      <HeroHeadline align="center"/>
      <HeroSub align="center"/>
      <HeroCTAs onNavigate={onNavigate} align="center"/>
      <HeroSeal align="center"/>
      <div style={{ width: '100%', marginTop: 44, position: 'relative' }}>
        <DashboardPreview/>
        <button onClick={() => onNavigate('dashboard')} style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
          width: 88, height: 88, borderRadius: '50%', background: 'var(--brand-gradient)',
          display: 'grid', placeItems: 'center', boxShadow: '0 20px 60px -10px rgba(99,102,241,.7), 0 0 0 8px rgba(99,102,241,.12)',
          cursor: 'pointer',
        }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7L8 5z"/></svg>
        </button>
      </div>
    </div>
  </section>
);

const DashboardPreview = () => (
  <div style={{
    background: 'var(--bg-1)', borderRadius: 20, overflow: 'hidden',
    border: '1px solid var(--line-2)',
    boxShadow: '0 40px 100px -20px rgba(99,102,241,.35)',
    aspectRatio: '16 / 9', position: 'relative',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '14px 18px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)' }}>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }}/>
      <span style={{ marginLeft: 16, fontSize: 12, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>automatiza.app.br/dashboard</span>
    </div>
    <div style={{ padding: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {[
        { c: '#8b5cf6', icon: 'clock', v: '01:22', l: 'Tempo online' },
        { c: '#22c55e', icon: 'check', v: '0', l: 'Pendências' },
        { c: '#06b6d4', icon: 'calendar', v: '3', l: 'Eventos hoje' },
        { c: '#ef4444', icon: 'circleAlert', v: '2', l: 'Faturas vencidas' },
      ].map((k, i) => (
        <div key={i} style={{ background: 'var(--bg-2)', padding: 16, borderRadius: 12, border: '1px solid var(--line-1)', display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ width: 44, height: 44, borderRadius: 10, background: k.c + '22', color: k.c, display: 'grid', placeItems: 'center' }}>
            <Icon name={k.icon} size={20}/>
          </div>
          <div>
            <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--text-0)' }}>{k.v}</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{k.l}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ─── Integrations ─────────────────────────
const IntegrationsStrip = () => {
  const items = [
    { label: 'WhatsApp', icon: 'whatsapp', color: '#25d366' },
    { label: 'NF-e / NFC-e', icon: 'receipt', color: '#a78bfa' },
    { label: 'Simples Nacional', icon: 'shield', color: '#60a5fa' },
    { label: 'Google Maps', icon: 'map', color: '#f59e0b' },
    { label: 'PIX / Boleto', icon: 'pix', color: '#22d3ee' },
    { label: 'OFX bancário', icon: 'download', color: '#818cf8' },
    { label: 'CNPJ / CPF', icon: 'doc', color: '#c4b5fd' },
    { label: 'CLT · INSS · FGTS', icon: 'briefcase', color: '#f472b6' },
  ];
  return (
    <section id="integracoes" style={{ padding: '40px 0', borderTop: '1px solid var(--line-1)', borderBottom: '1px solid var(--line-1)' }}>
      <div className="container">
        <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '.12em', color: 'var(--text-3)', fontWeight: 600, marginBottom: 20 }}>
          Integrações brasileiras nativas
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 10 }}>
          {items.map(it => (
            <div key={it.label} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '12px 14px', background: 'var(--bg-1)',
              borderRadius: 10, border: '1px solid var(--line-1)',
            }}>
              <div style={{ width: 28, height: 28, borderRadius: 7, background: it.color + '22', color: it.color, display: 'grid', placeItems: 'center' }}>
                <Icon name={it.icon} size={15}/>
              </div>
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-2)' }}>{it.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Modules ─────────────────────────────
const ModulesSection = () => {
  const mods = [
    { icon: 'users', color: '#8b5cf6', title: 'CRM & Pipeline', desc: 'Kanban com drag & drop, score de churn por ML, prospecção via Google Maps e WhatsApp 1-clique.', bullets: ['Funil multicanal', 'Score de churn IA', 'Prospecção geo'] },
    { icon: 'wallet', color: '#22c55e', title: 'Financeiro', desc: 'Contas a pagar/receber, conciliação OFX, emissão de boleto PIX e relatórios DRE em tempo real.', bullets: ['PIX · Boleto', 'Conciliação OFX', 'DRE gerencial'] },
    { icon: 'briefcase', color: '#f59e0b', title: 'RH & Folha CLT', desc: 'Folha CLT 2026, férias, 13º, eSocial, admissão digital e banco de horas automatizado.', bullets: ['Folha CLT 2026', 'eSocial', 'Ponto digital'] },
    { icon: 'receipt', color: '#06b6d4', title: 'PDV Fiscal', desc: 'Frente de caixa com NFC-e, PIX, leitor de código de barras e sincronização com estoque.', bullets: ['NFC-e SEFAZ', 'PIX embutido', 'Multi-loja'] },
    { icon: 'message', color: '#f472b6', title: 'Suporte Multicanal', desc: 'Atendimento unificado: WhatsApp, e-mail, web e telefone. SLA, base de conhecimento e IA Claude.', bullets: ['WhatsApp Evolution', 'SLA & CSAT', 'Respostas IA'] },
    { icon: 'megaphone', color: '#ef4444', title: 'Marketing Multicanal', desc: 'Campanhas de e-mail, WhatsApp e SMS. Segmentação por comportamento e UTM tracker nativo.', bullets: ['Email · SMS · WA', 'Segmentação IA', 'UTM tracker'] },
    { icon: 'folder', color: '#818cf8', title: 'Projetos', desc: 'Gestão Gantt + Kanban, timesheet, aprovação de horas e integração com folha de pagamento.', bullets: ['Gantt + Kanban', 'Timesheet', 'Horas → folha'] },
    { icon: 'calc', color: '#a78bfa', title: 'Estimativas & Propostas', desc: 'Orçamentos com versões, aceite digital, conversão automática em projeto + contrato + fatura.', bullets: ['Versionamento', 'Aceite digital', 'Auto-fatura'] },
    { icon: 'cpu', color: '#60a5fa', title: 'Insights & IA', desc: 'IA Claude analisa toda sua operação: prevê churn, sugere ações, detecta anomalias financeiras.', bullets: ['Claude nativo', 'Detecção de fraude', 'Previsão de caixa'] },
  ];
  return (
    <section id="modulos" style={{ padding: '100px 0', position: 'relative' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Módulos"
          title={<>10 sistemas integrados.<br/><span className="grad-text">Nenhuma planilha no meio.</span></>}
          sub="Cada módulo conversa com os outros. Uma venda no CRM vira fatura no financeiro, comissão no RH e anúncio no marketing — automaticamente."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 16 }}>
          {mods.map(m => (
            <ModuleCard key={m.title} {...m}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const ModuleCard = ({ icon, color, title, desc, bullets }) => (
  <div style={{
    background: 'var(--bg-1)', border: '1px solid var(--line-1)',
    borderRadius: 16, padding: 24, transition: 'all .2s',
    position: 'relative', overflow: 'hidden',
  }}
  onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--line-3)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line-1)'; e.currentTarget.style.transform = 'none'; }}>
    <div style={{
      width: 46, height: 46, borderRadius: 11,
      background: `linear-gradient(135deg, ${color}33, ${color}15)`,
      color: color, display: 'grid', placeItems: 'center', marginBottom: 16,
      border: `1px solid ${color}30`,
    }}>
      <Icon name={icon} size={22}/>
    </div>
    <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)', marginBottom: 8 }}>{title}</div>
    <div style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.55, marginBottom: 16 }}>{desc}</div>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
      {bullets.map(b => (
        <span key={b} style={{
          fontSize: 11, padding: '4px 9px', borderRadius: 999,
          background: 'var(--bg-3)', color: 'var(--text-2)', border: '1px solid var(--line-2)',
          fontWeight: 500,
        }}>{b}</span>
      ))}
    </div>
  </div>
);

// ─── Section header ─────────────
const SectionHeader = ({ eyebrow, title, sub, align = 'center' }) => (
  <div style={{ textAlign: align, marginBottom: 56, maxWidth: align === 'center' ? 720 : 'none', marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>
    {eyebrow && <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '.14em', color: '#a78bfa', fontWeight: 600, marginBottom: 16 }}>{eyebrow}</div>}
    <h2 style={{
      fontSize: 'clamp(32px, 4.5vw, 52px)', fontWeight: 700,
      color: 'var(--text-0)', margin: 0, lineHeight: 1.08,
      letterSpacing: '-0.025em', textWrap: 'balance',
    }}>{title}</h2>
    {sub && <p style={{ fontSize: 17, color: 'var(--text-2)', lineHeight: 1.55, marginTop: 18, textWrap: 'pretty' }}>{sub}</p>}
  </div>
);

// ─── Numbers ────────────────────
const NumbersSection = () => {
  const stats = [
    { big: '10 → 1', label: 'Sistemas consolidados', sub: 'Em uma única base' },
    { big: '−68%', label: 'Custo mensal de SaaS', sub: 'Média dos clientes' },
    { big: '14h', label: 'Economizadas por semana', sub: 'Por time operacional' },
    { big: '99,9%', label: 'Uptime garantido', sub: 'SLA em contrato' },
  ];
  return (
    <section id="numeros" style={{ padding: '100px 0', borderTop: '1px solid var(--line-1)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 0%, rgba(139,92,246,.12), transparent 60%)' }}/>
      <div className="container" style={{ position: 'relative' }}>
        <SectionHeader
          eyebrow="Resultados reais"
          title={<>Números que <span className="grad-text">não mentem</span>.</>}
          sub="Dados de 800+ empresas brasileiras rodando Automatiza em produção há 12 meses."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
          {stats.map(s => (
            <div key={s.label} style={{
              padding: 28, background: 'var(--bg-1)',
              border: '1px solid var(--line-1)', borderRadius: 16,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -20, right: -20, width: 120, height: 120,
                background: 'radial-gradient(circle, rgba(139,92,246,.12), transparent 70%)',
              }}/>
              <div style={{
                fontSize: 'clamp(40px, 4vw, 56px)', fontWeight: 800,
                letterSpacing: '-0.03em', lineHeight: 1,
                background: 'var(--brand-gradient-text)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                marginBottom: 12,
              }}>{s.big}</div>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-0)' }}>{s.label}</div>
              <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Compare ─────────────
const CompareSection = () => {
  const rows = [
    ['CRM & funil de vendas', true, true, true, true, true, true],
    ['Financeiro + DRE', false, true, false, false, false, true],
    ['Folha CLT 2026 + eSocial', false, false, true, false, false, true],
    ['PDV fiscal NFC-e', false, false, false, true, false, true],
    ['Help desk multicanal', false, false, false, false, true, true],
    ['Marketing (WhatsApp · SMS)', false, true, false, false, false, true],
    ['IA nativa (Claude)', false, false, false, false, false, true],
    ['Conformidade LGPD + CLT', 'parcial', 'parcial', 'parcial', 'parcial', 'parcial', true],
  ];
  const cols = ['CRM isolado', 'ERP genérico', 'Folha isolada', 'PDV isolado', 'Help desk', <strong>Automatiza</strong>];
  return (
    <section id="comparativo" style={{ padding: '100px 0' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Comparativo"
          title={<>Um sistema. <span className="grad-text">Todas as funções</span>.</>}
          sub="Compare o Automatiza com os SaaS isolados que você paga hoje. Mesmas funcionalidades — sem o inferno de integrações."
        />
        <div style={{
          overflowX: 'auto', background: 'var(--bg-1)',
          border: '1px solid var(--line-1)', borderRadius: 16,
        }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 720 }}>
            <thead>
              <tr style={{ background: 'var(--bg-2)' }}>
                <th style={{ padding: '18px 20px', textAlign: 'left', fontSize: 13, color: 'var(--text-3)', fontWeight: 600 }}>Funcionalidade</th>
                {cols.map((c, i) => (
                  <th key={i} style={{
                    padding: '18px 14px', textAlign: 'center', fontSize: 13, fontWeight: 600,
                    color: i === cols.length - 1 ? '#c4b5fd' : 'var(--text-3)',
                    background: i === cols.length - 1 ? 'rgba(139,92,246,.08)' : 'transparent',
                  }}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, ri) => (
                <tr key={ri} style={{ borderTop: '1px solid var(--line-1)' }}>
                  <td style={{ padding: '16px 20px', fontSize: 14, fontWeight: 500, color: 'var(--text-1)' }}>{row[0]}</td>
                  {row.slice(1).map((v, ci) => {
                    const isAutomatiza = ci === cols.length - 1;
                    return (
                      <td key={ci} style={{
                        padding: '16px 14px', textAlign: 'center',
                        background: isAutomatiza ? 'rgba(139,92,246,.06)' : 'transparent',
                      }}>
                        <CompareCell v={v} isBrand={isAutomatiza}/>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

const CompareCell = ({ v, isBrand }) => {
  if (v === true) return <Icon name="check" size={18} color={isBrand ? '#a78bfa' : 'var(--green)'}/>;
  if (v === 'parcial') return <span style={{ fontSize: 12, color: 'var(--amber)', fontWeight: 500 }}>parcial</span>;
  return <span style={{ color: 'var(--text-5)' }}>—</span>;
};

// ─── Plans ─────────────
const PlansSection = ({ onNavigate }) => {
  const plans = [
    {
      name: 'Essencial',
      price: 149, desc: 'Para negócios pequenos começando a organizar operação.',
      features: ['Até 3 usuários', 'CRM + Financeiro + Suporte', 'NF-e ilimitada', 'Integração WhatsApp', 'Suporte por chat'],
    },
    {
      name: 'Profissional',
      price: 399, desc: 'Para equipes em crescimento que precisam de folha e marketing.',
      features: ['Até 15 usuários', 'Todos os módulos + RH/Folha CLT', 'PDV fiscal + NFC-e', 'Marketing multicanal', 'IA Claude (lead scoring)', 'Onboarding dedicado'],
      popular: true,
    },
    {
      name: 'Empresarial',
      price: 899, desc: 'Operação complexa com multi-loja, multi-CNPJ e API.',
      features: ['Usuários ilimitados', 'Multi-CNPJ + multi-loja', 'API REST + webhooks', 'SSO · SAML · SCIM', 'IA Claude ilimitada', 'CS dedicado + SLA 4h'],
    },
  ];
  return (
    <section id="planos" style={{ padding: '100px 0', borderTop: '1px solid var(--line-1)' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Planos"
          title={<>Preço justo. <span className="grad-text">Sem pegadinha</span>.</>}
          sub="Todos incluem 14 dias grátis, migração de dados assistida e conformidade fiscal brasileira."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20, maxWidth: 1100, margin: '0 auto' }}>
          {plans.map(p => <PlanCard key={p.name} plan={p} onNavigate={onNavigate}/>)}
        </div>
      </div>
    </section>
  );
};

const PlanCard = ({ plan, onNavigate }) => (
  <div style={{
    background: plan.popular ? 'linear-gradient(180deg, rgba(139,92,246,.08), rgba(59,130,246,.04))' : 'var(--bg-1)',
    border: plan.popular ? '1px solid rgba(139,92,246,.4)' : '1px solid var(--line-1)',
    borderRadius: 18, padding: 28, position: 'relative',
    boxShadow: plan.popular ? '0 20px 60px -20px rgba(139,92,246,.5), 0 0 0 1px rgba(139,92,246,.2)' : 'none',
  }}>
    {plan.popular && (
      <div style={{
        position: 'absolute', top: -12, right: 24,
        padding: '4px 12px', borderRadius: 999,
        background: 'var(--brand-gradient)', color: 'white',
        fontSize: 11, fontWeight: 600, letterSpacing: '.05em', textTransform: 'uppercase',
        boxShadow: '0 8px 20px -4px rgba(139,92,246,.6)',
      }}>Mais popular</div>
    )}
    <div style={{ fontSize: 14, fontWeight: 600, color: plan.popular ? '#c4b5fd' : 'var(--text-2)', marginBottom: 8 }}>{plan.name}</div>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 12 }}>
      <span style={{ fontSize: 16, color: 'var(--text-3)' }}>R$</span>
      <span style={{ fontSize: 48, fontWeight: 800, color: 'var(--text-0)', letterSpacing: '-0.03em', lineHeight: 1 }}>{plan.price}</span>
      <span style={{ fontSize: 14, color: 'var(--text-3)' }}>/mês</span>
    </div>
    <p style={{ fontSize: 13, color: 'var(--text-3)', lineHeight: 1.55, marginBottom: 20, minHeight: 40 }}>{plan.desc}</p>
    <button onClick={() => onNavigate('onboarding')}
      className={plan.popular ? 'btn btn-primary' : 'btn btn-outline'}
      style={{ width: '100%', padding: '12px', fontSize: 14 }}>
      {plan.popular ? 'Começar agora' : 'Escolher plano'}
    </button>
    <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {plan.features.map(f => (
        <div key={f} style={{ display: 'flex', gap: 10, fontSize: 13, color: 'var(--text-1)', lineHeight: 1.5 }}>
          <Icon name="check" size={15} color={plan.popular ? '#a78bfa' : 'var(--green)'} style={{ marginTop: 2, flexShrink: 0 }}/>
          {f}
        </div>
      ))}
    </div>
  </div>
);

// ─── FAQ ─────────────
const FaqSection = () => {
  const items = [
    { q: 'Como funciona o período grátis de 14 dias?', a: 'Você tem acesso total à plataforma sem cartão de crédito. Migramos seus dados (planilhas, OFX, contatos) no primeiro dia. Se não quiser continuar, é só encerrar — nada é cobrado.' },
    { q: 'O Automatiza emite NF-e e NFC-e de verdade?', a: 'Sim. Integramos direto com a SEFAZ de todos os estados. Configuramos seu Certificado Digital A1 durante o onboarding. Emissão em ambiente de produção no dia 3.' },
    { q: 'A folha de pagamento já está adaptada ao CLT 2026?', a: 'Sim. Nossa folha está homologada para CLT 2026, incluindo as novas regras de banco de horas e o eSocial S-2000/S-2200/S-2205. Suportamos INSS, FGTS, IRRF e contribuição assistencial.' },
    { q: 'Consigo migrar do sistema que uso hoje?', a: 'Migramos de Conta Azul, Omie, Bling, Tiny, Pipedrive, HubSpot, RD Station, Gupy e Ponto Secullum. CS dedicado durante a migração no plano Profissional e Empresarial.' },
    { q: 'Como a IA Claude funciona dentro da plataforma?', a: 'Claude analisa seu CRM, financeiro e suporte em tempo real. Sugere qual lead abordar primeiro, detecta faturas em risco, responde chamados de suporte automaticamente e gera resumos executivos.' },
    { q: 'É seguro? E a LGPD?', a: 'Dados armazenados em São Paulo (AWS SA-East-1). Criptografia AES-256 em repouso, TLS 1.3 em trânsito. DPO interno, relatório de impacto LGPD disponível em contrato. SOC 2 Type II em andamento.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: '100px 0' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Dúvidas frequentes"
          title={<>Perguntas <span className="grad-text">honestas</span>, respostas diretas.</>}
        />
        <div style={{ maxWidth: 840, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: 'var(--bg-1)', border: '1px solid var(--line-1)',
              borderRadius: 12, overflow: 'hidden',
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  padding: '18px 20px', textAlign: 'left',
                }}>
                <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-0)' }}>{it.q}</span>
                <div style={{
                  width: 28, height: 28, borderRadius: 7,
                  background: open === i ? 'var(--brand-gradient)' : 'var(--bg-3)',
                  color: open === i ? 'white' : 'var(--text-2)',
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                  transition: 'all .2s', transform: open === i ? 'rotate(180deg)' : 'none',
                }}>
                  <Icon name="chevronDown" size={14}/>
                </div>
              </button>
              {open === i && (
                <div style={{
                  padding: '0 20px 20px', fontSize: 14, lineHeight: 1.6,
                  color: 'var(--text-2)',
                }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Final CTA ─────────────
const CtaSection = ({ onNavigate }) => (
  <section style={{ padding: '80px 0' }}>
    <div className="container">
      <div style={{
        position: 'relative', overflow: 'hidden',
        background: 'linear-gradient(135deg, #1a1036 0%, #0d1f3d 100%)',
        borderRadius: 28, padding: 'clamp(40px, 6vw, 80px)',
        border: '1px solid rgba(139,92,246,.3)',
        textAlign: 'center',
      }}>
        <div style={{ position: 'absolute', top: -100, right: -100, width: 400, height: 400, background: 'radial-gradient(circle, rgba(139,92,246,.3), transparent 60%)', filter: 'blur(40px)' }}/>
        <div style={{ position: 'absolute', bottom: -100, left: -100, width: 400, height: 400, background: 'radial-gradient(circle, rgba(59,130,246,.3), transparent 60%)', filter: 'blur(40px)' }}/>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <h2 style={{
            fontSize: 'clamp(32px, 4.5vw, 52px)', fontWeight: 800,
            color: 'white', margin: 0, lineHeight: 1.05,
            letterSpacing: '-0.03em', textWrap: 'balance',
            maxWidth: 720, marginLeft: 'auto', marginRight: 'auto',
          }}>Pronto para fechar <span className="grad-text">dez contas de SaaS</span> e manter só uma?</h2>
          <p style={{ fontSize: 17, color: 'var(--text-2)', marginTop: 20, marginBottom: 32, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
            14 dias grátis. Migração assistida. Sem cartão. Sem fidelidade. Cancelamento em 1 clique.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => onNavigate('onboarding')} style={{ padding: '14px 24px', fontSize: 15 }}>
              Começar agora <Icon name="arrowRight" size={15}/>
            </button>
            <button className="btn btn-outline" onClick={() => onNavigate('login')} style={{ padding: '14px 24px', fontSize: 15, borderColor: 'rgba(255,255,255,.2)' }}>
              Já tenho conta
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── Footer ─────────────
const LandingFooter = () => (
  <footer style={{ padding: '60px 0 40px', borderTop: '1px solid var(--line-1)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 32, marginBottom: 40 }}>
        <div>
          <BrandMark size={32}/>
          <p style={{ fontSize: 13, color: 'var(--text-3)', lineHeight: 1.55, marginTop: 12, maxWidth: 240 }}>
            A plataforma operacional brasileira. CRM, ERP, folha, PDV, help desk e marketing — num único login.
          </p>
        </div>
        {[
          { h: 'Produto', links: ['Módulos', 'Planos', 'Integrações', 'Changelog'] },
          { h: 'Empresa', links: ['Sobre nós', 'Clientes', 'Blog', 'Carreiras'] },
          { h: 'Suporte', links: ['Central de ajuda', 'Status', 'Contato', 'API Docs'] },
          { h: 'Legal', links: ['Termos de uso', 'Privacidade · LGPD', 'Cookies', 'DPO'] },
        ].map(col => (
          <div key={col.h}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-0)', marginBottom: 14, textTransform: 'uppercase', letterSpacing: '.08em' }}>{col.h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.links.map(l => (
                <li key={l}><a href="#" style={{ fontSize: 13, color: 'var(--text-2)' }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 24, borderTop: '1px solid var(--line-1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, fontSize: 12, color: 'var(--text-4)' }}>
        <div>© 2026 Automatiza Tecnologia Ltda · CNPJ 00.000.000/0001-00 · São Paulo, SP</div>
        <div style={{ display: 'flex', gap: 16 }}>
          <span>🇧🇷 Português (BR)</span>
          <span>SOC 2 · LGPD · ISO 27001</span>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Landing });