// style-guide.jsx — design-system reference card per path

function StyleGuide({ t }) {
  return (
    <div style={{
      width: 720, minHeight: 900,
      background: t.bg, color: t.text, fontFamily: t.fontBody,
      padding: 32, position:'relative', overflow:'hidden',
    }}>
      {/* Header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end',
        paddingBottom: 16, borderBottom: `1px solid ${t.line}` }}>
        <div>
          <SectionLabel t={t} color={t.accent2}>Path system</SectionLabel>
          <PathTitle t={t} size={42} style={{ marginTop: 8 }}>{t.label}</PathTitle>
          <p style={{ color: t.textMute, marginTop: 6, fontSize: 13 }}>{t.tagline}</p>
        </div>
        <span style={{ fontFamily: t.fontMono, fontSize: 11, color: t.textDim, letterSpacing:'0.18em' }}>
          T21 GAMEFEST · v0.1
        </span>
      </div>

      {/* Color tokens */}
      <div style={{ marginTop: 24 }}>
        <SectionLabel t={t}>Palette</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(8, 1fr)', gap: 10, marginTop: 12 }}>
          {[
            ['bg',t.bg],['surface',t.surface],['surface2',t.surface2],
            ['accent',t.accent],['accent2',t.accent2],['accent3',t.accent3],
            ['huawei',t.huawei],['success',t.success],
          ].map(([n,c]) => (
            <div key={n}>
              <div style={{ height: 64, background: c, border:`1px solid ${t.line2}`,
                borderRadius: t.edge==='angular' ? 2 : 8 }}/>
              <div style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textMute,
                letterSpacing:'0.08em', marginTop: 6 }}>{n.toUpperCase()}</div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.text }}>{c}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Type */}
      <div style={{ marginTop: 28 }}>
        <SectionLabel t={t}>Type</SectionLabel>
        <div style={{ marginTop: 12, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16 }}>
          <div style={{ background: t.surface, border:`1px solid ${t.line2}`,
            padding: 18, borderRadius: t.edge==='angular' ? 2 : 12 }}>
            <div style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textDim, letterSpacing:'0.16em' }}>TITLE</div>
            <div style={{ fontFamily: t.fontTitle, fontSize: 32, fontWeight: 700, marginTop: 4,
              textTransform: t.titleCase==='upper' ? 'uppercase' : 'none', letterSpacing: t.titleSpace }}>
              Boarding pass
            </div>
            <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 8 }}>
              {t.fontTitle.split(',')[0]}
            </div>
          </div>
          <div style={{ background: t.surface, border:`1px solid ${t.line2}`,
            padding: 18, borderRadius: t.edge==='angular' ? 2 : 12 }}>
            <div style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textDim, letterSpacing:'0.16em' }}>BODY · MONO</div>
            <div style={{ fontFamily: t.fontBody, fontSize: 14, marginTop: 4 }}>
              Stamp every floor. Catch every match. Earn rewards.
            </div>
            <div style={{ fontFamily: t.fontMono, fontSize: 12, color: t.accent2, marginTop: 8, letterSpacing:'0.06em' }}>
              BP-7392 · 5/7 STAMPS · LV 04
            </div>
          </div>
        </div>
      </div>

      {/* Stamps + chrome */}
      <div style={{ marginTop: 28 }}>
        <SectionLabel t={t}>Stamps</SectionLabel>
        <div style={{ marginTop: 12, padding: 18, background: t.surface, border:`1px solid ${t.line2}`,
          borderRadius: t.edge==='angular' ? 2 : 12 }}>
          <StampGrid t={t} stamps={new Set(['LG','GF','3F','5F'])}/>
        </div>
      </div>

      {/* Buttons */}
      <div style={{ marginTop: 28 }}>
        <SectionLabel t={t}>Buttons</SectionLabel>
        <div style={{ marginTop: 12, display:'flex', gap: 12, flexWrap:'wrap' }}>
          <button style={{
            background: t.accent, color:'#fff', border:'none', padding:'12px 20px',
            borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 26 : 10,
            fontFamily: t.fontTitle, fontSize: 12, fontWeight: 700, letterSpacing: t.titleSpace,
            textTransform: t.titleCase==='upper' ? 'uppercase' : 'none', cursor:'pointer',
            clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%)' : 'none',
          }}>Primary action</button>
          <button style={{
            background: 'transparent', color: t.text, border:`1px solid ${t.line}`, padding:'12px 20px',
            borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 26 : 10,
            fontFamily: t.fontMono, fontSize: 11, fontWeight: 600, letterSpacing:'0.16em',
            textTransform:'uppercase', cursor:'pointer',
          }}>Secondary</button>
          <span style={{
            background: t.huawei, color:'#fff', padding:'6px 12px', alignSelf:'center',
            borderRadius: 3, fontFamily: t.fontMono, fontSize: 11, fontWeight: 700, letterSpacing:'0.08em',
          }}>HUAWEI BADGE</span>
        </div>
      </div>

      {/* Token table */}
      <div style={{ marginTop: 28, padding: 16, background: t.surface, border:`1px solid ${t.line2}`,
        borderRadius: t.edge==='angular' ? 2 : 12 }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 14,
          fontFamily: t.fontMono, fontSize: 11 }}>
          {[
            ['radius', t.radius+'px'], ['edge', t.edge], ['stamp shape', t.stampShape], ['title case', t.titleCase],
          ].map(([k,v])=>(
            <div key={k}>
              <div style={{ color: t.textDim, letterSpacing:'0.16em', textTransform:'uppercase', fontSize: 9 }}>{k}</div>
              <div style={{ color: t.text, marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StyleGuide });