/* 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
      className="hero-root"
      style={{ padding:'120px clamp(20px,4vw,48px) 64px', position:'relative', overflow:'hidden' }}
    >
      {/* Grid de fundo sutil (novo — F5.1) */}
      <GridBackground/>
      {/* Orbs aurora atrás (novo — F5.2) */}
      <OrbsBackground variant="blue-teal"/>

      {/* Dot grid */}
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none', zIndex:1,
        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', zIndex:1}}/>

      <div style={{ maxWidth:1180, margin:'0 auto', position:'relative', zIndex:2 }}>

        {/* ─── 2-col hero: copy (left) × motion 3D (right) ─── */}
        <div style={{
          display:'grid',
          gridTemplateColumns:'1fr 1fr',
          gap:'clamp(24px,4vw,56px)',
          alignItems:'center',
          marginBottom:80,
        }}>

          {/* LEFT — copy (em mobile, mandamos pra ordem 2 — motion vira acima) */}
          <div className="hero-copy" style={{textAlign:'left', maxWidth:560}}>
            {/* Eyebrow pill — glassmorphism */}
            <div className="glass-soft" style={{
              display:'inline-flex', alignItems:'center', gap:8, marginBottom:28,
              borderRadius:9999, padding:'6px 14px',
            }}>
              <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}}>Conversa inicial gratuita · resposta em até 24h úteis</span>
            </div>

            {/* Big gradient headline — frase estática; só o gradient nas palavras-chave anima (1 vez) */}
            <h1
              className="hero-headline"
              style={{
                fontFamily: FONT_DISPLAY, fontSize:'clamp(40px,5.8vw,76px)',
                fontWeight:700, lineHeight:1.05, letterSpacing:'-0.04em',
                marginBottom:24, color:C.fg, textWrap:'balance',
              }}
            >
              Da confusão à{' '}
              <span className="hero-shimmer" style={{
                backgroundImage:`linear-gradient(110deg, ${C.blue6} 0%, ${C.blue} 30%, ${C.teal4} 50%, ${C.teal} 70%, ${C.blue6} 100%)`,
                WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
              }}>clareza</span>.
              <br/>
              Do achismo à{' '}
              <span className="hero-shimmer" style={{
                backgroundImage:`linear-gradient(110deg, ${C.teal} 0%, ${C.blue4} 30%, ${C.teal4} 50%, ${C.blue4} 70%, ${C.teal} 100%)`,
                WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
              }}>decisão</span>.
            </h1>

            <p
              className="hero-sub"
              style={{fontSize:'clamp(15px,1.3vw,18px)', color:C.fg2, lineHeight:1.65, marginBottom:32, maxWidth:520, textWrap:'balance'}}
            >
              Sua empresa já tem dados, documentos e processos. Falta estrutura pra isso virar decisão. A maximiza.AI começa pelo problema mais visível — análise, automação e IA aplicada, sempre com prazo e valor combinados antes.
            </p>

            <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
              <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>
          </div>

          {/* RIGHT — 3D motion stage (transparente; em mobile vira ordem 1, ficando acima da copy) */}
          <div className="hero-motion-wrapper" style={{
            position:'relative',
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
            minHeight:440,
          }}>
            <HeroMotion3D size={460}/>
            {/* Interaction hint — escondido em mobile (motion 3D não está ativo lá) */}
            <div className="hero-interaction-hint" style={{
              marginTop:6,
              fontFamily: FONT_LABEL,
              fontSize:11, fontWeight:700,
              letterSpacing:'.10em', textTransform:'uppercase',
              color:C.fg3,
              opacity:.75,
              pointerEvents:'none',
              textAlign:'center',
            }}>
              clique e arraste — as esferas ganham energia
            </div>
          </div>

        </div>

        {/* Big framed mockup — centralizado abaixo do grid */}
        <div className="hero-diagnostic-wrap" style={{position:'relative', maxWidth:1000, 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 className="diagnostic-grid">
        {/* 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 · exemplo fictício</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>
  );
}

/* ── Ofertas principais (antes "Tier 1") ────── */
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 ciclo fechado de 1 a 2 semanas.',
      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','Planejamento técnico detalhado de grande projeto','Suporte recorrente'],
      cta:'Quero entender minha operação',
      cluster:'Informação espalhada',
    },
    {
      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','Plataforma corporativa de dados ou sistema novo'],
      cta:'Quero visibilidade nos dados',
      cluster:'Dados sem leitura gerencial',
    },
    {
      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','Análises soltas sem combinar antes'],
      cta:'Quero relatório automático',
      cluster:'Dados sem leitura gerencial',
    },
    {
      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',
      cluster:'Rotinas manuais',
    },
  ];

  const goToContato = (cluster) => {
    if (cluster) window.__maxiPrefillCluster = cluster;
    setPage('contato');
  };

  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>
            <button
              onClick={() => goToContato(o.cluster)}
              aria-label={`Ver como combinar escopo e valor de ${o.label}`}
              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,
                width:'100%', cursor:'pointer', textAlign:'left',
                transition:'background .18s ease, transform .18s ease',
                fontFamily:FONT_SANS,
              }}
              onMouseEnter={e => {
                e.currentTarget.style.background = `rgba(${o.color===C.teal?'102,205,204':'91,156,255'},.12)`;
              }}
              onMouseLeave={e => {
                e.currentTarget.style.background = `rgba(${o.color===C.teal?'102,205,204':'91,156,255'},.06)`;
              }}
            >
              <span style={{fontSize:10,color:C.fg3,letterSpacing:'.05em',textTransform:'uppercase',fontWeight:700}}>Investimento</span>
              <span style={{fontSize:15,fontWeight:700,color:o.color,fontFamily:FONT_MONO}}>{o.price}</span>
              <span style={{marginLeft:'auto',fontSize:12,color:o.color,fontWeight:600, opacity:0.8}}>
                {o.price === 'consulte valor' ? 'Combinar →' : 'Conversar →'}
              </span>
            </button>
          </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, se faz sentido pra você e os próximos passos.
                </div>
              </div>
            </div>
            <Btn onClick={() => goToContato(o.cluster)} full>{o.cta} →</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Site offers (Express vs Autoridade) ─ Go beyond editing ── */
function SiteSection({ setPage }) {
  const goToContato = (cluster) => {
    if (cluster) window.__maxiPrefillCluster = cluster;
    setPage('contato');
  };
  return (
    <section id="sites" 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={() => goToContato('Falta de presença digital')}
            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={() => goToContato('Falta de presença digital')}
            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({ setPage }) {
  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:'Ciclo fechado de 1 a 2 semanas. 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}`, position:'relative', overflow:'hidden'}}>
      <div style={{maxWidth:1200,margin:'0 auto', position:'relative', zIndex:1}}>
        <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} glass-soft`} style={{
              position:'relative', padding:'28px 24px 32px', borderRadius:18,
              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>

        {/* CTA fechamento */}
        {setPage && (
          <div className="reveal" style={{textAlign:'center', marginTop:48}}>
            <Btn onClick={() => setPage('contato')}>Agendar conversa inicial →</Btn>
          </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 — usa tokens --alert-* para funcionar em dark e light */}
        <div className="reveal" style={{
          display:'flex', alignItems:'center', gap:10,
          background:'var(--alert-bg)', border:'1px solid var(--alert-border)',
          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="var(--alert-text)" size={15}/>
          <span style={{fontSize:13,color:'var(--alert-text)',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 · exemplo fictício</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>
  );
}

/* ── Próximas frentes (antes "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:'Consulta inteligente dos seus documentos', desc:'Seus materiais escritos configurados para consulta interna. Para quem tem conhecimento espalhado e precisa centralizá-lo.', price:'a partir de R$ 4.500', 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:'Organização inicial dos materiais, com padrão de estrutura e nomeação. Base de conhecimento funcional.', price:'a partir de R$ 3.000', color:C.blue4 },
    { icon:'M13 10V3L4 14h7v7l9-11h-7z', title:'Automação de rotinas administrativas', desc:'Um fluxo pontual ou grupo pequeno de fluxos relacionados. Regra de negócio delimitada, validação operacional inclusa.', price:'a partir de R$ 4.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 — depois do primeiro projeto entregue.
          </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}}>Projetos de maior escopo</strong> — para clientes que já fizeram um primeiro projeto e precisam ir mais fundo: organização operacional (a partir de R$ 8k), engenharia de dados (a partir de R$ 10k), inteligência e IA aplicada (a partir de R$ 8k). 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 as frentes de maior escopo, o valor depende da situação — 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 sistema novo 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 sua empresa se encaixa em uma das seis categorias (informação espalhada, operação opaca, dados sem leitura, rotinas manuais, falta de presença digital, dificuldade de analisar dados), faz sentido conversar.' },
    { q:'Quantos projetos conseguem tocar ao mesmo tempo?', a:'Trabalhamos com prazo e valor combinados antes, e entrega direta sem intermediários. O número de projetos simultâneos é limitado de propósito — cada entrega recebe tempo e atenção dedicados pra sair no prazo, com a qualidade combinada.' },
    { 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 id="faq" style={{padding:'120px clamp(20px,4vw,48px)', background:C.bg, position:'relative'}}>
      <div style={{maxWidth:820,margin:'0 auto', position:'relative'}}>
        <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) => {
            const isOpen = open === i;
            const btnId = `faq-btn-${i}`;
            const panelId = `faq-panel-${i}`;
            return (
              <div key={i} className="reveal" style={{background: isOpen ? C.bg3 : C.bg2, border:`1px solid ${isOpen ? C.borderM : C.border}`, borderRadius:14, transition:'all .2s', overflow:'hidden'}}>
                <button
                  id={btnId}
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpen(isOpen ? 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 aria-hidden="true" style={{fontSize:20,color:C.fg3,flexShrink:0,transition:'transform .24s ease',transform: isOpen ? 'rotate(45deg)' : 'rotate(0)'}}>+</span>
                </button>
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={btnId}
                  className={`faq-panel ${isOpen ? 'open' : ''}`}
                >
                  <div style={{padding:'0 26px 20px',fontSize:14,color:C.fg2,lineHeight:1.75,fontFamily:FONT_SANS}}>
                    {f.a}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ── CTA strip ────────────────────────────────── */
function CTAStrip({ setPage }) {
  return (
    <section
      className="section--invert"
      style={{padding:'120px clamp(20px,4vw,48px)', borderTop:`1px solid rgba(255,255,255,.08)`, textAlign:'center', position:'relative', overflow:'hidden'}}
    >
      <OrbsBackground variant="teal-single" intensity={0.5}/>
      <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,.14) 0%, transparent 60%)',pointerEvents:'none', zIndex:1}}/>
      <div className="reveal" style={{maxWidth:680,margin:'0 auto', position:'relative', zIndex:2}}>
        <h2 style={{fontFamily:FONT_DISPLAY, fontSize:'clamp(36px,5.5vw,72px)', fontWeight:700, color:'var(--fg)', letterSpacing:'-0.04em', lineHeight:1.05, marginBottom:20, textWrap:'balance'}}>
          Primeira conversa é gratuita.<br/>
          <span style={{background:`linear-gradient(120deg,var(--blue),var(--teal))`,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>Sem compromisso.</span>
        </h2>
        <p style={{fontSize:'clamp(15px,1.4vw,18px)',color:'var(--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="https://wa.me/5516988593999?text=Ol%C3%A1%2C+vim+pelo+site+maximiza.AI"
            target="_blank" rel="noopener"
            style={{
              display:'inline-flex',alignItems:'center',gap:6,fontSize:14,color:'var(--fg2)',textDecoration:'none',
              padding:'13px 16px', fontFamily:FONT_SANS, fontWeight:600,
              borderRadius:9999, border:`1px solid var(--borderT)`, background:'rgba(102,205,204,.08)',
              transition:'color .15s',
            }}
            onMouseEnter={e => e.currentTarget.style.color='var(--fg)'}
            onMouseLeave={e => e.currentTarget.style.color='var(--fg2)'}
          >
            Ou direto no WhatsApp →
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Contact page ─────────────────────────────── */
function ContactPage({ setPage }) {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');
  const [sending, setSending] = useState(false);
  const [blockedUrl, setBlockedUrl] = useState('');   // URL wa.me salva se popup bloqueado
  const [copiedMsg, setCopiedMsg] = useState(false);  // feedback de "copiei pro clipboard"
  const [vals, setVals] = useState({ nome:'', empresa:'', email:'', dor:'' });

  // Cluster pré-selecionado via window.__maxiPrefillCluster (setado por CTAs de oferta)
  const [cluster, setCluster] = useState(() => {
    if (typeof window !== 'undefined' && window.__maxiPrefillCluster) {
      const c = window.__maxiPrefillCluster;
      window.__maxiPrefillCluster = null;
      return c;
    }
    return '';
  });

  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 WA_PHONE = '5516988593999';

  const handleSubmit = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    if (sending) return;  // evita double-submit
    setError('');
    setBlockedUrl('');
    setCopiedMsg(false);

    // Validação básica
    if (!vals.nome.trim() || !vals.empresa.trim() || !vals.email.trim() || !vals.dor.trim()) {
      setError('Por favor, preencha todos os campos obrigatórios.');
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(vals.email)) {
      setError('O email informado parece inválido.');
      return;
    }

    setSending(true);

    const msg = [
      'Olá, vim pelo site maximiza.AI.',
      '',
      `Nome: ${vals.nome.trim()}`,
      `Empresa: ${vals.empresa.trim()}`,
      `Email: ${vals.email.trim()}`,
      cluster ? `Interesse: ${cluster}` : null,
      '',
      'Contexto:',
      vals.dor.trim(),
    ].filter(Boolean).join('\n');

    const url = `https://wa.me/${WA_PHONE}?text=${encodeURIComponent(msg)}`;

    // window.open retorna null quando popup bloqueado (não throw).
    // Temos que checar o valor de retorno, não só try/catch.
    let win = null;
    try {
      win = window.open(url, '_blank', 'noopener,noreferrer');
    } catch (err) {
      win = null;
    }

    const popupBlocked = !win || win.closed || typeof win.closed === 'undefined';

    if (popupBlocked) {
      // Fallback: copia mensagem + oferece link clicável
      setBlockedUrl(url);
      setSending(false);
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(msg)
          .then(() => setCopiedMsg(true))
          .catch(() => setCopiedMsg(false));
      }
      return;
    }

    setTimeout(() => {
      setSent(true);
      setSending(false);
    }, 400);
  };

  return (
    <section style={{minHeight:'calc(100vh - 62px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'32px clamp(20px,4vw,48px) 48px',position:'relative', overflow:'hidden'}}>
      <OrbsBackground variant="blue-double" intensity={0.7}/>
      <div style={{maxWidth:1100,width:'100%', position:'relative', zIndex:1}}>

        {/* Back button — topo da página */}
        <button
          onClick={() => setPage && setPage('home')}
          aria-label="Voltar ao início"
          style={{
            display:'inline-flex', alignItems:'center', gap:6,
            background:'none', border:`1px solid ${C.border}`, borderRadius:9999,
            padding:'6px 14px 6px 10px', marginBottom:24,
            fontFamily:FONT_SANS, fontSize:12, fontWeight:600,
            color:C.fg3, cursor:'pointer',
            transition:'all .15s',
          }}
          onMouseEnter={e => { e.currentTarget.style.color = C.fg; e.currentTarget.style.borderColor = C.borderM; }}
          onMouseLeave={e => { e.currentTarget.style.color = C.fg3; e.currentTarget.style.borderColor = C.border; }}
        >
          <span style={{fontSize:15, lineHeight:1, display:'inline-block', transform:'translateY(-1px)'}}>←</span>
          Voltar
        </button>

        {/* 2-col layout: copy (left) × form (right) */}
        <div style={{
          display:'grid',
          gridTemplateColumns:'1fr 1fr',
          gap:'clamp(32px,5vw,72px)',
          alignItems:'flex-start',
        }}>

          {/* LEFT — copy */}
          <div style={{textAlign:'left', maxWidth:480, paddingTop:12}}>
            <h1 style={{fontFamily:FONT_DISPLAY,fontSize:'clamp(30px,3.6vw,46px)',fontWeight:700,color:C.fg,letterSpacing:'-0.035em',lineHeight:1.05,marginBottom:18, 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.65,fontFamily:FONT_SANS, marginBottom:20}}>
              Ao enviar, abrimos seu WhatsApp com a mensagem já escrita. Você revisa e manda direto pra nós — respondemos em até 24h úteis.
            </p>
            <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12,color:C.fg3,fontFamily:FONT_MONO, marginBottom:20}}>
              <Icon d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM12 8v4l3 2" color={C.teal} size={14}/>
              <span>conversa inicial · 30 min · gratuita</span>
            </div>
            <a
              href={`https://wa.me/${WA_PHONE}?text=${encodeURIComponent('Olá, vim pelo site maximiza.AI e gostaria de uma conversa inicial.')}`}
              target="_blank" rel="noopener"
              style={{
                display:'inline-flex', alignItems:'center', gap:8,
                fontSize:13, color:C.teal, textDecoration:'none',
                fontFamily:FONT_SANS, fontWeight:600,
                padding:'8px 14px', borderRadius:9999,
                border:`1px solid ${C.borderT}`,
                background:'rgba(102,205,204,.06)',
              }}
            >
              <Icon d="M20.52 3.48A11.94 11.94 0 0012 0C5.37 0 .03 5.37.03 12c0 2.12.55 4.16 1.6 5.96L0 24l6.2-1.62A11.95 11.95 0 0012 24c6.63 0 12-5.37 12-12 0-3.18-1.24-6.18-3.48-8.52z" color={C.teal} size={14} sw={0}/>
              Prefiro falar direto no WhatsApp
            </a>
          </div>

          {/* RIGHT — form / sent state */}
          <div>
            {sent ? (
              <div style={{background:'var(--success-bg)',border:'1px solid var(--success-border)',borderRadius:18,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}}>Abrimos seu WhatsApp.</div>
                <div style={{fontSize:13,color:C.fg2,lineHeight:1.7,fontFamily:FONT_SANS, marginBottom:18}}>
                  Finalize o envio da mensagem por lá. Retornamos em até 24h úteis.
                </div>
                <button
                  onClick={() => { setSent(false); setVals({nome:'',empresa:'',email:'',dor:''}); setCluster(''); }}
                  style={{
                    background:'none', border:`1px solid ${C.border}`, borderRadius:9999,
                    padding:'8px 16px', fontSize:12, color:C.fg3, cursor:'pointer', fontFamily:FONT_SANS,
                  }}
                >
                  Enviar outra mensagem
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{display:'flex',flexDirection:'column',gap:14, background:C.bg3, border:`1px solid ${C.border}`, borderRadius:18, padding:'28px 28px'}}>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
                  <div>
                    <label htmlFor="f-nome" style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Nome *</label>
                    <input id="f-nome" required aria-required="true" style={inp} placeholder="Seu nome" onFocus={foc} onBlur={blr} value={vals.nome} onChange={e=>setVals({...vals,nome:e.target.value})}/>
                  </div>
                  <div>
                    <label htmlFor="f-empresa" style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Empresa *</label>
                    <input id="f-empresa" required aria-required="true" 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 htmlFor="f-email" style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Email *</label>
                  <input id="f-email" required aria-required="true" 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 role="radiogroup" aria-label="Problema dominante">
                  <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 => {
                      const active = cluster === c;
                      return (
                        <button
                          type="button" key={c}
                          role="radio" aria-checked={active}
                          onClick={() => setCluster(c)}
                          style={{
                            fontSize:11,fontWeight:600,padding:'6px 12px',borderRadius:9999,cursor:'pointer',transition:'all .15s',fontFamily:FONT_SANS,
                            background: active ? 'rgba(91,156,255,.12)' : 'transparent',
                            color: active ? C.blue : C.fg3,
                            border:`1.5px solid ${active ? C.borderB : C.border}`,
                          }}>{c}</button>
                      );
                    })}
                  </div>
                </div>
                <div>
                  <label htmlFor="f-dor" style={{fontSize:11,color:C.fg3,display:'block',marginBottom:6,fontWeight:600,fontFamily:FONT_SANS,letterSpacing:'.03em'}}>Contexto (uma ou duas frases) *</label>
                  <textarea id="f-dor" required aria-required="true" style={{...inp,height:80,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>
                {error && (
                  <div role="alert" style={{
                    fontSize:12, color:'var(--danger-fg)', fontFamily:FONT_SANS,
                    padding:'8px 12px', background:'var(--danger-bg)',
                    border:'1px solid var(--danger-border)', borderRadius:10,
                  }}>{error}</div>
                )}

                {blockedUrl && (
                  <div role="alert" style={{
                    fontSize:13, color:C.fg2, fontFamily:FONT_SANS, lineHeight:1.55,
                    padding:'14px 16px', background:'var(--alert-bg)',
                    border:'1px solid var(--alert-border)', borderRadius:12,
                    display:'flex', flexDirection:'column', gap:10,
                  }}>
                    <strong style={{color:'var(--alert-text)', fontSize:12, letterSpacing:'.04em', textTransform:'uppercase'}}>
                      O navegador bloqueou a janela do WhatsApp.
                    </strong>
                    <span>
                      {copiedMsg
                        ? 'Copiamos a mensagem pra sua área de transferência. Clique no link abaixo, cole no campo de mensagem e envie.'
                        : 'Clique no link abaixo pra abrir o WhatsApp manualmente com a mensagem pronta.'}
                    </span>
                    <a
                      href={blockedUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      style={{
                        display:'inline-flex', alignItems:'center', gap:8,
                        fontSize:13, fontWeight:700, color:'var(--teal)',
                        textDecoration:'none',
                        padding:'10px 14px', borderRadius:10,
                        background:'var(--success-bg)',
                        border:'1px solid var(--success-border)',
                        alignSelf:'flex-start',
                      }}
                    >
                      Abrir WhatsApp com a mensagem pronta →
                    </a>
                    <span style={{fontSize:11, color:C.fg3}}>
                      Se preferir, escreva direto pra <a href={`https://wa.me/${WA_PHONE}`} target="_blank" rel="noopener" style={{color:C.teal, textDecoration:'underline'}}>wa.me/{WA_PHONE}</a>.
                    </span>
                  </div>
                )}

                <Btn full onClick={handleSubmit}>{sending ? 'Abrindo WhatsApp…' : 'Enviar via WhatsApp →'}</Btn>
                <p style={{fontSize:11,color:C.fg3,lineHeight:1.6,fontFamily:FONT_SANS, textAlign:'center'}}>
                  Sem newsletter. Sem CRM. Sem pitch automático. Só uma resposta humana.
                </p>
              </form>
            )}
          </div>

        </div>
      </div>
    </section>
  );
}

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