/* tokens.jsx — Color palette + Typography artboards */

function PaletteCard() {
  const groups = [
    {
      title:'Surface · papel',
      sub:'fundos, blocos negativos, contrastes',
      colors:[
        {name:'Bone',     hex:'#f2e9d2', role:'Fundo principal · papel quente'},
        {name:'Bone 2',   hex:'#ece1c4', role:'Surface elevada · cards'},
        {name:'Bone 3',   hex:'#e3d6b3', role:'Surface fundo cliente'},
        {name:'Tobacco',  hex:'#2a1d12', role:'Bloco negativo · CTA escuro', dark:true},
        {name:'Tobacco 2',hex:'#1f140b', role:'Hover · navbar admin',         dark:true},
      ],
    },
    {
      title:'Ink · texto',
      sub:'sempre warm-dark, nunca preto puro',
      colors:[
        {name:'Ink',   hex:'#1f1812', role:'Texto principal'},
        {name:'Ink 2', hex:'#3a2e22', role:'Headlines em superfície clara'},
        {name:'Ink 3', hex:'#6b5a47', role:'Texto secundário · captions'},
      ],
    },
    {
      title:'Acentos · matéria',
      sub:'CTAs, números-chave, estados',
      colors:[
        {name:'Clay',      hex:'#a86a3d', role:'Acento primário · cobre'},
        {name:'Clay 2',    hex:'#8d5530', role:'Hover · pressed'},
        {name:'Clay-deep', hex:'#963f25', role:'Erro · falha de pagamento', dark:true},
        {name:'Sand',      hex:'#c9a661', role:'Dourado discreto · warning'},
        {name:'Moss',      hex:'#4a4a30', role:'Sucesso · contrato ativo',  dark:true},
      ],
    },
    {
      title:'Linhas · regras',
      sub:'borders 0.4–0.6 pt, separadores',
      colors:[
        {name:'Rule',   hex:'#c7b594', role:'Border / divisor principal'},
        {name:'Rule 2', hex:'#d8c9a3', role:'Border interno · row dividers'},
      ],
    },
  ];

  return (
    <div className="ab" style={{padding:'48px 56px', overflow:'hidden'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={4} label="Paleta" />
        <div className="smallcaps">terra · papel · cobre</div>
      </div>

      <Title size={56} style={{marginTop:24, maxWidth:700}}>
        <span style={{fontStyle:'italic', color:'var(--clay)'}}>16</span> tons que sustentam<br/>quatro páginas e oito ciclos.
      </Title>

      <div style={{marginTop:36, display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:'40px 56px'}}>
        {groups.map(g=>(
          <div key={g.title}>
            <div className="smallcaps">{g.title}</div>
            <div style={{fontFamily:'var(--display)', fontSize:18, fontStyle:'italic', color:'var(--ink-3)', marginTop:2, marginBottom:14}}>{g.sub}</div>
            <div style={{display:'grid', gridTemplateColumns: `repeat(${g.colors.length}, 1fr)`, gap:10}}>
              {g.colors.map(c=>(
                <div key={c.hex}>
                  <div style={{height:90, background:c.hex, borderRadius:3, border:'0.5px solid rgba(0,0,0,0.08)', position:'relative'}}>
                    <div style={{position:'absolute', bottom:6, left:8, fontFamily:'var(--mono)', fontSize:9.5, letterSpacing:0.04, color: c.dark ? 'rgba(242,233,210,0.65)' : 'rgba(31,24,18,0.45)'}}>
                      {c.hex.toUpperCase()}
                    </div>
                  </div>
                  <div style={{fontFamily:'var(--display)', fontSize:14, marginTop:6, lineHeight:1.1}}>{c.name}</div>
                  <div style={{fontSize:11, color:'var(--ink-3)', lineHeight:1.35, marginTop:2}}>{c.role}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Type pairing artboards — two options to compare side by side
function TypePairing({ bodyFamily='Manrope', bodyCss='var(--body)', kicker='Combinação A', n=5 }) {
  return (
    <div className="ab" style={{padding:'48px 52px', overflow:'hidden'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={n} label={`Tipografia · ${kicker}`} />
        <div className="smallcaps tab">FRAUNCES / {bodyFamily.toUpperCase()} / JETBRAINS</div>
      </div>

      {/* Display */}
      <div style={{marginTop:30, borderTop:'0.5px solid var(--rule)', paddingTop:24}}>
        <div className="smallcaps">Display · Fraunces (variable serif, SOFT/WONK axes)</div>
        <div style={{marginTop:14, fontFamily:'var(--display)', fontWeight:300, fontSize:104, lineHeight:0.92, letterSpacing:-0.025}}>
          Cedar &amp; Sandalwood<span style={{color:'var(--clay)'}}>.</span>
        </div>
        <div style={{marginTop:8, fontFamily:'var(--display)', fontStyle:'italic', fontSize:48, lineHeight:1, color:'var(--ink-2)', fontWeight:400, fontVariationSettings:'"SOFT" 50, "WONK" 1'}}>
          honest trend of human
        </div>
      </div>

      {/* Body */}
      <div style={{marginTop:28, display:'grid', gridTemplateColumns:'1fr 1fr', gap:48}}>
        <div>
          <div className="smallcaps">Body · {bodyFamily}</div>
          <div style={{marginTop:14, fontFamily: bodyCss, fontSize:14.5, lineHeight:1.65, color:'var(--ink-2)', maxWidth:480}}>
            Contratos de 24 meses, oito entregas trimestrais. A base é fixa,
            os extras decidem-se sete dias antes de cada cobrança. Tudo o
            resto — débito SEPA, fatura, despacho — corre por baixo da
            superfície, e o cliente vê apenas o ciclo em que está.
          </div>
          <div style={{marginTop:14, fontFamily:bodyCss, fontSize:12.5, color:'var(--ink-3)', maxWidth:480, lineHeight:1.5}}>
            Texto secundário · contratos a terminar nos próximos 60 dias entram em fila de renovação. NIF, IVA e IBAN formatam-se à medida que se escreve.
          </div>

          {/* Type scale */}
          <div style={{marginTop:22, display:'flex', flexDirection:'column', gap:6}}>
            {[
              ['Display XL', 64, 'var(--display)', 300, 'Cedar'],
              ['Display L',  44, 'var(--display)', 400, 'Cedar'],
              ['Display M',  28, 'var(--display)', 400, 'Cedar'],
              ['Heading',    22, bodyCss, 600, 'Contratos · 47 ativos'],
              ['Body L',     16, bodyCss, 400, 'Hotel Sereno, Comporta'],
              ['Body',       14, bodyCss, 400, '3 842,00 € · cobrança 15 set'],
              ['Caption',    12, bodyCss, 400, 'NIF 509 280 471'],
              ['Mono',       12, 'var(--mono)', 400, 'HTL-26-0142'],
              ['Smallcaps',  10.5,'var(--mono)', 500, 'PRÓX. ENTREGA'],
            ].map((r,i)=>(
              <div key={i} style={{display:'grid', gridTemplateColumns:'90px 38px 1fr', alignItems:'baseline', gap:14, borderBottom:'0.5px solid var(--rule-2)', paddingBottom:5}}>
                <div className="smallcaps" style={{fontSize:9.5}}>{r[0]}</div>
                <div className="mono tab" style={{fontSize:10, color:'var(--ink-3)'}}>{r[1]}</div>
                <div style={{
                  fontFamily:r[2], fontSize:r[1], fontWeight:r[3], lineHeight:1.1,
                  letterSpacing: r[2]==='var(--display)' ? -0.02 : 0,
                  textTransform: r[0]==='Smallcaps' ? 'uppercase' : 'none',
                  fontVariantNumeric: r[2]==='var(--mono)' ? 'tabular-nums' : 'normal',
                }}>{r[4]}</div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="smallcaps">Mono · JetBrains</div>
          <div style={{marginTop:14, background:'var(--tobacco)', color:'var(--bone)', padding:'18px 20px', borderRadius:4, fontFamily:'var(--mono)', fontSize:12, lineHeight:1.7}}>
            <div style={{color:'var(--sand)'}}>// contrato HTL-26-0142</div>
            <div>cliente   <span style={{color:'#f2e9d2'}}>HOTEL_SERENO_COMPORTA</span></div>
            <div>nif       <span className="tab">509 280 471</span></div>
            <div>iban      <span className="tab">PT50 0035 0000 0001 23456 78</span></div>
            <div>ciclo     <span className="tab">3 / 8</span></div>
            <div>próx      <span className="tab">15.09.2026</span></div>
            <div>valor     <span className="tab" style={{color:'var(--sand)'}}>3 842,00 €</span></div>
          </div>

          {/* Pairing rationale */}
          <div style={{marginTop:22}}>
            <div className="smallcaps">Porquê esta combinação</div>
            <ul style={{marginTop:10, paddingLeft:18, fontFamily:bodyCss, fontSize:13, lineHeight:1.6, color:'var(--ink-2)'}}>
              <li>Fraunces traz a marca para a interface — SOFT/WONK eleva títulos sem decoração.</li>
              <li>{bodyFamily} sustenta tabelas e formulários sem competir com o serif.</li>
              <li>JetBrains Mono em IDs, IBANs, valores monetários — tabular-nums sempre.</li>
              <li>Body ≥ 14.5 px para WCAG AA · cap-height confortável para listas longas.</li>
            </ul>
          </div>

          {/* Stack diagram */}
          <div style={{marginTop:20, border:'0.5px solid var(--rule)', borderRadius:4, padding:'14px 16px'}}>
            <div className="smallcaps">Stack CSS</div>
            <div style={{marginTop:8, fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-2)', lineHeight:1.7}}>
              <div>--display: <span style={{color:'var(--clay)'}}>'Fraunces'</span>, Cormorant Garamond, Georgia, serif;</div>
              <div>--body:    <span style={{color:'var(--clay)'}}>'{bodyFamily}'</span>, ui-sans-serif, system-ui, sans-serif;</div>
              <div>--mono:    <span style={{color:'var(--clay)'}}>'JetBrains Mono'</span>, ui-monospace, Menlo, monospace;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PaletteCard, TypePairing });