// Cefalia landing pages — shared content + atoms (window.LP)
const K = window.CEF;
const LOGOS = window.CefaliaLogos;
const getLogo = (key) => (LOGOS.list.find((l) => l.key === key) || LOGOS.list[0]).Comp;

const CONTENT = {
  nav: ['Plataforma', 'Produtos', 'Para devs', 'Preços'],
  hero: {
    eyebrow: 'A plataforma-cérebro',
    title: 'O cérebro do seu ecossistema.',
    sub: 'iEntrega, Atende AI e o que vier — conectados por uma só inteligência. Uma identidade, um login, um cérebro.',
    cta: 'Começar grátis',
    cta2: 'Conhecer a plataforma',
  },
  products: [
    { name: 'iEntrega', tag: 'Logística + prova', glyph: 'i', from: '#15B37D', to: '#0E9466', status: 'no ar', desc: 'Toda entrega chega ao destino com prova selada e auditável.' },
    { name: 'Atende AI', tag: 'Atendimento no WhatsApp', glyph: 'A', from: '#15B37D', to: '#16B5C7', status: 'no ar', desc: 'Sua atendente de IA que responde, orça e vende na hora.' },
    { name: 'Em breve', tag: 'novo lóbulo', glyph: '+', from: '#6354F2', to: '#16B5C7', status: 'em breve', desc: 'O próximo produto a se conectar ao cérebro.' },
  ],
  values: [
    ['Uma identidade', 'Um login, uma marca. Seus clientes reconhecem a família inteira de produtos.'],
    ['Dados que conversam', 'O que um produto aprende, o outro aproveita. Nada se perde entre sistemas.'],
    ['IA compartilhada', 'O mesmo cérebro de inteligência por trás de cada produto do ecossistema.'],
  ],
  stats: [['2', 'produtos no ar'], ['1', 'cérebro de IA'], ['∞', 'novos lóbulos'], ['100%', 'conectados']],
};

// ── atoms ───────────────────────────────────────────────────────
function Btn({ children, accent = K.iris, variant = 'solid', dark, big }) {
  const pad = big ? '16px 28px' : '13px 22px';
  const fs = big ? 16 : 14.5;
  const base = { fontFamily: K.body, fontWeight: 700, fontSize: fs, padding: pad, borderRadius: 12, border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8, lineHeight: 1, transition: 'transform .12s, opacity .12s', whiteSpace: 'nowrap' };
  let st;
  if (variant === 'solid') st = { ...base, background: accent, color: '#fff' };
  else if (variant === 'ink') st = { ...base, background: dark ? '#fff' : K.ink, color: dark ? K.ink : '#fff' };
  else st = { ...base, background: 'transparent', color: dark ? '#fff' : K.ink, border: `1.5px solid ${dark ? 'rgba(255,255,255,0.22)' : K.line}` };
  return <button style={st} onMouseDown={(e) => e.preventDefault()}>{children}</button>;
}

function Pill({ children, color = K.iris, dark }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, border: `1px solid ${dark ? 'rgba(255,255,255,0.16)' : K.line}`, borderRadius: 999, padding: '7px 14px', fontFamily: K.body, fontWeight: 600, fontSize: 13, color: dark ? K.paper : K.ink, background: dark ? 'rgba(255,255,255,0.04)' : 'transparent', whiteSpace: 'nowrap' }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: color }} />{children}
    </span>
  );
}

// Brand lockup (mark + wordmark)
function Brand({ logo = 'cortex', size = 30, color, accent }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
      {React.createElement(getLogo(logo), { s: size })}
      <LOGOS.Wordmark size={size * 0.74} color={color} accent={accent} />
    </div>
  );
}

// A product app tile
function ProductTile({ p, size = 56 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: size * 0.28, background: `linear-gradient(135deg, ${p.from}, ${p.to})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: K.display, fontWeight: 800, fontSize: size * 0.42, boxShadow: '0 8px 22px rgba(14,17,23,0.16)', flex: '0 0 auto' }}>{p.glyph}</div>
  );
}

window.LP = { K, CONTENT, getLogo, Btn, Pill, Brand, ProductTile };