// Loaf'd Brand Pack — Sections 8 (Applications) + 9 (Don'ts)

// ——— Helper: mini A4 menu mock ———
const MenuTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 1 · A4 sit-in menu</div>
    <div style={{ background: 'var(--black)', color: 'var(--cream)', padding: '36px 36px 28px', margin: 20, borderRadius: 8, position: 'relative', aspectRatio: '210/297' }}>
      {/* Top */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.6 }}>EST. 2021 · IRELAND</div>
          <div style={{ marginTop: 8 }}><Wordmark size={48} /></div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', opacity: 0.6 }}>BRUNCH MENU</div>
          <div className="display" style={{ fontSize: 11, color: 'var(--ochre)', marginTop: 4 }}>SERVED ALL DAY</div>
        </div>
      </div>

      {/* Category */}
      <div className="display" style={{ fontSize: 28, color: 'var(--raspberry)', textShadow: '2px 2px 0 var(--cream)', marginBottom: 14 }}>BRUNCH</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 22 }}>
        {[
          ['Full Breakfast', 'Fried eggs, sausages, pudding, crispy bacon, tomato relish, sourdough.', '12.95', '1(a), 3, 6, 7, 11'],
          ['Avocado Toastie', 'Crushed avo, chilli flakes, cheese blend, fried egg, bacon, rocket on sourdough.', '11.95', '1(a), 3, 6, 7, 11'],
          ['Pesto Scrambled', 'Eggs through our signature pesto, crispy bacon, sourdough.', '11.95', '1(a), 3, 5, 6, 7, 8, 11'],
          ['Hummus Eggs', 'Poached eggs, roast chickpeas, hummus, sweet potato, fresh chilli.', '12.95', '1(a), 3, 6, 7, 11'],
        ].map(([name, desc, price, allergens]) => (
          <div key={name} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{name} <AllergenList codes={allergens.split(', ')} /></div>
              <div style={{ fontSize: 11, opacity: 0.7, lineHeight: 1.4, marginTop: 2 }}>{desc}</div>
            </div>
            <div className="display" style={{ fontSize: 16, color: 'var(--ochre)' }}>€{price}</div>
          </div>
        ))}
      </div>

      <div className="display" style={{ fontSize: 28, color: 'var(--raspberry)', textShadow: '2px 2px 0 var(--cream)', marginBottom: 14 }}>SAMBOS</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          ['Grilled Cheese', 'Loaf\'d signature blend — cheddar, mozzarella, gouda.', '7.50'],
          ['Cajun Chicken Melt', 'Cajun sauce, house mayo, jalapeños, cheese blend.', '9.95'],
          ['Beef Brisket', 'Smoked brisket, red hot relish, crispy onions.', '11.95'],
        ].map(([name, desc, price]) => (
          <div key={name} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{name} <AllergenList codes={['1(a)', '3', '6', '7', '11']} /></div>
              <div style={{ fontSize: 11, opacity: 0.7, lineHeight: 1.4, marginTop: 2 }}>{desc}</div>
            </div>
            <div className="display" style={{ fontSize: 16, color: 'var(--ochre)' }}>€{price}</div>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div style={{ position: 'absolute', bottom: 24, left: 36, right: 36, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.15)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div className="mono" style={{ fontSize: 9, letterSpacing: '0.12em', opacity: 0.6, lineHeight: 1.7 }}>
          ALLERGENS · 1 GLUTEN, 3 EGG, 5 PEANUTS, 6 SOYA,<br/>7 MILK, 8 NUTS, 11 SESAME · ASK STAFF FOR FULL LIST
        </div>
        <LocationChip town="SWORDS · ASHBOURNE · DROGHEDA" style={{ color: 'var(--cream)', fontSize: 9 }} />
      </div>
    </div>
  </div>
);

// ——— A5 Flyer ———
const FlyerTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 2 · A5 offer flyer</div>
    <div style={{ background: 'var(--raspberry)', color: 'var(--cream)', padding: 28, margin: 20, borderRadius: 8, position: 'relative', aspectRatio: '148/210', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -40, right: -40, width: 220, height: 220, borderRadius: '50%', background: 'var(--ochre)', opacity: 0.9 }} />
      <div style={{ position: 'relative' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em' }}>ONLY AT LOAF'D · SWORDS</div>
        <div className="display" style={{ fontSize: 56, lineHeight: 0.9, color: 'var(--cream)', textShadow: '4px 4px 0 var(--black)', marginTop: 12 }}>EARLY<br/>BIRD<br/>BRUNCH.</div>
        <div style={{ fontSize: 14, lineHeight: 1.4, marginTop: 18, maxWidth: '70%' }}>
          Mon–Fri before 10.30am. Full breakfast plus an Americano. <strong>€9.95.</strong> No catch.
        </div>
        <div className="placeholder" style={{ height: 130, marginTop: 20, background: 'rgba(13,13,13,0.5)', borderColor: 'rgba(255,255,255,0.2)', color: 'rgba(255,255,255,0.6)' }}>
          BREAKFAST HERO · 16:9
        </div>
        <div style={{ position: 'absolute', bottom: -20, left: 0, right: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', opacity: 0.8 }}>THE PLAZA, MAIN ST</div>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', opacity: 0.8 }}>SWORDS, CO. DUBLIN</div>
          </div>
          <Wordmark size={26} variant="reverse" />
        </div>
      </div>
    </div>
  </div>
);

// ——— IG Post 1080x1350 ———
const IGPostTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 3 · IG post · 1080×1350</div>
    <div style={{ margin: 20, position: 'relative', aspectRatio: '1080/1350', background: 'var(--cream)', borderRadius: 8, overflow: 'hidden' }}>
      <div className="placeholder" style={{ position: 'absolute', inset: 0, height: '60%' }}>
        <div>STACKED PESTO TOASTIE · HAND-HOLD · DAYLIGHT</div>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'var(--black)', padding: 24, color: 'var(--cream)' }}>
        <div className="display" style={{ fontSize: 38, lineHeight: 0.95, color: 'var(--raspberry)', textShadow: '3px 3px 0 var(--cream)' }}>NEW.<br/>PESTO SCRAMBLED.</div>
        <div style={{ fontSize: 13, marginTop: 10, opacity: 0.85 }}>Eggs · pesto · bacon · sourdough. <span className="display" style={{ color: 'var(--ochre)' }}>€11.95.</span></div>
        <div style={{ position: 'absolute', top: -22, right: 16 }}>
          <div className="sticker">GET HYPED</div>
        </div>
      </div>
    </div>
  </div>
);

// ——— IG Story 1080x1920 ———
const IGStoryTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 4 · IG story · 1080×1920</div>
    <div style={{ margin: '20px auto', width: '60%', position: 'relative', aspectRatio: '9/16', background: 'var(--black)', borderRadius: 14, overflow: 'hidden' }}>
      <div className="placeholder dark" style={{ position: 'absolute', inset: 0 }}>
        <div>FULL-BLEED FOOD · 9:16</div>
      </div>
      <div style={{ position: 'absolute', top: 28, left: 0, right: 0, textAlign: 'center', color: 'var(--cream)' }}>
        <Wordmark size={32} variant="reverse" />
      </div>
      <div style={{ position: 'absolute', bottom: 56, left: 24, right: 24, color: 'var(--cream)' }}>
        <div className="display" style={{ fontSize: 36, lineHeight: 0.95, color: 'var(--raspberry)', textShadow: '3px 3px 0 var(--cream)' }}>NOW<br/>OPEN.</div>
        <div style={{ fontSize: 14, marginTop: 12 }}>Drogheda. 1a Stockwell Lane. Get in.</div>
        <div style={{ marginTop: 14 }}><LocationChip town="DROGHEDA · CO. LOUTH" solid /></div>
      </div>
    </div>
  </div>
);

// ——— A-frame chalkboard ———
const AFrameTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 5 · A-frame chalkboard</div>
    <div style={{ margin: 20, padding: 32, background: '#1a1a1a', borderRadius: 8, color: 'var(--cream)', position: 'relative', aspectRatio: '5/6' }}>
      <div style={{ position: 'absolute', inset: 12, border: '2px solid var(--cream)', borderRadius: 4, padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ textAlign: 'center' }}>
          <Wordmark size={32} variant="reverse" />
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.7, marginTop: 8 }}>—— TODAY'S SPECIALS ——</div>
        </div>
        <div style={{ textAlign: 'center', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 18 }}>
          <div>
            <div className="display" style={{ fontSize: 24, color: 'var(--raspberry)', textShadow: '2px 2px 0 var(--cream)' }}>BEEF BRISKET MELT</div>
            <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4 }}>w/ red hot relish + crispy onions</div>
            <div className="display" style={{ fontSize: 22, color: 'var(--ochre)', marginTop: 4 }}>€11.95</div>
          </div>
          <div style={{ fontSize: 18, opacity: 0.4 }}>—— ✦ ——</div>
          <div>
            <div className="display" style={{ fontSize: 24, color: 'var(--raspberry)', textShadow: '2px 2px 0 var(--cream)' }}>BISCOFF PANCAKES</div>
            <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4 }}>three stacked, crumb + sauce</div>
            <div className="display" style={{ fontSize: 22, color: 'var(--ochre)', marginTop: 4 }}>€10.50</div>
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.7 }}>OPEN · SAT · 9 — 5</div>
        </div>
      </div>
    </div>
  </div>
);

// ——— Coffee cup sleeve / takeaway stamp ———
const CupSleeveTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 6 · Cup sleeve & bag stamp</div>
    <div style={{ margin: 20, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
      {/* sleeve */}
      <div style={{ background: 'var(--mocha)', borderRadius: '120px / 60px', padding: '28px 36px', color: 'var(--cream)', position: 'relative', minHeight: 150, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <Wordmark size={28} variant="reverse" />
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', marginTop: 4, opacity: 0.85 }}>HELLO@LOAFD.IE</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="display" style={{ fontSize: 11, opacity: 0.85, lineHeight: 1.3 }}>SWORDS · ASHBOURNE<br/>DROGHEDA</div>
        </div>
      </div>
      {/* bag stamp */}
      <div style={{ background: 'var(--kraft)', padding: 20, borderRadius: 8, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 150, position: 'relative' }}>
        <div style={{ border: '2px solid var(--black)', padding: '14px 16px', borderRadius: 4, background: 'transparent' }}>
          <Wordmark size={24} variant="solid" />
          <div className="mono" style={{ fontSize: 8, letterSpacing: '0.18em', marginTop: 4, opacity: 0.7 }}>SAMBO · BRUNCH · BURGER</div>
        </div>
        <div className="mono" style={{ fontSize: 8, letterSpacing: '0.16em', opacity: 0.55, marginTop: 8 }}>SINGLE-COLOUR STAMP · BLACK</div>
      </div>
    </div>
  </div>
);

// ——— T-shirt / Apron ———
const ApparelTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 7 · T-shirt & apron</div>
    <div style={{ margin: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      {/* tee */}
      <div style={{ background: 'var(--cream)', borderRadius: 8, padding: 24, position: 'relative', aspectRatio: '1/1.1' }}>
        <svg viewBox="0 0 200 220" style={{ width: '100%', height: '100%' }}>
          <path d="M 30 30 L 70 10 Q 100 30 130 10 L 170 30 L 190 70 L 160 80 L 160 200 L 40 200 L 40 80 L 10 70 Z"
                fill="#0D0D0D" stroke="#0D0D0D" strokeWidth="2" strokeLinejoin="round"/>
          <foreignObject x="50" y="80" width="100" height="60">
            <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
              <div className="wordmark" style={{ fontSize: 24 }}>LOAF'D</div>
            </div>
          </foreignObject>
        </svg>
        <div className="mono" style={{ position: 'absolute', bottom: 8, left: 0, right: 0, textAlign: 'center', fontSize: 9, letterSpacing: '0.16em', opacity: 0.55 }}>STAFF TEE · BLACK / RASPBERRY</div>
      </div>
      {/* apron */}
      <div style={{ background: 'var(--cream)', borderRadius: 8, padding: 24, position: 'relative', aspectRatio: '1/1.1' }}>
        <svg viewBox="0 0 200 220" style={{ width: '100%', height: '100%' }}>
          <path d="M 60 20 Q 100 40 140 20 L 170 50 L 180 200 L 20 200 L 30 50 Z"
                fill="#A53768" stroke="#0D0D0D" strokeWidth="2" strokeLinejoin="round"/>
          <line x1="20" y1="100" x2="40" y2="100" stroke="#0D0D0D" strokeWidth="2"/>
          <line x1="180" y1="100" x2="160" y2="100" stroke="#0D0D0D" strokeWidth="2"/>
          <foreignObject x="40" y="120" width="120" height="60">
            <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
              <div className="wordmark reverse" style={{ fontSize: 24 }}>LOAF'D</div>
            </div>
          </foreignObject>
        </svg>
        <div className="mono" style={{ position: 'absolute', bottom: 8, left: 0, right: 0, textAlign: 'center', fontSize: 9, letterSpacing: '0.16em', opacity: 0.55 }}>KITCHEN APRON · RASPBERRY</div>
      </div>
    </div>
  </div>
);

// ——— Email signature ———
const EmailSigTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 8 · Email signature</div>
    <div style={{ margin: 20, padding: 24, background: 'white', border: '1px solid rgba(0,0,0,0.08)', borderRadius: 8 }}>
      <div className="mono" style={{ fontSize: 11, opacity: 0.5, marginBottom: 12 }}>Re: Wholesale enquiry</div>
      <div style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 16, opacity: 0.8 }}>Hi Niamh,<br/>Thanks — we'd love to. I'll get the deck across this evening.<br/>Cheers,</div>
      <div style={{ display: 'flex', gap: 16, alignItems: 'center', paddingTop: 16, borderTop: '3px solid var(--raspberry)' }}>
        <div style={{ width: 64, height: 64, background: 'var(--black)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Wordmark size={20} />
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 14 }}>Aoife Kennedy</div>
          <div style={{ fontSize: 12, opacity: 0.7 }}>Operations · Loaf'd & Eat Social Ltd</div>
          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--raspberry)', fontWeight: 600 }}>aoife@loafd.ie  ·  loafd.ie  ·  @loafdireland</div>
          <div className="mono" style={{ fontSize: 10, marginTop: 4, opacity: 0.55, letterSpacing: '0.06em' }}>SWORDS · ASHBOURNE · DROGHEDA</div>
        </div>
      </div>
    </div>
  </div>
);

// ——— Job Ad ———
const JobAdTemplate = () => (
  <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
    <div className="card-label" style={{ padding: '20px 24px 0' }}>Application 9 · Recruitment ad</div>
    <div style={{ background: 'var(--cream)', color: 'var(--black)', padding: 28, margin: 20, borderRadius: 8, position: 'relative', aspectRatio: '4/5', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 24, right: 24 }}>
        <Wordmark size={26} />
      </div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', opacity: 0.6 }}>NOW HIRING · ASHBOURNE</div>
      <div className="display" style={{ fontSize: 56, lineHeight: 0.9, color: 'var(--raspberry)', textShadow: '4px 4px 0 var(--black)', marginTop: 12 }}>KITCHEN<br/>STAFF<br/>WANTED.</div>
      <div style={{ fontSize: 15, lineHeight: 1.5, marginTop: 24, maxWidth: '90%' }}>
        Loaf'd Ashbourne is hiring. Full and part-time. Brunch shifts, mostly. Decent rates, free coffee, sound team, no late nights.
      </div>
      <div style={{ position: 'absolute', bottom: 28, left: 28, right: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', opacity: 0.6 }}>APPLY</div>
          <div className="display" style={{ fontSize: 18, color: 'var(--raspberry)' }}>HELLO@LOAFD.IE</div>
        </div>
        <div className="sticker" style={{ position: 'static', background: 'var(--ochre)' }}>SOUND TEAM.</div>
      </div>
    </div>
  </div>
);

const ApplicationsSection = () => (
  <section className="section" id="applications">
    <SectionHead
      num="08"
      title="Application templates"
      kicker="Nine working mockups. Designers and the Canva-comfortable team can pull these apart and rebuild — every element uses the tokens, type and lockups already defined."
    />

    <div className="grid-2" style={{ marginBottom: 32 }}>
      <MenuTemplate />
      <FlyerTemplate />
    </div>
    <div className="grid-3" style={{ marginBottom: 32 }}>
      <IGPostTemplate />
      <IGStoryTemplate />
      <AFrameTemplate />
    </div>
    <div className="grid-2" style={{ marginBottom: 32 }}>
      <CupSleeveTemplate />
      <ApparelTemplate />
    </div>
    <div className="grid-2">
      <EmailSigTemplate />
      <JobAdTemplate />
    </div>
  </section>
);

// ——— SECTION 9: DON'TS ———
const DontsSection = () => (
  <section className="section cream" id="donts">
    <SectionHead
      num="09"
      title="Don'ts"
      kicker="A page of common mistakes — the ones we've actually seen. If you're about to do any of these, stop."
    />

    <div className="grid-3" style={{ marginBottom: 32 }}>
      <div className="card">
        <div style={{ background: 'var(--black)', padding: 36, borderRadius: 8, textAlign: 'center', minHeight: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 48, color: 'var(--raspberry)', textTransform: 'uppercase', transform: 'skewX(-15deg)' }}>LOAF'D</div>
          <div className="display" style={{ position: 'absolute', top: 8, right: 8, color: 'var(--raspberry)', fontSize: 36 }}>×</div>
        </div>
        <div className="display" style={{ fontSize: 16, marginTop: 12, color: 'var(--raspberry)' }}>DON'T SKEW THE LOGO</div>
        <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6, lineHeight: 1.5 }}>The wordmark is fixed. No italic, no skew, no warp.</p>
      </div>

      <div className="card">
        <div style={{ background: '#5B8C5B', padding: 36, borderRadius: 8, textAlign: 'center', minHeight: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <Wordmark size={42} />
          <div className="display" style={{ position: 'absolute', top: 8, right: 8, color: 'var(--raspberry)', fontSize: 36 }}>×</div>
        </div>
        <div className="display" style={{ fontSize: 16, marginTop: 12, color: 'var(--raspberry)' }}>DON'T USE OFF-PALETTE BACKGROUNDS</div>
        <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6, lineHeight: 1.5 }}>Logo only sits on raspberry, black or cream. No greens, blues, or random brand-clashes.</p>
      </div>

      <div className="card">
        <div style={{ background: 'var(--black)', padding: 36, borderRadius: 8, textAlign: 'center', minHeight: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 38, color: 'var(--ochre)', textShadow: '3px 3px 0 var(--rose)' }}>LOAF'D</div>
          <div className="display" style={{ position: 'absolute', top: 8, right: 8, color: 'var(--raspberry)', fontSize: 36 }}>×</div>
        </div>
        <div className="display" style={{ fontSize: 16, marginTop: 12, color: 'var(--raspberry)' }}>DON'T RECOLOUR THE WORDMARK</div>
        <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6, lineHeight: 1.5 }}>Raspberry fill is sacred. Accents are for stickers and stamps, never the lockup itself.</p>
      </div>

      <div className="card">
        <div style={{ background: 'var(--black)', padding: 36, borderRadius: 8, textAlign: 'center', minHeight: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div style={{ fontFamily: 'Comic Sans MS, Inter', fontSize: 32, color: 'var(--raspberry)', fontWeight: 700 }}>Loaf'd</div>
          <div className="display" style={{ position: 'absolute', top: 8, right: 8, color: 'var(--raspberry)', fontSize: 36 }}>×</div>
        </div>
        <div className="display" style={{ fontSize: 16, marginTop: 12, color: 'var(--raspberry)' }}>DON'T RETYPESET THE WORDMARK</div>
        <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6, lineHeight: 1.5 }}>Use the supplied lockup files. Don't re-type "Loaf'd" in another font and call it a logo.</p>
      </div>

      <div className="card">
        <div style={{ background: 'var(--cream)', padding: 36, borderRadius: 8, minHeight: 160, position: 'relative', textAlign: 'center', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 22, color: 'var(--ochre)', textShadow: '2px 2px 0 var(--rose)' }}>OUR ARTISANAL</div>
          <div style={{ fontFamily: 'Inter', fontStyle: 'italic', fontSize: 13, opacity: 0.7, marginTop: 8 }}>"crafted journey of curated breakfast offerings"</div>
          <div className="display" style={{ position: 'absolute', top: 8, right: 8, color: 'var(--raspberry)', fontSize: 36 }}>×</div>
        </div>
        <div className="display" style={{ fontSize: 16, marginTop: 12, color: 'var(--raspberry)' }}>DON'T HEDGE OR CORPORATE-SPEAK</div>
        <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6, lineHeight: 1.5 }}>"Artisanal", "curated", "crafted journey". None of it. Plain Irish English.</p>
      </div>

      <div className="card">
        <div style={{ background: 'white', padding: 36, borderRadius: 8, textAlign: 'center', minHeight: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div className="placeholder" style={{ width: '70%', height: 100, background: 'white', border: '1px dashed rgba(0,0,0,0.2)', color: 'rgba(0,0,0,0.3)' }}>
            STOCK STUDIO PHOTO
          </div>
          <div className="display" style={{ position: 'absolute', top: 8, right: 8, color: 'var(--raspberry)', fontSize: 36 }}>×</div>
        </div>
        <div className="display" style={{ fontSize: 16, marginTop: 12, color: 'var(--raspberry)' }}>DON'T USE STOCK FOOD PHOTOS</div>
        <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6, lineHeight: 1.5 }}>White seamless studio shots break the brand instantly. Always our food, our locations, daylight.</p>
      </div>
    </div>

    <div className="card" style={{ background: 'var(--raspberry)', color: 'var(--cream)', padding: 32 }}>
      <div className="display" style={{ fontSize: 24, marginBottom: 8 }}>NOT SURE? ASK.</div>
      <div style={{ fontSize: 15, lineHeight: 1.5, opacity: 0.95 }}>
        Drop a draft to <strong style={{ color: 'var(--cream)' }}>hello@loafd.ie</strong> with the subject "brand check" and we'll come back same day. Better to ask than print 500 wrong flyers.
      </div>
    </div>
  </section>
);

Object.assign(window, { ApplicationsSection, DontsSection });