/* maximiza.AI — page sections — v2 Resend-inspired */

/* ── Hero ─────────────────────────────────────── */
function Hero({ setPage }) {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { const t = setTimeout(() => setLoaded(true), 200); return () => clearTimeout(t); }, []);

  return (
    <section style={{ padding:'120px clamp(20px,4vw,48px) 64px', position:'relative', overflow:'hidden' }}>
      {/* Dot grid */}
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none',
        backgroundImage:`radial-gradient(circle, rgba(91,156,255,.10) 1px, transparent 1px)`,
        backgroundSize:'40px 40px',
        maskImage:'radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%)',
        WebkitMaskImage:'radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%)',
      }}/>
      <div style={{position:'absolute',top:'-10%',left:'50%',transform:'translateX(-50%)',width:800,height:600,borderRadius:'50%',background:'radial-gradient(circle, rgba(91,156,255,.10) 0%, transparent 60%)',pointerEvents:'none'}}/>

      <div style={{ maxWidth:860, margin:'0 auto', position:'relative', textAlign:'center' }}>
        {/* Animated hero logo mark */}
        <div style={{display:'flex',justifyContent:'center',marginBottom:32}}>
          <LogoMarkAnimated size={120}/>
        </div>
        {/* Eyebrow pill — glassmorphism */}
        <div style={{
          display:'inline-flex', alignItems:'center', gap:7, marginBottom:40,
          ...GLASS(),
          borderRadius:9999, padding:'5px 5px 5px 12px',
        }}>
          <span style={{width:6,height:6,borderRadius:'50%',background:C.teal,flexShrink:0,animation:'pulse-dot 2s infinite'}}/>
          <span style={{fontSize:12,color:C.fg2,fontFamily:FONT_SANS}}>Operação solo · Atendendo PMEs no Brasil</span>
          <span style={{fontSize:10,fontWeight:700,color:C.blue,background:'rgba(91,156,255,.1)',border:`1px solid ${C.borderB}`,borderRadius:9999,padding:'3px 9px',fontFamily:FONT_SANS}}>v1</span>
        </div>

        {/* Big gradient headline — word-by-word reveal */}
        <h1 style={{
          fontFamily: FONT_DISPLAY, fontSize:'clamp(44px,7vw,92px)',
          fontWeight:700, lineHeight:1.05, letterSpacing:'-0.04em',
          marginBottom:28, color:C.fg, textWrap:'balance',
          perspective:1000,
        }}>
          <WordReveal delayBase={200} stagger={55}>{[
            { t:'Da confusão à ' },
            { t:'clareza', gradient:`linear-gradient(120deg, ${C.blue} 0%, ${C.teal} 100%)` },
            { t:'. ' },
          ]}</WordReveal>
          <br/>
          <WordReveal delayBase={600} stagger={55}>{[
            { t:'Do achismo à ' },
            { t:'decisão', gradient:`linear-gradient(120deg, ${C.teal} 0%, ${C.blue4} 100%)` },
            { t:'.' },
          ]}</WordReveal>
        </h1>

        <p style={{fontSize:'clamp(16px,1.5vw,19px)', color:C.fg2, lineHeight:1.6, marginBottom:40, maxWidth:620, margin:'0 auto 40px', textWrap:'balance'}}>
          Empresas acumulam informação, documentos, dados e processos — mas sem estrutura, nada disso vira decisão. A maximiza.AI entra pelo problema visível com análise, automação e IA aplicada.
        </p>

        <div style={{display:'flex', gap:10, flexWrap:'wrap', marginBottom:72, justifyContent:'center'}}>
          <Btn onClick={() => setPage('contato')}>Conversa inicial gratuita →</Btn>
          <Btn variant="outline" onClick={() => {
            const el = document.getElementById('demos');
            const root = document.getElementById('scroll-root');
            if(el && root) root.scrollTo({top:el.offsetTop - 70, behavior:'smooth'});
          }}>Ver demos</Btn>
        </div>

        {/* Big framed mockup */}
        <div style={{position:'relative', maxWidth:900, margin:'0 auto'}}>
          <div style={{position:'absolute',inset:'-40px -20px',background:'radial-gradient(ellipse at 50% 50%, rgba(91,156,255,.18) 0%, transparent 60%)',pointerEvents:'none',filter:'blur(20px)'}}/>
          {/* Outer gradient border */}
          <div style={{
            position:'relative', padding:1, borderRadius:18,
            background:`linear-gradient(180deg, rgba(91,156,255,.35) 0%, rgba(255,255,255,.04) 50%, transparent 100%)`,
          }}>
            <DiagnosticMockup loaded={loaded}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function DiagnosticMockup({ loaded }) {
  const rows = [
    { label:'Informação centralizada', val:'23%', color:C.blue, critical:true },
    { label:'Processos documentados', val:'41%', color:C.blue4, critical:false },
    { label:'Indicadores usados',      val:'18%', color:C.teal, critical:true },
    { label:'Automações ativas',       val:'8%',  color:C.teal4,critical:false },
  ];
  const gaps = ['Dados espalhados em 4 sistemas sem integração','Relatórios gerados manualmente toda segunda','Decisões baseadas em percepção, não em números'];

  return (
    <div style={{
      background:C.bg3, borderRadius:17, border:`1px solid ${C.borderM}`,
      overflow:'hidden', fontFamily:FONT_SANS, boxShadow:'0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(91,156,255,.05)',
      textAlign:'left',
    }}>
      {/* Window chrome */}
      <div style={{background:C.bg4, borderBottom:`1px solid ${C.border}`, padding:'12px 18px', display:'flex', alignItems:'center', gap:8}}>
        <div style={{display:'flex',gap:5}}>
          {['#FF5F57','#FFBD2E','#28CA41'].map(c => <div key={c} style={{width:10,height:10,borderRadius:'50%',background:c}}/>)}
        </div>
        <span style={{fontSize:11,color:C.fg3,marginLeft:8,fontFamily:FONT_MONO}}>diagnóstico · Nexo Soluções · sprint/2sem</span>
        <div style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:5}}>
          <div style={{width:6,height:6,borderRadius:'50%',background:C.teal,animation:'pulse-dot 2s infinite'}}/>
          <span style={{fontSize:10,color:C.teal,fontWeight:700,letterSpacing:'.06em'}}>CONCLUÍDO</span>
        </div>
      </div>

      {/* Two-col body */}
      <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr'}}>
        {/* Left: KPIs + Bars */}
        <div style={{padding:'24px 26px', borderRight:`1px solid ${C.border}`}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, marginBottom:22}}>
            {[{v:'3',l:'Gargalos críticos',c:C.blue},{v:'7',l:'Fontes mapeadas',c:C.teal},{v:'11',l:'Ações prioritárias',c:C.blue4}].map((k,i) => (
              <div key={i} style={{background:C.bg4, borderRadius:10, border:`1px solid ${C.border}`, padding:'12px 10px', textAlign:'center'}}>
                <div style={{fontSize:22,fontWeight:800,color:k.c,fontFamily:FONT_DISPLAY,letterSpacing:'-0.03em'}}>{k.v}</div>
                <div style={{fontSize:9,color:C.fg3,marginTop:2,letterSpacing:'.03em'}}>{k.l}</div>
              </div>
            ))}
          </div>

          <div style={{fontSize:9,color:C.fg4,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:12,fontWeight:700}}>Maturidade por dimensão</div>
          {rows.map((r,i) => (
            <div key={i} style={{marginBottom:11}}>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:5}}>
                <span style={{fontSize:11,color:C.fg2,display:'flex',alignItems:'center',gap:5}}>
                  {r.critical && <span style={{width:5,height:5,borderRadius:'50%',background:'rgba(255,80,60,.8)',display:'inline-block'}}/>}
                  {r.label}
                </span>
                <span style={{fontSize:11,color:r.color,fontFamily:FONT_MONO,fontWeight:600}}>{r.val}</span>
              </div>
              <div style={{height:3,background:C.border,borderRadius:9999,overflow:'hidden'}}>
                <div style={{height:'100%',borderRadius:9999,background:`linear-gradient(90deg, ${r.color} 0%, ${r.color} 100%)`,width:loaded?r.val:'0%',transition:`width 1s cubic-bezier(.22,1,.36,1) ${.2+i*.12}s`, boxShadow:`0 0 8px ${r.color}66`}}/>
              </div>
            </div>
          ))}
        </div>

        {/* Right: Gargalos + Next */}
        <div style={{padding:'24px 26px', background:`linear-gradient(180deg, ${C.bg4} 0%, ${C.bg3} 100%)`}}>
          <div style={{fontSize:9,color:C.fg4,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:12,fontWeight:700}}>Gargalos identificados</div>
          {gaps.map((g,i) => (
            <div key={i} style={{display:'flex',gap:9,alignItems:'flex-start',marginBottom:10, padding:'8px 10px', background:'rgba(255,80,60,.04)', border:'1px solid rgba(255,80,60,.1)', borderRadius:7}}>
              <span style={{color:'rgba(255,110,90,.9)',fontSize:12,flexShrink:0,marginTop:0,fontWeight:700}}>!</span>
              <span style={{fontSize:11,color:C.fg2,lineHeight:1.5}}>{g}</span>
            </div>
          ))}

          <div style={{marginTop:18, padding:'12px 14px', background:'rgba(102,205,204,.06)', border:`1px solid ${C.borderT}`, borderRadius:8}}>
            <div style={{fontSize:9,color:C.teal,letterSpacing:'.1em',textTransform:'uppercase',fontWeight:700, marginBottom:5}}>Recomendação</div>
            <div style={{fontSize:12, color:C.fg2, lineHeight:1.5}}>Iniciar pelo <strong style={{color:C.fg}}>Dashboard executivo</strong> — maior ROI de clareza em 4 semanas.</div>
          </div>
        </div>
      </div>

      <div style={{padding:'10px 18px',background:C.bg4,borderTop:`1px solid ${C.border}`,fontSize:9,color:C.fg4,fontFamily:FONT_MONO,display:'flex',justifyContent:'space-between'}}>
        <span>maximiza.AI · amostra sintética</span><span>contato@maximiza.ai</span>
      </div>
    </div>
  );
}

/* ── Problem clusters ─ Resend-card style ───── */
function ProblemsSection() {
  const clusters = [
    { n:'01', icon:'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10', label:'Informação espalhada', desc:'Conhecimento disperso entre pastas, emails, WhatsApp e cabeça do dono. Ninguém sabe onde está o que importa.', color:C.blue },
    { n:'02', icon:'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7', label:'Operação opaca', desc:'A empresa funciona, mas ninguém sabe exatamente como. Cada área tem sua versão do processo.', color:C.blue },
    { n:'03', icon:'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z', label:'Dados sem leitura gerencial', desc:'Os dados existem, mas ninguém lê. Planilhas desatualizadas. Relatórios que ninguém abre. Decisões no achismo.', color:C.teal },
    { n:'04', icon:'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15', label:'Rotinas manuais', desc:'Tarefas repetitivas consomem tempo sem gerar valor. A mesma coisa, toda semana, do mesmo jeito.', color:C.teal },
    { n:'05', icon:'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9', label:'Falta de clareza institucional', desc:'Prospect abre o site e não entende o que a empresa faz. A comunicação não acompanhou o nível do serviço.', color:C.blue4 },
    { n:'06', icon:'M13 10V3L4 14h7v7l9-11h-7z', label:'Dificuldade analítica', desc:'A empresa tem base de dados, mas falta capacidade para extrair padrões, análises e decisões a partir deles.', color:C.blue4 },
  ];

  return (
    <section id="problemas" style={{padding:'120px clamp(20px,4vw,48px)', position:'relative'}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center', marginBottom:72, maxWidth:720, margin:'0 auto 72px'}}>
          <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(36px,5vw,60px)', fontWeight:700, color:C.fg, letterSpacing:'-0.035em', lineHeight:1.1, marginBottom:16, textWrap:'balance'}}>
            Seis problemas que{' '}
            <span style={{background:`linear-gradient(120deg,${C.blue},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>PMEs enfrentam</span>{' '}
            todos os dias.
          </h2>
          <p style={{fontSize:'clamp(15px,1.4vw,18px)', color:C.fg2, lineHeight:1.6, textWrap:'balance'}}>
            Não trabalhamos por setor. Trabalhamos pelo problema dominante. Identifique o seu.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
          {clusters.map((cl, i) => <ClusterCard key={i} {...cl} delay={i % 3}/>)}
        </div>
      </div>
    </section>
  );
}

function ClusterCard({ n, icon, label, desc, color, delay }) {
  const [h, setH] = useState(false);
  const rgb = color === C.teal ? '102,205,204' : color === C.blue4 ? '123,178,255' : '91,156,255';
  return (
    <TiltCard strength={4} className={`reveal reveal-d${delay+1}`}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        position:'relative',
        background:C.bg3,
        padding:'28px 26px',
        borderRadius:18,
        border:`1px solid ${h ? `rgba(${rgb},.25)` : C.border}`,
        transition:'background .2s, border-color .2s, transform .25s cubic-bezier(.22,1,.36,1)',
        cursor:'default',
        overflow:'hidden',
      }}>
      {/* gradient top border */}
      <div style={{
        position:'absolute', top:0, left:'50%', transform:'translateX(-50%)',
        width:'70%', height:1, pointerEvents:'none',
        background:`linear-gradient(90deg, transparent 0%, rgba(${rgb},.5) 50%, transparent 100%)`,
      }}/>

      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}}>
        <div style={{
          width:44, height:44, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center',
          background: h ? `rgba(${rgb},.12)` : `rgba(${rgb},.05)`,
          border:`1px solid rgba(${rgb},${h?.3:.15})`,
          transition:'all .2s',
        }}>
          <Icon d={icon} color={color} size={20}/>
        </div>
        <span style={{fontSize:11,fontWeight:700,color:C.fg4,letterSpacing:'.1em',fontFamily:FONT_MONO}}>{n}</span>
      </div>
      <h3 style={{fontFamily:FONT_DISPLAY, fontSize:18, fontWeight:700, color:C.fg, marginBottom:10, letterSpacing:'-0.015em'}}>{label}</h3>
      <p style={{fontSize:14, color:C.fg3, lineHeight:1.65}}>{desc}</p>
    </TiltCard>
  );
}

/* ── Tier 1 Offers — Integrate tonight style ── */
function OffersSection({ setPage }) {
  const [activeGroup, setActiveGroup] = useState(0);

  const groups = [
    {
      label:'Diagnóstico',
      iconD:'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
      color:C.blue,
      title:'Mapeamento em sprint fechado.',
      tag:'Para operação opaca',
      sub:'10–16h · 1 a 2 semanas · Entrega documentada',
      price:'a partir de R$ 1.800',
      incl:['Conversa de mergulho com quem executa','Leitura de materiais existentes','Mapa de gargalos e fontes de dados','Recomendação priorizada de próxima fase'],
      excl:['Implementação de nada','Blueprint técnico de grande projeto','Suporte recorrente'],
      cta:'Quero entender minha operação',
    },
    {
      label:'Dashboard',
      iconD:'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
      color:C.blue,
      title:'Indicadores em uma leitura que você vai usar.',
      tag:'Para dados sem leitura',
      sub:'16–28h · 2 a 4 semanas · Fontes que você já tem',
      price:'consulte valor',
      incl:['Consolidação das fontes leves disponíveis','Definição dos indicadores que importam','Painel gerencial enxuto e funcional','Alinhamento de leitura inicial incluso'],
      excl:['Engenharia de dados profunda','Múltiplas áreas complexas ao mesmo tempo','BI enterprise ou stack nova'],
      cta:'Quero visibilidade nos dados',
    },
    {
      label:'Relatório',
      iconD:'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4',
      color:C.teal,
      title:'Leitura periódica sem esforço manual.',
      tag:'Para quem prefere relatório a dashboard',
      sub:'13–19h · 1,5 a 3 semanas · Com opção recorrente',
      price:'consulte valor',
      incl:['Definição do modelo de relatório','Estrutura de indicadores e periodicidade','Canal de entrega configurado','Leitura inicial de uso inclusa'],
      excl:['Análise estratégica ilimitada','Engenharia de dados estrutural','Interpretações por demanda sem custo adicional'],
      cta:'Quero relatório automático',
    },
    {
      label:'Automação',
      iconD:'M13 10V3L4 14h7v7l9-11h-7z',
      color:C.teal,
      title:'Processo repetitivo que se move sozinho.',
      tag:'Para rotinas manuais',
      sub:'Escopo fechado · Documentação inclusa',
      price:'consulte valor',
      incl:['Mapeamento do processo atual','Identificação do que pode ser automatizado','Implementação do fluxo com ferramentas adequadas','Documentação para operação independente'],
      excl:['Automação de tudo de uma vez','Substituição de sistema core','Manutenção contínua sem contrato'],
      cta:'Quero automatizar esse processo',
    },
  ];

  const o = groups[activeGroup];

  return (
    <section id="ofertas" style={{padding:'96px clamp(20px,4vw,48px)', background:C.bg2, borderTop:`1px solid ${C.border}`, borderBottom:`1px solid ${C.border}`}}>
      <div style={{maxWidth:1060, margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center', marginBottom:56, maxWidth:700, margin:'0 auto 56px'}}>
          <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(36px,5vw,56px)', fontWeight:700, color:C.fg, letterSpacing:'-0.035em', lineHeight:1.1, marginBottom:14, textWrap:'balance'}}>
            Entre leve.{' '}
            <span style={{background:`linear-gradient(120deg,${C.blue},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>Expanda depois</span>.
          </h2>
          <p style={{fontSize:'clamp(15px,1.4vw,18px)', color:C.fg2, lineHeight:1.6, textWrap:'balance'}}>
            Quatro frentes principais. Escopo sempre fechado. Entramos pelo problema dominante — expandimos quando faz sentido.
          </p>
        </div>

        {/* Hint */}
        <div className="reveal" style={{textAlign:'center', marginBottom:18}}>
          <span style={{
            display:'inline-flex', alignItems:'center', gap:8,
            fontSize:12, color:C.fg3, fontFamily:FONT_SANS,
            padding:'6px 14px', borderRadius:9999,
            background:'rgba(91,156,255,.06)', border:`1px solid ${C.borderB}`,
          }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{color:C.blue}}>
              <path d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
            </svg>
            Clique em cada frente para conhecer
          </span>
        </div>

        {/* Tabs with icons — Resend-style */}
        <div className="reveal offer-tabs" style={{display:'flex', justifyContent:'center', gap:24, marginBottom:36, flexWrap:'wrap'}}>
          {groups.map((g,i) => {
            const active = activeGroup === i;
            const rgb = g.color === C.teal ? '102,205,204' : '91,156,255';
            return (
              <button key={i} onClick={() => setActiveGroup(i)}
                className={`offer-tab ${active ? 'active' : ''}`}
                aria-pressed={active}
                style={{
                  display:'flex', flexDirection:'column', alignItems:'center', gap:10,
                  background:'none', border:'none', cursor:'pointer', padding:'6px 10px 10px',
                  fontFamily:FONT_SANS, position:'relative',
                  color: active ? C.fg : C.fg3,
                  '--tab-rgb': rgb,
                }}>
                <div className="offer-tab-icon" style={{
                  width:62, height:54, borderRadius:14,
                  border:`1px solid ${active ? `rgba(${rgb},.35)` : C.border}`,
                  background: active ? `linear-gradient(180deg, rgba(${rgb},.1) 0%, rgba(${rgb},.02) 100%)` : 'rgba(255,255,255,.015)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  transition:'transform .28s cubic-bezier(.22,1.2,.36,1), border-color .2s, background .2s, box-shadow .2s',
                  animation: !active ? `tabNudge 3.6s ${i * .35}s ease-in-out infinite` : 'none',
                }}>
                  <Icon d={g.iconD} color={active ? g.color : C.fg3} size={22}/>
                </div>
                <span style={{fontSize:13, fontWeight:active?700:500, transition:'color .2s, font-weight .2s'}}>{g.label}</span>
                {/* Active underline */}
                <div style={{
                  position:'absolute', left:'50%', bottom:-4, transform:'translateX(-50%)',
                  height:2, width: active ? 28 : 0,
                  background:`linear-gradient(90deg, ${g.color}, ${g.color})`,
                  borderRadius:2,
                  transition:'width .3s cubic-bezier(.22,1,.36,1)',
                  boxShadow: active ? `0 0 12px ${g.color}` : 'none',
                }}/>
              </button>
            );
          })}
        </div>

        {/* Card */}
        <div className="reveal" style={{
          display:'grid', gridTemplateColumns:'1fr 1fr',
          borderRadius:18, overflow:'hidden',
          border:`1px solid ${C.borderM}`,
          background:C.bg3,
          boxShadow:'0 24px 80px rgba(0,0,0,.4)',
        }}>
          <div style={{padding:'36px 34px', borderRight:`1px solid ${C.border}`}}>
            <Pill color={o.color}>{o.tag}</Pill>
            <h3 style={{fontFamily:FONT_DISPLAY, fontSize:26, fontWeight:700, color:C.fg, lineHeight:1.2, marginTop:16, marginBottom:8, letterSpacing:'-0.02em'}}>{o.title}</h3>
            <p style={{fontSize:12,color:C.fg3,marginBottom:24,fontFamily:FONT_MONO}}>{o.sub}</p>
            <div style={{display:'flex',flexDirection:'column',gap:11,marginBottom:26}}>
              {o.incl.map((b,i) => (
                <div key={i} style={{display:'flex',gap:10,alignItems:'flex-start'}}>
                  <Icon d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" color={o.color} size={16}/>
                  <span style={{fontSize:14,color:C.fg2,lineHeight:1.5,fontFamily:FONT_SANS}}>{b}</span>
                </div>
              ))}
            </div>
            <div style={{
              background:`rgba(${o.color===C.teal?'102,205,204':'91,156,255'},.06)`,
              border:`1px solid ${o.color===C.teal?C.borderT:C.borderB}`,
              borderRadius:10, padding:'12px 16px', display:'flex', alignItems:'center', gap:10,
            }}>
              <span style={{fontSize:10,color:C.fg3,fontFamily:FONT_SANS,letterSpacing:'.05em',textTransform:'uppercase',fontWeight:700}}>Investimento</span>
              <span style={{fontSize:15,fontWeight:700,color:o.color,fontFamily:FONT_MONO}}>{o.price}</span>
            </div>
          </div>

          <div style={{padding:'36px 34px', background:`linear-gradient(180deg, ${C.bg4} 0%, ${C.bg3} 100%)`, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
            <div>
              <div style={{fontSize:10,fontWeight:700,color:C.fg4,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:14,fontFamily:FONT_SANS}}>O que não inclui</div>
              <div style={{display:'flex',flexDirection:'column',gap:10,marginBottom:28}}>
                {o.excl.map((w,i) => (
                  <div key={i} style={{display:'flex',gap:10,alignItems:'center'}}>
                    <span style={{color:C.fg4,fontSize:14}}>—</span>
                    <span style={{fontSize:14,color:C.fg3,fontFamily:FONT_SANS}}>{w}</span>
                  </div>
                ))}
              </div>

              <div style={{background:'rgba(255,255,255,.03)',border:`1px solid ${C.border}`,borderRadius:10,padding:'14px 16px',marginBottom:22}}>
                <div style={{fontSize:10,color:C.fg4,marginBottom:6,fontFamily:FONT_SANS,letterSpacing:'.1em',textTransform:'uppercase',fontWeight:700}}>Como começar</div>
                <div style={{fontSize:13,color:C.fg2,lineHeight:1.6,fontFamily:FONT_SANS}}>
                  Conversa inicial gratuita de 30 min para entender contexto, fit e próximos passos.
                </div>
              </div>
            </div>
            <Btn onClick={() => setPage('contato')} full>{o.cta} →</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Site offers (Express vs Autoridade) ─ Go beyond editing ── */
function SiteSection({ setPage }) {
  return (
    <section style={{padding:'120px clamp(20px,4vw,48px) 120px', background:C.bg}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div className="reveal" style={{marginBottom:64, maxWidth:720}}>
          <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(36px,5vw,56px)', fontWeight:700, color:C.fg, letterSpacing:'-0.035em', lineHeight:1.1, marginBottom:16, textWrap:'balance'}}>
            Dois caminhos{' '}
            <span style={{background:`linear-gradient(120deg,${C.teal},${C.blue})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>para presença digital</span>.
          </h2>
          <p style={{fontSize:'clamp(15px,1.4vw,18px)', color:C.fg2, lineHeight:1.6, textWrap:'balance', maxWidth:600}}>
            Você se identifica com um deles pela situação atual da empresa — não pelo preço.
          </p>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
          <SiteCard
            title="Site Express"
            tag="Para quem ainda não tem site"
            color={C.teal}
            price="a partir de R$ 800"
            desc="Empresa sem presença digital estruturada. Primeiro cartão digital. Escopo fechado, entrega em dias."
            incl={['Site institucional simples (1–3 páginas)','Integração com WhatsApp Business','Configuração de Google Meu Negócio','Domínio e hospedagem básica inclusa']}
            excl={['Copy premium customizado','Design totalmente original','Blog, loja ou funil de conversão']}
            sub="4–8h · 3 a 7 dias"
            mockup="express"
            onCta={() => setPage('contato')}
            ctaLabel="Quero meu primeiro site"
          />
          <SiteCard
            title="Site Institucional de Autoridade"
            tag="Para quem já tem site mas precisa subir o nível"
            color={C.blue}
            price="consulte valor"
            desc="Empresa com presença básica que precisa de clareza, coerência e autoridade. Projeto artesanal."
            incl={['Estrutura de mensagem para o nicho','Copy base e narrativa da empresa','Página institucional clara e coerente','CTA principal definido e implementado']}
            excl={['Máquina completa de captação','Performance marketing','CRM complexo ou múltiplas landing pages']}
            sub="26–40h · 3 a 5 semanas"
            mockup="autoridade"
            onCta={() => setPage('contato')}
            ctaLabel="Quero subir o nível do meu site"
          />
        </div>
      </div>
    </section>
  );
}

function SiteCard({ title, tag, color, price, desc, incl, excl, sub, mockup, onCta, ctaLabel }) {
  const isTeal = color === C.teal;
  const rgb = isTeal ? '102,205,204' : '91,156,255';
  return (
    <div className="reveal" style={{
      position:'relative',
      background:C.bg3, borderRadius:24, border:`1px solid ${C.border}`,
      overflow:'hidden', display:'flex', flexDirection:'column',
    }}>
      {/* Top gradient line */}
      <div style={{position:'absolute', top:0, left:'50%', transform:'translateX(-50%)', width:'70%', height:1, pointerEvents:'none', background:`linear-gradient(90deg, transparent, rgba(${rgb},.7), transparent)`}}/>

      {/* Mockup area */}
      <div style={{
        height:260, position:'relative', overflow:'hidden',
        background:`linear-gradient(180deg, ${C.bg4} 0%, ${C.bg3} 100%)`,
        borderBottom:`1px solid ${C.border}`,
      }}>
        <div style={{
          position:'absolute', inset:0,
          backgroundImage:`radial-gradient(circle at 50% 0%, rgba(${rgb},.12) 0%, transparent 60%)`,
        }}/>
        {mockup === 'express' ? <ExpressMockup/> : <AutoridadeMockup/>}
        {/* Fade bottom */}
        <div style={{position:'absolute', bottom:0, left:0, right:0, height:80, background:`linear-gradient(180deg, transparent, ${C.bg3} 100%)`, pointerEvents:'none'}}/>
      </div>

      <div style={{padding:'28px 28px 0'}}>
        <Pill color={color}>{tag}</Pill>
        <h3 style={{fontFamily:FONT_DISPLAY, fontSize:22, fontWeight:700, color:C.fg, marginTop:14, marginBottom:6, letterSpacing:'-0.02em'}}>{title}</h3>
        <p style={{fontSize:12,color:C.fg3,fontFamily:FONT_MONO,marginBottom:14}}>{sub}</p>
        <p style={{fontSize:14,color:C.fg2,lineHeight:1.65,marginBottom:22}}>{desc}</p>

        <div style={{display:'flex',flexDirection:'column',gap:9,marginBottom:18}}>
          {incl.map((b,i) => (
            <div key={i} style={{display:'flex',gap:9,alignItems:'flex-start'}}>
              <Icon d="M5 13l4 4L19 7" color={color} size={14} sw={2}/>
              <span style={{fontSize:13,color:C.fg2,lineHeight:1.5,fontFamily:FONT_SANS}}>{b}</span>
            </div>
          ))}
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:7,marginBottom:22}}>
          {excl.map((w,i) => (
            <div key={i} style={{display:'flex',gap:9,alignItems:'center'}}>
              <span style={{color:C.fg4,fontSize:13}}>—</span>
              <span style={{fontSize:13,color:C.fg4,fontFamily:FONT_SANS}}>{w}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{marginTop:'auto',padding:'20px 28px',borderTop:`1px solid ${C.border}`,display:'flex',alignItems:'center',justifyContent:'space-between',gap:12}}>
        <div>
          <div style={{fontSize:10,color:C.fg4,fontFamily:FONT_SANS,letterSpacing:'.1em',textTransform:'uppercase',fontWeight:700}}>Investimento</div>
          <div style={{fontSize:15,fontWeight:700,color,fontFamily:FONT_MONO}}>{price}</div>
        </div>
        <Btn variant={isTeal ? 'teal' : 'primary'} sm onClick={onCta}>{ctaLabel} →</Btn>
      </div>
    </div>
  );
}

function ExpressMockup() {
  return (
    <div style={{position:'absolute', top:28, left:32, right:16, borderRadius:10, background:'#fff', overflow:'hidden', boxShadow:'0 20px 60px rgba(0,0,0,.4)', border:'1px solid rgba(255,255,255,.1)', transform:'rotate(-2deg)'}}>
      <div style={{background:'#F5F5F5', padding:'8px 12px', display:'flex', gap:4, borderBottom:'1px solid #E0E0E0'}}>
        {['#FF5F57','#FFBD2E','#28CA41'].map(c=><div key={c} style={{width:7,height:7,borderRadius:'50%',background:c}}/>)}
      </div>
      <div style={{padding:'24px 20px', fontFamily:FONT_SANS}}>
        <div style={{fontSize:10, color:'#888', marginBottom:4, fontWeight:600}}>ÓTICA ALMEIDA</div>
        <div style={{fontSize:15, fontWeight:700, color:'#1A1A1A', marginBottom:6, letterSpacing:'-.01em'}}>Sua visão com atendimento de perto.</div>
        <div style={{fontSize:10, color:'#666', lineHeight:1.5, marginBottom:10}}>Rua das Palmeiras, 231 · Centro. Atendimento particular e convênios.</div>
        <div style={{display:'flex', gap:5}}>
          <div style={{background:'#25D366', color:'#fff', padding:'4px 9px', borderRadius:5, fontSize:9, fontWeight:600}}>WhatsApp</div>
          <div style={{background:'#fff', border:'1px solid #E0E0E0', color:'#1A1A1A', padding:'4px 9px', borderRadius:5, fontSize:9}}>Localização</div>
        </div>
      </div>
    </div>
  );
}

function AutoridadeMockup() {
  return (
    <div style={{position:'absolute', top:28, left:24, right:24, borderRadius:10, background:C.bg, overflow:'hidden', boxShadow:'0 20px 60px rgba(0,0,0,.5)', border:`1px solid ${C.borderM}`}}>
      <div style={{background:C.bg4, padding:'8px 12px', display:'flex', gap:4, borderBottom:`1px solid ${C.border}`}}>
        {['#FF5F57','#FFBD2E','#28CA41'].map(c=><div key={c} style={{width:7,height:7,borderRadius:'50%',background:c}}/>)}
      </div>
      <div style={{padding:'20px 22px', fontFamily:FONT_SANS}}>
        <div style={{fontSize:8, color:C.blue, marginBottom:6, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase'}}>Consultoria de processos</div>
        <div style={{fontFamily:FONT_DISPLAY, fontSize:17, fontWeight:700, color:C.fg, letterSpacing:'-.02em', lineHeight:1.1, marginBottom:8}}>Operação clara.<br/>Decisão rápida.</div>
        <div style={{fontSize:9, color:C.fg3, lineHeight:1.5, marginBottom:10}}>Mapeamos gargalos e estruturamos processos para empresas de serviços.</div>
        <div style={{display:'flex', gap:5}}>
          <div style={{background:C.blue, color:'#fff', padding:'4px 10px', borderRadius:4, fontSize:8, fontWeight:600}}>Conversa inicial</div>
          <div style={{background:'transparent', border:`1px solid ${C.border}`, color:C.fg3, padding:'4px 10px', borderRadius:4, fontSize:8}}>Como funciona</div>
        </div>
      </div>
    </div>
  );
}

/* ── Method ─ compact numbered cards ─ */
function MethodSection() {
  const steps = [
    { n:'01', title:'Conversa inicial', tag:'Gratuita · 30 min', body:'Entendemos o contexto e o problema dominante. Sem pitch. Sem proposta prematura.' },
    { n:'02', title:'Diagnóstico ou escopo', tag:'1 a 2 semanas', body:'Sprint fechado. Mapeamos gargalos, fontes e prioridades. Entrega documentada.' },
    { n:'03', title:'Proposta objetiva', tag:'Escopo claro', body:'O que inclui, o que não inclui, prazo e investimento. Sem surpresa.' },
    { n:'04', title:'Entrega com ajuste', tag:'Resultado visível', body:'Rodadas de feedback incluídas. A maximiza.AI expande depois, quando faz sentido.' },
  ];
  return (
    <section id="metodo" style={{padding:'120px clamp(20px,4vw,48px)', background:C.bg2, borderTop:`1px solid ${C.border}`, borderBottom:`1px solid ${C.border}`}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center',marginBottom:72, maxWidth:700, margin:'0 auto 72px'}}>
          <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(36px,5vw,56px)', fontWeight:700, color:C.fg, letterSpacing:'-0.035em', lineHeight:1.1, marginBottom:16, textWrap:'balance'}}>
            Do problema à entrega.{' '}
            <span style={{background:`linear-gradient(120deg,${C.teal},${C.blue})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>Sem surpresa</span>.
          </h2>
          <p style={{fontSize:'clamp(15px,1.4vw,18px)', color:C.fg2, lineHeight:1.6, textWrap:'balance'}}>
            Método simples. Documentado. Repetível.
          </p>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20}}>
          {steps.map((s,i) => (
            <div key={i} className={`reveal reveal-d${i%3+1}`} style={{
              position:'relative', background:C.bg3, padding:'28px 24px 32px', borderRadius:18, border:`1px solid ${C.border}`,
              overflow:'hidden',
            }}>
              <div style={{position:'absolute', top:0, left:'50%', transform:'translateX(-50%)', width:'70%', height:1, pointerEvents:'none', background:`linear-gradient(90deg, transparent, rgba(91,156,255,.4), transparent)`}}/>
              <div style={{fontSize:12,fontWeight:700,color:C.blue,fontFamily:FONT_MONO,marginBottom:16, letterSpacing:'.05em'}}>Passo {s.n}</div>
              <h3 style={{fontFamily:FONT_DISPLAY,fontSize:19,fontWeight:700,color:C.fg,marginBottom:10, letterSpacing:'-0.02em'}}>{s.title}</h3>
              <div style={{display:'inline-block',fontSize:10,fontWeight:700,color:C.teal,background:'rgba(102,205,204,.07)',border:`1px solid ${C.borderT}`,borderRadius:9999,padding:'3px 10px',letterSpacing:'.06em',textTransform:'uppercase',marginBottom:14,fontFamily:FONT_SANS}}>{s.tag}</div>
              <p style={{fontSize:13,color:C.fg3,lineHeight:1.7,fontFamily:FONT_SANS}}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Demos ─ big headline + tabs + framed ── */
function DemosSection({ setPage }) {
  const [activeDemo, setActiveDemo] = useState(0);
  const demos = [
    { label:'Diagnóstico', iconD:'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', tag:'Demo 1 — Explicador', desc:'Como funciona o diagnóstico de operação e informação da maximiza.AI.' },
    { label:'Dashboard', iconD:'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z', tag:'Demo 2 — Sample', desc:'Dashboard executivo com indicadores de empresa fictícia Nexo Soluções.' },
    { label:'Before/After Site', iconD:'M4 6h16M4 12h16M4 18h7', tag:'Demo 3 — Sample', desc:'Transformação de site institucional — empresa fictícia Prisma Consultoria.' },
  ];

  return (
    <section id="demos" style={{padding:'120px clamp(20px,4vw,48px)', background:C.bg}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center',marginBottom:56, maxWidth:720, margin:'0 auto 56px'}}>
          <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(36px,5vw,56px)', fontWeight:700, color:C.fg, letterSpacing:'-0.035em', lineHeight:1.1, marginBottom:16, textWrap:'balance'}}>
            O que entregamos,{' '}
            <span style={{background:`linear-gradient(120deg,${C.blue},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>em concreto</span>.
          </h2>
          <p style={{fontSize:'clamp(14px,1.2vw,15px)', color:C.fg3, lineHeight:1.6, fontStyle:'italic'}}>
            Amostras sintéticas — representativas do tipo de entrega, não de clientes reais.
          </p>
        </div>

        {/* Hint */}
        <div className="reveal" style={{textAlign:'center', marginBottom:18}}>
          <span style={{
            display:'inline-flex', alignItems:'center', gap:8,
            fontSize:12, color:C.fg3, fontFamily:FONT_SANS,
            padding:'6px 14px', borderRadius:9999,
            background:'rgba(91,156,255,.06)', border:`1px solid ${C.borderB}`,
          }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{color:C.blue}}>
              <path d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
            </svg>
            Clique em cada demo para ver a amostra
          </span>
        </div>

        {/* Resend-style icon tabs */}
        <div className="reveal offer-tabs" style={{display:'flex', justifyContent:'center', gap:24, marginBottom:36, flexWrap:'wrap'}}>
          {demos.map((d,i) => {
            const active = activeDemo === i;
            return (
              <button key={i} onClick={() => setActiveDemo(i)}
                className={`offer-tab ${active ? 'active' : ''}`}
                aria-pressed={active}
                style={{
                  display:'flex', flexDirection:'column', alignItems:'center', gap:10,
                  background:'none', border:'none', cursor:'pointer', padding:'6px 10px 10px',
                  fontFamily:FONT_SANS, position:'relative',
                  color: active ? C.fg : C.fg3,
                  '--tab-rgb': '91,156,255',
                }}>
                <div className="offer-tab-icon" style={{
                  width:62, height:54, borderRadius:14,
                  border:`1px solid ${active ? C.borderB : C.border}`,
                  background: active ? `linear-gradient(180deg, rgba(91,156,255,.1) 0%, rgba(91,156,255,.02) 100%)` : 'rgba(255,255,255,.015)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  transition:'transform .28s cubic-bezier(.22,1.2,.36,1), border-color .2s, background .2s, box-shadow .2s',
                  animation: !active ? `tabNudge 3.6s ${i * .35}s ease-in-out infinite` : 'none',
                }}>
                  <Icon d={d.iconD} color={active ? C.blue : C.fg3} size={22}/>
                </div>
                <span style={{fontSize:13, fontWeight:active?700:500, transition:'color .2s, font-weight .2s'}}>{d.label}</span>
                {/* Active underline */}
                <div style={{
                  position:'absolute', left:'50%', bottom:-4, transform:'translateX(-50%)',
                  height:2, width: active ? 28 : 0,
                  background:C.blue,
                  borderRadius:2,
                  transition:'width .3s cubic-bezier(.22,1,.36,1)',
                  boxShadow: active ? `0 0 12px ${C.blue}` : 'none',
                }}/>
              </button>
            );
          })}
        </div>

        {/* Synthetic label */}
        <div className="reveal" style={{
          display:'flex', alignItems:'center', gap:10,
          background:'rgba(255,180,0,.04)', border:'1px solid rgba(255,180,0,.14)',
          borderRadius:10, padding:'11px 18px', marginBottom:28, maxWidth:900, margin:'0 auto 28px',
        }}>
          <Icon d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" color="rgba(255,180,0,.7)" size={15}/>
          <span style={{fontSize:13,color:'rgba(255,200,100,.8)',fontFamily:FONT_SANS}}>
            <strong>{demos[activeDemo].tag}</strong> — {demos[activeDemo].desc} Dados e empresas fictícias.
          </span>
        </div>

        <div className="reveal" style={{maxWidth:1000, margin:'0 auto'}}>
          {activeDemo === 0 && <DemoDiagnostico/>}
          {activeDemo === 1 && <DemoDashboard/>}
          {activeDemo === 2 && <DemoBeforeAfter/>}
        </div>

        <div className="reveal" style={{textAlign:'center', marginTop:48}}>
          <Btn onClick={() => setPage('contato')}>Quero entender como isso se aplica à minha empresa →</Btn>
        </div>
      </div>
    </section>
  );
}

function DemoDiagnostico() {
  const steps = [
    { step:'1', title:'Conversa de mergulho', desc:'60–90 min com quem executa o dia a dia. Entendemos fluxos, ferramentas usadas e gargalos percebidos.' },
    { step:'2', title:'Leitura de materiais leves', desc:'Planilhas, exports, processos documentados. Sem necessidade de banco de dados estruturado.' },
    { step:'3', title:'Mapeamento de fontes e ferramentas', desc:'Inventário do que existe, onde está e como é usado. Base para priorização.' },
    { step:'4', title:'Identificação de gargalos', desc:'Os 3 maiores bloqueadores operacionais — identificados, nomeados e priorizados.' },
    { step:'5', title:'Documento de prioridades', desc:'Recomendação de próxima fase com escopo, responsável e critério de sucesso mínimo.' },
  ];
  return (
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
      <div style={{background:C.bg3,borderRadius:18,border:`1px solid ${C.border}`,padding:'30px 28px'}}>
        <SectionLabel>Como funciona o diagnóstico</SectionLabel>
        <div style={{display:'flex',flexDirection:'column',gap:0}}>
          {steps.map((s,i) => (
            <div key={i} style={{display:'flex',gap:14,position:'relative'}}>
              <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
                <div style={{width:28,height:28,borderRadius:'50%',background:'rgba(91,156,255,.1)',border:`1.5px solid ${C.borderB}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                  <span style={{fontSize:11,fontWeight:700,color:C.blue,fontFamily:FONT_SANS}}>{s.step}</span>
                </div>
                {i < steps.length-1 && <div style={{width:1,height:28,background:C.border,marginTop:3}}/>}
              </div>
              <div style={{paddingTop:5,paddingBottom:i<steps.length-1?24:0}}>
                <div style={{fontSize:14,fontWeight:600,color:C.fg,marginBottom:3,fontFamily:FONT_SANS}}>{s.title}</div>
                <div style={{fontSize:12,color:C.fg3,lineHeight:1.6,fontFamily:FONT_SANS}}>{s.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{background:C.bg3,borderRadius:18,border:`1px solid ${C.border}`,padding:'30px 28px'}}>
        <SectionLabel color={C.teal}>O que você recebe</SectionLabel>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          {[
            { icon:'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7', title:'Mapa de gargalos', desc:'Os 3 maiores bloqueadores com causa raiz identificada.' },
            { icon:'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10', title:'Mapa de fontes', desc:'Inventário das fontes de dados e ferramentas disponíveis.' },
            { icon:'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4', title:'Recomendação priorizada', desc:'Próxima frente de ação com escopo e critério de resultado.' },
            { icon:'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z', title:'Sprint de 2 semanas', desc:'Início e entrega previsíveis. Sem projeto aberto indefinido.' },
          ].map((item,i) => (
            <div key={i} style={{display:'flex',gap:12,alignItems:'flex-start',background:C.bg4,borderRadius:10,padding:'13px 14px',border:`1px solid ${C.border}`}}>
              <Icon d={item.icon} color={C.teal} size={17}/>
              <div>
                <div style={{fontSize:13,fontWeight:600,color:C.fg,marginBottom:2,fontFamily:FONT_SANS}}>{item.title}</div>
                <div style={{fontSize:12,color:C.fg3,lineHeight:1.5,fontFamily:FONT_SANS}}>{item.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DemoDashboard() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { const t = setTimeout(() => setLoaded(true), 300); return () => clearTimeout(t); }, []);

  const kpis = [
    { label:'Faturamento', n:247, fmt:(v)=>`R$ ${Math.round(v)}k`, sub:'mês atual', delta:'+8%', up:true },
    { label:'Ticket médio', n:4820, fmt:(v)=>`R$ ${Math.round(v).toLocaleString('pt-BR')}`, sub:'por projeto', delta:'+12%', up:true },
    { label:'Tempo de ciclo', n:18, fmt:(v)=>`${Math.round(v)} dias`, sub:'médio', delta:'-22%', up:false },
    { label:'Retrabalho', n:2.1, fmt:(v)=>`${v.toFixed(1).replace('.',',')}/sem`, sub:'ocorrências', delta:'-67%', up:false },
    { label:'Projetos ativos', n:12, fmt:(v)=>`${Math.round(v)}`, sub:'em andamento', delta:'+3', up:true },
    { label:'Satisfação', n:8.4, fmt:(v)=>`${v.toFixed(1).replace('.',',')}/10`, sub:'NPS interno', delta:'+0,8', up:true },
  ];

  const bars = [{ label:'Jan', v:68 },{ label:'Fev', v:74 },{ label:'Mar', v:71 },{ label:'Abr', v:82 },{ label:'Mai', v:79 },{ label:'Jun', v:91 }];

  return (
    <div style={{background:C.bg3,borderRadius:18,border:`1px solid ${C.borderM}`,overflow:'hidden',fontFamily:FONT_SANS, boxShadow:'0 24px 80px rgba(0,0,0,.5)'}}>
      <div style={{background:C.bg4,borderBottom:`1px solid ${C.border}`,padding:'11px 18px',display:'flex',alignItems:'center',gap:10}}>
        <div style={{display:'flex',gap:5}}>{['#FF5F57','#FFBD2E','#28CA41'].map(c=><div key={c} style={{width:10,height:10,borderRadius:'50%',background:c}}/>)}</div>
        <span style={{fontSize:11,color:C.fg3,fontFamily:FONT_MONO}}>dashboard executivo · Nexo Soluções · amostra sintética</span>
        <div style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:5}}>
          <div style={{width:6,height:6,borderRadius:'50%',background:C.teal,animation:'pulse-dot 2s infinite'}}/>
          <span style={{fontSize:10,color:C.teal,fontWeight:700}}>ATUALIZADO HOJE</span>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:1,background:C.border,borderBottom:`1px solid ${C.border}`}}>
        {kpis.map((k,i) => (
          <div key={i} style={{background:C.bg3,padding:'16px 12px',textAlign:'center'}}>
            <div style={{fontSize:10,color:C.fg4,marginBottom:5,letterSpacing:'.05em'}}>{k.label}</div>
            <div style={{fontSize:19,fontWeight:800,color:C.fg,fontFamily:FONT_DISPLAY,letterSpacing:'-0.02em',marginBottom:2}}>
              <CountUp to={k.n} duration={1600 + i*80} format={k.fmt}/>
            </div>
            <div style={{fontSize:9,color:C.fg4}}>{k.sub}</div>
            <div style={{fontSize:10,fontWeight:700,color:k.up?C.teal:'rgba(255,100,80,.7)',marginTop:5}}>{k.delta}</div>
          </div>
        ))}
      </div>

      <div style={{padding:'22px 24px'}}>
        <div style={{fontSize:10,color:C.fg4,letterSpacing:'.07em',textTransform:'uppercase',marginBottom:14, fontWeight:700}}>Faturamento mensal — 1º semestre 2026</div>
        <div style={{display:'flex',gap:10,alignItems:'flex-end',height:100}}>
          {bars.map((b,i) => (
            <div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:6}}>
              <div style={{width:'100%',background:C.border,borderRadius:4,overflow:'hidden',height:80}}>
                <div style={{width:'100%',background:`linear-gradient(180deg,${C.blue4} 0%,${C.blue6} 100%)`,borderRadius:4,height:loaded?`${b.v}%`:'0%',transition:`height .8s cubic-bezier(.22,1,.36,1) ${.1+i*.1}s`,marginTop:'auto', boxShadow:'0 0 16px rgba(91,156,255,.3)'}}/>
              </div>
              <span style={{fontSize:10,color:C.fg4}}>{b.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{padding:'0 24px 22px',display:'flex',flexDirection:'column',gap:8}}>
        <div style={{fontSize:10,color:C.fg4,letterSpacing:'.07em',textTransform:'uppercase',marginBottom:4,fontWeight:700}}>Alertas</div>
        {[
          { msg:'3 projetos com ciclo acima de 25 dias — revisar pipeline', c:'rgba(255,160,30,.7)' },
          { msg:'Retrabalho em projetos de implantação acima da média', c:'rgba(255,80,60,.7)' },
          { msg:'Ticket médio crescendo 12% — validar precificação', c:C.teal },
        ].map((a,i) => (
          <div key={i} style={{display:'flex',gap:8,alignItems:'center',fontSize:12,color:C.fg2,background:C.bg4,borderRadius:8,padding:'9px 13px',border:`1px solid ${C.border}`}}>
            <span style={{width:6,height:6,borderRadius:'50%',background:a.c,flexShrink:0}}/>
            {a.msg}
          </div>
        ))}
      </div>
    </div>
  );
}

function DemoBeforeAfter() {
  const [show, setShow] = useState('after');
  return (
    <div>
      <div style={{display:'flex',gap:6,marginBottom:24,justifyContent:'center'}}>
        {['before','after'].map(v => (
          <button key={v} onClick={() => setShow(v)} style={{
            fontFamily:FONT_SANS, fontWeight:600, fontSize:13, padding:'7px 20px', borderRadius:9999, cursor:'pointer', transition:'all .15s',
            background: show===v ? (v==='after' ? 'rgba(102,205,204,.12)' : 'rgba(255,80,60,.08)') : 'transparent',
            color: show===v ? (v==='after' ? C.teal : 'rgba(255,100,80,.7)') : C.fg3,
            border:`1.5px solid ${show===v ? (v==='after' ? C.borderT : 'rgba(255,80,60,.2)') : C.border}`,
          }}>{v === 'before' ? 'Antes' : 'Depois'}</button>
        ))}
      </div>

      <div style={{background:C.bg3,borderRadius:18,border:`1px solid ${C.borderM}`,overflow:'hidden', boxShadow:'0 24px 80px rgba(0,0,0,.5)'}}>
        <div style={{background:C.bg4,borderBottom:`1px solid ${C.border}`,padding:'10px 16px',display:'flex',alignItems:'center',gap:10}}>
          <div style={{display:'flex',gap:5}}>{['#FF5F57','#FFBD2E','#28CA41'].map(c=><div key={c} style={{width:9,height:9,borderRadius:'50%',background:c}}/>)}</div>
          <div style={{flex:1,background:C.border,borderRadius:5,padding:'4px 12px',fontSize:11,color:C.fg4,fontFamily:FONT_MONO}}>
            {show==='before' ? 'prismaconsultoria.com.br · versão antiga' : 'prismaconsultoria.com.br · versão nova'}
          </div>
          <span style={{fontSize:9,color:show==='before'?'rgba(255,100,80,.6)':C.teal,fontWeight:700,fontFamily:FONT_SANS}}>{show==='before'?'ANTES':'DEPOIS'}</span>
        </div>

        {show === 'before' ? (
          <div style={{padding:'36px 40px 32px',fontFamily:FONT_SANS}}>
            <div style={{background:'rgba(255,80,60,.04)',border:'1px solid rgba(255,80,60,.12)',borderRadius:9,padding:'10px 14px',marginBottom:24,fontSize:11,color:'rgba(255,100,80,.7)'}}>
              Site original da Prisma Consultoria — empresa fictícia. Exemplo sintético.
            </div>
            <div style={{textAlign:'center',padding:'20px 0 16px'}}>
              <div style={{fontSize:11,color:C.fg4,letterSpacing:'.06em',marginBottom:8}}>PRISMA CONSULTORIA LTDA</div>
              <div style={{fontSize:28,fontWeight:400,color:C.fg3,fontFamily:FONT_SANS,marginBottom:6}}>Soluções em gestão para sua empresa</div>
              <div style={{fontSize:13,color:C.fg4,lineHeight:1.8,maxWidth:480,margin:'0 auto 20px'}}>A Prisma Consultoria oferece serviços completos de consultoria em gestão empresarial, estratégia, processos e muito mais. Nossa equipe está pronta para ajudar.</div>
              <div style={{background:C.bg4,color:C.fg4,padding:'10px 22px',borderRadius:6,fontSize:13,display:'inline-block',border:`1px solid ${C.border}`}}>Fale conosco</div>
            </div>
            {['Sobre nós','Serviços','Equipe','Contato'].map(l => (
              <div key={l} style={{display:'inline-block',marginRight:16,fontSize:12,color:C.fg4,borderBottom:`1px solid ${C.border}`,paddingBottom:2}}>{l}</div>
            ))}
            <div style={{marginTop:28,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
              {['Gestão estratégica','Processos','Finanças'].map(s => (
                <div key={s} style={{background:C.bg4,borderRadius:7,padding:'18px 14px',border:`1px solid ${C.border}`,textAlign:'center'}}>
                  <div style={{fontSize:12,color:C.fg3}}>{s}</div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div style={{padding:'36px 40px 32px',fontFamily:FONT_SANS}}>
            <div style={{background:'rgba(102,205,204,.05)',border:'1px solid rgba(102,205,204,.15)',borderRadius:9,padding:'10px 14px',marginBottom:24,fontSize:11,color:C.teal}}>
              Versão reprojetada pela maximiza.AI — empresa fictícia Prisma Consultoria. Exemplo sintético.
            </div>
            <div style={{marginBottom:24}}>
              <div style={{fontSize:11,fontWeight:700,color:C.blue,letterSpacing:'.08em',textTransform:'uppercase',marginBottom:10}}>Consultoria de processos para empresas de serviços</div>
              <div style={{fontSize:32,fontWeight:800,color:C.fg,fontFamily:FONT_DISPLAY,letterSpacing:'-0.025em',lineHeight:1.1,marginBottom:12,textWrap:'balance'}}>
                Sua operação mais clara.{' '}
                <span style={{background:`linear-gradient(120deg,${C.blue},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>Suas decisões mais rápidas.</span>
              </div>
              <p style={{fontSize:14,color:C.fg2,lineHeight:1.7,maxWidth:520,marginBottom:18}}>
                A Prisma mapeia gargalos, estrutura processos e entrega visibilidade operacional para empresas de serviços com 10 a 80 funcionários.
              </p>
              <div style={{display:'flex',gap:10}}>
                <div style={{background:C.blue,color:'#fff',padding:'10px 20px',borderRadius:8,fontSize:13,fontWeight:600}}>Conversa inicial gratuita →</div>
                <div style={{background:'transparent',color:C.fg3,padding:'10px 18px',borderRadius:8,fontSize:13,border:`1px solid ${C.border}`}}>Como funciona</div>
              </div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>
              {[
                { label:'Diagnóstico operacional', desc:'Sprint de 2 semanas. Mapa de gargalos e recomendação.' },
                { label:'Dashboard de gestão', desc:'Indicadores que importam. Leitura em 2 minutos.' },
                { label:'Organização interna', desc:'Processos documentados. Equipe alinhada.' },
              ].map(s => (
                <div key={s.label} style={{background:C.bg4,borderRadius:10,padding:'18px 16px',border:`1px solid ${C.borderB}`}}>
                  <div style={{fontSize:13,fontWeight:600,color:C.fg,marginBottom:6}}>{s.label}</div>
                  <div style={{fontSize:11,color:C.fg3,lineHeight:1.5}}>{s.desc}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ── Tier 2 ──────────────────────────────────── */
function Tier2Section({ setPage }) {
  const offers = [
    { icon:'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z', title:'Copiloto de documentos', desc:'Corpus documental configurado para consulta interna. Para quem tem conhecimento espalhado e precisa centralizá-lo.', price:'R$ 4.500 – R$ 10.000', color:C.blue },
    { icon:'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10', title:'Central de conhecimento', desc:'Taxonomia inicial, organização de materiais e padrão de estrutura e nomeação. Base de conhecimento funcional.', price:'R$ 3.000 – R$ 7.000', color:C.blue4 },
    { icon:'M13 10V3L4 14h7v7l9-11h-7z', title:'Automação de backoffice', desc:'Um fluxo pontual ou grupo pequeno de fluxos relacionados. Regra de negócio delimitada, validação operacional inclusa.', price:'R$ 4.000 – R$ 8.000', color:C.teal },
  ];
  return (
    <section style={{padding:'120px clamp(20px,4vw,48px)', background:C.bg2, borderTop:`1px solid ${C.border}`, borderBottom:`1px solid ${C.border}`}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div className="reveal" style={{marginBottom:52, maxWidth:720}}>
          <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(32px,4.5vw,48px)', fontWeight:700, color:C.fg, letterSpacing:'-0.03em', lineHeight:1.1, marginBottom:14, textWrap:'balance'}}>
            Para quando a empresa precisa{' '}
            <span style={{background:`linear-gradient(120deg,${C.blue4},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>ir mais fundo</span>.
          </h2>
          <p style={{fontSize:'clamp(14px,1.2vw,17px)', color:C.fg2, lineHeight:1.6}}>
            Outras formas de trabalhar com a maximiza.AI — após a primeira entrega Tier 1.
          </p>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:20}}>
          {offers.map((o,i) => {
            const rgb = o.color === C.teal ? '102,205,204' : o.color === C.blue4 ? '123,178,255' : '91,156,255';
            return (
              <div key={i} className={`reveal reveal-d${i%3+1}`} style={{
                position:'relative', background:C.bg3, borderRadius:18, border:`1px solid ${C.border}`, padding:'28px 26px', overflow:'hidden',
              }}>
                <div style={{position:'absolute', top:0, left:'50%', transform:'translateX(-50%)', width:'70%', height:1, pointerEvents:'none', background:`linear-gradient(90deg, transparent, rgba(${rgb},.5), transparent)`}}/>
                <div style={{width:44, height:44, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center', background:`rgba(${rgb},.08)`, border:`1px solid rgba(${rgb},.2)`, marginBottom:16}}>
                  <Icon d={o.icon} color={o.color} size={20}/>
                </div>
                <h3 style={{fontFamily:FONT_DISPLAY,fontSize:17,fontWeight:700,color:C.fg,margin:'0 0 8px', letterSpacing:'-0.015em'}}>{o.title}</h3>
                <p style={{fontSize:13,color:C.fg3,lineHeight:1.65,marginBottom:16}}>{o.desc}</p>
                <div style={{fontSize:12,fontWeight:600,color:o.color,fontFamily:FONT_MONO}}>{o.price}</div>
              </div>
            );
          })}
        </div>
        <div className="reveal" style={{marginTop:28,padding:'22px 26px',background:C.bg3,borderRadius:14,border:`1px solid ${C.border}`,fontSize:14,color:C.fg3,lineHeight:1.7}}>
          <strong style={{color:C.fg}}>Expansões estruturantes</strong> — para clientes que já fizeram uma entrega Tier 1 e precisam ir mais fundo: organização operacional (R$ 8k–18k), engenharia de dados (R$ 10k–22k), inteligência e IA aplicada (R$ 8k–18k). Conversa inicial antes de qualquer proposta.
        </div>
      </div>
    </section>
  );
}

/* ── FAQ ──────────────────────────────────────── */
function FAQSection() {
  const faqs = [
    { q:'Quanto custa?', a:'Depende da oferta. O Site Express começa a partir de R$ 800. O Diagnóstico a partir de R$ 1.800. Para Dashboard, Relatório, Site Autoridade e Tier 2, o valor depende do escopo — conversa inicial gratuita para entender o contexto antes de qualquer proposta.' },
    { q:'Quanto tempo demora?', a:'O Site Express sai em 3 a 7 dias. O Diagnóstico em 1 a 2 semanas. Dashboard e Relatório em 2 a 4 semanas. Site Autoridade em 3 a 5 semanas. Algumas entregas enxutas podem sair em dias, dependendo do escopo.' },
    { q:'Preciso ter dados estruturados para contratar?', a:'Não. A maximiza.AI entra pelo que você já tem — planilhas, exports, documentos, conversas. Estruturamos a partir do estado atual, sem exigir stack nova ou banco de dados.' },
    { q:'Vocês atendem qual setor?', a:'A maximiza.AI não trabalha por setor — trabalha pelo problema dominante. Se a dor da empresa se encaixa nos seis clusters (informação espalhada, operação opaca, dados sem leitura, rotinas manuais, falta de presença digital, dificuldade analítica), há fit.' },
    { q:'Quantos projetos conseguem tocar ao mesmo tempo?', a:'A maximiza.AI é uma operação solo. Isso significa escopo claro, entrega direta e sem intermediários. O número de projetos simultâneos é limitado por design — para manter qualidade de entrega.' },
    { q:'O que acontece depois da primeira entrega?', a:'Depende do que foi encontrado. A primeira entrega (diagnóstico, dashboard ou site) revela o próximo passo natural. Expandimos quando faz sentido — sem empurrar projeto grande sem evidência.' },
  ];
  const [open, setOpen] = useState(null);
  return (
    <section style={{padding:'120px clamp(20px,4vw,48px)', background:C.bg}}>
      <div style={{maxWidth:820,margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center',marginBottom:56}}>
          <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(32px,4.5vw,48px)', fontWeight:700, color:C.fg, letterSpacing:'-0.03em', lineHeight:1.1, textWrap:'balance'}}>
            O que você{' '}
            <span style={{background:`linear-gradient(120deg,${C.blue},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>provavelmente quer saber</span>.
          </h2>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {faqs.map((f,i) => (
            <div key={i} className="reveal" style={{background: open===i ? C.bg3 : C.bg2, border:`1px solid ${open===i ? C.borderM : C.border}`, borderRadius:14, transition:'all .2s', overflow:'hidden'}}>
              <button onClick={() => setOpen(open===i?null:i)} style={{
                width:'100%',padding:'20px 26px',background:'none',border:'none',cursor:'pointer',
                display:'flex',justifyContent:'space-between',alignItems:'center',gap:14,
                fontFamily:FONT_SANS,fontSize:15,fontWeight:600,color:C.fg,textAlign:'left',
              }}>
                {f.q}
                <span style={{fontSize:20,color:C.fg3,flexShrink:0,transition:'transform .2s',transform:open===i?'rotate(45deg)':'rotate(0)'}}>+</span>
              </button>
              {open===i && (
                <div style={{padding:'0 26px 20px',fontSize:14,color:C.fg2,lineHeight:1.75,fontFamily:FONT_SANS}}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CTA strip ────────────────────────────────── */
function CTAStrip({ setPage }) {
  return (
    <section style={{padding:'120px clamp(20px,4vw,48px)', background:C.bg2, borderTop:`1px solid ${C.border}`, textAlign:'center', position:'relative', overflow:'hidden'}}>
      <div style={{position:'absolute',top:'-50%',left:'50%',transform:'translateX(-50%)',width:800,height:600,borderRadius:'50%',background:'radial-gradient(circle, rgba(91,156,255,.09) 0%, transparent 60%)',pointerEvents:'none'}}/>
      <div className="reveal" style={{maxWidth:680,margin:'0 auto', position:'relative'}}>
        <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(36px,5.5vw,72px)', fontWeight:700, color:C.fg, letterSpacing:'-0.04em', lineHeight:1.05, marginBottom:20, textWrap:'balance'}}>
          Primeira conversa é gratuita.<br/>
          <span style={{background:`linear-gradient(120deg,${C.blue},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>Sem compromisso.</span>
        </h2>
        <p style={{fontSize:'clamp(15px,1.4vw,18px)',color:C.fg2,lineHeight:1.6,marginBottom:44,fontFamily:FONT_SANS, textWrap:'balance'}}>
          30 minutos para entender o contexto. Respondemos em até 24 horas.
        </p>
        <div style={{display:'flex',gap:14,justifyContent:'center',flexWrap:'wrap'}}>
          <Btn onClick={() => setPage('contato')}>Conversa inicial gratuita →</Btn>
          <a href="mailto:contato@maximiza.ai" style={{
            display:'inline-flex',alignItems:'center',fontSize:14,color:C.fg3,textDecoration:'none',
            padding:'13px 4px',fontFamily:FONT_MONO,transition:'color .15s',
          }}
          onMouseEnter={e => e.currentTarget.style.color=C.fg2}
          onMouseLeave={e => e.currentTarget.style.color=C.fg3}>
            contato@maximiza.ai
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Contact page ─────────────────────────────── */
function ContactPage() {
  const [sent, setSent] = useState(false);
  const [vals, setVals] = useState({ nome:'', empresa:'', email:'', dor:'' });

  const inp = {
    background:C.bg3, border:`1.5px solid ${C.border}`, borderRadius:10,
    padding:'12px 15px', fontSize:14, color:C.fg, fontFamily:FONT_SANS,
    outline:'none', width:'100%', transition:'border-color .15s, box-shadow .15s',
  };
  const foc = e => { e.target.style.borderColor=C.blue; e.target.style.boxShadow='0 0 0 3px rgba(91,156,255,.1)'; };
  const blr = e => { e.target.style.borderColor=C.border; e.target.style.boxShadow='none'; };

  const clusters = ['Informação espalhada','Operação opaca','Dados sem leitura gerencial','Rotinas manuais','Falta de presença digital','Dificuldade analítica','Outro'];
  const [cluster, setCluster] = useState('');

  return (
    <section style={{minHeight:'calc(100vh - 62px)',display:'flex',alignItems:'center',justifyContent:'center',padding:'96px clamp(20px,4vw,48px)'}}>
      <div style={{maxWidth:560,width:'100%'}}>
        <div style={{marginBottom:40, textAlign:'center'}}>
          <h1 style={{fontFamily:FONT_DISPLAY,fontSize:'clamp(32px,4vw,52px)',fontWeight:700,color:C.fg,letterSpacing:'-0.035em',lineHeight:1.05,marginBottom:16, textWrap:'balance'}}>
            Conta o que sua{' '}
            <span style={{background:`linear-gradient(120deg,${C.blue},${C.teal})`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>empresa enfrenta</span>.
          </h1>
          <p style={{fontSize:15,color:C.fg2,lineHeight:1.6,fontFamily:FONT_SANS}}>Respondemos em até 24h. Sem pitch. Só uma conversa honesta.</p>
        </div>

        {sent ? (
          <div style={{background:'rgba(102,205,204,.06)',border:`1px solid ${C.borderT}`,borderRadius:16,padding:40,textAlign:'center'}}>
            <Icon d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" color={C.teal} size={36}/>
            <div style={{fontSize:16,fontWeight:700,color:C.teal,margin:'14px 0 6px',fontFamily:FONT_SANS}}>Mensagem recebida.</div>
            <div style={{fontSize:13,color:C.fg2,lineHeight:1.7,fontFamily:FONT_SANS}}>Retornamos em até 24h em <span style={{fontFamily:FONT_MONO}}>contato@maximiza.ai</span>.</div>
          </div>
        ) : (
          <form onSubmit={e=>{e.preventDefault();setSent(true);}} style={{display:'flex',flexDirection:'column',gap:16, background:C.bg3, border:`1px solid ${C.border}`, borderRadius:18, padding:'32px 30px'}}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              <div>
                <label style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Nome</label>
                <input required style={inp} placeholder="Seu nome" onFocus={foc} onBlur={blr} value={vals.nome} onChange={e=>setVals({...vals,nome:e.target.value})}/>
              </div>
              <div>
                <label style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Empresa</label>
                <input required style={inp} placeholder="Nome da empresa" onFocus={foc} onBlur={blr} value={vals.empresa} onChange={e=>setVals({...vals,empresa:e.target.value})}/>
              </div>
            </div>
            <div>
              <label style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Email</label>
              <input required type="email" style={inp} placeholder="contato@empresa.com" onFocus={foc} onBlur={blr} value={vals.email} onChange={e=>setVals({...vals,email:e.target.value})}/>
            </div>
            <div>
              <label style={{fontSize:11,color:C.fg3,display:'block',marginBottom:8,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Qual problema dominante você enfrenta?</label>
              <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
                {clusters.map(c => (
                  <button type="button" key={c} onClick={() => setCluster(c)} style={{
                    fontSize:11,fontWeight:600,padding:'6px 12px',borderRadius:9999,cursor:'pointer',transition:'all .15s',fontFamily:FONT_SANS,
                    background:cluster===c?'rgba(91,156,255,.12)':'transparent',
                    color:cluster===c?C.blue:C.fg3,
                    border:`1.5px solid ${cluster===c?C.borderB:C.border}`,
                  }}>{c}</button>
                ))}
              </div>
            </div>
            <div>
              <label style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Contexto (uma ou duas frases)</label>
              <textarea required style={{...inp,height:96,resize:'none'}} placeholder="Descreva brevemente o maior problema operacional da empresa." onFocus={foc} onBlur={blr} value={vals.dor} onChange={e=>setVals({...vals,dor:e.target.value})}/>
            </div>
            <Btn full>Enviar →</Btn>
            <p style={{fontSize:11,color:C.fg4,lineHeight:1.6,fontFamily:FONT_SANS, textAlign:'center'}}>Sem newsletter. Sem CRM. Sem pitch automático. Só uma resposta humana.</p>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, DiagnosticMockup, ProblemsSection, OffersSection, SiteSection,
  MethodSection, DemosSection, Tier2Section, FAQSection, CTAStrip, ContactPage,
  ExpressMockup, AutoridadeMockup,
});