/* ds-typography.jsx — Type scale + 3 demo treatments
   Treatment A · All Helvetica  (safe, brand-pure)
   Treatment B · Helvetica + Fraunces display (luxe twist)
   Treatment C · Helvetica + Mono accents (editorial / techwear)
*/

const SCALE = [
  { name:'Display', px:96, weight:900, ls:-0.05, lh:0.92 },
  { name:'H1',      px:64, weight:900, ls:-0.04, lh:0.95 },
  { name:'H2',      px:40, weight:900, ls:-0.03, lh:1.0  },
  { name:'H3',      px:28, weight:700, ls:-0.02, lh:1.1  },
  { name:'Body L',  px:18, weight:400, ls:0,     lh:1.5  },
  { name:'Body',    px:15, weight:400, ls:0,     lh:1.55 },
  { name:'Small',   px:13, weight:400, ls:0.01,  lh:1.5  },
  { name:'Mono',    px:11, weight:500, ls:0.18,  lh:1.5, mono:true, upper:true },
];

const SAMPLE = "FW26 — Hand-fed metalwork, edition of 200.";

const Typography = () => {
  const [demo, setDemo] = React.useState('C');

  return (
    <Section no="02" title="Typography" kicker="3 directions · pick one">
      <Sub no="2.1" title="Type scale">
        <div style={{ background:T.paper, border:`1px solid ${T.ink}` }}>
          {SCALE.map((s, i) => (
            <div key={s.name} style={{
              display:'grid', gridTemplateColumns:'140px 1fr 220px',
              alignItems:'baseline', gap:S[5], padding:`${S[4]}px ${S[6]}px`,
              borderBottom: i < SCALE.length - 1 ? `1px solid ${T.n200}` : 'none',
            }}>
              <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6 }}>
                {s.name}
              </span>
              <span style={{
                fontFamily: s.mono ? "'JetBrains Mono', monospace" : "'Helvetica Neue', Helvetica, Arial, sans-serif",
                fontSize: s.px, fontWeight: s.weight, letterSpacing: `${s.ls}em`, lineHeight: s.lh,
                textTransform: s.upper ? 'uppercase' : 'none',
              }}>
                {s.name === 'Mono' ? '// MADE IN ITALY · ED. 200' : 'Hand-fed metal'}
              </span>
              <span className="mono" style={{ fontSize:10, letterSpacing:'.12em', opacity:.45, textAlign:'right' }}>
                {s.px}px · {s.weight} · {s.ls}em
              </span>
            </div>
          ))}
        </div>
      </Sub>

      <Sub no="2.2" title="Direction · pick one">
        <div style={{ display:'flex', gap:S[2], marginBottom:S[5] }}>
          {[
            ['A', 'All Helvetica',          'safe · brand-pure'],
            ['B', 'Helvetica + Fraunces',   'luxe twist on display'],
            ['C', 'Helvetica + Mono',       'editorial / techwear'],
          ].map(([k, label, note]) => (
            <button key={k} onClick={() => setDemo(k)} style={{
              flex:1, padding:`${S[4]}px ${S[5]}px`, textAlign:'left',
              border:`1px solid ${T.ink}`,
              background: demo === k ? T.ink : T.paper,
              color: demo === k ? T.bone : T.ink,
              cursor:'pointer', fontFamily:'inherit',
              transition:`all ${M.fast.d}ms ${M.fast.e}`,
            }}>
              <div className="mono" style={{ fontSize:10, letterSpacing:'.2em', opacity:.6, marginBottom:6 }}>OPT {k}</div>
              <div style={{ fontWeight:900, fontSize:18, letterSpacing:'-0.02em' }}>{label}</div>
              <div className="mono" style={{ fontSize:10, letterSpacing:'.06em', opacity:.5, marginTop:4, textTransform:'uppercase' }}>{note}</div>
            </button>
          ))}
        </div>

        {demo === 'A' && <DemoA/>}
        {demo === 'B' && <DemoB/>}
        {demo === 'C' && <DemoC/>}
      </Sub>
    </Section>
  );
};

/* ── Demo frames — same content, different type system ── */

const DemoFrame = ({ children, label }) => (
  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, border:`1px solid ${T.ink}` }}>
    <div style={{ padding:`${S[8]}px ${S[7]}px`, background:T.bone, borderRight:`1px solid ${T.ink}`, minHeight:560 }}>
      {children[0]}
    </div>
    <div style={{ padding:`${S[8]}px ${S[7]}px`, background:T.paper, minHeight:560 }}>
      {children[1]}
    </div>
    <div className="mono" style={{
      gridColumn:'1 / -1', borderTop:`1px solid ${T.ink}`,
      padding:`${S[3]}px ${S[5]}px`, fontSize:10, letterSpacing:'.18em', textTransform:'uppercase',
      display:'flex', justifyContent:'space-between',
    }}>
      <span>{label}</span>
      <span style={{opacity:.5}}>HERO · PDP COPY</span>
    </div>
  </div>
);

/* shared content blocks */
const Hero = ({ font, weight=900, ls='-0.045em' }) => (
  <>
    <div className="mono" style={{ fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', opacity:.55, marginBottom:S[4] }}>
      DROP 02 · FW26 · 14.NOV
    </div>
    <h1 style={{
      fontFamily: font, fontWeight: weight, fontSize:88, letterSpacing: ls, lineHeight:.92, margin:0,
    }}>
      Hand-fed<br/>metalwork.
    </h1>
    <p style={{
      marginTop:S[5], fontSize:17, lineHeight:1.55, maxWidth:380, color:T.n500,
    }}>
      Twelve charms, two bags, one chrome belt. Each piece numbered, edition of 200.
    </p>
  </>
);

const PDP = ({ font, weight=700, ls='-0.02em', priceColor=T.ink }) => (
  <>
    <div className="mono" style={{ fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', opacity:.55, marginBottom:S[4] }}>
      LOOP BAG · CHROME
    </div>
    <h2 style={{
      fontFamily: font, fontWeight: weight, fontSize:36, letterSpacing: ls, lineHeight:1.05, margin:0,
    }}>
      The Loop Bag
    </h2>
    <div style={{ marginTop:S[3], fontSize:22, fontWeight:900, color: priceColor }}>€620,00</div>
    <p style={{ marginTop:S[5], fontSize:15, lineHeight:1.6, color:T.n500, maxWidth:340 }}>
      A folded chrome shell with a cast-aluminium handle. 17 × 24 × 6 cm. Made in Florence.
    </p>
    <ul style={{
      marginTop:S[5], padding:0, listStyle:'none',
      borderTop:`1px solid ${T.n200}`,
    }}>
      {['Polished aluminium body','Hand-cast hardware','Edition of 200, numbered'].map(x => (
        <li key={x} style={{
          display:'flex', justifyContent:'space-between', padding:`${S[3]}px 0`,
          borderBottom:`1px solid ${T.n200}`, fontSize:13,
        }}>
          <span>{x}</span>
          <span className="mono" style={{ opacity:.4, fontSize:10, letterSpacing:'.18em' }}>✓</span>
        </li>
      ))}
    </ul>
  </>
);

/* A · All Helvetica */
const DemoA = () => (
  <DemoFrame label="A · ALL HELVETICA · DEFAULT">
    <Hero font="'Helvetica Neue', Helvetica, Arial, sans-serif"/>
    <PDP  font="'Helvetica Neue', Helvetica, Arial, sans-serif"/>
  </DemoFrame>
);

/* B · Helvetica body + Fraunces display (italic weight 700) */
const DemoB = () => (
  <DemoFrame label="B · FRAUNCES DISPLAY + HELVETICA BODY">
    <>
      <div className="mono" style={{ fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', opacity:.55, marginBottom:S[4] }}>
        DROP 02 · FW26 · 14.NOV
      </div>
      <h1 className="fraunces" style={{
        fontWeight:700, fontStyle:'italic', fontSize:104, letterSpacing:'-0.04em', lineHeight:.92, margin:0,
        fontVariationSettings:'"opsz" 144',
      }}>
        Hand-fed<br/>metalwork.
      </h1>
      <p style={{ marginTop:S[5], fontSize:17, lineHeight:1.55, maxWidth:380, color:T.n500 }}>
        Twelve charms, two bags, one chrome belt. Each piece numbered, edition of 200.
      </p>
    </>
    <>
      <div className="mono" style={{ fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', opacity:.55, marginBottom:S[4] }}>
        LOOP BAG · CHROME
      </div>
      <h2 className="fraunces" style={{
        fontWeight:700, fontStyle:'italic', fontSize:44, letterSpacing:'-0.02em', lineHeight:1, margin:0,
        fontVariationSettings:'"opsz" 144',
      }}>
        The Loop Bag
      </h2>
      <div style={{ marginTop:S[3], fontSize:22, fontWeight:900 }}>€620,00</div>
      <p style={{ marginTop:S[5], fontSize:15, lineHeight:1.6, color:T.n500, maxWidth:340 }}>
        A folded chrome shell with a cast-aluminium handle. 17 × 24 × 6 cm. Made in Florence.
      </p>
      <ul style={{ marginTop:S[5], padding:0, listStyle:'none', borderTop:`1px solid ${T.n200}` }}>
        {['Polished aluminium body','Hand-cast hardware','Edition of 200, numbered'].map(x => (
          <li key={x} style={{ display:'flex', justifyContent:'space-between', padding:`${S[3]}px 0`, borderBottom:`1px solid ${T.n200}`, fontSize:13 }}>
            <span>{x}</span>
            <span className="mono" style={{ opacity:.4, fontSize:10, letterSpacing:'.18em' }}>✓</span>
          </li>
        ))}
      </ul>
    </>
  </DemoFrame>
);

/* C · Helvetica everywhere + heavy mono accents */
const DemoC = () => (
  <DemoFrame label="C · HELVETICA + MONO ACCENTS">
    <>
      <div className="mono" style={{
        display:'inline-flex', gap:S[3], padding:`${S[2]}px ${S[3]}px`,
        background:T.ink, color:T.bone, fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', marginBottom:S[5],
      }}>
        <span style={{color:T.neon}}>●</span> DROP 02 / FW26 / 14.NOV
      </div>
      <h1 style={{ fontWeight:900, fontSize:88, letterSpacing:'-0.045em', lineHeight:.92, margin:0 }}>
        Hand-fed<br/>metalwork.
      </h1>
      <div className="mono" style={{
        marginTop:S[5], fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6,
      }}>
        12 CHARMS / 2 BAGS / 1 BELT — ED. 200
      </div>
      <p style={{ marginTop:S[3], fontSize:17, lineHeight:1.55, maxWidth:380, color:T.n500 }}>
        Twelve charms, two bags, one chrome belt. Each piece numbered.
      </p>
    </>
    <>
      <div className="mono" style={{ fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', opacity:.55, marginBottom:S[3], display:'flex', justifyContent:'space-between' }}>
        <span>LOOP BAG · CHROME</span><span style={{color:T.neon}}>● IN STOCK</span>
      </div>
      <h2 style={{ fontWeight:900, fontSize:36, letterSpacing:'-0.02em', lineHeight:1.05, margin:0 }}>
        The Loop Bag
      </h2>
      <div className="mono" style={{
        marginTop:S[3], display:'inline-block', padding:`${S[2]}px ${S[3]}px`,
        background:T.neon, color:T.ink, fontSize:14, fontWeight:900, letterSpacing:'.04em',
      }}>€620,00</div>
      <p style={{ marginTop:S[5], fontSize:15, lineHeight:1.6, color:T.n500, maxWidth:340 }}>
        A folded chrome shell with a cast-aluminium handle. 17 × 24 × 6 cm.
      </p>
      <ul style={{ marginTop:S[5], padding:0, listStyle:'none', borderTop:`1px solid ${T.ink}` }}>
        {['Polished aluminium body','Hand-cast hardware','Edition of 200, numbered'].map(x => (
          <li key={x} className="mono" style={{
            display:'flex', justifyContent:'space-between', padding:`${S[3]}px 0`,
            borderBottom:`1px solid ${T.n200}`, fontSize:11, letterSpacing:'.12em', textTransform:'uppercase',
          }}>
            <span>{x}</span><span style={{color:T.neon}}>✓</span>
          </li>
        ))}
      </ul>
    </>
  </DemoFrame>
);

Object.assign(window, { Typography });