/* brand-v4.jsx — Glosé brand identity v0.4 — LOCKED
   - wordmark = lowercase "glosé", real é glyph, neon bar BEHIND text at 50% font-size
     (50% so the bar's top edge tucks under the é-acute, no gap)
   - bar position = sits LOW: ends below the descender of g
   - bar = NEON ONLY (no black, no white, no inverse)
   - accent rule: NEON used as type accent only — never as background fill on surfaces
     (exceptions: monogram favicon bg, small CTA pills — these are functional UI)
   - 4 monogram variants kept, each with usage label
   - long-bar variant (from "on surfaces") promoted to a real wordmark mode for print/chrome */

/* ── TOKENS ─────────────────────────────────────────────── */
const TOK = {
  ink: '#0a0a0a',
  bone: '#f5f3ee',
  chrome: '#cfcdc8',
  chromeDark: '#8a8884',
  neon: '#ff2ec4',
  blue: '#2840ff',
};

/* ── WORDMARK ───────────────────────────────────────────── */
/*  Wordmark — single primary form.
    Bar tucks under the é-acute (top) and ends below g's descender (bottom).
    Default barHeight = 0.50 of font-size, barTop = 0.55. */
const Wordmark = ({
  size = 64,
  color = TOK.ink,
  showBar = true,
  barHeight = 0.50,        // 50% of font-size — tucks under é-acute
  barTop = 0.55,           // top edge sits under é's acute
  bleed = 0.04,            // bleed past wordmark each side (em)
  longBar = false,         // bleed bar much further on right side (print / chrome use)
}) => {
  const h = size * barHeight;
  const top = size * barTop;
  const rightBleed = longBar ? '-1.6em' : `${-bleed}em`;
  return (
    <span style={{
      display:'inline-block', position:'relative',
      fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif",
      fontWeight: 900, fontSize: size, lineHeight: 0.85,
      letterSpacing:'-0.045em',
      color, padding:'0 2px',
      paddingBottom: size * 0.22,   // room for the descender of "g"
      paddingRight: longBar ? '1.6em' : 0,
    }}>
      {showBar && (
        <span aria-hidden style={{
          position:'absolute',
          left: `${-bleed}em`, right: rightBleed,
          top, height: h,
          background: TOK.neon, zIndex: 0,
        }}/>
      )}
      <span style={{position:'relative', zIndex: 1}}>glosé</span>
    </span>
  );
};

/* ── MONOGRAM ───────────────────────────────────────────── */
/*  Lowercase "g" + a tiny neon accent placed where the é's acute would sit.
    The horizontal bar is gone — the bar collapses into the accent of é.
    No big rectangular bar at favicon scale. */
const Monogram = ({
  size = 64, bg = TOK.ink, fg = TOK.bone, accent = TOK.neon,
  square = true,
}) => {
  const acuteW = size * 0.16;
  const acuteH = size * 0.085;
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center',
      width: size, height: size, background: bg, color: fg,
      borderRadius: square ? 0 : '50%', position:'relative', overflow:'hidden',
    }}>
      <span style={{
        position:'relative', zIndex: 1,
        fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif",
        fontWeight: 900, fontSize: size * 0.95, letterSpacing:'-0.04em',
        lineHeight: 1, marginTop: -size * 0.04,
      }}>g</span>
      {/* the acute — sits just inside the top-right, like é's diacritic */}
      <span aria-hidden style={{
        position:'absolute',
        top: size * 0.12, right: size * 0.20,
        width: acuteW, height: acuteH,
        background: accent,
        transform:'skewX(-22deg)',
      }}/>
    </span>
  );
};

/* ── LAYOUT HELPERS ─────────────────────────────────────── */
const Section = ({ id, title, no, kicker, children, bg = TOK.bone, ink = TOK.ink, fullBleed = false }) => (
  <section id={id} data-screen-label={`${no} ${title}`} style={{
    background: bg, color: ink, borderTop: `1px solid ${ink}`,
  }}>
    <header style={{
      display:'grid', gridTemplateColumns:'80px 1fr auto', alignItems:'baseline',
      padding:'40px 48px 24px', borderBottom:`1px solid ${ink}`,
      fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase',
    }}>
      <span style={{opacity:.5}}>{no}</span>
      <h2 style={{ fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif", fontWeight:900, fontSize:40, letterSpacing:'-0.04em', textTransform:'none', margin:0, lineHeight:1 }}>{title}</h2>
      <span style={{opacity:.5}}>{kicker}</span>
    </header>
    <div style={{ padding: fullBleed ? 0 : '40px 48px 64px' }}>
      {children}
    </div>
  </section>
);

const Card = ({ label, children, bg = TOK.bone, ink = TOK.ink, h = 200, note }) => (
  <div style={{ display:'flex', flexDirection:'column', border: `1px solid ${TOK.ink}` }}>
    <div style={{
      flex:1, minHeight: h, background: bg, color: ink,
      display:'flex', alignItems:'center', justifyContent:'center', padding:24,
      position:'relative', overflow:'hidden',
    }}>
      {children}
    </div>
    <div style={{
      borderTop:`1px solid ${TOK.ink}`,
      padding:'10px 14px', display:'flex', justifyContent:'space-between',
      fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase',
      background: TOK.bone,
    }}>
      <span>{label}</span>
      {note && <span style={{opacity:.5}}>{note}</span>}
    </div>
  </div>
);

/* ── BRAND PAGE ─────────────────────────────────────────── */
const BrandPage = () => (
  <div style={{
    width: 1440, margin:'0 auto', background: TOK.bone, color: TOK.ink,
    fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif",
  }}>
    {/* MASTHEAD */}
    <header style={{
      background: TOK.ink, color: TOK.bone, padding:'28px 48px',
      display:'flex', justifyContent:'space-between', alignItems:'center',
      borderBottom:`3px solid ${TOK.neon}`,
    }}>
      <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase'}}>
        <div style={{color: TOK.neon}}>● BRAND IDENTITY</div>
        <div style={{opacity:.5, marginTop:4}}>GLOSÉ™ / V0.3 / 02.05.26</div>
      </div>
      <Wordmark size={48} color={TOK.bone}/>
      <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', textAlign:'right'}}>
        <div>FILE A · IDENTITY</div>
        <div style={{opacity:.5, marginTop:4}}>FOR REVIEW</div>
      </div>
    </header>

    {/* INTRO */}
    <section style={{ padding:'80px 48px 60px', borderBottom:`1px solid ${TOK.ink}`}}>
      <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', opacity:.5, marginBottom:24}}>
        00 / Identity sketch — v0.3 (after Theresa's notes)
      </div>
      <h1 style={{ fontWeight:900, fontSize:96, letterSpacing:'-0.05em', lineHeight:.9, margin:0, maxWidth: 1100}}>
        the wordmark, the bar, the monogram.
      </h1>
      <div style={{ marginTop:32, fontSize:15, lineHeight:1.6, maxWidth: 720, fontFamily:'"JetBrains Mono", monospace', letterSpacing:'.04em'}}>
        Lowercase &ldquo;glosé&rdquo; with the real é. Thick horizontal bar BEHIND the text — the signature element.
        Caps / serif / mono / big-G variants dropped. Bar height now ≥ 50% of cap-height as requested.
      </div>
    </section>

    {/* 01 — WORDMARK — LOCKED */}
    <Section no="01" title="Wordmark" kicker="locked · single primary">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}}>
        <Card label="PRIMARY · NEON BAR" note="default—web, packaging, hero" h={240} bg={TOK.bone}>
          <Wordmark size={140}/>
        </Card>
        <Card label="LONG BAR" note="chrome / print / banner" h={240} bg={TOK.bone}>
          <Wordmark size={120} longBar/>
        </Card>
        <Card label="UTILITY · NO BAR" note="footer / legal / inline" h={240} bg={TOK.bone}>
          <Wordmark size={140} showBar={false}/>
        </Card>
      </div>

      <div style={{
        marginTop:32, padding:'28px 32px', background: TOK.ink, color: TOK.bone,
        fontFamily:'"JetBrains Mono", monospace', fontSize:12, letterSpacing:'.06em', lineHeight:1.6,
      }}>
        <div style={{color: TOK.neon, marginBottom:10, letterSpacing:'.2em'}}>// CONSTRUCTION · LOCKED</div>
        – type · Helvetica Neue Heavy (placeholder for the licensed cut)<br/>
        – case · always lowercase<br/>
        – é · real diacritic glyph, no separate colored acute<br/>
        – bar · z-index BEHIND text · NEON ONLY — no black, no white, no inverse<br/>
        – bar height · 50% of font-size · top edge tucks under the é-acute (no gap)<br/>
        – bar end · sits below the descender of "g" · bleeds 0.04em on both sides<br/>
        – long-bar variant · right side bleeds far past the wordmark (chrome / print)<br/>
        – accent rule · NEON used as type accent — not as background fill on surfaces<br/>
        &nbsp;&nbsp;&nbsp;exceptions: monogram favicon bg, small CTA pills (functional UI)
      </div>
    </Section>

    {/* 02 — ANATOMY (locked) */}
    <Section no="02" title="Anatomy" kicker="how the bar sits">
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        <Card label="↓ BAR TUCKS UNDER é-ACUTE" h={300} bg="#fff">
          <div style={{position:'relative'}}>
            <Wordmark size={180}/>
            {/* annotation lines */}
            <span style={{position:'absolute', top:-18, right:-40, fontFamily:'"JetBrains Mono", monospace', fontSize:9, letterSpacing:'.18em', color: TOK.ink, opacity:.6}}>← acute</span>
            <span style={{position:'absolute', bottom:8, right:-40, fontFamily:'"JetBrains Mono", monospace', fontSize:9, letterSpacing:'.18em', color: TOK.ink, opacity:.6}}>← descender</span>
          </div>
        </Card>
        <Card label="· SPECS ·" h={300} bg={TOK.bone}>
          <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:11, lineHeight:2, letterSpacing:'.08em'}}>
            barHeight &nbsp;= 0.50 × fontSize<br/>
            barTop &nbsp;&nbsp;&nbsp;&nbsp;= 0.55 × fontSize<br/>
            bleed &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.04em (each side)<br/>
            color &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= TOK.neon · #ff2ec4<br/>
            zIndex &nbsp;&nbsp;&nbsp;&nbsp;= 0 (behind text)
          </div>
        </Card>
      </div>
    </Section>

    {/* 03 — SCALE */}
    <Section no="03" title="Scale" kicker="logo across realistic sizes">
      <div style={{ background:'#fff', border:`1px solid ${TOK.ink}`, padding:'40px 48px'}}>
        <div style={{display:'flex', alignItems:'flex-end', gap:48, flexWrap:'wrap'}}>
          {[16, 24, 36, 56, 88, 140, 220].map(s => (
            <div key={s} style={{display:'flex', flexDirection:'column', alignItems:'flex-start', gap:14}}>
              <Wordmark size={s}/>
              <span style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:9, letterSpacing:'.2em', textTransform:'uppercase', opacity:.5}}>{s}px</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop:18, fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6}}>
        ↳ Below 16px the bar collapses on itself — use the monogram instead.
      </div>
    </Section>

    {/* 04 — MONOGRAM — 4 contexts */}
    <Section no="04" title="Monogram" kicker="lowercase g + neon acute · 4 contexts">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:24}}>
        <Card label="INK + NEON" note="primary monogram · dark UI" h={240}>
          <Monogram size={160}/>
        </Card>
        <Card label="BONE + NEON" note="light UI · stationery" h={240}>
          <Monogram size={160} bg={TOK.bone} fg={TOK.ink}/>
        </Card>
        <Card label="NEON BG" note="FAVICON · brand-loud touchpoints" h={240}>
          <Monogram size={160} bg={TOK.neon} fg={TOK.ink} accent={TOK.bone}/>
        </Card>
        <Card label="CHROME BG" note="packaging · print" h={240} bg={TOK.chrome}>
          <Monogram size={160} bg={TOK.bone} fg={TOK.ink}/>
        </Card>
      </div>

      {/* favicon scale */}
      <div style={{ marginTop:32, display:'grid', gridTemplateColumns:'repeat(5,auto) 1fr', gap:32, alignItems:'end', padding:'28px 32px', border:`1px solid ${TOK.ink}`, background:'#fff'}}>
        {[180, 64, 32, 16, 12].map(s => (
          <div key={s} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:10}}>
            <Monogram size={s}/>
            <span style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:9, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5}}>{s}px</span>
          </div>
        ))}
        <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', maxWidth:240, opacity:.6, justifySelf:'end'}}>
          ↳ favicon &amp; touch-icon sizes — note neon bar still reads at 16px.
        </div>
      </div>
    </Section>

    {/* 05 — ON SURFACES */}
    <Section no="05" title="On surfaces" kicker="contrast + clear-space test">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:0, border:`1px solid ${TOK.ink}`}}>
        <div style={{ background:TOK.bone, color:TOK.ink, padding:'56px 32px', minHeight:240, borderRight:`1px solid ${TOK.ink}`, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
          <Wordmark size={64}/>
          <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6, marginTop:24}}>ON BONE</div>
        </div>
        <div style={{ background:TOK.ink, color:TOK.bone, padding:'56px 32px', minHeight:240, borderRight:`1px solid ${TOK.ink}`, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
          <Wordmark size={64} color={TOK.bone}/>
          <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6, marginTop:24}}>ON INK</div>
        </div>
        <div style={{ background:TOK.neon, color:TOK.ink, padding:'56px 32px', minHeight:240, borderRight:`1px solid ${TOK.ink}`, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
          <Wordmark size={64} showBar={false}/>
          <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6, marginTop:24}}>ON NEON · NO BAR</div>
        </div>
        <div style={{
          backgroundImage:`url('assets/metal-bg.jpg')`, backgroundSize:'cover', backgroundPosition:'center',
          color: TOK.ink, padding:'56px 32px', minHeight:240,
          display:'flex', flexDirection:'column', justifyContent:'space-between',
          position:'relative',
        }}>
          <div style={{position:'absolute', inset:0, background:'rgba(245,243,238,.55)'}}/>
          <div style={{position:'relative'}}><Wordmark size={56} longBar/></div>
          <div style={{position:'relative', fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6, marginTop:24}}>ON CHROME · LONG BAR</div>
        </div>
      </div>

      {/* clearspace */}
      <div style={{ marginTop:32, border:`1px solid ${TOK.ink}`, padding:48, position:'relative', background:'#fff'}}>
        <div style={{ position:'absolute', inset:'24px', border:`1px dashed ${TOK.neon}`, pointerEvents:'none'}}/>
        <div style={{display:'flex', justifyContent:'center'}}>
          <Wordmark size={140}/>
        </div>
        <div style={{
          marginTop:28, fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', textAlign:'center', opacity:.6,
        }}>
          CLEAR SPACE = HEIGHT OF THE "G" ON ALL SIDES
        </div>
      </div>
    </Section>

    {/* 06 — LOCKUPS */}
    <Section no="06" title="Lockups" kicker="wordmark + system parts">
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        <Card label="↳ NAV LOCKUP" h={140}>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <Monogram size={36}/>
            <Wordmark size={36}/>
            <span style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:9, letterSpacing:'.2em', textTransform:'uppercase', opacity:.5, alignSelf:'flex-start', marginTop:2}}>™</span>
          </div>
        </Card>
        <Card label="↳ WITH EDITION" h={140}>
          <div style={{display:'flex', alignItems:'baseline', gap:24}}>
            <Wordmark size={64}/>
            <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:12, letterSpacing:'.2em', textTransform:'uppercase'}}>
              <div style={{color: TOK.neon}}>FW26</div>
              <div style={{opacity:.6}}>EDITION 01/02</div>
            </div>
          </div>
        </Card>
        <Card label="↳ STAMP / SEAL" h={160} bg={TOK.ink} ink={TOK.bone}>
          <div style={{
            padding:'10px 16px', border:`1.5px solid ${TOK.bone}`, transform:'rotate(-3deg)',
            display:'flex', alignItems:'baseline', gap:12,
          }}>
            <Wordmark size={28} color={TOK.bone}/>
            <span style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.2em', color: TOK.bone}}>· MADE IN IT ·</span>
          </div>
        </Card>
        <Card label="↳ ON CHROME" h={160} bg={TOK.chrome}>
          <Wordmark size={88}/>
        </Card>
      </div>
    </Section>

    {/* 07 — COLOR */}
    <Section no="07" title="Colors" kicker="six chips, one accent">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:0, border:`1px solid ${TOK.ink}`}}>
        {[
          {n:'INK', v:TOK.ink, t:TOK.bone, role:'BG / TYPE / FRAMES'},
          {n:'BONE', v:TOK.bone, t:TOK.ink, role:'PAGE / SURFACES'},
          {n:'CHROME', v:TOK.chrome, t:TOK.ink, role:'PHOTOS / PANELS'},
          {n:'CHROME DEEP', v:TOK.chromeDark, t:TOK.bone, role:'SHADOWS / BORDERS'},
          {n:'NEON', v:TOK.neon, t:TOK.ink, role:'ACCENT · ONE PER VIEW'},
          {n:'BLUE', v:TOK.blue, t:TOK.bone, role:'LOOKBOOK · MEDIA ONLY'},
        ].map((c,i) => (
          <div key={c.n} style={{
            background: c.v, color: c.t, padding:'24px 16px', minHeight:200,
            borderRight: i<5 ? `1px solid ${TOK.ink}`:'none',
            display:'flex', flexDirection:'column', justifyContent:'space-between',
            fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase',
          }}>
            <div>{c.n}</div>
            <div>
              <div style={{opacity:.7, marginBottom:6}}>{c.role}</div>
              <div>{c.v}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop:20, fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', opacity:.6}}>
        rule · neon = one accent per surface. blue = photography / video only, never UI.
      </div>
    </Section>

    {/* 08 — FAVICON / APP ICON */}
    <Section no="08" title="Favicon / app icon" kicker="browser, bookmark, ios home">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0, border:`1px solid ${TOK.ink}`}}>
        <div style={{ padding:'24px 20px', borderRight:`1px solid ${TOK.ink}`, background:'#fff'}}>
          <div style={{
            display:'flex', alignItems:'center', gap:8, padding:'8px 12px',
            border:`1px solid ${TOK.chromeDark}`, background: TOK.bone, borderRadius: 8,
            fontFamily:'system-ui, sans-serif', fontSize:13,
          }}>
            <Monogram size={16}/>
            <span style={{flex:1}}>glosé.studio</span>
            <span style={{opacity:.4}}>×</span>
          </div>
          <div style={{ marginTop:18, fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6}}>16PX · BROWSER TAB</div>
        </div>
        <div style={{ padding:'24px 20px', borderRight:`1px solid ${TOK.ink}`, background: TOK.bone, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:14}}>
          <Monogram size={32}/>
          <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6}}>32PX · BOOKMARK</div>
        </div>
        <div style={{ padding:'24px 20px', background: '#e8e6e1', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:14}}>
          <div style={{
            width: 120, height: 120, borderRadius: 26, overflow:'hidden',
            boxShadow:'0 6px 18px rgba(0,0,0,.12)',
          }}>
            <Monogram size={120}/>
          </div>
          <div style={{ fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6}}>180PX · IOS HOME</div>
        </div>
      </div>
    </Section>

    {/* 09 — OG IMAGE */}
    <Section no="09" title="OG image" kicker="1200 × 630 · social share">
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        {/* Variant 1 — type-driven */}
        <div style={{ border:`1px solid ${TOK.ink}` }}>
          <div style={{
            width:'100%', aspectRatio:'1200/630', position:'relative',
            background: TOK.ink, color: TOK.bone, overflow:'hidden',
            display:'flex', flexDirection:'column', justifyContent:'space-between', padding:'40px 48px',
          }}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <Wordmark size={36} color={TOK.bone}/>
              <span style={{fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', color: TOK.neon}}>● NEW DROP · FW26</span>
            </div>
            <div>
              <div style={{ fontWeight:900, fontSize:104, letterSpacing:'-0.05em', lineHeight:.85, color: TOK.bone}}>two objects.</div>
              <div style={{ fontWeight:900, fontSize:104, letterSpacing:'-0.05em', lineHeight:.85, color: TOK.bone, fontStyle:'italic', textShadow:`6px 6px 0 ${TOK.neon}`}}>made loud.</div>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase'}}>
              <span style={{opacity:.6}}>02 OBJECTS · MADE IN IT</span>
              <span style={{ background: TOK.neon, color: TOK.ink, padding:'4px 10px'}}>GLOSE.STUDIO →</span>
            </div>
          </div>
          <div style={{ padding:'10px 14px', borderTop:`1px solid ${TOK.ink}`, fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', display:'flex', justifyContent:'space-between'}}>
            <span>OG · TYPE-DRIVEN</span><span style={{opacity:.5}}>1200 × 630</span>
          </div>
        </div>

        {/* Variant 2 — photo + label */}
        <div style={{ border:`1px solid ${TOK.ink}` }}>
          <div style={{
            width:'100%', aspectRatio:'1200/630', position:'relative', overflow:'hidden',
            background: TOK.ink,
          }}>
            <img src="assets/blue-2.png" alt="" style={{
              position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 40%',
            }}/>
            <div style={{
              position:'absolute', left:0, right:0, bottom:0, padding:'28px 32px',
              background:'linear-gradient(180deg, transparent, rgba(0,0,0,.7))',
              display:'flex', justifyContent:'space-between', alignItems:'flex-end', color: TOK.bone,
            }}>
              <div>
                <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', color: TOK.neon, marginBottom:8}}>● LOOKBOOK_03 · 00:03</div>
                <Wordmark size={48} color={TOK.bone}/>
              </div>
              <div style={{ background: TOK.neon, color: TOK.ink, padding:'6px 12px', fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em'}}>GLOSE.STUDIO →</div>
            </div>
          </div>
          <div style={{ padding:'10px 14px', borderTop:`1px solid ${TOK.ink}`, fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', display:'flex', justifyContent:'space-between'}}>
            <span>OG · PHOTO + LABEL</span><span style={{opacity:.5}}>1200 × 630</span>
          </div>
        </div>
      </div>
    </Section>

    {/* 10 — EMAIL HEADER */}
    <Section no="10" title="Email header" kicker="600 px transactional + drop comms">
      <div style={{ display:'flex', flexDirection:'column', gap:24, alignItems:'center'}}>
        <div style={{ width: 600, border:`1px solid ${TOK.ink}`, background:'#fff'}}>
          <div style={{
            background: TOK.ink, color: TOK.bone, padding:'18px 24px',
            display:'flex', justifyContent:'space-between', alignItems:'center',
            borderBottom:`2px solid ${TOK.neon}`,
          }}>
            <Wordmark size={24} color={TOK.bone}/>
            <span style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.2em', color: TOK.neon}}>● NEW DROP</span>
          </div>
          <div style={{padding:'40px 28px 32px', textAlign:'left'}}>
            <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', opacity:.5, marginBottom:14}}>04.05.26 · 18:00 CET</div>
            <h3 style={{fontWeight:900, fontSize:52, letterSpacing:'-0.045em', lineHeight:.9, margin:0}}>The loop is<br/>on the wrist.</h3>
            <p style={{marginTop:18, marginBottom:24, fontSize:14, lineHeight:1.55, maxWidth:440}}>
              FW26 opens with two objects — the Loop Bag and the Fringe Charm. Limited to 60 pieces.
            </p>
            <a style={{
              display:'inline-block', background: TOK.neon, color: TOK.ink,
              padding:'12px 18px', fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.22em', textTransform:'uppercase',
              textDecoration:'none', border:`1px solid ${TOK.ink}`,
            }}>SHOP THE DROP →</a>
          </div>
          <div style={{
            borderTop:`1px solid ${TOK.ink}`, padding:'14px 24px',
            fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5,
            display:'flex', justifyContent:'space-between',
          }}>
            <span>GLOSÉ STUDIO · MADE IN IT</span><span>UNSUBSCRIBE</span>
          </div>
        </div>

        <div style={{ width: 600, border:`1px solid ${TOK.ink}`, background:'#fff'}}>
          <div style={{
            background: TOK.bone, color: TOK.ink, padding:'18px 24px',
            display:'flex', justifyContent:'space-between', alignItems:'center',
            borderBottom:`1px solid ${TOK.ink}`,
          }}>
            <Wordmark size={20}/>
            <span style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.2em'}}>ORDER · #GLS-0042</span>
          </div>
          <div style={{padding:'32px 28px'}}>
            <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', opacity:.5}}>RECEIPT</div>
            <h3 style={{fontWeight:900, fontSize:36, letterSpacing:'-0.04em', lineHeight:1, margin:'12px 0 24px'}}>Thanks, T.</h3>
            <div style={{ borderTop:`1px solid ${TOK.ink}`, paddingTop:14, fontSize:13, lineHeight:1.6}}>
              <div style={{display:'flex', justifyContent:'space-between'}}><span>"Loop Bag" · Chrome</span><span>€620,00</span></div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:6}}><span>"Fringe Charm" · Lavender</span><span>€85,00</span></div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:14, paddingTop:10, borderTop:`1px solid ${TOK.ink}`, fontWeight:900}}>
                <span>TOTAL</span><span style={{color: TOK.neon}}>€705,00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>

    {/* 11 — LOCKED */}
    <Section no="11" title="Locked decisions" kicker="single source of truth">
      <div style={{
        padding:'40px 48px', background: TOK.ink, color: TOK.bone,
        fontFamily:'"JetBrains Mono", monospace', fontSize:13, lineHeight:2, letterSpacing:'.06em',
      }}>
        <div style={{color: TOK.neon, marginBottom:18, letterSpacing:'.2em', fontSize:11}}>// FROZEN · v0.4 · ALL DOWNSTREAM WORK USES THIS</div>
        ✓ wordmark · lowercase glosé · Helvetica Heavy (placeholder)<br/>
        ✓ bar · NEON ONLY · 50% font-size · tucks under é-acute, ends below g-descender<br/>
        ✓ long-bar variant · right-side bleed for chrome / print<br/>
        ✓ monogram · lowercase g + neon acute · 4 contexts (ink, bone, neon, chrome)<br/>
        ✓ accent rule · neon = type accent + functional UI (CTA, favicon bg) · NOT surface fill<br/>
        ✓ OG · type-driven + photo+label, alternated per context<br/>
        ✓ email · loud (drops) + quiet (receipts) tones, both live in the system
      </div>
    </Section>

    {/* FOOT */}
    <footer style={{
      background: TOK.ink, color: TOK.bone, padding:'40px 48px',
      display:'flex', justifyContent:'space-between', alignItems:'center',
      fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase',
    }}>
      <span>GLOSÉ™ · BRAND IDENTITY V0.4 · LOCKED</span>
      <Wordmark size={20} color={TOK.bone}/>
      <span style={{opacity:.5}}>NEXT → DESIGN SYSTEM</span>
    </footer>
  </div>
);

Object.assign(window, { BrandPage });