/* ============================================================
   ZERO — Landing Page. window.Screens.Landing
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const I = window.Icon;
  const { Logo, Badge } = window.UI;
  const D = window.DATA;

  function Landing({ onEnter }) {
    return (
      <div style={{ height: '100%', overflowY: 'auto', position: 'relative' }}>
        <div className="app-aurora" style={{ position: 'absolute' }} />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Nav onEnter={onEnter} />
          <Hero onEnter={onEnter} />
          <Logos />
          <Agents />
          <Features />
          <Bento />
          <Pricing onEnter={onEnter} />
          <Testimonials />
          <Faq />
          <CTA onEnter={onEnter} />
          <Footer />
        </div>
      </div>
    );
  }

  const wrap = { maxWidth: 1140, margin: '0 auto', padding: '0 28px' };

  function Nav({ onEnter }) {
    return (
      <div style={{ position: 'sticky', top: 0, zIndex: 50, padding: '14px 0', borderBottom: '1px solid var(--line)',
        background: 'oklch(0.145 0.012 265 /.6)', backdropFilter: 'blur(16px)' }}>
        <div className="row between" style={wrap}>
          <div className="row gap10"><Logo /><span style={{ fontWeight: 800, fontSize: 17, letterSpacing: '-0.03em' }}>Zero</span></div>
          <div className="row gap24" style={{ fontSize: 13.5, color: 'var(--tx-2)' }}>
            {['Produto', 'Agentes', 'Preços', 'Clientes', 'Docs'].map(l => <a key={l} href="#" style={{ color: 'inherit', textDecoration: 'none' }} onMouseEnter={e=>e.target.style.color='var(--tx-0)'} onMouseLeave={e=>e.target.style.color='var(--tx-2)'}>{l}</a>)}
          </div>
          <div className="row gap10">
            <button onClick={onEnter} className="btn btn-ghost btn-sm">Entrar</button>
            <button onClick={onEnter} className="btn btn-primary btn-sm">Começar grátis <I.arrowRight w={14} /></button>
          </div>
        </div>
      </div>
    );
  }

  function Hero({ onEnter }) {
    return (
      <div style={{ ...wrap, paddingTop: 78, paddingBottom: 40, textAlign: 'center' }}>
        <div className="rise row center" style={{ marginBottom: 22 }}>
          <span className="badge" style={{ padding: '6px 14px', fontSize: 12, color: 'var(--tx-1)', background: 'var(--bg-1)', borderColor: 'var(--line-strong)' }}>
            <span className="dot dot-pulse" style={{ background: 'var(--green)', color: 'var(--green)' }} /> Já rodando +12.000 empresas no piloto automático
          </span>
        </div>
        <h1 className="rise" style={{ fontSize: 'clamp(40px, 6vw, 76px)', fontWeight: 800, letterSpacing: '-0.045em', lineHeight: 1.02, margin: '0 auto', maxWidth: 900 }}>
          Sua empresa funciona<br /><span className="grad-text">enquanto você dorme.</span>
        </h1>
        <p className="rise" style={{ fontSize: 'clamp(16px,1.8vw,20px)', color: 'var(--tx-1)', maxWidth: 620, margin: '22px auto 0', lineHeight: 1.55, animationDelay: '.05s' }}>
          A Zero é uma equipe autônoma de IA para solo founders. Seis agentes cuidam do seu dev, marketing, vendas, suporte e operações — planejando, executando e entregando 24/7.
        </p>
        <div className="rise row center gap12" style={{ marginTop: 32, animationDelay: '.1s' }}>
          <button onClick={onEnter} className="btn btn-primary" style={{ padding: '13px 24px', fontSize: 15 }}><I.rocket w={17} /> Contratar sua equipe</button>
          <button className="btn" style={{ padding: '13px 22px', fontSize: 15 }}><I.play w={14} /> Ver demo de 2 min</button>
        </div>
        <div className="rise" style={{ fontSize: 12, color: 'var(--tx-3)', marginTop: 16 }}>14 dias grátis · Sem cartão · Cancele quando quiser</div>

        {/* product mockup */}
        <HeroMock />
      </div>
    );
  }

  function HeroMock() {
    return (
      <div className="rise" style={{ marginTop: 50, position: 'relative', animationDelay: '.15s' }}>
        <div style={{ position: 'absolute', inset: '-40px -10px 0', background: 'radial-gradient(ellipse at top, var(--violet-soft), transparent 60%)', filter: 'blur(40px)', zIndex: 0 }} />
        <div className="panel" style={{ position: 'relative', zIndex: 1, padding: 0, overflow: 'hidden', boxShadow: 'var(--shadow-3)', borderColor: 'var(--line-strong)' }}>
          <div className="row gap8" style={{ padding: '11px 14px', borderBottom: '1px solid var(--line)', background: 'var(--bg-1)' }}>
            <span style={{ width: 11, height: 11, borderRadius: 9, background: 'var(--rose)' }} />
            <span style={{ width: 11, height: 11, borderRadius: 9, background: 'var(--amber)' }} />
            <span style={{ width: 11, height: 11, borderRadius: 9, background: 'var(--green)' }} />
            <span className="mono" style={{ fontSize: 11, color: 'var(--tx-3)', marginLeft: 8 }}>app.zero.ai/command</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: 360, textAlign: 'left' }}>
            <div style={{ borderRight: '1px solid var(--line)', padding: 14, background: 'oklch(0.16 0.013 265 /.5)' }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Equipe</div>
              {D.agents.map(a => (
                <div key={a.id} className="row gap8" style={{ padding: '7px 0' }}>
                  <span className="avatar" style={{ width: 24, height: 24, fontSize: 10, background: a.hue }}>{a.name[0]}</span>
                  <span className="grow" style={{ fontSize: 12, fontWeight: 600 }}>{a.name}</span>
                  <span className="dot" style={{ background: window.UI.statusColor(a.status) }} />
                </div>
              ))}
            </div>
            <div style={{ padding: 18 }}>
              <div className="grid" style={{ gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
                {[['MRR','R$ 48,9 mil','var(--green)'],['Leads','1.284','var(--teal)'],['Exec. da IA','17,3 mil','var(--violet)']].map(([l,v,c]) => (
                  <div key={l} className="panel-flat" style={{ padding: 12 }}>
                    <div style={{ fontSize: 10.5, color: 'var(--tx-2)' }}>{l}</div>
                    <div className="tnum" style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.03em' }}>{v}</div>
                    <div style={{ height: 3, borderRadius: 3, marginTop: 8, background: c, opacity: .8 }} />
                  </div>
                ))}
              </div>
              <div className="panel-flat" style={{ padding: 14 }}>
                {[['Forge','var(--blue)','Subiu o checkout-v2 — 0 downtime','2min'],['Nova','var(--rose)','Lançou 4 campanhas de retargeting','11min'],['Vega','var(--teal)','Moveu a Acme para Negociação · R$ 24 mil','34min']].map(([n,c,t,tm],i) => (
                  <div key={i} className="row gap8" style={{ padding: '8px 0', borderTop: i?'1px solid var(--line)':'none' }}>
                    <span className="dot" style={{ background: c }} />
                    <span style={{ fontSize: 11.5, fontWeight: 700, color: c }}>{n}</span>
                    <span className="grow ellipsis" style={{ fontSize: 11.5, color: 'var(--tx-1)' }}>{t}</span>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--tx-3)' }}>{tm}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function Logos() {
    return (
      <div style={{ ...wrap, padding: '50px 28px', textAlign: 'center' }}>
        <div className="eyebrow" style={{ marginBottom: 22 }}>A confiança de founders construindo a próxima grande ideia</div>
        <div className="row center wrap" style={{ gap: 44, opacity: .55 }}>
          {['Lumen', 'Vertex', 'Hopper', 'Stratus', 'Beacon', 'Meridian'].map(n => (
            <span key={n} style={{ fontWeight: 800, fontSize: 21, letterSpacing: '-0.03em', color: 'var(--tx-1)' }}>{n}</span>
          ))}
        </div>
      </div>
    );
  }

  function Agents() {
    return (
      <div style={{ ...wrap, padding: '60px 28px' }}>
        <SectionTitle eyebrow="A equipe" title="Seis especialistas. Uma missão." sub="Cada agente cuida de uma área da sua empresa — e se coordenam entre si de forma autônoma." />
        <div className="grid" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginTop: 38, gap: 16 }}>
          {D.agents.map((a, i) => (
            <div key={a.id} className="panel lift rise" style={{ padding: 20, animationDelay: i*0.04+'s' }}>
              <div className="row between" style={{ marginBottom: 14 }}>
                <span className="avatar" style={{ width: 44, height: 44, borderRadius: 12, background: a.hue, fontSize: 17 }}>{a.name[0]}</span>
                <Badge soft={`color-mix(in oklab, ${a.hue}, transparent 86%)`} color={a.hue}>{a.role.replace(' Agent','')}</Badge>
              </div>
              <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.02em' }}>{a.name}</div>
              <div style={{ fontSize: 13, color: 'var(--tx-2)', marginTop: 6, lineHeight: 1.5 }}>{agentDesc[a.id]}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  const agentDesc = {
    ceo: 'Define a estratégia, acompanha suas métricas e direciona o trabalho ao agente certo antes de você perceber o problema.',
    dev: 'Escreve código, revisa PRs, roda testes e sobe para produção com zero downtime.',
    mkt: 'Planeja campanhas, escreve conteúdo, compra anúncios e otimiza o gasto em todos os canais.',
    sales: 'Qualifica leads, faz prospecção, agenda demos e move os negócios pelo pipeline.',
    sup: 'Responde clientes em segundos, resolve tickets e mantém o CSAT lá em cima — 24/7.',
    ops: 'Monitora a infraestrutura, escala recursos e mantém tudo de pé enquanto você dorme.',
  };

  function Features() {
    const feats = [
      ['cpu', 'Execução autônoma', 'Os agentes planejam e agem sozinhos. Defina as diretrizes uma vez; eles cuidam do resto.'],
      ['eye', 'Transparência total', 'Cada decisão registrada com o raciocínio. Pause, inspecione ou reverta qualquer ação.'],
      ['link', 'Conecta tudo', 'GitHub, Stripe, Google Ads, WhatsApp, Slack e mais — prontos para usar.'],
      ['bolt', 'Roda 24/7', 'Sua empresa nunca para. O trabalho entrega de madrugada, fins de semana, feriados.'],
      ['shield', 'Nível enterprise', 'Pronto para SOC 2, criptografado de ponta a ponta. Seus dados nunca treinam modelos de terceiros.'],
      ['user', 'Você no controle', 'Entre em qualquer chat, negócio ou ticket e assuma o comando na hora.'],
    ];
    return (
      <div style={{ ...wrap, padding: '60px 28px' }}>
        <SectionTitle eyebrow="Por que a Zero" title="Uma empresa inteira em uma única aba." sub="Tudo o que um time de 20 pessoas faria — rodando no automático, visível num relance." />
        <div className="grid" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginTop: 38, gap: 16 }}>
          {feats.map(([ic, t, d], i) => {
            const Ic = I[ic];
            return (
              <div key={i} className="rise" style={{ padding: 22, borderRadius: 16, border: '1px solid var(--line)', background: 'var(--bg-1)', animationDelay: i*0.04+'s' }}>
                <span style={{ display: 'grid', placeItems: 'center', width: 42, height: 42, borderRadius: 11, background: 'var(--violet-soft)', color: 'var(--violet-2)', marginBottom: 14 }}><Ic w={20} /></span>
                <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.02em' }}>{t}</div>
                <div style={{ fontSize: 13, color: 'var(--tx-2)', marginTop: 6, lineHeight: 1.55 }}>{d}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  function Bento() {
    return (
      <div style={{ ...wrap, padding: '40px 28px 60px' }}>
        <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          <div className="panel" style={{ padding: 28, position: 'relative', overflow: 'hidden' }}>
            <Badge soft="var(--violet-soft)" color="var(--violet-2)">Central de Comando</Badge>
            <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.03em', margin: '14px 0 8px', maxWidth: 360 }}>Veja sua empresa inteira pensando em tempo real.</div>
            <div style={{ fontSize: 13.5, color: 'var(--tx-2)', maxWidth: 380, lineHeight: 1.55 }}>Um canal operacional único onde cada agente reporta, se coordena e pede aprovação quando importa.</div>
            <div className="panel-flat" style={{ marginTop: 20, padding: 14 }}>
              {[['Atlas','var(--violet)','Conversão caiu 14% — encaminhando ao Forge'],['Forge','var(--blue)','Achei o bug. Subindo a correção em 3 min.'],['Nova','var(--rose)','Recuperando 1.840 sessões abandonadas']].map(([n,c,t],i)=>(
                <div key={i} className="row gap8" style={{ padding: '7px 0' }}>
                  <span className="avatar" style={{ width: 22, height: 22, fontSize: 9, background: c }}>{n[0]}</span>
                  <span style={{ fontSize: 12, fontWeight: 700, color: c }}>{n}</span>
                  <span className="grow ellipsis" style={{ fontSize: 12, color: 'var(--tx-1)' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="panel" style={{ padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <Badge soft="var(--green-soft)" color="var(--green)">Resultados</Badge>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.03em', margin: '14px 0 8px' }}>Founders entregam mais, com menos estresse.</div>
            </div>
            <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 16 }}>
              {[['18 h','economizadas/semana'],['3,4x','mais entregue'],['92%','tickets auto-resolvidos'],['R$ 11 mil','recuperados à noite']].map(([v,l],i)=>(
                <div key={i}>
                  <div className="tnum grad-text" style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.04em' }}>{v}</div>
                  <div style={{ fontSize: 12, color: 'var(--tx-2)' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  function Pricing({ onEnter }) {
    return (
      <div style={{ ...wrap, padding: '60px 28px' }}>
        <SectionTitle eyebrow="Preços" title="Uma contratação que custa menos que um café." sub="Mais barato que um único freelancer. Trabalhando mais que um time inteiro." />
        <div className="grid" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginTop: 40, gap: 16, alignItems: 'stretch' }}>
          {D.pricing.map((p, i) => (
            <div key={i} className="rise" style={{ padding: 26, borderRadius: 18, position: 'relative', animationDelay: i*0.05+'s',
              border: '1px solid ' + (p.featured ? 'transparent' : 'var(--line)'),
              background: p.featured ? 'linear-gradient(180deg, var(--violet-soft), var(--bg-1))' : 'var(--bg-1)',
              boxShadow: p.featured ? 'var(--glow-violet)' : 'none' }}>
              {p.featured && <span className="badge" style={{ position: 'absolute', top: -11, left: '50%', transform: 'translateX(-50%)', background: 'linear-gradient(180deg,var(--violet-2),var(--violet))', color: 'white', borderColor: 'transparent', padding: '4px 12px' }}><I.spark w={11} /> Most popular</span>}
              <div style={{ fontSize: 15, fontWeight: 700 }}>{p.name}</div>
              <div className="row" style={{ alignItems: 'baseline', gap: 4, margin: '12px 0 4px' }}>
                <span className="tnum" style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-0.04em' }}>{p.price}</span>
                <span style={{ fontSize: 14, color: 'var(--tx-2)' }}>{p.period}</span>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--tx-2)', minHeight: 36 }}>{p.desc}</div>
              <button onClick={onEnter} className={'btn ' + (p.featured ? 'btn-primary' : '')} style={{ width: '100%', justifyContent: 'center', margin: '18px 0 20px', padding: '11px' }}>{p.cta}</button>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {p.features.map((f, j) => (
                  <div key={j} className="row gap8" style={{ fontSize: 13 }}>
                    <span style={{ color: p.featured ? 'var(--violet-2)' : 'var(--green)', flex: 'none' }}><I.check w={15} /></span>
                    <span style={{ color: 'var(--tx-1)' }}>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function Testimonials() {
    return (
      <div style={{ ...wrap, padding: '60px 28px' }}>
        <SectionTitle eyebrow="Amada por founders" title="Eles passaram o trabalho repetitivo adiante." />
        <div className="grid" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginTop: 38, gap: 16 }}>
          {D.testimonials.map((t, i) => (
            <div key={i} className="panel lift" style={{ padding: 22 }}>
              <div className="row gap4" style={{ marginBottom: 12 }}>
                {[0,1,2,3,4].map(s => <span key={s} style={{ color: 'var(--amber)' }}><I.star w={14} /></span>)}
              </div>
              <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--tx-0)', letterSpacing: '-0.01em' }}>"{t.quote}"</div>
              <div className="row gap10" style={{ marginTop: 18 }}>
                <span className="avatar" style={{ width: 36, height: 36, background: t.hue }}>{t.name[0]}</span>
                <div><div style={{ fontSize: 13, fontWeight: 700 }}>{t.name}</div><div style={{ fontSize: 11.5, color: 'var(--tx-2)' }}>{t.role}</div></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function Faq() {
    const [open, setOpen] = useState(0);
    return (
      <div style={{ maxWidth: 760, margin: '0 auto', padding: '60px 28px' }}>
        <SectionTitle eyebrow="FAQ" title="Perguntas, respondidas." />
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {D.faqs.map((f, i) => {
            const on = open === i;
            return (
              <div key={i} className="panel" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }} onClick={() => setOpen(on ? -1 : i)}>
                <div className="row between" style={{ padding: '17px 20px' }}>
                  <span style={{ fontSize: 14.5, fontWeight: 700 }}>{f.q}</span>
                  <span style={{ color: 'var(--tx-2)', transform: on ? 'rotate(180deg)' : 'none', transition: 'transform .2s', flex: 'none' }}><I.chevDown w={18} /></span>
                </div>
                {on && <div className="fadein" style={{ padding: '0 20px 18px', fontSize: 13.5, color: 'var(--tx-2)', lineHeight: 1.6, maxWidth: 600 }}>{f.a}</div>}
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  function CTA({ onEnter }) {
    return (
      <div style={{ ...wrap, padding: '40px 28px 80px' }}>
        <div className="panel" style={{ padding: '56px 40px', textAlign: 'center', position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(160deg, var(--violet-soft), transparent 55%), var(--bg-1)', borderColor: 'var(--line-strong)' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, var(--violet-soft), transparent 65%)', filter: 'blur(30px)' }} />
          <div style={{ position: 'relative' }}>
            <h2 style={{ fontSize: 'clamp(30px,4vw,46px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.05, maxWidth: 620, margin: '0 auto' }}>
              Pare de fazer tudo.<br /><span className="grad-text">Comece a comandar tudo.</span>
            </h2>
            <p style={{ fontSize: 16, color: 'var(--tx-1)', maxWidth: 480, margin: '18px auto 0' }}>Contrate sua equipe de IA hoje. Ela já está trabalhando antes do seu café esfriar.</p>
            <button onClick={onEnter} className="btn btn-primary" style={{ padding: '14px 28px', fontSize: 15.5, marginTop: 28 }}><I.rocket w={18} /> Começar grátis</button>
          </div>
        </div>
      </div>
    );
  }

  function Footer() {
    const cols = { Produto: ['Recursos','Agentes','Preços','Changelog','Roadmap'], Empresa: ['Sobre','Carreiras','Blog','Clientes'], Recursos: ['Docs','API','Status','Segurança'], Legal: ['Privacidade','Termos','SOC 2'] };
    return (
      <div style={{ borderTop: '1px solid var(--line)', padding: '48px 0 40px' }}>
        <div className="row between wrap gap24" style={{ ...wrap, alignItems: 'flex-start' }}>
          <div style={{ maxWidth: 240 }}>
            <div className="row gap10" style={{ marginBottom: 12 }}><Logo /><span style={{ fontWeight: 800, fontSize: 16 }}>Zero</span></div>
            <div style={{ fontSize: 12.5, color: 'var(--tx-2)', lineHeight: 1.55 }}>A equipe autônoma de IA para solo founders. Sua empresa funcionando enquanto você dorme.</div>
          </div>
          {Object.entries(cols).map(([h, items]) => (
            <div key={h}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>{h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {items.map(it => <a key={it} href="#" style={{ fontSize: 13, color: 'var(--tx-2)', textDecoration: 'none' }} onMouseEnter={e=>e.target.style.color='var(--tx-0)'} onMouseLeave={e=>e.target.style.color='var(--tx-2)'}>{it}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="row between" style={{ ...wrap, marginTop: 40, paddingTop: 22, borderTop: '1px solid var(--line)', fontSize: 12, color: 'var(--tx-3)' }}>
          <span>© 2026 Zero Labs, Inc. Todos os direitos reservados.</span>
          <span className="row gap16">{['X','LinkedIn','GitHub','Discord'].map(s => <a key={s} href="#" style={{ color: 'inherit', textDecoration: 'none' }}>{s}</a>)}</span>
        </div>
      </div>
    );
  }

  function SectionTitle({ eyebrow, title, sub }) {
    return (
      <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
        <div className="eyebrow" style={{ color: 'var(--violet-2)', marginBottom: 12 }}>{eyebrow}</div>
        <h2 style={{ fontSize: 'clamp(26px,3.4vw,40px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.08 }}>{title}</h2>
        {sub && <p style={{ fontSize: 15.5, color: 'var(--tx-2)', marginTop: 14, lineHeight: 1.55 }}>{sub}</p>}
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Landing = Landing;
})();