// Loaf'd Brand Pack — Sections 1–7 (At a glance, Logo, Colour, Type, Photo, Voice, Sub-brands)

// ——— SECTION 1: AT A GLANCE ———
const AtAGlance = () => (
  <section className="section dark" id="at-a-glance">
    <div className="section-head" style={{ marginBottom: 64 }}>
      <div className="section-num"><span>Section</span><strong style={{ color: 'var(--cream)' }}>01</strong></div>
      <div>
        <div className="mono" style={{ fontSize: 13, letterSpacing: '0.18em', opacity: 0.6, marginBottom: 12 }}>AT A GLANCE · v1.0 · MAY 2026</div>
        <h2 className="section-title">A one-page<br/>brand cheatsheet.</h2>
      </div>
    </div>

    <div className="grid-3" style={{ marginBottom: 40 }}>
      <div className="card dark" style={{ padding: 32 }}>
        <div className="card-label">Promise</div>
        <div className="display" style={{ fontSize: 26, lineHeight: 1.05, marginBottom: 16 }}>YOUR ULTIMATE<br/>BREAKFAST, BRUNCH<br/>& BURGER DESTINATION.</div>
        <p style={{ fontSize: 14, opacity: 0.7, lineHeight: 1.5, margin: 0 }}>One promise across three towns. Whether you walk into Swords, Ashbourne or Drogheda — same cheese blend, same energy, same Loaf'd.</p>
      </div>

      <div className="card dark" style={{ padding: 32 }}>
        <div className="card-label">The hero</div>
        <CheeseTrio size={80} style={{ marginBottom: 16 }} />
        <div className="display" style={{ fontSize: 18, marginBottom: 8 }}>THE LOAF'D CHEESE BLEND</div>
        <p style={{ fontSize: 14, opacity: 0.7, lineHeight: 1.5, margin: 0 }}>Cheddar. Mozzarella. Gouda. The icon. Lead with it on toasties, melts and brunch — never substitute.</p>
      </div>

      <div className="card dark" style={{ padding: 32 }}>
        <div className="card-label">Locations</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
          <LocationChip town="Swords · Co. Dublin" solid />
          <LocationChip town="Ashbourne · Co. Meath" solid />
          <LocationChip town="Drogheda · Co. Louth" solid />
        </div>
        <p style={{ fontSize: 13, opacity: 0.7, lineHeight: 1.5, margin: 0 }}>Plus <strong style={{ color: 'var(--cream)' }}>The Breakroom</strong> in Smithfield (sister venue) and <strong style={{ color: 'var(--cream)' }}>Smash'd</strong> burgers Thursday – Sunday from 4.30pm.</p>
      </div>
    </div>

    <div className="grid-4">
      <div className="card dark" style={{ padding: 24 }}>
        <div className="card-label">Voice</div>
        <div style={{ fontSize: 16, lineHeight: 1.5 }}>Friendly, not formal. Plain Irish English. Generous and confident.</div>
      </div>
      <div className="card dark" style={{ padding: 24 }}>
        <div className="card-label">Type</div>
        <div className="display" style={{ fontSize: 22, lineHeight: 1 }}>BOWLBY ONE SC</div>
        <div style={{ marginTop: 6, fontSize: 14, opacity: 0.7 }}>+ Inter for body</div>
      </div>
      <div className="card dark" style={{ padding: 24 }}>
        <div className="card-label">Core colour</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
          <div style={{ flex: 1, height: 50, background: 'var(--raspberry)', borderRadius: 6 }} />
          <div style={{ flex: 1, height: 50, background: 'var(--black)', borderRadius: 6, border: '1px solid rgba(255,255,255,0.1)' }} />
          <div style={{ flex: 1, height: 50, background: 'var(--cream)', borderRadius: 6 }} />
        </div>
        <div className="mono" style={{ fontSize: 11, opacity: 0.6, marginTop: 8 }}>RASPBERRY · BLACK · CREAM</div>
      </div>
      <div className="card dark" style={{ padding: 24 }}>
        <div className="card-label">Channels</div>
        <div style={{ fontSize: 14, lineHeight: 1.6 }}>
          <div>loafd.ie</div>
          <div>@loafdireland · 11K</div>
          <div>hello@loafd.ie</div>
        </div>
      </div>
    </div>
  </section>
);

// ——— SECTION 2: LOGO SYSTEM ———
const LogoSystem = () => (
  <section className="section" id="logo">
    <SectionHead
      num="02"
      title="Logo system"
      kicker="The wordmark is a chunky condensed display with an offset shadow. The apostrophe between F and D is non-negotiable. Always reproduce on the official background — raspberry, black, or cream — never on photography unless shielded by a card."
    />

    {/* Primary lockup row */}
    <div className="grid-3" style={{ marginBottom: 56 }}>
      <div className="card" style={{ background: 'var(--black)', padding: 56, textAlign: 'center', minHeight: 280, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Wordmark size={92} />
      </div>
      <div className="card" style={{ background: 'var(--raspberry)', padding: 56, textAlign: 'center', minHeight: 280, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Wordmark size={92} variant="reverse" />
      </div>
      <div className="card" style={{ background: 'var(--cream)', padding: 56, textAlign: 'center', minHeight: 280, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Wordmark size={92} />
      </div>
    </div>

    <div className="grid-3" style={{ marginBottom: 56 }}>
      {[
        ['Primary', 'Raspberry on black. The hero lockup. Use for Instagram avatars, signage, hero panels.'],
        ['Reverse', 'Cream on raspberry. Use when raspberry is the field — flyers, packaging.'],
        ['On cream', 'Raspberry on cream. The warm/daytime mode for menus and print.'],
      ].map(([t, d]) => (
        <div key={t}>
          <div className="display" style={{ fontSize: 16, marginBottom: 6 }}>{t}</div>
          <div style={{ fontSize: 14, opacity: 0.75, lineHeight: 1.5 }}>{d}</div>
        </div>
      ))}
    </div>

    {/* Anatomy */}
    <div className="card cream" style={{ padding: 48, marginBottom: 40 }}>
      <div className="card-label">Anatomy</div>
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '60px 20px', background: 'var(--black)', borderRadius: 10 }}>
        <Wordmark size={140} />
        {/* anatomy callouts */}
        <div style={{ position: 'absolute', top: 30, left: '14%', color: 'var(--ochre)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          ↳ heavy condensed caps
        </div>
        <div style={{ position: 'absolute', bottom: 28, left: '8%', color: 'var(--ochre)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          ↳ raspberry fill, black 3-px offset shadow
        </div>
        <div style={{ position: 'absolute', top: 30, right: '8%', color: 'var(--ochre)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          apostrophe always between F&D ↲
        </div>
      </div>
    </div>

    {/* Clear space + min size */}
    <div className="grid-2" style={{ marginBottom: 40 }}>
      <div className="card">
        <div className="card-label">Clear space</div>
        <div style={{ background: 'var(--cream)', padding: 36, borderRadius: 10, position: 'relative' }}>
          <div style={{ position: 'relative', padding: '24px 36px', border: '1px dashed rgba(165,55,104,0.5)' }}>
            <div style={{ position: 'relative', display: 'inline-block' }}>
              <Wordmark size={60} />
            </div>
            <div className="mono" style={{ position: 'absolute', top: -10, left: 6, background: 'var(--cream)', padding: '0 6px', fontSize: 10, color: 'var(--raspberry)' }}>X</div>
            <div className="mono" style={{ position: 'absolute', bottom: -10, left: 6, background: 'var(--cream)', padding: '0 6px', fontSize: 10, color: 'var(--raspberry)' }}>X</div>
          </div>
        </div>
        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 12, lineHeight: 1.5 }}>X = the height of the "L". Maintain X of clear space on every side. Nothing — type, photo, edge — encroaches.</p>
      </div>

      <div className="card">
        <div className="card-label">Minimum size</div>
        <div style={{ background: 'var(--cream)', padding: 36, borderRadius: 10, display: 'flex', gap: 32, alignItems: 'flex-end', justifyContent: 'center' }}>
          <div style={{ textAlign: 'center' }}>
            <Wordmark size={28} />
            <div className="mono" style={{ fontSize: 10, opacity: 0.6, marginTop: 12 }}>DIGITAL · 24px height</div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <Wordmark size={48} />
            <div className="mono" style={{ fontSize: 10, opacity: 0.6, marginTop: 12 }}>PRINT · 12mm height</div>
          </div>
        </div>
        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 12, lineHeight: 1.5 }}>Below these sizes, swap to the simplified "solid" lockup (no shadow) for legibility.</p>
      </div>
    </div>

    {/* Variants */}
    <div className="grid-4">
      <div className="card" style={{ background: 'var(--black)', padding: 24, textAlign: 'center', minHeight: 140, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <Wordmark size={36} />
        <div className="mono" style={{ fontSize: 10, color: 'var(--cream)', opacity: 0.6, marginTop: 12 }}>FULL · DEFAULT</div>
      </div>
      <div className="card" style={{ background: 'var(--cream)', padding: 24, textAlign: 'center', minHeight: 140, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <Wordmark size={36} variant="solid" />
        <div className="mono" style={{ fontSize: 10, opacity: 0.6, marginTop: 12 }}>SOLID · SMALL SIZES</div>
      </div>
      <div className="card" style={{ background: 'var(--cream)', padding: 24, textAlign: 'center', minHeight: 140, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <Wordmark size={36} variant="outline" />
        <div className="mono" style={{ fontSize: 10, opacity: 0.6, marginTop: 12 }}>OUTLINE · OVERLAY</div>
      </div>
      <div className="card" style={{ background: 'var(--raspberry)', padding: 24, textAlign: 'center', minHeight: 140, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <Wordmark size={36} variant="reverse" />
        <div className="mono" style={{ fontSize: 10, color: 'var(--cream)', opacity: 0.6, marginTop: 12 }}>REVERSE · ON RASPBERRY</div>
      </div>
    </div>
  </section>
);

// ——— SECTION 3: COLOUR ———
const ColourSection = ({ raspberryHex }) => (
  <section className="section cream" id="colour">
    <SectionHead
      num="03"
      title="Colour"
      kicker="Raspberry leads. Black grounds. Cream warms. The muted-retro accents (mocha, ochre, dusty rose) are for support — never let them upstage raspberry."
    />

    <div className="grid-3" style={{ marginBottom: 40 }}>
      <Swatch name="Loaf'd Raspberry" hex={raspberryHex} role="Primary · Brand hero" big dark />
      <Swatch name="Loaf'd Black" hex="#0D0D0D" role="Background · Type" big dark />
      <Swatch name="Loaf'd Cream" hex="#F4EBDD" role="Warm neutral · Print" big />
    </div>

    <div className="grid-3" style={{ marginBottom: 56 }}>
      <Swatch name="Mocha" hex="#6B4C3B" role="Accent · Kraft surfaces" dark />
      <Swatch name="Ochre" hex="#C99A4B" role="Accent · Stickers, deals" />
      <Swatch name="Dusty Rose" hex="#D4A5A8" role="Accent · Pancakes, sweet" />
    </div>

    <div className="card" style={{ padding: 32, marginBottom: 32 }}>
      <div className="card-label">Tint scales</div>
      <div className="grid-3">
        <TintScale baseHex={raspberryHex} name="Raspberry tints" />
        <TintScale baseHex="#6B4C3B" name="Mocha tints" />
        <TintScale baseHex="#C99A4B" name="Ochre tints" />
      </div>
    </div>

    <div className="grid-2">
      <div className="card">
        <div className="card-label">Pairing rules</div>
        <ul style={{ paddingLeft: 18, lineHeight: 1.7, fontSize: 14, margin: 0 }}>
          <li>Raspberry + black is the hero pair. Use for 70% of touchpoints.</li>
          <li>Raspberry + cream is the warm/daytime pair. Use for menus, print.</li>
          <li>Mocha and ochre pair with cream — never with raspberry as the dominant pair.</li>
          <li>Rose is a sweet-category cue. Use sparingly on pancakes, açaí, French toast.</li>
          <li>Never combine all three accents in one composition.</li>
        </ul>
      </div>
      <div className="card">
        <div className="card-label">Accessibility</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, background: 'var(--raspberry)', color: 'var(--cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 6, fontFamily: 'var(--mono)', fontSize: 11 }}>AA</div>
            Raspberry on cream — text 16px+ ✓
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, background: 'var(--black)', color: 'var(--cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 6, fontFamily: 'var(--mono)', fontSize: 11 }}>AAA</div>
            Cream on black — all sizes ✓
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, background: 'var(--ochre)', color: 'var(--black)', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 6, fontFamily: 'var(--mono)', fontSize: 11 }}>AA</div>
            Black on ochre — large only ✓
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, background: 'var(--rose)', color: '#7A2549', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 6, fontFamily: 'var(--mono)', fontSize: 11 }}>—</div>
            Rose on rose-dark — display only ⚠
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ——— SECTION 4: TYPOGRAPHY ———
const TypographySection = ({ displayFont }) => (
  <section className="section" id="typography">
    <SectionHead
      num="04"
      title="Typography"
      kicker="A two-font system. The display face does the heavy lifting on category headers, prices, and posters. The body face stays out of the way for descriptions, allergens, addresses."
    />

    <div className="grid-2" style={{ marginBottom: 56 }}>
      <div className="card" style={{ padding: 40 }}>
        <div className="card-label">Display · Headlines & prices</div>
        <div style={{ fontFamily: displayFont, fontSize: 88, lineHeight: 0.95, textTransform: 'uppercase', color: 'var(--raspberry)', letterSpacing: '-0.01em' }}>Aa</div>
        <div className="display" style={{ fontSize: 22, marginTop: 16 }}>{displayFont.split(',')[0].replace(/'/g, '')}</div>
        <div className="mono" style={{ fontSize: 12, opacity: 0.6, marginTop: 4 }}>Google Fonts · 1 weight (regular)</div>
        <div style={{ marginTop: 24, fontSize: 14, lineHeight: 1.5, opacity: 0.8 }}>
          Use for: H1–H3, prices, sticker overprints, A-frame chalkboards, IG hero text. Tracking: -1% on H1, 0% smaller. Never italicize. Never tighten line-height below 0.95.
        </div>
      </div>

      <div className="card" style={{ padding: 40 }}>
        <div className="card-label">Body · Inter</div>
        <div style={{ fontFamily: 'Inter', fontSize: 88, fontWeight: 600, lineHeight: 0.95, color: 'var(--black)', letterSpacing: '-0.02em' }}>Aa</div>
        <div className="display" style={{ fontSize: 22, marginTop: 16 }}>INTER</div>
        <div className="mono" style={{ fontSize: 12, opacity: 0.6, marginTop: 4 }}>Google Fonts · 300 / 400 / 500 / 600 / 700</div>
        <div style={{ marginTop: 24, fontSize: 14, lineHeight: 1.5, opacity: 0.8 }}>
          Use for: body, dish descriptions, allergens, addresses, opening hours, web UI. Default weight 400. Allergen smallprint at 11px / 500. Never bold the entire description.
        </div>
      </div>
    </div>

    {/* Type scale */}
    <div className="card" style={{ padding: 40, marginBottom: 32 }}>
      <div className="card-label">Type scale · 4pt grid</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {[
          { tag: 'H1 · Hero', sample: 'GET HYPED.', size: 88, family: displayFont, lh: 0.95, weight: 400, tracking: '-0.01em', up: true, meta: '88 / 84 · -1% tracking · for posters & A-frames' },
          { tag: 'H2 · Section', sample: 'SIGNATURE TOASTIES', size: 56, family: displayFont, lh: 1, weight: 400, tracking: '0', up: true, meta: '56 / 56 · for menu category headers' },
          { tag: 'H3 · Dish', sample: 'Cajun Chicken Melt', size: 28, family: 'Inter', lh: 1.2, weight: 700, tracking: '-0.01em', up: false, meta: '28 / 34 · semibold · for menu items' },
          { tag: 'H4 · Price', sample: '€9.95', size: 32, family: displayFont, lh: 1, weight: 400, tracking: '0', up: false, meta: '32 / 32 · always raspberry' },
          { tag: 'Body', sample: 'Chicken breast, Cajun sauce, house mayo, jalapeños and the Loaf\'d cheese blend.', size: 16, family: 'Inter', lh: 1.5, weight: 400, tracking: '0', up: false, meta: '16 / 24 · regular · for dish descriptions' },
          { tag: 'Caption', sample: 'Mon–Fri, 8am–4pm  ·  Sat–Sun, 9am–5pm', size: 13, family: 'Inter', lh: 1.5, weight: 500, tracking: '0', up: false, meta: '13 / 20 · medium · for hours, footers' },
          { tag: 'Allergen', sample: '1(a), 3, 6, 7, 11', size: 11, family: 'JetBrains Mono', lh: 1.5, weight: 400, tracking: '0.04em', up: false, meta: '11 / 16 · monospace · for EU 14-allergen codes' },
        ].map(s => (
          <div key={s.tag} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 280px', gap: 24, alignItems: 'baseline', paddingBottom: 16, borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.6 }}>{s.tag}</div>
            <div style={{ fontFamily: s.family, fontSize: s.size, lineHeight: s.lh, fontWeight: s.weight, letterSpacing: s.tracking, textTransform: s.up ? 'uppercase' : 'none', color: s.tag.startsWith('H4') ? 'var(--raspberry)' : 'var(--black)' }}>
              {s.sample}
            </div>
            <div className="mono" style={{ fontSize: 11, opacity: 0.55 }}>{s.meta}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ——— SECTION 5: PHOTOGRAPHY & ART DIRECTION ———
const PhotographySection = () => (
  <section className="section" id="photography">
    <SectionHead
      num="05"
      title="Photography & art direction"
      kicker="Real food, generously plated, in natural daylight. Stacked is good. Messy is good. Orange-tinted Instagram filter is not good."
    />

    {/* Big hero placeholder */}
    <div className="placeholder" style={{ height: 360, marginBottom: 32 }}>
      <div>
        <div style={{ fontSize: 14, marginBottom: 6 }}>HERO FOOD SHOT · 16:9</div>
        <div style={{ opacity: 0.55, textTransform: 'none', letterSpacing: 0, fontSize: 11 }}>Stacked toastie, cheese pull, daylight from the left, timber surface</div>
      </div>
    </div>

    <div className="grid-3" style={{ marginBottom: 40 }}>
      {[
        ['OVERHEAD FLAT-LAY', '4:5 · For brunch spreads & multi-dish'],
        ['45° HAND-HOLD', '4:5 · For hero burgers & toasties'],
        ['DETAIL CRUNCH', '1:1 · For cheese-pull, syrup pour, açaí topping'],
      ].map(([t, m]) => (
        <div key={t} className="placeholder" style={{ height: 220 }}>
          <div>
            <div style={{ fontSize: 13 }}>{t}</div>
            <div style={{ opacity: 0.55, textTransform: 'none', letterSpacing: 0, fontSize: 10, marginTop: 4 }}>{m}</div>
          </div>
        </div>
      ))}
    </div>

    <div className="grid-2">
      <div className="card kraft">
        <div className="card-label">Do</div>
        <ul style={{ paddingLeft: 18, lineHeight: 1.7, fontSize: 14, margin: 0 }}>
          <li>Bright natural daylight, raked from the side</li>
          <li>Timber tables, marble, ceramic plates</li>
          <li>Generous portions — let things spill, drip, stack</li>
          <li>Hands in shot for scale and warmth</li>
          <li>Slight warm white-balance — never cold</li>
          <li>Crops tight to the food edge</li>
        </ul>
      </div>
      <div className="card" style={{ background: '#1a1a1a', color: 'var(--cream)' }}>
        <div className="card-label">Don't</div>
        <ul style={{ paddingLeft: 18, lineHeight: 1.7, fontSize: 14, margin: 0 }}>
          <li>White seamless studio backgrounds</li>
          <li>Heavy orange Instagram presets</li>
          <li>Overhead-only galleries — vary the angle</li>
          <li>Centred, symmetrical food on small plates</li>
          <li>Spot illustrations or emoji on print menus</li>
          <li>Stock photos. Ever. Always our food, our locations.</li>
        </ul>
      </div>
    </div>
  </section>
);

// ——— SECTION 6: VOICE & TONE ———
const VoiceSection = () => (
  <section className="section cream" id="voice">
    <SectionHead
      num="06"
      title="Voice & tone"
      kicker="We sound like a person from Swords telling you about their favourite breakfast — not a brand from Dublin telling you about a customer experience."
    />

    <div className="grid-4" style={{ marginBottom: 40 }}>
      {[
        ['Friendly', 'Not formal', 'Use "Get hyped." Not "We are pleased to announce."'],
        ['Direct', 'Not hedging', 'Use "Now open." Not "We\'re excited to be opening soon."'],
        ['Generous', 'Not modest', 'Big portions, big flavours, said directly. No weasel words.'],
        ['Local', 'Not national', 'Name the towns. "Drogheda — we\'re open." Not "Dublin commuter belt."'],
      ].map(([h, sub, ex]) => (
        <div key={h} className="card">
          <div className="display" style={{ fontSize: 22, color: 'var(--raspberry)', marginBottom: 4 }}>{h}.</div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 12 }}>{sub}</div>
          <div style={{ fontSize: 14, lineHeight: 1.5 }}>{ex}</div>
        </div>
      ))}
    </div>

    {/* Examples */}
    <div className="grid-3" style={{ marginBottom: 40 }}>
      <div className="card">
        <div className="card-label">Example 1 · IG caption (≤50w)</div>
        <div style={{ fontSize: 16, lineHeight: 1.55, marginBottom: 12 }}>
          New on the brunch menu — the Pesto Scrambled. Three eggs scrambled through our signature pesto, crispy bacon, sourdough. It's loud. It's herby. It's a tenner ninety-five. <br/><br/>
          Swords, Ashbourne, Drogheda — get in.
        </div>
        <div className="mono" style={{ fontSize: 11, opacity: 0.5 }}>43 words · ✓</div>
      </div>

      <div className="card" style={{ background: 'var(--black)', color: 'var(--cream)' }}>
        <div className="card-label">Example 2 · 5-line in-store poster</div>
        <div className="display" style={{ fontSize: 36, lineHeight: 0.95, color: 'var(--raspberry)', textShadow: '3px 3px 0 var(--cream)' }}>
          EARLY BIRD<br/>BREAKFAST.
        </div>
        <div style={{ marginTop: 16, fontSize: 18, lineHeight: 1.4 }}>
          Mon–Fri · before 10.30am.<br/>
          Full breakfast + Americano.<br/>
          <span style={{ color: 'var(--ochre)' }}>€9.95.</span> No catch.
        </div>
      </div>

      <div className="card kraft">
        <div className="card-label">Example 3 · Recruitment</div>
        <div className="display" style={{ fontSize: 28, lineHeight: 0.95, marginBottom: 12 }}>KITCHEN STAFF<br/>WANTED.</div>
        <div style={{ fontSize: 14, lineHeight: 1.55, marginBottom: 12 }}>
          Loaf'd Drogheda is hiring. Full and part-time. Brunch shifts, mostly. Decent rates, free coffee, sound team, no late nights.
        </div>
        <div className="display" style={{ fontSize: 14, color: 'var(--raspberry)' }}>HELLO@LOAFD.IE</div>
      </div>
    </div>

    {/* We say / We don't say */}
    <div className="card" style={{ padding: 32 }}>
      <div className="card-label">We say · We don't say</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid rgba(0,0,0,0.1)' }}>
        {[
          ['Get hyped.', 'We\'re excited to announce…'],
          ['Now open.', 'Coming to a town near you.'],
          ['Takeaway.', 'To go.'],
          ['Sambo.', 'Sandwich offering.'],
          ['The cheese blend.', 'A signature blend of premium cheeses.'],
          ['Sound.', 'Excellent customer service.'],
          ['Coffee\'s on.', 'Beverage station now operational.'],
          ['€11.95. Worth it.', 'Premium price point, premium value.'],
        ].map(([yes, no], i) => (
          <React.Fragment key={i}>
            <div style={{ padding: '14px 16px', borderBottom: '1px solid rgba(0,0,0,0.08)', borderRight: '1px solid rgba(0,0,0,0.08)', background: 'rgba(165,55,104,0.06)' }}>
              <span className="mono" style={{ fontSize: 10, color: 'var(--raspberry)', letterSpacing: '0.1em', marginRight: 10 }}>YES</span>
              <span style={{ fontSize: 15 }}>{yes}</span>
            </div>
            <div style={{ padding: '14px 16px', borderBottom: '1px solid rgba(0,0,0,0.08)', opacity: 0.55 }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', marginRight: 10, textDecoration: 'line-through' }}>NO</span>
              <span style={{ fontSize: 15, textDecoration: 'line-through' }}>{no}</span>
            </div>
          </React.Fragment>
        ))}
      </div>
    </div>
  </section>
);

// ——— SECTION 7: SUB-BRAND LOCKUPS ———
const SubBrandSection = () => (
  <section className="section dark" id="subbrands">
    <div className="section-head" style={{ marginBottom: 48 }}>
      <div className="section-num"><span>Section</span><strong style={{ color: 'var(--raspberry-light, #C76A91)' }}>07</strong></div>
      <div>
        <h2 className="section-title" style={{ color: 'var(--cream)' }}>Sub-brand lockups</h2>
        <p className="section-kicker">Two sister marks under the same parent. Same DNA — chunky condensed display, offset shadow, raspberry/black core — but each has a job to do that the parent can't.</p>
      </div>
    </div>

    <div className="grid-2" style={{ marginBottom: 32 }}>
      {/* Smash'd */}
      <div className="card" style={{ background: 'var(--black)', padding: 56, border: '1px solid rgba(255,255,255,0.1)' }}>
        <div className="card-label" style={{ color: 'rgba(255,255,255,0.6)' }}>Smash'd · evening burger sub-brand</div>
        <div style={{ background: 'var(--ochre)', padding: '64px 32px', borderRadius: 10, textAlign: 'center', marginBottom: 20 }}>
          <SmashdMark size={88} />
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--cream)', opacity: 0.85, marginBottom: 16 }}>
          Same condensed display. <strong style={{ color: 'var(--cream)' }}>Apostrophe between the H and D.</strong> Lockup sits on ochre as the field colour — never on raspberry, to keep it visibly its own thing.
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <div className="chip dot" style={{ color: 'var(--ochre)' }}>THU–SUN · 4.30PM</div>
          <div className="chip dot" style={{ color: 'var(--ochre)' }}>SMASH BURGERS</div>
          <div className="chip dot" style={{ color: 'var(--ochre)' }}>BUTTERMILK CHICKEN</div>
        </div>
      </div>

      {/* Breakroom */}
      <div className="card" style={{ background: 'var(--black)', padding: 56, border: '1px solid rgba(255,255,255,0.1)' }}>
        <div className="card-label" style={{ color: 'rgba(255,255,255,0.6)' }}>The Breakroom · Smithfield sister venue</div>
        <div style={{ background: '#1f3a2a', padding: '36px 32px', borderRadius: 10, textAlign: 'center', marginBottom: 20, color: 'var(--cream)' }}>
          <BreakroomMark size={56} />
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--cream)', opacity: 0.85, marginBottom: 16 }}>
          Same display face, but framed by mono "rules" top and bottom — reads more bar than café. Lockup sits on <strong style={{ color: 'var(--cream)' }}>felt green</strong>, a nod to the pool tables. Different field, same family.
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <div className="chip dot" style={{ color: '#8E9B7A' }}>13 TABLES</div>
          <div className="chip dot" style={{ color: '#8E9B7A' }}>BYOB</div>
          <div className="chip dot" style={{ color: '#8E9B7A' }}>SMITHFIELD · D7</div>
        </div>
      </div>
    </div>

    {/* Family lineup */}
    <div className="card" style={{ background: 'var(--black)', padding: 40, border: '1px solid rgba(255,255,255,0.1)' }}>
      <div className="card-label" style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 24 }}>The family · Eat Social Ltd</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around', gap: 32, flexWrap: 'wrap' }}>
        <div style={{ textAlign: 'center' }}>
          <Wordmark size={56} />
          <div className="mono" style={{ fontSize: 11, opacity: 0.6, marginTop: 16, letterSpacing: '0.1em' }}>PARENT · CAFÉ</div>
        </div>
        <div style={{ fontSize: 32, opacity: 0.3, color: 'var(--cream)' }}>·</div>
        <div style={{ textAlign: 'center' }}>
          <SmashdMark size={56} />
          <div className="mono" style={{ fontSize: 11, opacity: 0.6, marginTop: 16, letterSpacing: '0.1em' }}>EVENING · BURGER</div>
        </div>
        <div style={{ fontSize: 32, opacity: 0.3, color: 'var(--cream)' }}>·</div>
        <div style={{ textAlign: 'center' }}>
          <BreakroomMark size={36} />
          <div className="mono" style={{ fontSize: 11, opacity: 0.6, marginTop: 16, letterSpacing: '0.1em' }}>SISTER · POOL HALL</div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { AtAGlance, LogoSystem, ColourSection, TypographySection, PhotographySection, VoiceSection, SubBrandSection });