/* global React, Logo, LogoWordmark, LogoTechnical, LogoStamp, Bottle, INGREDIENTS, JOURNAL, PRODUCTS */
// pages-rest.jsx — Ingredients, Journal, Identity

// ──────────────────────────────────────────────────────────────────────────
// INGREDIENTS INDEX
// ──────────────────────────────────────────────────────────────────────────

function IngredientsPage() {
  const [q, setQ] = React.useState('');
  const [filter, setFilter] = React.useState('all');

  const fns = ['all', ...Array.from(new Set(INGREDIENTS.map((i) => i.fn.split(' /')[0])))];

  const filtered = INGREDIENTS.filter((i) => {
    if (filter !== 'all' && !i.fn.startsWith(filter)) return false;
    if (!q) return true;
    return (i.name + i.abbr + i.fn + i.note).toLowerCase().includes(q.toLowerCase());
  });

  return (
    <div>
      <section className="section" style={{ paddingTop: 56 }}>
        <div className="shell">
          <div className="bar" style={{ marginBottom: 40 }}>
            <span className="strong">REFERENCE / ACTIVE INGREDIENTS / A–Z</span>
            <span>{INGREDIENTS.length} ENTRIES</span>
            <span>REV. 2026.01</span>
          </div>
          <div className="grid-12" style={{ alignItems: 'end', marginBottom: 48 }}>
            <div style={{ gridColumn: 'span 7' }}>
              <h1 className="display-sm">Ingredient Index</h1>
              <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 14, maxWidth: 540 }}>
                Every active and functional ingredient used in the Protocol catalogue. Each entry lists CAS function class, working concentration range, and notes on mechanism.
              </p>
            </div>
            <div style={{ gridColumn: 'span 5' }}>
              <div style={{ position: 'relative' }}>
                <input
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                  placeholder="Search by name, abbreviation, or function..."
                  style={{
                    width: '100%',
                    height: 48,
                    border: '1px solid var(--ink)',
                    background: 'transparent',
                    padding: '0 16px',
                    fontFamily: 'var(--mono)',
                    fontSize: 12,
                    letterSpacing: '0.04em',
                    color: 'var(--ink)',
                    outline: 'none',
                  }}
                />
                <span className="meta" style={{
                  position: 'absolute', right: 16, top: '50%',
                  transform: 'translateY(-50%)', color: 'var(--ink-3)'
                }}>
                  ⌕
                </span>
              </div>
            </div>
          </div>

          <div className="row gap-sm" style={{ paddingBottom: 24, borderBottom: '1px solid var(--ink)', flexWrap: 'wrap' }}>
            {fns.map((f) => (
              <button key={f} onClick={() => setFilter(f)}
                      className={'tag' + (filter === f ? ' active' : '')}>
                {f === 'all' ? 'All' : f}
              </button>
            ))}
          </div>

          <table className="spec" style={{ marginTop: 0 }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--ink)' }}>
                <th style={{ width: '6%' }}>N°</th>
                <th style={{ width: '32%' }}>INN / Common name</th>
                <th style={{ width: '8%' }}>Abbr</th>
                <th style={{ width: '18%' }}>Function</th>
                <th style={{ width: '10%' }}>Range</th>
                <th style={{ width: '26%' }}>Note</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((i, idx) => (
                <tr key={i.abbr} style={{ borderBottom: '1px dotted var(--hair-strong)' }}>
                  <td className="mono" style={{ color: 'var(--ink-3)' }}>{String(idx + 1).padStart(2, '0')}</td>
                  <td><span style={{ fontSize: 14 }}>{i.name}</span></td>
                  <td className="mono">{i.abbr}</td>
                  <td>{i.fn}</td>
                  <td className="mono">{i.range}</td>
                  <td style={{ color: 'var(--ink-2)' }}>{i.note}</td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan="6" style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>
                  No matches for &ldquo;{q}&rdquo;.
                </td></tr>
              )}
            </tbody>
          </table>

          <div className="bar" style={{ marginTop: 24, borderTop: '1px solid var(--ink)', borderBottom: 'none' }}>
            <span className="strong">END OF INDEX</span>
            <span className="dots" style={{ flex: 1, borderBottom: '1px dotted var(--hair-strong)', position: 'relative', top: -3 }} />
            <span>{filtered.length} OF {INGREDIENTS.length}</span>
          </div>
        </div>
      </section>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// JOURNAL
// ──────────────────────────────────────────────────────────────────────────

function JournalPage() {
  return (
    <div>
      <section className="section" style={{ paddingTop: 56 }}>
        <div className="shell">
          <div className="bar" style={{ marginBottom: 40 }}>
            <span className="strong">JOURNAL / PROTOCOLS / 2026</span>
            <span>{JOURNAL.length} ENTRIES</span>
            <span>WRITTEN IN-HOUSE</span>
          </div>
          <h1 className="display-sm">Journal</h1>
          <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 14, maxWidth: 540 }}>
            Operating notes from the laboratory. Step-by-step routines for non-trivial cases, formulation rationales, and errata where we got it wrong.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          {/* Featured */}
          <div className="grid-12" style={{ gap: 48, alignItems: 'stretch' }}>
            <div style={{ gridColumn: 'span 7', padding: 48, background: 'var(--ink)', color: 'var(--bg)' }}>
              <span className="meta" style={{ color: 'var(--accent)' }}>{JOURNAL[0].id} · FEATURED · {JOURNAL[0].read}</span>
              <h2 className="display-sm" style={{ color: 'var(--bg)', marginTop: 24, maxWidth: 480 }}>
                {JOURNAL[0].title}
              </h2>
              <p style={{ marginTop: 24, color: 'rgba(255,255,255,.65)', fontSize: 14, lineHeight: 1.6, maxWidth: 480 }}>
                {JOURNAL[0].excerpt}
              </p>
              <div style={{ marginTop: 64 }}>
                <span className="meta strong" style={{ color: 'var(--bg)' }}>READ FULL PROTOCOL →</span>
              </div>
            </div>
            <div style={{ gridColumn: 'span 5', display: 'flex', flexDirection: 'column' }}>
              {JOURNAL.slice(1, 3).map((j) => (
                <article key={j.id} className="article" style={{ flex: 1 }}>
                  <span className="num">{j.id} · {j.read}</span>
                  <h3 style={{ fontSize: 19 }}>{j.title}</h3>
                  <p style={{ fontSize: 13 }}>{j.excerpt.split('.')[0]}.</p>
                  <span className="more">Read →</span>
                </article>
              ))}
            </div>
          </div>

          <div className="grid-3" style={{ marginTop: 64 }}>
            {JOURNAL.slice(3).map((j) => (
              <article key={j.id} className="article">
                <span className="num">{j.id} · {j.read}</span>
                <h3>{j.title}</h3>
                <p>{j.excerpt}</p>
                <span className="more">Read →</span>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="section bg-soft">
        <div className="shell">
          <div className="section-header">
            <span className="num">CAT.</span>
            <span className="title">By Category</span>
            <span className="meta">FOUR INDICES</span>
          </div>
          <div className="grid-12">
            {[
              ['Mechanism', 'How a formulation works at the molecular level.', '14 entries'],
              ['Protocol', 'Step-by-step routines for specific conditions.', '21 entries'],
              ['Primer', 'Background reading on detergent chemistry.', '8 entries'],
              ['Errata', 'Where we got it wrong. Updated openly.', '3 entries'],
            ].map(([t, d, c], i) => (
              <div key={t} style={{ gridColumn: 'span 3', borderRight: i < 3 ? '1px solid var(--hair)' : 'none', paddingRight: 24 }}>
                <div className="meta">{c}</div>
                <h3 style={{ fontSize: 22, marginTop: 12 }}>{t}</h3>
                <p style={{ marginTop: 12, color: 'var(--ink-2)', fontSize: 13.5, lineHeight: 1.55 }}>{d}</p>
                <div className="more" style={{ marginTop: 24, fontFamily: 'var(--mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                  Browse →
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// IDENTITY — brand guidelines page
// ──────────────────────────────────────────────────────────────────────────

function IdentityPage({ logoVariant, accent }) {
  const palette = [
    { name: 'Ink', hex: '#0A0A0A', rgb: '10 10 10', usage: 'Primary text, structural rules, primary button' },
    { name: 'Paper', hex: '#FFFFFF', rgb: '255 255 255', usage: 'Default background, label substrate' },
    { name: 'Mineral', hex: '#F7F6F3', rgb: '247 246 243', usage: 'Surface tint, secondary background' },
    { name: 'Steel', hex: '#5E5E5E', rgb: '94 94 94', usage: 'Secondary type, metadata' },
    { name: 'Hairline', hex: '#E5E4E1', rgb: '229 228 225', usage: 'Rules, dividers, table grids' },
    { name: 'Reagent', hex: accent, rgb: accent.replace('#', '').match(/.{2}/g).map((h) => parseInt(h, 16)).join(' '), usage: 'Categorisation accent. Used sparingly.' },
  ];

  return (
    <div>
      <section className="section" style={{ paddingTop: 56 }}>
        <div className="shell">
          <div className="bar" style={{ marginBottom: 40 }}>
            <span className="strong">BRAND GUIDELINES / VOL. I / 2026</span>
            <span>INTERNAL + AGENCY REFERENCE</span>
            <span>REV. 01</span>
          </div>
          <h1 className="display">Identity.</h1>
          <p style={{ marginTop: 24, color: 'var(--ink-2)', fontSize: 16, maxWidth: 640, lineHeight: 1.55 }}>
            The full set of identity rules governing the Protocol system. Logo and clear space. Typographic hierarchy. Colour and its restraint. Grid and label proportions. Tone of voice.
          </p>
        </div>
      </section>

      {/* LOGO */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">01</span>
            <span className="title">Logo System</span>
            <span className="meta">THREE LOCKUPS</span>
          </div>

          <div className="grid-3">
            {[
              { variant: 'wordmark', name: 'Primary Wordmark', use: 'Default usage. All digital surfaces, headers, packaging primary panel.' },
              { variant: 'technical', name: 'Technical Lockup', use: 'Documentation, SDS sheets, batch certificates. Pairs wordmark with version metadata.' },
              { variant: 'stamp', name: 'Identification Stamp', use: 'Small-format usage: bottle caps, refill spouts, social avatars, favicon.' },
            ].map((l) => (
              <div key={l.variant} style={{ border: '1px solid var(--hair)', display: 'flex', flexDirection: 'column' }}>
                <div style={{ padding: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 180, borderBottom: '1px solid var(--hair)' }}>
                  <Logo variant={l.variant} size={26} />
                </div>
                <div style={{ padding: 16 }}>
                  <div className="meta">{l.variant.toUpperCase()}</div>
                  <div style={{ fontSize: 14, marginTop: 6 }}>{l.name}</div>
                  <p style={{ marginTop: 10, fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{l.use}</p>
                </div>
              </div>
            ))}
          </div>

          {/* clear space */}
          <div className="grid-12" style={{ marginTop: 64 }}>
            <div style={{ gridColumn: 'span 6' }}>
              <div className="meta" style={{ marginBottom: 12 }}>CLEAR SPACE</div>
              <h3 style={{ fontSize: 24, letterSpacing: '-0.02em' }}>Minimum clear space equals the cap-height of the wordmark on all sides.</h3>
              <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 13.5, lineHeight: 1.6, maxWidth: 460 }}>
                No element, image, or rule shall intrude within this margin. Where the layout requires the wordmark to abut a rule, the rule must run through, not stop short.
              </p>
            </div>
            <div style={{ gridColumn: 'span 6', position: 'relative' }}>
              <div style={{
                padding: '60px 80px',
                border: '1px dashed var(--hair-strong)',
                position: 'relative',
              }}>
                <div style={{
                  position: 'absolute', inset: 30,
                  border: '1px solid var(--hair)',
                  pointerEvents: 'none'
                }} />
                <div style={{
                  position: 'absolute', top: 4, left: 30,
                  fontFamily: 'var(--mono)', fontSize: 10,
                  color: 'var(--ink-3)', letterSpacing: '0.05em'
                }}>
                  X
                </div>
                <Logo variant={logoVariant} size={40} />
              </div>
            </div>
          </div>

          {/* minimum size */}
          <div className="grid-3" style={{ marginTop: 64 }}>
            <div style={{ border: '1px solid var(--hair)', padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 200 }}>
              <Logo variant={logoVariant} size={10} />
              <div style={{ marginTop: 32 }}>
                <div className="meta">MIN. DIGITAL</div>
                <div style={{ fontSize: 13, marginTop: 4 }}>10 px / web favicon</div>
              </div>
            </div>
            <div style={{ border: '1px solid var(--hair)', padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 200 }}>
              <Logo variant={logoVariant} size={16} />
              <div style={{ marginTop: 32 }}>
                <div className="meta">MIN. PACKAGING</div>
                <div style={{ fontSize: 13, marginTop: 4 }}>4 mm cap-height / refill spout</div>
              </div>
            </div>
            <div style={{ border: '1px solid var(--hair)', padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 200 }}>
              <Logo variant={logoVariant} size={24} />
              <div style={{ marginTop: 32 }}>
                <div className="meta">DEFAULT</div>
                <div style={{ fontSize: 13, marginTop: 4 }}>17 px digital / 8 mm cap-height print</div>
              </div>
            </div>
          </div>

          {/* misuse */}
          <div style={{ marginTop: 64 }}>
            <div className="meta" style={{ marginBottom: 16 }}>NOT PERMITTED</div>
            <div className="grid-3">
              {[
                ['Outline only', 'No outline-only treatment'],
                ['Stretch', 'No vertical or horizontal scaling'],
                ['Tint', 'No tints below 100% solid ink'],
              ].map(([t, d]) => (
                <div key={t} style={{ border: '1px solid var(--hair)', padding: 32, position: 'relative' }}>
                  <div style={{ filter: t === 'Outline only' ? 'none' : t === 'Stretch' ? 'none' : 'opacity(.3)', position: 'relative' }}>
                    {t === 'Outline only' && (
                      <span style={{ fontWeight: 600, fontSize: 22, letterSpacing: '-0.02em', WebkitTextStroke: '0.5px var(--ink)', color: 'transparent' }}>
                        Protocol
                      </span>
                    )}
                    {t === 'Stretch' && (
                      <span style={{ fontWeight: 600, fontSize: 22, letterSpacing: '-0.02em', display: 'inline-block', transform: 'scaleX(1.6)', transformOrigin: 'left' }}>
                        Protocol
                      </span>
                    )}
                    {t === 'Tint' && (
                      <Logo variant="wordmark" size={22} />
                    )}
                  </div>
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
                    <svg width="60" height="60" viewBox="0 0 60 60">
                      <circle cx="30" cy="30" r="28" fill="none" stroke="var(--accent)" strokeWidth="1.5" />
                      <line x1="10" y1="50" x2="50" y2="10" stroke="var(--accent)" strokeWidth="1.5" />
                    </svg>
                  </div>
                  <div style={{ marginTop: 24 }}>
                    <div className="meta accent" style={{ color: 'var(--accent)' }}>{t}</div>
                    <div style={{ fontSize: 13, marginTop: 4 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TYPOGRAPHY */}
      <section className="section bg-soft">
        <div className="shell">
          <div className="section-header">
            <span className="num">02</span>
            <span className="title">Typography</span>
            <span className="meta">SANS + MONOSPACE</span>
          </div>

          <div className="grid-12" style={{ gap: 64 }}>
            <div style={{ gridColumn: 'span 6' }}>
              <div className="meta">PRIMARY · SANS</div>
              <div style={{ fontSize: 96, fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 16 }}>
                Geist
              </div>
              <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 11, marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                400 · 500 · 600 / GEOMETRIC NEO-GROTESK
              </div>
              <div style={{ marginTop: 32 }}>
                <div style={{ fontSize: 13, lineHeight: 1.5 }}>
                  ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
                  abcdefghijklmnopqrstuvwxyz<br />
                  0123456789 · &amp;%/§∆Ω
                </div>
              </div>
            </div>
            <div style={{ gridColumn: 'span 6' }}>
              <div className="meta">SECONDARY · MONOSPACE</div>
              <div className="mono" style={{ fontSize: 80, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1, marginTop: 16 }}>
                Geist Mono
              </div>
              <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 11, marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                400 · 500 / DATA · BATCH · METADATA
              </div>
              <div style={{ marginTop: 32 }}>
                <div className="mono" style={{ fontSize: 13, lineHeight: 1.5 }}>
                  ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
                  abcdefghijklmnopqrstuvwxyz<br />
                  0123456789 · &amp;%/§∆Ω
                </div>
              </div>
            </div>
          </div>

          {/* scale */}
          <div style={{ marginTop: 80 }}>
            <div className="bar">
              <span className="strong">TYPOGRAPHIC SCALE</span>
              <span className="dots" style={{ flex: 1, borderBottom: '1px dotted var(--hair-strong)', position: 'relative', top: -3 }} />
              <span>RATIO 1.250</span>
            </div>
            <table className="spec" style={{ marginTop: 0 }}>
              <tbody>
                {[
                  ['Display', '96 / 88', 'Hero statements', '500'],
                  ['Display Sm.', '52 / 48', 'Section headings', '400'],
                  ['Title', '24 / 28', 'Card titles', '500'],
                  ['Body Lg.', '17 / 26', 'Lead paragraphs', '400'],
                  ['Body', '15 / 22', 'Default running text', '400'],
                  ['Small', '13 / 20', 'Captions, descriptions', '400'],
                  ['Mono Lg.', '15 / 22', 'Inline data', '500'],
                  ['Mono Sm. / Meta', '11 / 16 · UC', 'Metadata, navigation, tags', '500'],
                ].map(([n, s, u, w]) => (
                  <tr key={n}>
                    <th style={{ width: '24%' }}>{n}</th>
                    <td className="mono" style={{ width: '18%' }}>{s}</td>
                    <td style={{ width: '40%', color: 'var(--ink-2)' }}>{u}</td>
                    <td className="mono" style={{ width: '18%' }}>{w}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* COLOR */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">03</span>
            <span className="title">Colour</span>
            <span className="meta">SIX-VALUE SYSTEM</span>
          </div>

          <p style={{ marginBottom: 32, color: 'var(--ink-2)', fontSize: 14, maxWidth: 640, lineHeight: 1.6 }}>
            Five neutrals plus a single reagent accent. No tints, no gradients, no decorative use of colour. The accent serves categorisation only.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
            {palette.map((c, i) => (
              <div key={c.name} style={{
                padding: 0,
                borderRight: i < palette.length - 1 ? '1px solid var(--hair)' : 'none',
              }}>
                <div style={{
                  height: 220,
                  background: c.hex,
                  borderBottom: '1px solid var(--hair)',
                  position: 'relative',
                }}>
                  {c.hex === '#FFFFFF' && (
                    <div style={{ position: 'absolute', inset: 1, border: '1px dashed var(--hair-strong)' }} />
                  )}
                </div>
                <div style={{ padding: 16 }}>
                  <div style={{ fontSize: 15 }}>{c.name}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, letterSpacing: '0.04em' }}>{c.hex}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>R{c.rgb.split(' ')[0]} G{c.rgb.split(' ')[1]} B{c.rgb.split(' ')[2]}</div>
                  <p style={{ marginTop: 12, fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.5, minHeight: 60 }}>{c.usage}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* GRID */}
      <section className="section bg-soft">
        <div className="shell">
          <div className="section-header">
            <span className="num">04</span>
            <span className="title">Grid &amp; Layout</span>
            <span className="meta">DIGITAL · 12 COL / LABEL · 6 COL</span>
          </div>

          <div className="grid-2" style={{ gap: 48 }}>
            <div>
              <div className="meta" style={{ marginBottom: 16 }}>DIGITAL · 12 COLUMN</div>
              <div style={{ background: 'var(--bg)', padding: 24, border: '1px solid var(--hair)', position: 'relative', height: 320 }}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(12, 1fr)',
                  gap: 16,
                  height: '100%'
                }}>
                  {Array.from({ length: 12 }).map((_, i) => (
                    <div key={i} style={{ background: 'rgba(196,58,31,.08)', borderLeft: '1px solid rgba(196,58,31,.35)', borderRight: '1px solid rgba(196,58,31,.35)' }} />
                  ))}
                </div>
                <div style={{ position: 'absolute', top: 12, left: 24, right: 24, display: 'flex', justifyContent: 'space-between' }}>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.04em' }}>01</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.04em' }}>12</span>
                </div>
              </div>
              <p style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>
                Twelve-column system with 24 px gutters at 1440 px. Reduce to six-column at 900 px and below. Maximum content width 1440 px.
              </p>
            </div>
            <div>
              <div className="meta" style={{ marginBottom: 16 }}>LABEL · 6 COLUMN</div>
              <div style={{ background: 'var(--bg)', padding: 24, border: '1px solid var(--hair)', position: 'relative', height: 320 }}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(6, 1fr)',
                  gap: 4,
                  height: '100%'
                }}>
                  {Array.from({ length: 6 }).map((_, i) => (
                    <div key={i} style={{ background: 'rgba(196,58,31,.08)', borderLeft: '1px solid rgba(196,58,31,.35)', borderRight: '1px solid rgba(196,58,31,.35)' }} />
                  ))}
                </div>
                <div style={{ position: 'absolute', top: 12, left: 24, right: 24, display: 'flex', justifyContent: 'space-between' }}>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.04em' }}>01</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.04em' }}>06</span>
                </div>
              </div>
              <p style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>
                Six-column system at 1.5 mm gutters. Information hierarchy is fixed: formula number, name, actives, specification, batch, footer marks.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* TONE */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">05</span>
            <span className="title">Tone of Voice</span>
            <span className="meta">PRINCIPLES OF VOICE</span>
          </div>
          <div className="grid-12" style={{ gap: 48 }}>
            <div style={{ gridColumn: 'span 5' }}>
              <h3 style={{ fontSize: 28, letterSpacing: '-0.02em', lineHeight: 1.2, maxWidth: 400 }}>
                We write in the voice of a laboratory technician, not a marketing department.
              </h3>
              <p style={{ marginTop: 24, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6, maxWidth: 420 }}>
                Candid. Clinical. Educational. Precise. We do not use hyperbole, sensory adjectives, or the language of feeling.
              </p>
            </div>
            <div style={{ gridColumn: 'span 7' }}>
              {[
                ['Yes', 'A multi-enzyme system. Protease 5% cleaves peptide bonds. Lipase 3% hydrolyses triglycerides.'],
                ['No', '✨ Powered by nature\'s scientific cleaning magic! ✨'],
                ['Yes', 'Dosage: 15 ml per 4.5 kg load. Reduce to 12 ml in soft water (<150 mg/L CaCO₃).'],
                ['No', 'Just a splash for an amazing fresh clean every time!'],
                ['Yes', 'Avoid use on wool and silk. The protease will damage keratin and fibroin fibres.'],
                ['No', 'For all your fabrics — gentle on clothes, tough on stains!'],
              ].map(([label, t], i) => (
                <div key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '60px 1fr',
                  gap: 24,
                  padding: '20px 0',
                  borderTop: '1px dotted var(--hair-strong)',
                  alignItems: 'baseline'
                }}>
                  <div className={'meta ' + (label === 'Yes' ? '' : 'accent')}
                       style={{ color: label === 'Yes' ? 'var(--ink)' : 'var(--accent)' }}>
                    {label === 'Yes' ? '✓ DO' : '× DON\'T'}
                  </div>
                  <div style={{
                    fontSize: 15,
                    color: label === 'Yes' ? 'var(--ink)' : 'var(--ink-3)',
                    textDecoration: label === 'Yes' ? 'none' : 'line-through',
                    textDecorationColor: 'rgba(0,0,0,.2)',
                    fontStyle: label === 'Yes' ? 'normal' : 'italic'
                  }}>
                    {t}
                  </div>
                </div>
              ))}
              <hr className="hr-strong" />
            </div>
          </div>
        </div>
      </section>

      {/* LABEL ANATOMY */}
      <section className="section bg-soft">
        <div className="shell">
          <div className="section-header">
            <span className="num">06</span>
            <span className="title">Label Anatomy</span>
            <span className="meta">VESSEL FRONT-OF-PACK</span>
          </div>

          <div className="grid-12" style={{ gap: 64, alignItems: 'center' }}>
            <div style={{ gridColumn: 'span 5', display: 'flex', justifyContent: 'center' }}>
              <Bottle product={PRODUCTS[0]} h={520} />
            </div>
            <div style={{ gridColumn: 'span 7' }}>
              {[
                ['A', 'Brand · origin', 'Always paired. 6.5 pt mono, full caps.'],
                ['B', 'Batch identifier', 'Right-aligned. Identifies factory run.'],
                ['C', 'Formula number', '34 pt. Largest element on the label.'],
                ['D', 'Function descriptor', 'Two lines maximum. Plain language.'],
                ['E', 'Active ingredients + %', 'Listed in order of biological function.'],
                ['F', 'Specification block', 'VOL / pH / DOSE / TEMP. Right-aligned numerics.'],
                ['G', 'Repeat formula stamp', 'Visible from distance. Confirms identity.'],
                ['H', 'Footer marks', 'SDS scan, refill mark, sustainability claim.'],
              ].map(([k, n, d]) => (
                <div key={k} className="grid-12" style={{
                  padding: '14px 0',
                  borderTop: '1px dotted var(--hair-strong)',
                  alignItems: 'baseline'
                }}>
                  <div style={{ gridColumn: 'span 1' }} className="mono accent" >{k}</div>
                  <div style={{ gridColumn: 'span 4', fontSize: 14 }}>{n}</div>
                  <div style={{ gridColumn: 'span 7', fontSize: 13, color: 'var(--ink-2)' }}>{d}</div>
                </div>
              ))}
              <hr className="hr-strong" />
            </div>
          </div>
        </div>
      </section>

      {/* DOWNLOAD */}
      <section className="section">
        <div className="shell">
          <div style={{ background: 'var(--ink)', color: 'var(--bg)', padding: 64 }}>
            <div className="grid-12" style={{ alignItems: 'center' }}>
              <div style={{ gridColumn: 'span 7' }}>
                <div className="meta" style={{ color: 'var(--accent)' }}>BRAND ASSETS / VOL. I / PDF · 8 MB</div>
                <h2 className="display-sm" style={{ color: 'var(--bg)', marginTop: 24, maxWidth: 540 }}>
                  Complete identity package.
                </h2>
                <p style={{ marginTop: 16, color: 'rgba(255,255,255,.6)', fontSize: 14, lineHeight: 1.6, maxWidth: 540 }}>
                  Logo assets in SVG and PDF. Type files. Print-ready label templates. Tone of voice document. For agency and internal use.
                </p>
              </div>
              <div style={{ gridColumn: 'span 5', display: 'flex', justifyContent: 'flex-end' }}>
                <button className="btn" style={{ background: 'var(--bg)', color: 'var(--ink)', borderColor: 'var(--bg)' }}>
                  Download package · 8 MB
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { IngredientsPage, JournalPage, IdentityPage });