/* ds-tokens.jsx — Color, Spacing, Radii, Shadows, Motion */

const Tokens = () => (
  <Section no="01" title="Tokens" kicker="atoms · the smallest unit">
    <Sub no="1.1" title="Color">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:0, border:`1px solid ${T.ink}` }}>
        {[
          ['ink',     T.ink,     '#0a0a0a', T.bone],
          ['bone',    T.bone,    '#f5f3ee', T.ink],
          ['paper',   T.paper,   '#ffffff', T.ink],
          ['chrome',  T.chrome,  '#cfcdc8', T.ink],
          ['neon',    T.neon,    '#ff2ec4', T.ink],
          ['yellow',  T.yellow,  '#eaff00', T.ink],
        ].map(([name, c, hex, fg], i) => (
          <div key={name} style={{
            background:c, color:fg, padding:`${S[6]}px ${S[5]}px`, minHeight:180,
            borderRight: i < 5 ? `1px solid ${T.ink}` : 'none',
            display:'flex', flexDirection:'column', justifyContent:'space-between',
          }}>
            <span style={{ fontWeight:900, fontSize:18, letterSpacing:'-0.02em' }}>{name}</span>
            <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.65 }}>{hex}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop:S[5], display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:0, border:`1px solid ${T.ink}` }}>
        {['n100','n200','n300','n400','n500','n600'].map((k, i) => (
          <div key={k} style={{
            background:T[k], color: i > 2 ? T.bone : T.ink, padding:`${S[5]}px ${S[4]}px`, minHeight:120,
            borderRight: i < 5 ? `1px solid ${T.ink}` : 'none',
            display:'flex', flexDirection:'column', justifyContent:'space-between',
          }}>
            <span style={{ fontWeight:900, fontSize:14 }}>{k}</span>
            <span className="mono" style={{ fontSize:9, letterSpacing:'.18em', textTransform:'uppercase', opacity:.65 }}>{T[k]}</span>
          </div>
        ))}
      </div>
      <Note>↳ neon used as type accent + functional UI · never as surface fill (except favicon, CTA pills)</Note>
    </Sub>

    <Sub no="1.2" title="Spacing scale">
      <div style={{ background:T.paper, border:`1px solid ${T.ink}`, padding:S[6] }}>
        <div style={{ display:'flex', alignItems:'flex-end', gap:S[5], flexWrap:'wrap' }}>
          {Object.entries(S).filter(([k]) => k !== '0').map(([k, v]) => (
            <div key={k} style={{ display:'flex', flexDirection:'column', alignItems:'flex-start', gap:S[2] }}>
              <div style={{ width:v, height:v, background:T.ink }}/>
              <span className="mono" style={{ fontSize:10, letterSpacing:'.18em' }}>{k} · {v}px</span>
            </div>
          ))}
        </div>
      </div>
      <Note>↳ Kith-luxe density — generous whitespace · default page gutter is 7 (48px) on desktop</Note>
    </Sub>

    <Sub no="1.3" title="Radii">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, border:`1px solid ${T.ink}` }}>
        {Object.entries(R).map(([k, v], i) => (
          <div key={k} style={{
            padding:S[6], background:T.paper, minHeight:160,
            borderRight: i < 3 ? `1px solid ${T.ink}` : 'none',
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:S[3],
          }}>
            <div style={{ width:64, height:64, background:T.ink, borderRadius:v }}/>
            <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase' }}>{k} · {v}px</span>
          </div>
        ))}
      </div>
      <Note>↳ tight radii — brand stays rectilinear · md (8px) only on price chips, never on buttons or cards</Note>
    </Sub>

    <Sub no="1.4" title="Motion">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, border:`1px solid ${T.ink}` }}>
        {Object.entries(M).map(([k, v], i) => (
          <MotionDemo key={k} name={k} ms={v.d} ease={v.e} last={i===3}/>
        ))}
      </div>
      <Note>↳ hover · base · page transitions · spring (drawer open) — that's the whole vocabulary</Note>
    </Sub>
  </Section>
);

const MotionDemo = ({ name, ms, ease, last }) => {
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const t = setInterval(() => setOn(o => !o), 1600);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{
      padding:S[5], background:T.paper, minHeight:160,
      borderRight: last ? 'none' : `1px solid ${T.ink}`,
      display:'flex', flexDirection:'column', justifyContent:'space-between', overflow:'hidden',
    }}>
      <div style={{ position:'relative', height:32 }}>
        <div style={{
          position:'absolute', top:0, left:0,
          width:24, height:24, background:T.neon,
          transform: on ? 'translateX(180px)' : 'translateX(0)',
          transition: `transform ${ms}ms ${ease}`,
        }}/>
      </div>
      <div>
        <div style={{ fontWeight:900, fontSize:18, letterSpacing:'-0.02em' }}>{name}</div>
        <div className="mono" style={{ fontSize:10, letterSpacing:'.12em', opacity:.55, marginTop:4 }}>{ms}ms</div>
      </div>
    </div>
  );
};

Object.assign(window, { Tokens });