/* Glass section — tokens, recipe, use scenarios, do/don'ts */

function GlassSection() {
  return (
    <section id="glass" data-screen-label="09 Glass">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>09</b> &nbsp;/&nbsp; Glass</div>
          <div>
            <h2 className="h1">A surface for things<br/>that <i style={{ fontStyle: 'normal', color: 'var(--blue)' }}>float.</i></h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Glassmorphism — a translucent surface backed by backdrop blur. Reserved for elements that hover above other content: navigation, modals, toasts, dropdowns, widgets. <b>Never as the default skin.</b>
            </p>
          </div>
        </div>

        {/* Recipe + ingredients */}
        <div className="g2" style={{ marginBottom: 56 }}>
          <pre className="code-block"><span className="com">/* The glass recipe — 5 lines */</span>{'\n'}
<span className="sel">.bd-glass</span> {'{'}{'\n'}
  <span className="prop">background</span>: <span className="kw">rgba</span>(<span className="num">250 250 247 / 0.55</span>);{'\n'}
  <span className="prop">backdrop-filter</span>: <span className="kw">blur</span>(<span className="num">18px</span>) <span className="kw">saturate</span>(<span className="num">180%</span>);{'\n'}
  <span className="prop">border</span>: <span className="num">1px</span> <span className="kw">solid</span> <span className="kw">rgba</span>(<span className="num">250 250 247 / 0.55</span>);{'\n'}
  <span className="prop">border-radius</span>: <span className="num">0.875rem</span>;{'\n'}
  <span className="prop">box-shadow</span>: <span className="num">0 1.25em 2.5em -1em</span> <span className="kw">rgba</span>(<span className="num">0 9 69 / 0.28</span>);{'\n'}
{'}'}</pre>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="spec">
              <b>// the 4 ingredients</b>{'\n'}
              • semi-transparent background (40–65%)<br/>
              • <b>backdrop-filter</b> blur (12–24 px)<br/>
              • a light border (~50% paper or 16% white)<br/>
              • soft shadow underneath
            </div>
            <div className="spec">
              <b>// the magic ingredient</b>{'\n'}
              <b>backdrop-filter</b> only renders when there's<br/>
              colourful content beneath. Glass on a plain<br/>
              white page is just transparency — and looks like it.
            </div>
            <div className="spec">
              <b>// browser support</b>{'\n'}
              All modern engines. Safari needs the<br/>
              <b>-webkit-backdrop-filter</b> prefix. Provide a<br/>
              solid fallback (90% opaque) for older browsers.
            </div>
          </div>
        </div>

        {/* Use scenarios */}
        <div className="eyebrow" style={{ marginBottom: 16 }}>// where it earns its keep</div>
        <div className="g2" style={{ gap: 28, marginBottom: 56 }}>

          {/* 1. Floating nav over hero */}
          <div className="glass-demo">
            <div className="stage">
              <div className="glass-stage glass-stage--cobalt" style={{ position: 'absolute', inset: 0 }}>
                <div className="stage-content">
                  <div className="sc-eyebrow">case study · 11</div>
                  <h3>Built for momentum.</h3>
                </div>
              </div>
              <div className="bd-root stage-nav-top" style={{ fontSize: 14, display: 'flex', gap: '0.5em', alignItems: 'center', justifyContent: 'space-between' }}>
                {/* Brand island */}
                <div className="bd-glass dark" style={{ display: 'flex', alignItems: 'center', gap: '0.5em', padding: '0.5em 0.875em 0.5em 0.5em', borderRadius: '999px' }}>
                  <SampleMark color="#fafaf7"/>
                  <span style={{ fontWeight: 700, letterSpacing: '-0.02em', fontSize: '0.875rem' }}>boolland</span>
                </div>
                {/* Links island */}
                <div className="bd-glass dark" style={{ display: 'flex', alignItems: 'center', gap: '1.125em', padding: '0.625em 1.125em', borderRadius: '999px', fontSize: '0.8125rem', opacity: 0.95 }}>
                  <span>Work</span>
                  <span>Services</span>
                  <span>About</span>
                  <span>Journal</span>
                </div>
                {/* Action island */}
                <button className="bd-btn secondary" style={{ padding: '0.5em 1em', borderRadius: '999px', boxShadow: '0 0.625em 1.25em -0.5em rgba(91,108,255,0.6)' }}>
                  Start
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: '0.25em' }}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </button>
              </div>
            </div>
            <div className="meta">
              <div className="eyebrow">01 · island nav</div>
              <h4>Split into floating islands.</h4>
              <p>Three small glass surfaces — brand, links, action — float independently. Modern, breathable, and lets the hero image show through between them.</p>
            </div>
          </div>

          {/* 2. Modal over dashboard */}
          <div className="glass-demo">
            <div className="stage">
              <div className="glass-stage glass-stage--ocean" style={{ position: 'absolute', inset: 0 }}>
                <div className="fake-dash">
                  <div className="row">
                    <div className="tile"><div className="bar b1"/><div className="bar b2"/><div className="bar b3"/></div>
                    <div className="tile"><div className="bar b1"/><div className="bar b2"/><div className="bar b3"/></div>
                    <div className="tile"><div className="bar b1"/><div className="bar b2"/><div className="bar b3"/></div>
                  </div>
                  <div className="row">
                    <div className="tile"><div className="bar b1"/><div className="bar b2"/><div className="bar b3"/></div>
                    <div className="tile"><div className="bar b1"/><div className="bar b2"/><div className="bar b3"/></div>
                    <div className="tile"><div className="bar b1"/><div className="bar b2"/><div className="bar b3"/></div>
                  </div>
                </div>
              </div>
              <div className="stage-dim"/>
              <div className="bd-root stage-modal" style={{ fontSize: 14 }}>
                <div className="bd-glass" style={{ padding: '1.5em' }}>
                  <h5 style={{ margin: 0, fontSize: '1.125rem', fontWeight: 700, letterSpacing: '-0.01em' }}>Delete this project?</h5>
                  <p style={{ margin: '0.5em 0 1em', fontSize: '0.875rem', opacity: 0.75, lineHeight: 1.45 }}>"Headless Shopify rebuild" and 28 assets will be removed. This action cannot be undone.</p>
                  <div style={{ display: 'flex', gap: '0.5em', justifyContent: 'flex-end' }}>
                    <button className="bd-btn ghost sm">Cancel</button>
                    <button className="bd-btn danger sm">Delete</button>
                  </div>
                </div>
              </div>
            </div>
            <div className="meta">
              <div className="eyebrow">02 · modal</div>
              <h4>Stay in context.</h4>
              <p>The background dims and blurs so the modal feels lifted — but the page underneath remains visible enough to anchor the user.</p>
            </div>
          </div>

          {/* 3. Toast notification */}
          <div className="glass-demo">
            <div className="stage">
              <div className="glass-stage glass-stage--photo" style={{ position: 'absolute', inset: 0 }}>
                <div className="stage-content">
                  <div className="sc-eyebrow">project · the green</div>
                  <h3>Saving<br/>your work…</h3>
                </div>
              </div>
              <div className="bd-root stage-toast" style={{ fontSize: 14 }}>
                <div className="bd-glass" style={{ display: 'flex', alignItems: 'center', gap: '0.75em', padding: '0.875em 1em' }}>
                  <div style={{ width: '2em', height: '2em', borderRadius: '50%', background: 'rgba(10,138,79,0.15)', display: 'grid', placeItems: 'center', color: '#0a8a4f', flexShrink: 0 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '0.875rem', fontWeight: 600 }}>Saved successfully</div>
                    <div style={{ fontSize: '0.75rem', opacity: 0.7 }}>All changes synced 2 sec ago.</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="meta">
              <div className="eyebrow">03 · toast</div>
              <h4>Speak softly, then leave.</h4>
              <p>Floating confirmation that doesn't punch a hole in the layout. Auto-dismiss after 4–6 seconds.</p>
            </div>
          </div>

          {/* 4. Dropdown menu */}
          <div className="glass-demo">
            <div className="stage">
              <div className="glass-stage glass-stage--mesh" style={{ position: 'absolute', inset: 0 }}>
                <div className="stage-content">
                  <div className="sc-eyebrow">/ dashboard</div>
                  <h3>Hello, Weng.</h3>
                </div>
              </div>
              <div className="bd-root" style={{ position: 'absolute', top: 18, right: 18, fontSize: 14 }}>
                <div className="bd-glass" style={{ padding: '0.375em', borderRadius: '999px', display: 'inline-flex', alignItems: 'center', gap: '0.5em', paddingRight: '0.875em' }}>
                  <div style={{ width: '1.75em', height: '1.75em', borderRadius: '50%', background: '#000945', color: '#fafaf7', display: 'grid', placeItems: 'center', fontSize: '0.75rem', fontWeight: 700 }}>W</div>
                  <span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>Weng Han</span>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
                </div>
              </div>
              <div className="bd-root stage-dropdown" style={{ fontSize: 14, top: 72 }}>
                <div className="bd-glass" style={{ padding: '0.5em' }}>
                  {['Account settings', 'Billing', 'Notifications', 'Sign out'].map((item, i) => (
                    <div key={item} style={{ padding: '0.625em 0.75em', borderRadius: '0.5em', fontSize: '0.8125rem', cursor: 'pointer', borderTop: i === 3 ? '1px solid rgba(0,9,69,0.1)' : 'none', marginTop: i === 3 ? '0.25em' : 0, paddingTop: i === 3 ? '0.875em' : '0.625em', color: i === 3 ? 'var(--bd-danger)' : 'inherit' }}>{item}</div>
                  ))}
                </div>
              </div>
            </div>
            <div className="meta">
              <div className="eyebrow">04 · dropdown</div>
              <h4>Lift, don't separate.</h4>
              <p>Menu sits above the page without breaking the colour story underneath. Anchor to the trigger; don't drift.</p>
            </div>
          </div>

          {/* 5. Player widget */}
          <div className="glass-demo">
            <div className="stage">
              <div className="glass-stage glass-stage--warm" style={{ position: 'absolute', inset: 0 }}>
                <div className="stage-content">
                  <div className="sc-eyebrow">// now playing</div>
                  <h3>Drift —<br/>Long Form Vol. 2</h3>
                </div>
              </div>
              <div className="bd-root stage-player" style={{ fontSize: 14 }}>
                <div className="bd-glass dark" style={{ display: 'flex', alignItems: 'center', gap: '0.875em', padding: '0.75em 1em' }}>
                  <div style={{ width: '2.5em', height: '2.5em', borderRadius: '0.5em', background: 'rgba(250,250,247,0.18)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <SampleMark color="#fafaf7" style={{ width: '1.25em', height: '1.25em' }}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '0.875rem', fontWeight: 600 }}>Drift — Side A</div>
                    <div style={{ fontSize: '0.6875rem', opacity: 0.7, marginTop: '0.125em' }}>02:14 / 47:30</div>
                    <div style={{ height: '0.1875em', background: 'rgba(250,250,247,0.2)', borderRadius: 999, marginTop: '0.375em', overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: '8%', background: '#5b6cff', borderRadius: 999 }}/>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: '0.5em' }}>
                    <button className="bd-btn ghost sm" style={{ color: 'currentColor', padding: '0.375em' }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5" stroke="currentColor" strokeWidth="2"/></svg>
                    </button>
                    <button className="bd-btn ghost sm" style={{ color: 'currentColor', padding: '0.375em', background: 'rgba(250,250,247,0.18)' }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                    </button>
                    <button className="bd-btn ghost sm" style={{ color: 'currentColor', padding: '0.375em' }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19" stroke="currentColor" strokeWidth="2"/></svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div className="meta">
              <div className="eyebrow">05 · floating widget</div>
              <h4>Persistent, but polite.</h4>
              <p>A media player, mini cart, AI assistant — anything that follows the user without owning the page.</p>
            </div>
          </div>

          {/* 6. App tile / home screen widget */}
          <div className="glass-demo tall">
            <div className="stage">
              <div className="glass-stage glass-stage--cream" style={{ position: 'absolute', inset: 0 }}>
                {/* Faux home screen grid suggestion */}
                <div style={{ position: 'absolute', top: '20%', left: '15%', right: '15%', bottom: '25%', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, opacity: 0.18 }}>
                  {Array.from({ length: 12 }).map((_, i) => (
                    <div key={i} style={{ borderRadius: 10, background: 'rgba(0,9,69,0.25)', aspectRatio: '1/1' }}/>
                  ))}
                </div>
              </div>
              <div className="bd-root stage-tile" style={{ fontSize: 14 }}>
                <div className="bd-glass" style={{ padding: '1.25em', width: '11em', display: 'flex', flexDirection: 'column', gap: '0.625em', alignItems: 'flex-start' }}>
                  <SampleMark color="#000945" style={{ width: '2.25em', height: '2.25em' }}/>
                  <div>
                    <div style={{ fontSize: '0.875rem', fontWeight: 700, letterSpacing: '-0.01em' }}>boolland</div>
                    <div style={{ fontSize: '0.6875rem', opacity: 0.65, fontFamily: 'Roboto Mono, monospace', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: '0.125em' }}>3 projects active</div>
                  </div>
                  <div style={{ display: 'flex', gap: '0.25em', marginTop: '0.25em' }}>
                    <span className="bd-badge success dot" style={{ fontSize: '0.5625rem' }}>live</span>
                    <span className="bd-badge info" style={{ fontSize: '0.5625rem' }}>QA</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="meta">
              <div className="eyebrow">06 · home screen widget</div>
              <h4>The mark, on glass.</h4>
              <p>An iOS / Android widget, a desktop dock tile, a launcher card — the brand mark wrapped in glass over the user's own wallpaper.</p>
            </div>
          </div>

        </div>

        {/* DO */}
        <div className="eyebrow" style={{ marginBottom: 16 }}>// do · keep it intentional</div>
        <div className="rule-row" style={{ gridTemplateColumns: 'repeat(3, 1fr)', marginBottom: 32 }}>
          <div className="rule do">
            <div className="badge">✓ DO</div>
            <div className="stage-mini glass-stage--cobalt">
              <div className="bd-root" style={{ fontSize: 12, position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '78%' }}>
                <div className="bd-glass dark" style={{ padding: '0.625em 0.875em', borderRadius: '999px', display: 'flex', alignItems: 'center', gap: '0.5em', justifyContent: 'center' }}>
                  <SampleMark color="#fafaf7" style={{ width: '1.25em', height: '1.25em' }}/>
                  <span style={{ fontWeight: 700, fontSize: '0.875rem' }}>boolland</span>
                </div>
              </div>
            </div>
            <h5>Use it on busy or colourful surfaces.</h5>
            <p>Photos, gradients, video — anywhere the backdrop blur can do its job. The richer the surface, the better glass reads.</p>
          </div>

          <div className="rule do">
            <div className="badge">✓ DO</div>
            <div className="stage-mini glass-stage--ocean">
              <div className="bd-root" style={{ fontSize: 12, position: 'absolute', inset: 'auto 12px 12px auto', width: '70%' }}>
                <div className="bd-glass" style={{ padding: '0.75em', display: 'flex', alignItems: 'center', gap: '0.5em' }}>
                  <div style={{ width: '1.5em', height: '1.5em', borderRadius: '50%', background: 'rgba(10,138,79,0.15)', display: 'grid', placeItems: 'center', color: '#0a8a4f' }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
                  </div>
                  <span style={{ fontSize: '0.75rem', fontWeight: 600 }}>Saved</span>
                </div>
              </div>
            </div>
            <h5>Reserve it for floating elements.</h5>
            <p>Nav, modal, toast, dropdown, widget. Glass says "this is hovering above the page" — use it only when that's literally true.</p>
          </div>

          <div className="rule do">
            <div className="badge">✓ DO</div>
            <div className="stage-mini glass-stage--mesh">
              <div className="bd-root" style={{ fontSize: 12, position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
                <div className="bd-glass" style={{ padding: '0.875em 1em' }}>
                  <div style={{ fontSize: '0.875rem', fontWeight: 700, letterSpacing: '-0.01em', color: '#000945' }}>High contrast text</div>
                  <div style={{ fontSize: '0.6875rem', opacity: 0.7, marginTop: '0.25em' }}>Stays legible on any wallpaper.</div>
                </div>
              </div>
            </div>
            <h5>Keep typography high-contrast.</h5>
            <p>Glass softens everything behind it. Pull text the other way — use full ink, never tints, and bump weight by one step.</p>
          </div>
        </div>

        {/* DON'T */}
        <div className="eyebrow" style={{ marginBottom: 16 }}>// don't · prevent overuse</div>
        <div className="rule-row" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="stage-mini glass-stage--paper">
              <div className="bd-root" style={{ fontSize: 12, position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '78%' }}>
                <div className="bd-glass" style={{ padding: '0.875em 1em' }}>
                  <div style={{ fontSize: '0.875rem', fontWeight: 700 }}>Floating card?</div>
                  <div style={{ fontSize: '0.75rem', opacity: 0.65, marginTop: '0.25em' }}>It just looks weak.</div>
                </div>
              </div>
            </div>
            <h5>Don't use glass on plain backgrounds.</h5>
            <p>With nothing colourful behind it, backdrop-blur does nothing — you just end up with a translucent card that looks like a mistake.</p>
          </div>

          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="stage-mini glass-stage--cobalt">
              <div className="bd-root" style={{ fontSize: 12, position: 'absolute', inset: '14% 18%' }}>
                <div className="bd-glass dark" style={{ padding: '1.25em', height: '100%' }}>
                  <div className="bd-glass dark" style={{ padding: '1em', height: '70%', marginTop: '0.5em' }}>
                    <div className="bd-glass dark" style={{ padding: '0.625em', height: '60%' }}>
                      <span style={{ fontSize: '0.625rem', opacity: 0.7 }}>nested</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <h5>Don't stack glass on glass on glass.</h5>
            <p>Each layer compounds the blur and the translucency. Two layers max — and even then, only when the inner surface is solid.</p>
          </div>

          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="stage-mini glass-stage--cream">
              <div className="bd-root" style={{ fontSize: 12, position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '78%' }}>
                <div className="bd-glass" style={{ padding: '0.875em 1em' }}>
                  <div style={{ fontSize: '0.875rem', fontWeight: 400, color: 'rgba(0,9,69,0.35)' }}>Important message</div>
                  <div style={{ fontSize: '0.6875rem', color: 'rgba(0,9,69,0.25)', marginTop: '0.25em' }}>Can you even read this?</div>
                </div>
              </div>
            </div>
            <h5>Don't pair glass with low-contrast text.</h5>
            <p>The surface already eats contrast. Use full <b>Ink</b> with weight 600+. Tints and greys disappear under blur.</p>
          </div>

          <div className="rule dont">
            <div className="badge">✕ DON'T</div>
            <div className="stage-mini glass-stage--warm">
              <div className="bd-root" style={{ fontSize: 12, position: 'absolute', inset: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div className="bd-glass dark" style={{ padding: '0.5em 0.75em', display: 'flex', justifyContent: 'space-between', fontSize: '0.6875rem' }}>
                  <span style={{ color: '#fafaf7' }}>nav</span><span style={{ color: '#fafaf7' }}>menu</span>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <div className="bd-glass" style={{ padding: '0.5em', flex: 1, fontSize: '0.625rem' }}>card</div>
                  <div className="bd-glass" style={{ padding: '0.5em', flex: 1, fontSize: '0.625rem' }}>card</div>
                  <div className="bd-glass" style={{ padding: '0.5em', flex: 1, fontSize: '0.625rem' }}>card</div>
                </div>
                <div className="bd-glass" style={{ padding: '0.5em 0.75em', fontSize: '0.625rem', marginTop: 'auto' }}>footer</div>
              </div>
            </div>
            <h5>Don't make everything glass.</h5>
            <p>Glass is signal, not skin. When every element is glass, none of them feel lifted — and the page reads as visually muddy.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.GlassSection = GlassSection;