// prumo-brandkit.jsx — Manual da Marca do Prumo
// Símbolo canônico = fio de prumo + peso em losango âmbar (igual ao favicon).
// Paleta creme quente + tipografia Poppins/Nippo — alinhada à plataforma (prumo-ds.css).

// Tinta creme quente (#e8dfc5) e fundo quase-preto (#0a0a0a) — mesma da plataforma.
const INK='#e8dfc5', BG='#0a0a0a', AC='#e0a14e';
// Tema claro: off-white quente (#f8f2dc) e tinta escura (#171717) da plataforma.
const LINK='#171717', LBG='#f8f2dc', LAC='#b9772a';

/* ---------------- marca canônica ---------------- */
function Sym({size=48, ink=INK, accent=AC, line=true}){
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" style={{display:'block',flexShrink:0}}>
      <line x1="24" y1="12" x2="24" y2="23" stroke={ink} strokeWidth="3" strokeLinecap="round"/>
      <polygon points="24,23 31,32 24,44 17,32" fill={accent}/>
      {line && <line x1="17" y1="32" x2="31" y2="32" stroke={ink} strokeWidth="1.4" opacity=".35"/>}
    </svg>
  );
}
// Wordmark "Prumo" = Poppins Medium (500) — igual ao SVG da logo e ao componente do produto.
function WM({size=34, ink=INK, weight=500}){
  return <span style={{fontFamily:"'Poppins',sans-serif",fontWeight:weight,letterSpacing:'-.01em',fontSize:size,color:ink,lineHeight:1}}>Prumo</span>;
}
// lockup horizontal
function LK({size=48, ink=INK, accent=AC, gap=14}){
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap}}>
      <Sym size={size} ink={ink} accent={accent}/>
      <WM size={size*0.64} ink={ink}/>
    </span>
  );
}
// lockup vertical
function LKv({size=64, ink=INK, accent=AC}){
  return (
    <span style={{display:'inline-flex',flexDirection:'column',alignItems:'center',gap:size*0.22}}>
      <Sym size={size} ink={ink} accent={accent}/>
      <WM size={size*0.52} ink={ink}/>
    </span>
  );
}
function AppTile({size=92, bg=BG, ink=INK, accent=AC, radius}){
  const r = radius!=null?radius:size*0.235;
  return (
    <div style={{width:size,height:size,borderRadius:r,background:bg,display:'grid',placeItems:'center',
      border:'1px solid rgba(255,255,255,.08)',boxShadow:'0 12px 34px -18px rgba(0,0,0,.85)'}}>
      <Sym size={size*0.62} ink={ink} accent={accent}/>
    </div>
  );
}

/* ---------------- layout helpers ---------------- */
function Section({n, kicker, title, sub, children, style}){
  return (
    <section className="bk-sec" style={style}>
      <div className="bk-wrap">
        <div className="bk-head">
          <span className="bk-num">{n}</span>
          <div>
            <div className="bk-kicker">{kicker}</div>
            <h2 className="bk-title">{title}</h2>
            {sub && <p className="bk-sub">{sub}</p>}
          </div>
        </div>
        {children}
      </div>
    </section>
  );
}
const Mono = ({children, c='var(--text-3)', style}) => <span className="spec" style={{color:c,...style}}>{children}</span>;
const XIcon = () => <svg className="dont-x" viewBox="0 0 24 24" style={{stroke:'#e06a5a',fill:'none',strokeWidth:2.4,strokeLinecap:'round'}}><path d="M6 6l12 12M18 6L6 18"/></svg>;
const Check = ({c='#56bd83'}) => <svg width="14" height="14" viewBox="0 0 24 24" style={{stroke:c,fill:'none',strokeWidth:2.6,strokeLinecap:'round',strokeLinejoin:'round'}}><path d="M4 12.5l5 5 11-12"/></svg>;

/* icon set (mesmo traço do produto) */
const I = {
  grid:"M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
  rocket:"M12 3c3 1.5 5 4.5 5 8l-3 3-4 0-3-3c0-3.5 2-6.5 5-8zM12 8.5h.01M9 16l-2 4M15 16l2 4",
  receipt:"M6 3h12v18l-2-1.4L14 21l-2-1.4L10 21l-2-1.4L6 21zM9 8h6M9 12h6",
  folder:"M3 6h6l2 2h10v11H3zM3 8h18",
  calendar:"M4 5h16v15H4zM4 9h16M8 3v4M16 3v4",
  building:"M5 21V5l7-2 7 2v16M5 21h14M9 9h.01M9 13h.01M9 17h.01M15 9h.01M15 13h.01M15 17h.01",
  layers:"M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 17l9 5 9-5",
  arrow:"M5 12h14M13 6l6 6-6 6",
};
const Icon = ({name, size=22}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" className="ico-stroke" style={{display:'block'}}><path d={I[name]}/></svg>
);

/* =========================================================
   COVER
========================================================= */
function Cover(){
  return (
    <header style={{minHeight:'94vh',display:'flex',flexDirection:'column',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',inset:0,background:'radial-gradient(70% 90% at 50% -8%, color-mix(in oklab,var(--accent) 13%,transparent), transparent 58%)',pointerEvents:'none'}}></div>
      <div className="bk-wrap" style={{flex:1,display:'flex',flexDirection:'column',position:'relative'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:34}}>
          <LK size={30}/>
          <Mono>MANUAL DA MARCA</Mono>
        </div>
        <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',padding:'40px 0'}}>
          <div style={{marginBottom:38}}><Sym size={92}/></div>
          <h1 className="bk-title" style={{fontSize:'clamp(46px,9vw,108px)',lineHeight:.96}}>
            Manual da<br/>Marca
          </h1>
          <p className="bk-sub" style={{fontSize:20,maxWidth:520,marginTop:26}}>
            O sistema visual do Prumo — símbolo, cores, tipografia e voz.
            Tudo o que mantém a marca no prumo, em qualquer aplicação.
          </p>
        </div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',paddingBottom:30,borderTop:'1px solid var(--border)',paddingTop:22}}>
          <Mono>GESTÃO PARA ARQUITETURA &amp; INTERIORES</Mono>
          <Mono>v1.0 — 2026</Mono>
        </div>
      </div>
    </header>
  );
}

/* =========================================================
   01 — A MARCA
========================================================= */
function MarcaSection(){
  const vals=[
    ['Preciso','Cada detalhe alinhado. Nada fora do lugar, nada por acaso.'],
    ['Calmo','Tira o escritório do caos sem gritar. Confiança silenciosa.'],
    ['Prático','Fala a língua de quem faz obra: briefing, ambiente, medição, entrega.'],
  ];
  return (
    <Section n="01" kicker="A marca" title="Tudo no prumo." sub="Prumo é a plataforma que reúne prospecção, orçamentos, projetos, obras e financeiro do escritório de arquitetura em um só lugar.">
      <div className="grid2" style={{gap:18,alignItems:'stretch'}}>
        <div className="tile card-pad blueprint" style={{padding:'40px 38px',display:'flex',flexDirection:'column',justifyContent:'center'}}>
          <div className="spec" style={{marginBottom:14}}>SUBSTANTIVO · MASCULINO</div>
          <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:700,fontSize:40,letterSpacing:'-.02em'}}>
            prumo <span style={{color:'var(--text-3)',fontWeight:400,fontSize:22}}>/ˈpɾu.mu/</span>
          </div>
          <p style={{color:'var(--text-2)',fontSize:16.5,lineHeight:1.6,marginTop:16,maxWidth:440}}>
            Instrumento de peso suspenso por um fio que indica a vertical exata.
            Estar <strong style={{color:'var(--text)'}}>“no prumo”</strong> é estar perfeitamente alinhado,
            em ordem, sob controle.
          </p>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <div className="tile card-pad" style={{padding:'28px 30px'}}>
            <div className="spec" style={{marginBottom:12}}>POSICIONAMENTO</div>
            <p style={{fontFamily:"'Poppins',sans-serif",fontWeight:600,fontSize:'clamp(20px,2.2vw,26px)',letterSpacing:'-.02em',lineHeight:1.25,margin:0}}>
              O escritório de arquitetura, do primeiro contato à entrega da obra, finalmente em um só lugar.
            </p>
          </div>
          <div className="tile card-pad" style={{padding:'24px 30px',display:'flex',alignItems:'center',gap:18,background:'var(--surface-2)'}}>
            <Sym size={34}/>
            <div>
              <div className="spec" style={{marginBottom:6}}>ASSINATURA</div>
              <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:700,fontSize:21,letterSpacing:'-.02em'}}>Coloque sua operação no prumo.</div>
            </div>
          </div>
        </div>
      </div>
      <div className="grid3" style={{marginTop:18}}>
        {vals.map(([t,d])=>(
          <div key={t} className="tile card-pad" style={{padding:'26px 26px'}}>
            <div style={{width:8,height:8,borderRadius:2,background:'var(--accent)',transform:'rotate(45deg)',marginBottom:18}}></div>
            <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:650,fontSize:19,letterSpacing:'-.015em'}}>{t}</div>
            <p style={{color:'var(--text-2)',fontSize:14.5,lineHeight:1.55,marginTop:8}}>{d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* =========================================================
   02 — LOGO
========================================================= */
function LogoSection(){
  return (
    <Section n="02" kicker="Logo" title="O fio de prumo." sub="A marca é a tradução literal do nome: o fio que pende e o peso em losango que aponta a vertical exata. O peso é sempre âmbar.">
      {/* lockup principal */}
      <div className="tile" style={{height:300,display:'grid',placeItems:'center',marginBottom:18}}>
        <span className="tile-label spec">LOCKUP PRINCIPAL</span>
        <LK size={64}/>
      </div>

      <div className="grid3" style={{marginBottom:18}}>
        <div className="tile" style={{height:190,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">SÍMBOLO</span>
          <Sym size={64}/>
        </div>
        <div className="tile" style={{height:190,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">WORDMARK</span>
          <WM size={40}/>
        </div>
        <div className="tile" style={{height:190,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">LOCKUP VERTICAL</span>
          <LKv size={58}/>
        </div>
      </div>

      {/* monocromático */}
      <div className="grid4">
        <div className="tile" style={{height:150,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">PADRÃO</span>
          <LK size={32}/>
        </div>
        <div className="tile" style={{height:150,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">NEGATIVO 1 COR</span>
          <LK size={32} accent={INK}/>
        </div>
        <div className="tile" style={{height:150,display:'grid',placeItems:'center',background:'#fff'}}>
          <span className="tile-label spec" style={{color:'#9a9aa2'}}>POSITIVO 1 COR</span>
          <LK size={32} ink={LINK} accent={LINK}/>
        </div>
        <div className="tile" style={{height:150,display:'grid',placeItems:'center',background:LBG}}>
          <span className="tile-label spec" style={{color:'#9a9aa2'}}>TEMA CLARO</span>
          <LK size={32} ink={LINK} accent={LAC}/>
        </div>
      </div>
    </Section>
  );
}

/* =========================================================
   03 — CONSTRUÇÃO & PROTEÇÃO
========================================================= */
function ConstructionSection(){
  // unidade X = metade da largura do losango. Área de proteção = 1X em volta.
  return (
    <Section n="03" kicker="Construção" title="Geometria & respiro." sub="O símbolo cabe em uma grade quadrada. Use a unidade X para garantir respiro e legibilidade — nunca encoste outros elementos antes desse limite.">
      <div className="grid2" style={{alignItems:'stretch'}}>
        {/* área de proteção */}
        <div className="tile blueprint" style={{minHeight:330,display:'flex',flexDirection:'column'}}>
          <span className="tile-label spec">ÁREA DE PROTEÇÃO · 1X</span>
          <div style={{flex:1,display:'grid',placeItems:'center',padding:30}}>
            <div style={{position:'relative',padding:52}}>
              <div style={{position:'absolute',inset:0,border:'1px dashed rgba(224,161,78,.55)',borderRadius:6}}></div>
              {/* marcas de X */}
              <span style={{position:'absolute',top:-9,left:'50%',transform:'translateX(-50%)',background:'var(--bg-2)',padding:'0 6px'}}><Mono c="var(--accent)">1X</Mono></span>
              <span style={{position:'absolute',left:-12,top:'50%',transform:'translateY(-50%)',background:'var(--bg-2)',padding:'2px 4px'}}><Mono c="var(--accent)">1X</Mono></span>
              <LK size={48}/>
            </div>
          </div>
          <div style={{padding:'0 18px 16px'}}><span className="spec-2">X = metade da largura do peso em losango.</span></div>
        </div>

        {/* tamanhos mínimos */}
        <div className="tile" style={{minHeight:330,display:'flex',flexDirection:'column'}}>
          <span className="tile-label spec">TAMANHOS MÍNIMOS</span>
          <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',gap:30,padding:'56px 34px 30px'}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',borderBottom:'1px solid var(--border)',paddingBottom:26}}>
              <LK size={20}/>
              <div style={{textAlign:'right'}}>
                <div className="spec-2">Lockup · digital</div>
                <Mono>mín. 120 px de largura</Mono>
              </div>
            </div>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
              <Sym size={24}/>
              <div style={{textAlign:'right'}}>
                <div className="spec-2">Símbolo isolado</div>
                <Mono>mín. 24 px / 6 mm</Mono>
              </div>
            </div>
          </div>
          <div style={{padding:'0 18px 16px'}}><span className="spec-2">Abaixo do mínimo, use só o símbolo.</span></div>
        </div>
      </div>
    </Section>
  );
}

/* =========================================================
   04 — USOS INDEVIDOS
========================================================= */
function MisuseSection(){
  const items=[
    ['Não gire a marca', <div style={{transform:'rotate(-13deg)'}}><LK size={26}/></div>],
    ['Não recolore o peso', <LK size={26} accent="#7099ec"/>],
    ['Não distorça as proporções', <div style={{transform:'scaleX(1.5)'}}><LK size={26}/></div>],
    ['Não troque a tipografia', <span style={{display:'inline-flex',alignItems:'center',gap:12}}><Sym size={28}/><span style={{fontFamily:'Georgia,serif',fontSize:24,fontStyle:'italic'}}>Prumo</span></span>],
    ['Não adicione sombra ou contorno', <div style={{filter:'drop-shadow(0 4px 7px rgba(224,161,78,.6))'}}><LK size={26}/></div>],
    ['Não use em fundo de baixo contraste', <div style={{background:'#3a3328',padding:'10px 14px',borderRadius:8}}><LK size={26}/></div>],
  ];
  return (
    <Section n="04" kicker="Usos indevidos" title="O que nunca fazer." sub="A integridade da marca depende de consistência. Estes são os erros mais comuns — evite todos.">
      <div className="grid3">
        {items.map(([cap,node],i)=>(
          <div key={i}>
            <div className="dont">
              <span className="dont-tag"><XIcon/></span>
              {node}
            </div>
            <p className="dont-cap">{cap}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* =========================================================
   05 — COR
========================================================= */
function Swatch({hex, name, sub, use, ink='#fff', border}){
  return (
    <div className="sw">
      <div className="sw-chip" style={{background:hex, borderBottom:border?'1px solid var(--border)':'none'}}>
        <span style={{fontFamily:"'Nippo',monospace",fontSize:12,color:ink,opacity:.85}}>{hex.toUpperCase()}</span>
      </div>
      <div className="sw-body">
        <div className="sw-name">{name}</div>
        <div className="sw-meta">
          <span>{sub}</span>
        </div>
        {use && <div className="sw-use">{use}</div>}
      </div>
    </div>
  );
}
function ColorSection(){
  return (
    <Section n="05" kicker="Cor" title="Carvão & creme." sub="Base quase-preta e quente, texto creme suave e um único acento âmbar — o peso do prumo. Mesma paleta da plataforma. As cores funcionais aparecem só dentro do produto, em status.">
      {/* fundação */}
      <div className="spec" style={{marginBottom:14}}>FUNDAÇÃO</div>
      <div className="grid4" style={{marginBottom:34}}>
        <Swatch hex="#0a0a0a" name="Carvão" sub="--bg" use="Fundo principal de toda a marca." />
        <Swatch hex="#16140f" name="Superfície" sub="--surface" use="Cards, painéis e blocos sobre o fundo." />
        <Swatch hex="#23201a" name="Superfície 3" sub="--surface-3" use="Estados ativos e realces sutis." />
        <Swatch hex="#e8dfc5" name="Creme" sub="--text" use="Texto e marca sobre fundo escuro." ink="#0a0a0a" border />
      </div>

      {/* acento */}
      <div className="spec" style={{marginBottom:14}}>ACENTO DE MARCA</div>
      <div className="grid2" style={{marginBottom:34,gridTemplateColumns:'1.1fr 1.9fr'}}>
        <Swatch hex="#e0a14e" name="Âmbar" sub="--accent" use="O peso do prumo. Use com parcimônia: 1 destaque por tela." ink="#0a0a0a" />
        <div className="tile" style={{display:'flex',alignItems:'center',gap:26,padding:'28px 32px'}}>
          <Sym size={56}/>
          <div>
            <p style={{color:'var(--text-2)',fontSize:15,lineHeight:1.6,maxWidth:380,margin:0}}>
              O âmbar é a única cor saturada da marca. Ele aparece no peso do símbolo, em links,
              foco e na ação principal. Se tudo é destaque, nada é — mantenha-o raro.
            </p>
            <div style={{display:'flex',gap:8,marginTop:16,flexWrap:'wrap'}}>
              <span className="chip" style={{fontSize:12}}><span className="dot"></span>Ação primária</span>
              <span className="chip" style={{fontSize:12}}><span className="dot"></span>Foco / seleção</span>
              <span className="chip" style={{fontSize:12}}><span className="dot"></span>Peso do símbolo</span>
            </div>
          </div>
        </div>
      </div>

      {/* funcionais */}
      <div className="spec" style={{marginBottom:14}}>FUNCIONAIS · STATUS NO PRODUTO</div>
      <div className="grid3">
        <Swatch hex="#7099ec" name="Azul" sub="--blue" use="Informação, em andamento, mais escolhido." ink="#0a0a0a" />
        <Swatch hex="#56bd83" name="Verde" sub="--green" use="Sucesso, aprovado, entregue, positivo." ink="#0a0a0a" />
        <Swatch hex="#e0a14e" name="Âmbar" sub="--amber" use="Atenção, pendente, aguardando ação." ink="#0a0a0a" />
      </div>
    </Section>
  );
}

/* =========================================================
   06 — TIPOGRAFIA
========================================================= */
function Specimen({nm, dt, children}){
  return (
    <div className="specimen">
      <div className="specimen-meta">
        <div className="nm">{nm}</div>
        <div className="dt">{dt}</div>
      </div>
      <div style={{minWidth:0}}>{children}</div>
    </div>
  );
}
function TypeSection(){
  return (
    <Section n="06" kicker="Tipografia" title="Poppins & Nippo." sub="Poppins constrói os títulos e o texto — geométrica, clara e confiante. Nippo carrega o tom técnico: etiquetas, números e specs.">
      <div className="tile" style={{padding:'8px 34px 14px',marginBottom:26}}>
        <Specimen nm="Poppins" dt="Display · 700 · -2.5% tracking">
          <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:700,fontSize:'clamp(38px,6vw,64px)',letterSpacing:'-.025em',lineHeight:1.02}}>Tire o escritório do caos.</div>
        </Specimen>
        <Specimen nm="Poppins" dt="Título · 600/700 · -2% tracking">
          <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:700,fontSize:'clamp(26px,3.4vw,40px)',letterSpacing:'-.02em',lineHeight:1.08}}>Do briefing à entrega, em etapas claras.</div>
        </Specimen>
        <Specimen nm="Poppins" dt="Corpo · 400/500 · 17px · 1.55">
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--text-2)',margin:0,maxWidth:520}}>
            Prospecção, orçamentos, projetos, obras e financeiro — tudo o que o seu escritório
            faz, finalmente reunido em um só lugar. <strong style={{color:'var(--text)'}}>Sem planilha solta.</strong>
          </p>
        </Specimen>
        <Specimen nm="Nippo" dt="Etiqueta · 500/700 · +18% tracking · caixa alta">
          <div className="eyebrow" style={{fontSize:14}}><span style={{color:'var(--accent)'}}>✦ </span>ORÇAMENTOS &amp; FINANCEIRO</div>
        </Specimen>
      </div>

      {/* alfabeto + pesos */}
      <div className="grid2">
        <div className="tile card-pad" style={{padding:'26px 30px'}}>
          <div className="spec" style={{marginBottom:16}}>POPPINS · CONJUNTO</div>
          <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:600,fontSize:26,letterSpacing:'-.02em',lineHeight:1.35}}>ABCDEFGHIJKLM<br/>NOPQRSTUVWXYZ</div>
          <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:400,fontSize:22,color:'var(--text-2)',marginTop:10}}>abcdefghijklmnopqrstuvwxyz</div>
          <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:700,fontSize:22,color:'var(--text-2)',marginTop:6}}>0123456789 — “no prumo”</div>
        </div>
        <div className="tile card-pad" style={{padding:'26px 30px',display:'flex',flexDirection:'column',justifyContent:'center',gap:14}}>
          <div className="spec" style={{marginBottom:2}}>PESOS EM USO</div>
          {[['Regular','400'],['Medium','500'],['Semibold','600'],['Bold','700']].map(([n,w])=>(
            <div key={w} style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',borderBottom:'1px solid var(--border)',paddingBottom:10}}>
              <span style={{fontFamily:"'Poppins',sans-serif",fontWeight:Number(w),fontSize:24,letterSpacing:'-.02em'}}>Prumo</span>
              <Mono>{n} · {w}</Mono>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

/* =========================================================
   07 — ICONOGRAFIA
========================================================= */
function IconSection(){
  const set=['grid','rocket','receipt','folder','calendar','building','layers','arrow'];
  return (
    <Section n="07" kicker="Iconografia" title="Traço de engenharia." sub="Ícones lineares, traço de 1.6, cantos arredondados e grade de 24px. Geométricos e econômicos — a mesma precisão do instrumento.">
      <div className="grid4" style={{marginBottom:18}}>
        {set.map(n=>(
          <div key={n} className="tile" style={{height:120,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:14,color:'var(--text)'}}>
            <Icon name={n} size={26}/>
            <Mono>{n}</Mono>
          </div>
        ))}
      </div>
      <div className="grid3">
        <div className="tile card-pad" style={{padding:'22px 24px'}}>
          <div className="spec" style={{marginBottom:10}}>TRAÇO</div>
          <p style={{color:'var(--text-2)',fontSize:14.5,lineHeight:1.55,margin:0}}>1.6px em grade de 24px. Pontas e junções arredondadas (<span className="mono" style={{color:'var(--text)'}}>round</span>).</p>
        </div>
        <div className="tile card-pad" style={{padding:'22px 24px'}}>
          <div className="spec" style={{marginBottom:10}}>COR</div>
          <p style={{color:'var(--text-2)',fontSize:14.5,lineHeight:1.55,margin:0}}>Herdam a cor do texto. Âmbar só quando o ícone <em>é</em> o destaque da seção.</p>
        </div>
        <div className="tile card-pad" style={{padding:'22px 24px'}}>
          <div className="spec" style={{marginBottom:10}}>ESTILO</div>
          <p style={{color:'var(--text-2)',fontSize:14.5,lineHeight:1.55,margin:0}}>Sempre lineares. Sem preenchimento, sem gradiente, sem emoji.</p>
        </div>
      </div>
    </Section>
  );
}

/* =========================================================
   08 — ELEMENTOS DE UI
========================================================= */
function UISection(){
  return (
    <Section n="08" kicker="Elementos" title="Do manual ao produto." sub="Os mesmos tokens governam a interface. Cantos suaves, bordas finas, status em cápsula mono — a marca aplicada de verdade.">
      <div className="grid2" style={{alignItems:'start'}}>
        <div className="tile card-pad" style={{padding:'30px 30px',display:'flex',flexDirection:'column',gap:22}}>
          <div className="spec">BOTÕES</div>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <span className="btn btn-primary btn-lg">Começar grátis <Icon name="arrow" size={16}/></span>
            <span className="btn btn-ghost btn-lg">Ver demonstração</span>
          </div>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <span className="btn btn-subtle">Subtle</span>
            <span className="btn btn-ghost">Ghost</span>
          </div>
          <hr className="bk-hr"/>
          <div className="spec">STATUS / BADGES</div>
          <div style={{display:'flex',gap:9,flexWrap:'wrap'}}>
            <span className="badge blue"><span className="dotled"></span>Em andamento</span>
            <span className="badge green"><span className="dotled"></span>Entregue</span>
            <span className="badge amber"><span className="dotled"></span>Pendente</span>
            <span className="badge"><span className="dotled"></span>Rascunho</span>
          </div>
          <hr className="bk-hr"/>
          <div className="spec">CHIPS</div>
          <div style={{display:'flex',gap:9,flexWrap:'wrap'}}>
            <span className="chip"><span className="dot"></span>Projeto ativo</span>
            <span className="chip"><span className="dot"></span>3 ambientes</span>
          </div>
        </div>

        <div className="tile card-pad" style={{padding:'30px 30px',display:'flex',flexDirection:'column',gap:18}}>
          <div className="spec">CARD DE PRODUTO</div>
          <div className="card" style={{background:'var(--surface-2)',padding:'22px 22px'}}>
            <div className="flex between center" style={{marginBottom:14}}>
              <span style={{width:38,height:38,borderRadius:10,border:'1px solid var(--border-2)',display:'grid',placeItems:'center',color:'var(--accent)'}}><Icon name="folder" size={19}/></span>
              <span className="badge blue"><span className="dotled"></span>Em andamento</span>
            </div>
            <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:650,fontSize:19,letterSpacing:'-.015em'}}>Apartamento Vila Mariana</div>
            <p className="muted" style={{fontSize:13.5,marginTop:5,marginBottom:16}}>Reforma completa · 4 ambientes</p>
            <hr className="hairline" style={{marginBottom:14}}/>
            <div className="flex between center">
              <span className="mono" style={{fontSize:12.5,color:'var(--text-3)'}}>Entrega · ago/26</span>
              <span style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:13,color:'var(--accent)',fontWeight:550}}>Abrir <Icon name="arrow" size={14}/></span>
            </div>
          </div>
          <div style={{display:'flex',gap:14}}>
            <div className="card" style={{flex:1,padding:'16px 18px'}}>
              <div className="spec" style={{marginBottom:8}}>RAIO</div>
              <Mono c="var(--text-2)">10 · 14 · 22 px</Mono>
            </div>
            <div className="card" style={{flex:1,padding:'16px 18px'}}>
              <div className="spec" style={{marginBottom:8}}>BORDA</div>
              <Mono c="var(--text-2)">1px · branco 8%</Mono>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* =========================================================
   09 — VOZ & TOM
========================================================= */
function VoiceSection(){
  const rows=[
    ['Direto, não corporativês','“Tire o escritório do caos.”','“Soluções de gestão integradas para o seu negócio.”'],
    ['A língua de quem faz obra','“Monte a proposta por ambiente.”','“Configure os módulos de orçamentação.”'],
    ['Calmo e confiante','“Coloque sua operação no prumo.”','“Revolucione 100% a sua gestão agora!!!”'],
    ['Concreto, não vago','“Veja o saldo previsto do mês.”','“Tenha mais visibilidade financeira.”'],
  ];
  return (
    <Section n="09" kicker="Voz & tom" title="Como o Prumo fala." sub="Português do Brasil, claro e sem rodeio. A gente fala com arquiteto que tem obra para entregar — não com investidor.">
      <div className="tile" style={{overflow:'hidden'}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',padding:'14px 26px',borderBottom:'1px solid var(--border)',background:'var(--surface-2)'}}>
          <span className="spec">PRINCÍPIO</span>
          <span className="spec" style={{color:'#56bd83'}}>FALAMOS ASSIM</span>
          <span className="spec" style={{color:'#e06a5a'}}>NUNCA ASSIM</span>
        </div>
        {rows.map(([p,y,n],i)=>(
          <div key={i} style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',padding:'20px 26px',borderBottom:i<rows.length-1?'1px solid var(--border)':'none',alignItems:'start',gap:18}}>
            <div style={{fontFamily:"'Poppins',sans-serif",fontWeight:600,fontSize:16,letterSpacing:'-.01em'}}>{p}</div>
            <div style={{display:'flex',gap:9}}><Check/><span style={{fontSize:14.5,color:'var(--text)',lineHeight:1.5}}>{y}</span></div>
            <div style={{display:'flex',gap:9}}><span style={{color:'#e06a5a',flexShrink:0,fontWeight:700,lineHeight:1.45}}>×</span><span style={{fontSize:14.5,color:'var(--text-3)',lineHeight:1.5}}>{n}</span></div>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* =========================================================
   10 — APLICAÇÕES
========================================================= */
function NavMock({light=false}){
  const ink=light?LINK:INK, bg=light?LBG:BG, ac=light?LAC:AC, line=light?'rgba(0,0,0,.08)':'rgba(255,255,255,.08)', mut=light?'#56565e':'#a0a0a8';
  return (
    <div style={{background:bg,height:'100%',display:'flex',alignItems:'center'}}>
      <div style={{display:'flex',alignItems:'center',width:'100%',padding:'0 22px',borderBottom:'1px solid '+line,height:58}}>
        <LK size={26} ink={ink} accent={ac}/>
        <div style={{marginLeft:'auto',display:'flex',gap:20,alignItems:'center',color:mut,fontFamily:'Poppins',fontSize:13}}>
          <span>Recursos</span><span>Preços</span>
          <span style={{background:ink,color:bg,padding:'7px 13px',borderRadius:9,fontWeight:550}}>Começar grátis</span>
        </div>
      </div>
    </div>
  );
}
function ApplySection(){
  return (
    <Section n="10" kicker="Aplicações" title="A marca em uso." sub="O símbolo segura sozinho no tamanho de um favicon; o lockup conduz a navegação. Funciona em escuro e claro com o mesmo peso.">
      {/* app icons */}
      <div className="grid4" style={{marginBottom:18}}>
        <div className="tile" style={{height:200,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">APP · ESCURO</span>
          <AppTile size={104}/>
        </div>
        <div className="tile" style={{height:200,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">APP · ÂMBAR</span>
          <div style={{width:104,height:104,borderRadius:24,background:AC,display:'grid',placeItems:'center',boxShadow:'0 12px 34px -18px rgba(0,0,0,.85)'}}>
            <Sym size={64} ink="#0a0a0a" accent="#0a0a0a" line={false}/>
          </div>
        </div>
        <div className="tile" style={{height:200,display:'grid',placeItems:'center'}}>
          <span className="tile-label spec">FAVICON · 16–48 px</span>
          <div style={{display:'flex',alignItems:'flex-end',gap:18}}>
            <AppTile size={48} radius={11}/>
            <AppTile size={32} radius={8}/>
            <AppTile size={16} radius={4}/>
          </div>
        </div>
        <div className="tile" style={{height:200,display:'grid',placeItems:'center',background:'#fff'}}>
          <span className="tile-label spec" style={{color:'#9a9aa2'}}>APP · CLARO</span>
          <AppTile size={104} bg="#fff" ink={LINK} accent={LAC}/>
        </div>
      </div>

      {/* navbars */}
      <div style={{display:'flex',flexDirection:'column',gap:18}}>
        <div className="tile" style={{height:60,overflow:'hidden'}}><NavMock/></div>
        <div className="tile" style={{height:60,overflow:'hidden'}}><NavMock light/></div>
      </div>
    </Section>
  );
}

/* =========================================================
   FOOTER
========================================================= */
function FooterBlock(){
  return (
    <footer style={{borderTop:'1px solid var(--border)',padding:'56px 0 60px',marginTop:0}}>
      <div className="bk-wrap" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',flexWrap:'wrap',gap:24}}>
        <div>
          <LK size={28}/>
          <p style={{color:'var(--text-3)',fontFamily:"'Nippo',monospace",fontSize:12,marginTop:18,maxWidth:340,lineHeight:1.7}}>
            Manual da Marca · v1.0 · 2026<br/>Dúvidas sobre uso da marca: marca@prumo.app
          </p>
        </div>
        <div style={{textAlign:'right'}}>
          <Mono>COLOQUE SUA OPERAÇÃO NO PRUMO.</Mono>
        </div>
      </div>
    </footer>
  );
}

/* =========================================================
   ROOT
========================================================= */
function BrandKit(){
  return (
    <div>
      <Cover/>
      <MarcaSection/>
      <LogoSection/>
      <ConstructionSection/>
      <MisuseSection/>
      <ColorSection/>
      <TypeSection/>
      <IconSection/>
      <UISection/>
      <VoiceSection/>
      <ApplySection/>
      <FooterBlock/>
    </div>
  );
}
window.BrandKit = BrandKit;