// Cefalia — Landing (Noir Full): premium escuro + promessa de integração
(function () {
  const { K, CONTENT, Btn, Pill, Brand, ProductTile, getLogo } = window.LP;
  const I = window.Icons;
  const C = CONTENT;

  const wrap = { maxWidth: 1140, margin: '0 auto', padding: '0 56px' };
  const surf = { background: K.ink2, border: `1px solid ${K.ink3}` };

  // ── NAV ──────────────────────────────────────────────
  function Nav() {
    return (
      <div style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(14,17,23,0.72)', backdropFilter: 'blur(16px)', borderBottom: `1px solid ${K.ink3}` }}>
        <div style={{ ...wrap, display: 'flex', alignItems: 'center', padding: '16px 56px' }}>
          <Brand logo="cortex" size={30} color={K.paper} />
          <div style={{ display: 'flex', gap: 28, marginLeft: 50 }}>
            {['Plataforma', 'Produtos', 'Integrações', 'Para devs', 'Preços'].map((n) => (
              <a key={n} style={{ fontFamily: K.body, fontSize: 14.5, color: K.slate3, fontWeight: 500 }}>{n}</a>
            ))}
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 14, alignItems: 'center' }}>
            <a style={{ fontFamily: K.body, fontSize: 14.5, color: K.paper, fontWeight: 600 }}>Entrar</a>
            <Btn accent={K.iris}>{C.hero.cta}</Btn>
          </div>
        </div>
      </div>
    );
  }

  // ── HERO ─────────────────────────────────────────────
  function Hero() {
    return (
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)', width: 900, height: 660, background: 'radial-gradient(ellipse at center, rgba(99,84,242,0.32), transparent 62%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: 80, right: -140, width: 520, height: 520, background: 'radial-gradient(circle, rgba(22,181,199,0.16), transparent 65%)', pointerEvents: 'none' }} />
        <div style={{ ...wrap, position: 'relative', textAlign: 'center', padding: '76px 24px 36px' }}>
          <div style={{ display: 'inline-flex' }}><Pill color={K.iris} dark>A plataforma-cérebro</Pill></div>
          <div style={{ display: 'flex', justifyContent: 'center', margin: '32px 0 6px' }}>{React.createElement(getLogo('cortex'), { s: 92 })}</div>
          <h1 style={{ fontFamily: K.display, fontWeight: 800, fontSize: 74, lineHeight: 0.98, letterSpacing: '-0.04em', margin: '12px 0 0', color: K.paper }}>
            O cérebro do seu<br /><span style={{ background: K.gradIris, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>ecossistema.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: K.slate3, maxWidth: 660, margin: '24px auto 0' }}>
            iEntrega, Atende AI — e <b style={{ color: K.paper }}>qualquer ferramenta que você já usa</b> — conectados a uma só inteligência. Uma identidade, um login, um cérebro.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32 }}>
            <Btn accent={K.iris} big>{C.hero.cta} →</Btn>
            <Btn variant="ghost" dark big>Ver integrações</Btn>
          </div>
          <div style={{ display: 'flex', gap: 22, justifyContent: 'center', marginTop: 22, fontSize: 13.5, color: K.slate3 }}>
            <span>✓ Conecta com o que você já usa</span><span>✓ Um login pra tudo</span><span>✓ Grátis pra começar</span>
          </div>
        </div>
        {/* product tiles */}
        <div style={{ ...wrap, marginTop: 44 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {C.products.map((p) => (
              <div key={p.name} style={{ ...surf, borderRadius: 20, padding: 24 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <ProductTile p={p} size={50} />
                  <div><div style={{ fontWeight: 700, fontSize: 17, color: K.paper }}>{p.name}</div><div style={{ fontSize: 12.5, color: K.slate3 }}>{p.tag}</div></div>
                  <span style={{ marginLeft: 'auto' }}><Pill color={p.status === 'no ar' ? K.emerald : K.amber} dark>{p.status}</Pill></span>
                </div>
                <p style={{ fontSize: 14, color: K.slate3, lineHeight: 1.55, marginTop: 16, marginBottom: 0 }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // ── INTEGRATION HUB ──────────────────────────────────
  const CONNECTORS = [
    { i: 'chat', n: 'WhatsApp', c: K.emerald, a: -90 },
    { i: 'erp', n: 'ERP', c: K.teal, a: -45 },
    { i: 'sheet', n: 'Planilhas', c: K.emerald, a: 0 },
    { i: 'card', n: 'Pagamentos', c: K.amber, a: 45 },
    { i: 'crm', n: 'CRM', c: K.iris, a: 90 },
    { i: 'calendar', n: 'Agenda', c: K.teal, a: 135 },
    { i: 'mail', n: 'E-mail', c: K.irisLt, a: 180 },
    { i: 'api', n: 'Sua API', c: K.iris, a: 225 },
  ];
  function Hub() {
    const SZ = 560, CT = SZ / 2, R = 215;
    const pt = (a) => [CT + Math.cos(a * Math.PI / 180) * R, CT + Math.sin(a * Math.PI / 180) * R];
    return (
      <div style={{ width: SZ, height: SZ, position: 'relative', margin: '0 auto' }}>
        <svg width={SZ} height={SZ} style={{ position: 'absolute', inset: 0 }}>
          <circle cx={CT} cy={CT} r={R} fill="none" stroke="rgba(255,255,255,0.08)" strokeDasharray="2 7" />
          <circle cx={CT} cy={CT} r={130} fill="none" stroke="rgba(255,255,255,0.06)" strokeDasharray="2 7" />
          {CONNECTORS.map((c, k) => { const [x, y] = pt(c.a); return <line key={k} x1={CT} y1={CT} x2={x} y2={y} stroke="rgba(255,255,255,0.07)" strokeWidth="1.5" />; })}
        </svg>
        {/* center brain */}
        <div style={{ position: 'absolute', left: CT, top: CT, transform: 'translate(-50%,-50%)', width: 150, height: 150, borderRadius: '50%', background: K.gradIris, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 90px rgba(99,84,242,0.55)' }}>
          {React.createElement(getLogo('cortex'), { s: 90 })}
        </div>
        {CONNECTORS.map((c, k) => {
          const [x, y] = pt(c.a);
          return (
            <div key={k} style={{ position: 'absolute', left: x, top: y, transform: 'translate(-50%,-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 60, height: 60, borderRadius: 16, background: K.ink2, border: `1px solid ${K.ink3}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: c.c, boxShadow: '0 8px 20px rgba(0,0,0,0.3)' }}>
                {React.createElement(I[c.i], { s: 26, color: c.c })}
              </div>
              <span style={{ fontFamily: K.body, fontSize: 12.5, fontWeight: 600, color: K.slate3, whiteSpace: 'nowrap' }}>{c.n}</span>
            </div>
          );
        })}
      </div>
    );
  }

  function Integrations() {
    return (
      <div style={{ ...wrap, marginTop: 110 }}>
        <div style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto' }}>
          <div style={{ fontFamily: K.mono, fontSize: 12, letterSpacing: '0.18em', color: K.teal, textTransform: 'uppercase' }}>Integrações</div>
          <h2 style={{ fontFamily: K.display, fontWeight: 800, fontSize: 50, letterSpacing: '-0.035em', color: K.paper, margin: '16px 0 0', lineHeight: 1.02 }}>
            O cérebro que fala com<br /><span style={{ color: K.teal }}>qualquer ferramenta.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: K.slate3, margin: '18px 0 0' }}>
            WhatsApp, ERP, CRM, planilhas, gateways de pagamento, seus próprios sistemas. Se tem API, a Cefalia conversa — e leva tudo pro mesmo lugar.
          </p>
        </div>
        <div style={{ marginTop: 30 }}><Hub /></div>
        {/* capability cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginTop: 40 }}>
          {[
            { ic: 'plug', t: 'Conectores prontos', d: 'Dezenas de ferramentas que ligam num clique. Sem código.', c: K.emerald },
            { ic: 'api', t: 'API & SDK abertos', d: 'O que não tem conector, você pluga via @cefalia/brain.', c: K.iris },
            { ic: 'webhook', t: 'Webhooks & eventos', d: 'Cada ação vira um evento que dispara o resto do fluxo.', c: K.teal },
          ].map((x) => (
            <div key={x.t} style={{ ...surf, borderRadius: 20, padding: 26 }}>
              <div style={{ width: 46, height: 46, borderRadius: 12, background: 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: x.c }}>{React.createElement(I[x.ic], { s: 24, color: x.c })}</div>
              <h3 style={{ fontFamily: K.display, fontWeight: 700, fontSize: 21, letterSpacing: '-0.02em', color: K.paper, margin: '18px 0 8px' }}>{x.t}</h3>
              <p style={{ fontSize: 14.5, color: K.slate3, lineHeight: 1.6, margin: 0 }}>{x.d}</p>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // ── API BLOCK ────────────────────────────────────────
  function CodePanel() {
    const Row = ({ children }) => <div style={{ whiteSpace: 'pre' }}>{children}</div>;
    const g = { color: '#5B6573' }, w = { color: '#E7E5DE' };
    return (
      <div style={{ background: '#0A0C10', border: `1px solid ${K.ink3}`, borderRadius: 16, overflow: 'hidden', boxShadow: '0 30px 80px rgba(0,0,0,0.5)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: `1px solid ${K.ink3}` }}>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }} />
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }} />
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }} />
          <span style={{ marginLeft: 10, fontFamily: K.mono, fontSize: 12, color: '#5B6573' }}>brain.connect()</span>
        </div>
        <div style={{ padding: 22, fontFamily: K.mono, fontSize: 13.5, lineHeight: 1.85 }}>
          <Row><span style={g}>// um cérebro pra produtos + ferramentas</span></Row>
          <Row><span style={{ color: '#9588FF' }}>import</span><span style={w}>{' { cefalia } '}</span><span style={{ color: '#9588FF' }}>from</span> <span style={{ color: '#15B37D' }}>'@cefalia/brain'</span></Row>
          <Row>{' '}</Row>
          <Row><span style={{ color: '#16B5C7' }}>const</span><span style={w}> brain = cefalia.</span><span style={{ color: '#9588FF' }}>init</span><span style={w}>(apiKey)</span></Row>
          <Row>{' '}</Row>
          <Row><span style={g}>// ligue qualquer ferramenta</span></Row>
          <Row><span style={w}>brain.</span><span style={{ color: '#9588FF' }}>connect</span><span style={w}>(</span><span style={{ color: '#15B37D' }}>'whatsapp'</span><span style={w}>, </span><span style={{ color: '#15B37D' }}>'omie'</span><span style={w}>)</span></Row>
          <Row><span style={w}>brain.</span><span style={{ color: '#9588FF' }}>on</span><span style={w}>(</span><span style={{ color: '#15B37D' }}>'pedido.novo'</span><span style={w}>, run)</span>  <span style={{ color: '#F2A33C' }}>→ 200 OK</span></Row>
        </div>
      </div>
    );
  }

  function ApiBlock() {
    return (
      <div style={{ ...wrap, marginTop: 110, display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: K.mono, fontSize: 12.5, color: K.emerald, border: `1px solid ${K.ink3}`, borderRadius: 999, padding: '6px 12px' }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: K.emerald }} />all systems operational
          </span>
          <h2 style={{ fontFamily: K.display, fontWeight: 800, fontSize: 46, lineHeight: 1.0, letterSpacing: '-0.035em', color: K.paper, margin: '20px 0 0' }}>
            Uma API.<br />Tudo <span style={{ color: K.iris }}>conectado.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: K.slate3, margin: '18px 0 0', maxWidth: 420 }}>
            O mesmo núcleo de identidade, dados e IA por trás dos produtos — aberto pra você plugar o que quiser. Feito pra quem constrói.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 28 }}>
            <Btn accent={K.iris} big>Ler os docs →</Btn>
            <Btn variant="ghost" dark big>Ver no GitHub</Btn>
          </div>
          <div style={{ display: 'flex', gap: 30, marginTop: 36 }}>
            {[['38ms', 'latência p50'], ['99.98%', 'uptime'], ['REST', '+ Webhooks']].map(([a, b]) => (
              <div key={b}><div style={{ fontFamily: K.display, fontWeight: 800, fontSize: 26, color: K.paper }}>{a}</div><div style={{ fontFamily: K.mono, fontSize: 11.5, color: K.slate3 }}>{b}</div></div>
            ))}
          </div>
        </div>
        <CodePanel />
      </div>
    );
  }

  // ── SERVICE BAND ─────────────────────────────────────
  function Service() {
    const steps = [
      { n: '01', t: 'Conta o que você usa', d: 'WhatsApp, seu ERP, planilhas, sistemas legados. A gente mapeia.' },
      { n: '02', t: 'Conectamos ao cérebro', d: 'Nosso time integra cada ferramenta à Cefalia — conector pronto ou sob medida.' },
      { n: '03', t: 'Tudo num lugar só', d: 'Dados, atendimento e operação fluindo numa só inteligência.' },
    ];
    return (
      <div style={{ ...wrap, marginTop: 110 }}>
        <div style={{ background: 'linear-gradient(180deg, rgba(99,84,242,0.10), rgba(22,181,199,0.05))', border: `1px solid ${K.ink3}`, borderRadius: 28, padding: '52px 48px' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 30, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 540 }}>
              <div style={{ fontFamily: K.mono, fontSize: 12, letterSpacing: '0.18em', color: K.irisLt, textTransform: 'uppercase' }}>Integração sob medida</div>
              <h2 style={{ fontFamily: K.display, fontWeight: 800, fontSize: 40, letterSpacing: '-0.03em', color: K.paper, margin: '14px 0 0', lineHeight: 1.05 }}>
                Não quer codar? A gente conecta pra você.
              </h2>
              <p style={{ fontSize: 17, color: K.slate3, lineHeight: 1.6, margin: '14px 0 0' }}>
                Time de integração da Cefalia liga seus sistemas ao cérebro — do WhatsApp ao seu ERP — e entrega tudo funcionando.
              </p>
            </div>
            <Btn accent={K.iris} big>Falar com especialista →</Btn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, marginTop: 44 }}>
            {steps.map((s) => (
              <div key={s.n} style={{ borderTop: `2px solid ${K.ink3}`, paddingTop: 18 }}>
                <div style={{ fontFamily: K.mono, fontSize: 13, color: K.irisLt }}>{s.n}</div>
                <h3 style={{ fontFamily: K.display, fontWeight: 700, fontSize: 20, letterSpacing: '-0.02em', color: K.paper, margin: '10px 0 8px' }}>{s.t}</h3>
                <p style={{ fontSize: 14.5, color: K.slate3, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // ── VALUES ───────────────────────────────────────────
  function Values() {
    return (
      <div style={{ ...wrap, marginTop: 110 }}>
        <div style={{ fontFamily: K.mono, fontSize: 12, letterSpacing: '0.16em', color: K.iris, textTransform: 'uppercase' }}>Por que um cérebro só</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 40, marginTop: 26 }}>
          {C.values.map(([t, d], i) => (
            <div key={t}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(99,84,242,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: K.irisLt, fontFamily: K.mono, fontWeight: 700 }}>{`0${i + 1}`}</div>
              <h3 style={{ fontFamily: K.display, fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em', color: K.paper, margin: '16px 0 8px' }}>{t}</h3>
              <p style={{ fontSize: 15, color: K.slate3, lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // ── CTA + FOOTER ─────────────────────────────────────
  function Cta() {
    return (
      <div style={{ ...wrap, margin: '110px auto 0' }}>
        <div style={{ background: K.gradIris, borderRadius: 28, padding: '60px 48px', textAlign: 'center', overflow: 'hidden' }}>
          <h2 style={{ fontFamily: K.display, fontWeight: 800, fontSize: 46, letterSpacing: '-0.035em', color: '#fff', margin: 0 }}>Conecte tudo a um só cérebro.</h2>
          <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 17, marginTop: 14 }}>Comece com um produto, ligue suas ferramentas, cresça com o ecossistema.</p>
          <div style={{ marginTop: 28, display: 'flex', gap: 14, justifyContent: 'center' }}>
            <Btn variant="ink" dark big>{C.hero.cta} →</Btn>
            <Btn variant="ghost" dark big>Falar com vendas</Btn>
          </div>
        </div>
      </div>
    );
  }
  function Footer() {
    const cols = [['Produtos', ['iEntrega', 'Atende AI', 'Em breve']], ['Plataforma', ['Integrações', 'API & SDK', 'Webhooks', 'Status']], ['Empresa', ['Sobre', 'Preços', 'Contato']]];
    return (
      <div style={{ ...wrap, marginTop: 90, paddingTop: 44, paddingBottom: 44, borderTop: `1px solid ${K.ink3}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }}>
          <div>
            <Brand logo="cortex" size={28} color={K.paper} />
            <p style={{ fontSize: 13.5, color: K.slate3, lineHeight: 1.6, marginTop: 16, maxWidth: 240 }}>O cérebro que conecta seus produtos e ferramentas numa só inteligência.</p>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: K.body, fontWeight: 700, fontSize: 14, color: K.paper, marginBottom: 14 }}>{h}</div>
              {items.map((it) => <div key={it} style={{ fontSize: 13.5, color: K.slate3, marginBottom: 10 }}>{it}</div>)}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', marginTop: 36, paddingTop: 20, borderTop: `1px solid ${K.ink3}` }}>
          <span style={{ fontFamily: K.mono, fontSize: 12.5, color: K.slate3 }}>© 2026 Cefalia · cérebro + IA</span>
          <span style={{ marginLeft: 'auto', fontFamily: K.body, fontSize: 13, color: K.slate3 }}>cefalia.ai</span>
        </div>
      </div>
    );
  }

  function NoirFull() {
    return (
      <div style={{ background: K.ink, color: K.paper, fontFamily: K.body, minHeight: '100vh' }}>
        <Nav />
        <Hero />
        <Integrations />
        <ApiBlock />
        <Service />
        <Values />
        <Cta />
        <Footer />
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<NoirFull />);
})();