// Visual audit of all design tokens. Route: /styleguide
// Renders tokens from tokens.css so any change to that file flows through automatically.

function Swatch({ label, value, color, note }) {
  const isDark = /^#[0-9a-f]{3,8}$/i.test(color) && parseInt(color.slice(1, 3), 16) < 128;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{
        width: '100%', height: 88, background: color, borderRadius: 4,
        border: '1px solid rgba(0,0,0,0.08)', boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end',
        padding: 8, color: isDark ? '#fff' : '#1a1a1a', fontSize: 10,
        fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.02em'
      }}>{color}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <code style={{ fontSize: 11, fontFamily: 'JetBrains Mono, monospace' }}>{label}</code>
        {note && <span style={{ fontSize: 11, color: '#666', lineHeight: 1.4 }}>{note}</span>}
      </div>
    </div>
  );
}

function Section({ title, subtitle, children }) {
  return (
    <section style={{ marginBottom: 80 }}>
      <header style={{ marginBottom: 24, paddingBottom: 12, borderBottom: '1px solid rgba(26,26,26,0.12)' }}>
        <h2 style={{
          margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em',
          fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif'
        }}>{title}</h2>
        {subtitle && <p style={{
          margin: '6px 0 0', fontSize: 13, color: '#666', maxWidth: 720, lineHeight: 1.5
        }}>{subtitle}</p>}
      </header>
      {children}
    </section>
  );
}

function Grid({ cols = 4, children, gap = 20 }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gap
    }}>{children}</div>
  );
}

function TypeRow({ token, value, sample, family, weight, lh, ls }) {
  return (
    <tr style={{ borderBottom: '1px solid rgba(26,26,26,0.06)' }}>
      <td style={{ padding: '18px 16px 18px 0', verticalAlign: 'top', whiteSpace: 'nowrap' }}>
        <code style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#444' }}>{token}</code>
        <div style={{ fontSize: 10, color: '#999', fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>{value}</div>
      </td>
      <td style={{ padding: '18px 0' }}>
        <div style={{
          fontFamily: family || 'inherit',
          fontSize: value && value.startsWith('clamp') ? value : (value && value.endsWith('em') ? value : value),
          fontWeight: weight || 400,
          lineHeight: lh || 1.4,
          letterSpacing: ls || 'normal',
          color: '#1a1a1a'
        }}>{sample}</div>
      </td>
    </tr>
  );
}

function SpaceBar({ token, value, label, isAbsolute }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '140px 80px 1fr', alignItems: 'center',
      padding: '10px 0', borderBottom: '1px solid rgba(26,26,26,0.06)', gap: 16
    }}>
      <code style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#444' }}>{token}</code>
      <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#666' }}>{value}</span>
      <div style={{
        height: 12, width: value, maxWidth: '100%', background: '#1a1a1a', borderRadius: 2
      }} title={value} />
    </div>
  );
}

function Styleguide() {
  return (
    <div style={{
      minHeight: '100vh', background: '#FFFFFF', color: '#1a1a1a',
      fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
      padding: '64px max(32px, 6vw)'
    }}>
      <header style={{ maxWidth: 1200, margin: '0 auto 48px' }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: '#999', marginBottom: 12
        }}>Design System · Visual audit</div>
        <h1 style={{
          margin: 0, fontSize: 56, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05
        }}>Index of Taste Tokens</h1>
        <p style={{
          marginTop: 12, fontSize: 15, color: '#666', maxWidth: 720, lineHeight: 1.6
        }}>
          Cada token desta página é puxado dos arquivos <code>styles.css</code>, <code>profile.css</code> e
          <code> app.jsx</code>. Para a tabela formal de tokens, ver <code>tokens.css</code>. Para a documentação,
          ver <code>design-system.md</code>.
        </p>
      </header>

      <div style={{ maxWidth: 1200, margin: '0 auto' }}>

        {/* ── COLORS ─────────────────────────────────────────── */}
        <Section title="Cores · Tinta" subtitle="Hierarquia de texto. Pulo perceptível entre 700 e 500; #4A4845 é outlier.">
          <Grid cols={5}>
            <Swatch label="--color-ink-900" color="#1a1a1a" note="Texto primário" />
            <Swatch label="--color-ink-700" color="#444" note="Texto secundário" />
            <Swatch label="--color-ink-600" color="#4A4845" note="Outlier (figure-preview)" />
            <Swatch label="--color-ink-500" color="#666" note="Texto terciário" />
            <Swatch label="--color-ink-400" color="#999" note="Muted / kicker" />
          </Grid>
        </Section>

        <Section title="Cores · Papel / Superfície" subtitle="Quatro creams próximos coexistindo. Maior fonte de inconsistência atual.">
          <Grid cols={5}>
            <Swatch label="--color-paper-100" color="#FFFFFF" note="Pure white (popup body)" />
            <Swatch label="--color-paper-200" color="#FFFBEB" note="Profile sections" />
            <Swatch label="--color-paper-300" color="#F4F0E8" note="Modal / legacy homepage" />
            <Swatch label="--color-paper-400" color="#eddbbf" note="Homepage atual" />
            <Swatch label="--color-paper-500" color="#E8E2D2" note="Image placeholder" />
          </Grid>
        </Section>

        <Section title="Cores · Chrome macOS + Acentos" subtitle="Reservados ao componente figure-preview (hover card).">
          <Grid cols={5}>
            <Swatch label="--color-chrome-200" color="#E8E6E3" note="Titlebar top" />
            <Swatch label="--color-chrome-300" color="#DAD7D3" note="Titlebar bottom" />
            <Swatch label="--color-accent-red" color="#FF5F57" note="Close" />
            <Swatch label="--color-accent-amber" color="#FEBC2E" note="Min" />
            <Swatch label="--color-accent-green" color="#28C840" note="Max" />
          </Grid>
        </Section>

        {/* ── TYPOGRAPHY ─────────────────────────────────────── */}
        <Section title="Tipografia · Famílias">
          <Grid cols={2}>
            <div style={{ padding: 24, background: '#FFFBEB', borderRadius: 4 }}>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#999', marginBottom: 12 }}>--font-body</div>
              <div style={{ fontFamily: "'Inter', -apple-system, sans-serif", fontSize: 22 }}>Inter · The Index of Taste</div>
              <div style={{ marginTop: 8, fontFamily: 'JetBrains Mono', fontSize: 10, color: '#666' }}>'Inter', -apple-system, sans-serif</div>
            </div>
            <div style={{ padding: 24, background: '#FFFBEB', borderRadius: 4 }}>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#999', marginBottom: 12 }}>--font-display-fallback</div>
              <div style={{ fontFamily: "'DM Serif Display', serif", fontSize: 32 }}>The Index of Taste</div>
              <div style={{ marginTop: 8, fontFamily: 'JetBrains Mono', fontSize: 10, color: '#666' }}>'DM Serif Display', serif</div>
            </div>
            <div style={{ padding: 24, background: '#FFFBEB', borderRadius: 4 }}>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#999', marginBottom: 12 }}>--font-mono</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 16 }}>INDEX_OF_TASTE / VOL.01</div>
              <div style={{ marginTop: 8, fontFamily: 'JetBrains Mono', fontSize: 10, color: '#666' }}>'JetBrains Mono', monospace</div>
            </div>
            <div style={{ padding: 24, background: '#FFFBEB', borderRadius: 4 }}>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#999', marginBottom: 12 }}>--font-display (Erotique)</div>
              <div style={{ fontFamily: "'Erotique Alternate', 'DM Serif Display', serif", fontWeight: 700, fontSize: 32 }}>The Index of Taste</div>
              <div style={{ marginTop: 8, fontFamily: 'JetBrains Mono', fontSize: 10, color: '#666' }}>'Erotique Alternate', 'DM Serif Display', serif</div>
            </div>
            <div style={{ padding: 24, background: '#FFFBEB', borderRadius: 4, gridColumn: 'span 2' }}>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#999', marginBottom: 12 }}>--font-system · usado dentro dos perfis</div>
              <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif", fontSize: 18 }}>The Index of Taste — system font stack</div>
              <div style={{ marginTop: 8, fontFamily: 'JetBrains Mono', fontSize: 10, color: '#666' }}>-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif</div>
            </div>
          </Grid>
        </Section>

        <Section title="Tipografia · Escala" subtitle="Mistura de px / rem / em / clamp tal como no código.">
          <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: '-apple-system, sans-serif' }}>
            <tbody>
              <TypeRow token="--text-3xs" value="6px" sample="Figure-preview window title — 6px" />
              <TypeRow token="--text-2xs" value="9px" sample="Navigation back · footer button · figure caption — 9px" />
              <TypeRow token="--text-xs" value="10px" sample="EYEBROW · COLOPHON · MODAL META — 10px" ls="0.18em" />
              <TypeRow token="--text-sm-2" value="0.7rem" sample="Editorial kicker · 0.7rem" ls="0.18em" />
              <TypeRow token="--text-sm-3" value="0.72rem" sample="Section-4 kicker · 0.72rem" weight={500} />
              <TypeRow token="--text-sm-4" value="0.78rem" sample="Body in 3-column editorial · 0.78rem · line-height 1.75" lh={1.75} />
              <TypeRow token="--text-base" value="0.82rem" sample="Subtitle and credit · 0.82rem · weight 600" weight={600} />
              <TypeRow token="--text-md-1" value="0.9rem" sample="Section-4 credits · 0.9rem · medium" weight={500} />
              <TypeRow token="--text-md-2" value="1.1rem" sample="Section-4 intro paragraph · 1.1rem · semibold" weight={600} />
              <TypeRow token="--text-lg-clamp" value="clamp(1.05rem, 1.25vw, 1.5rem)" sample="Section-5 pull quote, italic" family="DM Serif Display, serif" />
              <TypeRow token="--text-xl-clamp" value="clamp(1.4rem, 1.8vw, 2.2rem)" sample="Section-2 pull quote · clamp" weight={700} />
              <TypeRow token="--text-2xl-clamp" value="clamp(2rem, 2.4vw, 3rem)" sample="Section-3 quote column" weight={800} />
              <TypeRow token="--text-3xl-clamp" value="clamp(2rem, 2.7vw, 3.6rem)" sample="Editorial title (ed-title)" weight={800} lh={1.15} />
              <TypeRow token="--text-4xl-modal" value="44px" sample="Modal name (44px)" family="DM Serif Display, serif" />
              <TypeRow token="--text-5xl-clamp" value="clamp(3rem, 4.4vw, 5rem)" sample="Section-4 large title" weight={800} ls="-0.02em" />
            </tbody>
          </table>
          <div style={{ marginTop: 28, padding: 24, background: '#FFFBEB', borderRadius: 4 }}>
            <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#999', marginBottom: 12 }}>--text-6xl-clamp · Headline (texto, legado — hoje renderizado como SVG)</div>
            <div style={{
              fontFamily: "'Erotique Alternate', 'DM Serif Display', serif",
              fontWeight: 700, fontSize: 'clamp(56px, 8.4vw, 132px)',
              lineHeight: 0.95, letterSpacing: '-0.02em'
            }}>INDEX of TASTE</div>
          </div>
        </Section>

        <Section title="Pesos" subtitle="300 · 400 · 500 · 600 · 700 · 800 (sem 100, 200, 900).">
          <Grid cols={6}>
            {[
              ['--font-weight-light', 300],
              ['--font-weight-regular', 400],
              ['--font-weight-medium', 500],
              ['--font-weight-semibold', 600],
              ['--font-weight-bold', 700],
              ['--font-weight-heavy', 800],
            ].map(([token, w]) => (
              <div key={token} style={{ padding: 18, background: '#FFFBEB', borderRadius: 4 }}>
                <div style={{ fontSize: 28, fontWeight: w, lineHeight: 1.2 }}>Aa</div>
                <code style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#666', display: 'block', marginTop: 8 }}>{w}</code>
                <code style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#999' }}>{token}</code>
              </div>
            ))}
          </Grid>
        </Section>

        {/* ── SPACING ─────────────────────────────────────── */}
        <Section title="Espaçamento · Absoluto (px)" subtitle="Não segue uma escala base. Valores próximos sem razão estrutural.">
          {[
            ['--space-1', '2px'], ['--space-2', '4px'], ['--space-3', '6px'], ['--space-4', '8px'],
            ['--space-5', '14px'], ['--space-6', '18px'], ['--space-7', '22px'], ['--space-8', '24px'],
            ['--space-9', '28px'], ['--space-10', '32px'], ['--space-11', '40px'], ['--space-12', '48px'],
            ['--space-13', '56px'], ['--space-14', '64px'], ['--space-15', '80px'], ['--space-16', '96px'],
            ['--space-17', '132px']
          ].map(([t, v]) => <SpaceBar key={t} token={t} value={v} isAbsolute />)}
        </Section>

        <Section title="Espaçamento · Relativo (vh/vw)" subtitle="Para perfis (proporção de página de revista).">
          {[
            ['--space-vh-2', '2vh'], ['--space-vh-4', '3vh'], ['--space-vh-7', '4.5vh'],
            ['--space-vh-8', '5vh (inter-section)'], ['--space-vh-11', '10vh'],
            ['--space-vw-1', '1.6vw'], ['--space-vw-2', '2vw'], ['--space-vw-3', '3vw'],
            ['--space-vw-5', '4.5vw'], ['--space-vw-6', '6vw']
          ].map(([t, v]) => (
            <div key={t} style={{
              display: 'grid', gridTemplateColumns: '180px 1fr', padding: '10px 0', alignItems: 'center',
              borderBottom: '1px solid rgba(26,26,26,0.06)', gap: 16
            }}>
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#444' }}>{t}</code>
              <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#666' }}>{v}</span>
            </div>
          ))}
        </Section>

        {/* ── RADII ─────────────────────────────────────── */}
        <Section title="Border Radius" subtitle="Só 3 valores no projeto inteiro.">
          <Grid cols={3}>
            <div style={{ padding: 24, background: '#FFFBEB', textAlign: 'center', borderRadius: 4 }}>
              <div style={{ width: 80, height: 80, background: '#1a1a1a', borderRadius: 2, margin: '0 auto 12px' }} />
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>--radius-xs · 2px</code>
            </div>
            <div style={{ padding: 24, background: '#FFFBEB', textAlign: 'center', borderRadius: 4 }}>
              <div style={{ width: 80, height: 80, background: '#1a1a1a', borderRadius: 6, margin: '0 auto 12px' }} />
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>--radius-md · 6px</code>
            </div>
            <div style={{ padding: 24, background: '#FFFBEB', textAlign: 'center', borderRadius: 4 }}>
              <div style={{ width: 80, height: 80, background: '#1a1a1a', borderRadius: '50%', margin: '0 auto 12px' }} />
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>--radius-full · 50%</code>
            </div>
          </Grid>
        </Section>

        {/* ── SHADOWS ─────────────────────────────────────── */}
        <Section title="Sombras" subtitle="Apenas 2 no projeto: a do popup macOS e o inset dos traffic lights.">
          <Grid cols={2}>
            <div style={{ padding: 40, background: '#FFFBEB' }}>
              <div style={{
                width: '100%', height: 120, background: '#fff',
                boxShadow: '0 0 0 0.5px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10)',
                borderRadius: 6, marginBottom: 12
              }} />
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>--shadow-popup</code>
              <div style={{ fontSize: 10, color: '#666', marginTop: 4, fontFamily: 'JetBrains Mono', lineHeight: 1.5 }}>
                0 0 0 0.5px rgba(0,0,0,.18),<br />0 8px 24px rgba(0,0,0,.18),<br />0 2px 6px rgba(0,0,0,.10)
              </div>
            </div>
            <div style={{ padding: 40, background: '#FFFBEB' }}>
              <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
                <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#FF5F57', boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,.15)' }} />
                <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#FEBC2E', boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,.15)' }} />
                <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#28C840', boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,.15)' }} />
              </div>
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>--shadow-traffic-light</code>
              <div style={{ fontSize: 10, color: '#666', marginTop: 4, fontFamily: 'JetBrains Mono', lineHeight: 1.5 }}>
                inset 0 0 0 0.5px rgba(0,0,0,.15)
              </div>
            </div>
          </Grid>
        </Section>

        {/* ── COMPONENTS ─────────────────────────────────── */}
        <Section title="Componentes · Botões (do projeto)" subtitle="Estilo real do projeto: botões 'invisíveis' (sem fundo, sem borda), apenas tipografia com hover-opacity.">
          <Grid cols={3}>
            <div style={{ padding: 32, background: '#FFFBEB', borderRadius: 4 }}>
              <button style={{
                background: 'transparent', border: 0, padding: 0,
                fontFamily: 'inherit', fontSize: 9,
                letterSpacing: '0.22em', textTransform: 'uppercase', color: '#1a1a1a',
                opacity: 0.45, cursor: 'pointer'
              }}>← Index</button>
              <div style={{ marginTop: 12, fontSize: 10, fontFamily: 'JetBrains Mono', color: '#666' }}>
                ed-nav__back · uppercase 9px / 0.22em
              </div>
            </div>
            <div style={{ padding: 32, background: '#FFFBEB', borderRadius: 4 }}>
              <button style={{
                background: 'transparent', border: 0, padding: '6px 0',
                fontFamily: 'inherit', fontSize: 9,
                letterSpacing: '0.2em', textTransform: 'uppercase', color: '#1a1a1a',
                opacity: 0.4, cursor: 'pointer'
              }}>Next profile →</button>
              <div style={{ marginTop: 12, fontSize: 10, fontFamily: 'JetBrains Mono', color: '#666' }}>
                ed-footer button · uppercase 9px / 0.2em
              </div>
            </div>
            <div style={{ padding: 32, background: '#FFFBEB', borderRadius: 4 }}>
              <button style={{
                background: 'transparent', border: 0, padding: 4,
                fontFamily: 'inherit', fontSize: 13, color: '#1a1a1a',
                opacity: 0.3, cursor: 'pointer'
              }}>←</button>
              <button style={{
                background: 'transparent', border: 0, padding: 4,
                fontFamily: 'inherit', fontSize: 13, color: '#1a1a1a',
                opacity: 0.3, cursor: 'pointer', marginLeft: 18
              }}>→</button>
              <div style={{ marginTop: 12, fontSize: 10, fontFamily: 'JetBrains Mono', color: '#666' }}>
                ed-nav__arrows · 13px symbol
              </div>
            </div>
          </Grid>
        </Section>

        <Section title="Componentes · Card de hover (macOS popup)" subtitle="O único componente com sombra e radius real no projeto.">
          <div style={{
            display: 'inline-block', width: 156, background: '#FFFFFF',
            borderRadius: 6, overflow: 'hidden',
            boxShadow: '0 0 0 0.5px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10)',
            fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif"
          }}>
            <div style={{
              position: 'relative', height: 28,
              background: 'linear-gradient(to bottom, #E8E6E3, #DAD7D3)',
              borderBottom: '0.5px solid rgba(0,0,0,0.12)',
              display: 'flex', alignItems: 'center', padding: '0 8px'
            }}>
              <div style={{ display: 'flex', gap: 4 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF5F57', boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.15)' }} />
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FEBC2E', boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.15)' }} />
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#28C840', boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.15)' }} />
              </div>
              <span style={{
                position: 'absolute', left: 0, right: 0, textAlign: 'center',
                fontSize: 11, fontWeight: 500, color: '#4A4845', letterSpacing: '0.01em'
              }}>Vera Maxwell</span>
            </div>
            <div style={{ height: 180, background: '#FFFBEB', padding: 14 }}>
              <div style={{ fontSize: 9, color: '#999', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 6 }}>Architect, Nairobi</div>
              <div style={{ fontSize: 14, fontWeight: 800, lineHeight: 1.1, marginBottom: 8 }}>A Library Cooled by Its Stairwells</div>
              <div style={{ fontSize: 10, color: '#666', lineHeight: 1.5 }}>Builds public libraries that double as cooling shelters.</div>
            </div>
          </div>
        </Section>

        <Section title="Componentes · Eyebrow + Title (homepage masthead)">
          <div style={{ background: '#eddbbf', padding: 56 }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: '#1a1a1a', opacity: 0.55, marginBottom: 48, textAlign: 'center'
            }}>Vol. 01 – Spring/Summer 2026</div>
            <div style={{
              fontFamily: "'Erotique Alternate', 'DM Serif Display', serif",
              fontWeight: 700, fontSize: 'clamp(48px, 6vw, 96px)',
              lineHeight: 0.95, letterSpacing: '-0.02em', textAlign: 'center'
            }}>INDEX <em style={{ marginLeft: '-0.06em', marginRight: '0.1em' }}>of</em> TASTE</div>
          </div>
        </Section>

        <Section title="Componentes · Editorial section (compacto)">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 320,
            background: '#FFFBEB', fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif'
          }}>
            <div style={{ padding: '2vw' }}>
              <div style={{ width: '100%', height: '100%', background: '#E8E2D2' }} />
            </div>
            <div style={{ padding: '5vh 4.5vw 2vw 3vw', display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: '0.7rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#999', marginBottom: '2.2vh' }}>
                Architect, Nairobi
              </div>
              <div style={{ fontSize: 'clamp(1.6rem, 2.2vw, 2.6rem)', fontWeight: 800, letterSpacing: '0.02em', marginBottom: '3vh', lineHeight: 1.15 }}>
                A Library Cooled by Stairwells
              </div>
              <div style={{ fontSize: '0.82rem', lineHeight: 1.4, fontWeight: 700, color: '#444', marginBottom: '3vh' }}>
                Builds public libraries that double as cooling shelters.
              </div>
              <div style={{ fontSize: '0.78rem', lineHeight: 1.75, color: '#666', columnCount: 3, columnGap: '1.6vw', textAlign: 'justify' }}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus, sapien nec consequat pharetra, nisl arcu vestibulum massa. Integer at justo nec odio dignissim rutrum. Aenean id risus quis ipsum fringilla congue. In hac habitasse platea dictumst. Aliquam erat volutpat.
              </div>
            </div>
          </div>
        </Section>

        {/* ── BREAKPOINTS / MOTION ─────────────────────── */}
        <Section title="Breakpoints" subtitle="⚠️ Dois valores diferentes — inconsistência documentada.">
          <Grid cols={2}>
            <div style={{ padding: 24, background: '#FFFBEB', borderRadius: 4 }}>
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: '#1a1a1a' }}>--bp-mobile-styles · 900px</code>
              <div style={{ marginTop: 8, fontSize: 12, color: '#666' }}>Definido em <code>styles.css</code> (homepage / modal).</div>
            </div>
            <div style={{ padding: 24, background: '#FFFBEB', borderRadius: 4 }}>
              <code style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: '#1a1a1a' }}>--bp-mobile-profile · 860px</code>
              <div style={{ marginTop: 8, fontSize: 12, color: '#666' }}>Definido em <code>profile.css</code> (perfil editorial).</div>
            </div>
          </Grid>
        </Section>

        <Section title="Motion · Durações + Easings">
          <Grid cols={3}>
            {[
              ['--duration-fast', '0.18s'],
              ['--duration-snap', '0.2s'],
              ['--duration-base', '0.25s'],
              ['--duration-hover', '0.3s'],
              ['--duration-spring', '0.35s'],
              ['--duration-page', '0.4s'],
            ].map(([t, v]) => (
              <div key={t} style={{ padding: 18, background: '#FFFBEB', borderRadius: 4 }}>
                <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>{t}</code>
                <div style={{ marginTop: 6, fontFamily: 'JetBrains Mono', fontSize: 14, color: '#1a1a1a' }}>{v}</div>
              </div>
            ))}
          </Grid>
          <div style={{ marginTop: 16, padding: 18, background: '#FFFBEB', borderRadius: 4 }}>
            <code style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>--easing-spring</code>
            <div style={{ marginTop: 6, fontFamily: 'JetBrains Mono', fontSize: 13, color: '#1a1a1a' }}>cubic-bezier(0.2, 0.7, 0.2, 1)</div>
            <div style={{ fontSize: 12, color: '#666', marginTop: 6 }}>Único easing custom — usado nos gestos editoriais (figure-btn lift, modal rise).</div>
          </div>
        </Section>

        <footer style={{
          marginTop: 64, paddingTop: 24, borderTop: '1px solid rgba(26,26,26,0.12)',
          fontSize: 11, color: '#666', fontFamily: 'JetBrains Mono'
        }}>
          Auditoria gerada a partir de tokens.css · Para inconsistências e decisões pendentes, ver design-system.md.
        </footer>

      </div>
    </div>
  );
}

window.Styleguide = Styleguide;