// onepager.jsx — Voss Halal · One-pager (Stone palette · "Rett fra kilden")
// Reuses window.PALETTES, window.Mountainscape, window.Wordmark from scenes.jsx.

const COPY_OP = {
  no: {
    folio: '№ 001 · MMXXVI · Voss · Vestland',
    eyebrow: 'Kommer · MMXXVI',
    heroLine1: 'Rett fra',
    heroLine2: 'kilden.',
    heroSub: 'Voss halal',
    scrollCue: 'Bla videre',

    chapter1Roman: 'I',
    chapter1Label: 'Manifest',
    chapter1Title: 'En ny norsk eksport.',
    chapter1Body:
      'På linje med laksen. På samme høyfjell. Voss Halal er et flaggskip for norsk halal-lam — gressfôret på Vossefjellet, vannet av Norges reneste kilde, skåret etter de strengeste protokollene.',
    chapter1Pull:
      '«Lammet drikker fra kilden. Vi gjør ingenting for å skjule smaken — kun for å forsterke den.»',

    chapter2Roman: 'II',
    chapter2Label: 'Tre løfter',
    pillar1Num: '01',
    pillar1Title: 'Kilden',
    pillar1Body:
      'Vossefjellet — gress, regn, snø som smelter til en av Europas reneste vannkilder. Dyrene drikker det. Du smaker det.',
    pillar2Num: '02',
    pillar2Title: 'Håndverket',
    pillar2Body:
      'Halal-sertifisert slakting og førstegangs-skår etter klassiske protokoller. Sporbar fra fjell til fat — uten unntak.',
    pillar3Num: '03',
    pillar3Title: 'Kulturen',
    pillar3Body:
      'Norsk matkultur, åpen for verden. Vi feirer det vi kommer fra, og inviterer flere inn til samme bord.',

    plateCaption: 'Plate I · Drikker fra Voss-kilden',

    chapter3Roman: 'III',
    chapter3Label: 'Huset',
    chapter3Title: 'Voss Halal AS',
    chapter3Lede:
      'Et lite, founder-ledet hus stiftet i 2026. Bygget tålmodig, fra første prinsipp.',
    foundedLabel: 'Stiftet',
    foundedValue: 'Anno MMXXVI · Oslo & Voss',
    founderLabel: 'Grunnlegger & Daglig leder',
    founderValue: 'Murat Demirci',
    purposeLabel: 'Formål',
    purposeValue:
      'Produsere norsk halal-kjøtt og fremme norsk matkultur.',
    formLabel: 'Selskapsform',
    formValue: 'Aksjeselskap · Org.nr. tildeles ved stiftelse',

    chapter4Roman: 'IV',
    chapter4Label: 'Lansering',
    chapter4Title: 'Hold deg nær.',
    chapter4Body:
      'Vi varsler abonnenter først om sertifisering, første skår og åpning av reservasjoner. Ingen støy — kun det som teller.',
    placeholder: 'din@epost.no',
    cta: 'Hold meg oppdatert',
    note: 'Lansering 2026 · Abonnenter varsles først',

    contactLabel: 'Spørsmål',
    contactEmail: 'demircimrd@gmail.com',
    contactPhone: '+47 92 54 36 01',
    addressLabel: 'Adresse',
    addressValue: 'Garver Ytteborgs vei 113, 0977 Oslo',

    colophonRule: 'Foreløpig signaturside · Voss Halal AS',
    colophonLeft: 'MMXXVI',
    colophonRight: 'Voss · Vestland · Norge',
    thanks: 'Takk · merci · شكراً',
  },
  en: {
    folio: 'No. 001 · MMXXVI · Voss · Vestland',
    eyebrow: 'Arriving · MMXXVI',
    heroLine1: 'Straight from',
    heroLine2: 'the source.',
    heroSub: 'Voss halal',
    scrollCue: 'Read on',

    chapter1Roman: 'I',
    chapter1Label: 'Manifesto',
    chapter1Title: 'A new Norwegian export.',
    chapter1Body:
      'Alongside the salmon. From the same high country. Voss Halal is a flagship for Norwegian halal lamb — grass-fed on the Voss fells, watered by one of Europe’s purest springs, and prepared to the most exacting protocols.',
    chapter1Pull:
      '“The lamb drinks from the source. We do nothing to mask the flavour — only to amplify it.”',

    chapter2Roman: 'II',
    chapter2Label: 'Three promises',
    pillar1Num: '01',
    pillar1Title: 'The source',
    pillar1Body:
      'Vossefjellet — grass, rain, snowmelt feeding one of the cleanest waters in Europe. The animals drink it. You taste it.',
    pillar2Num: '02',
    pillar2Title: 'The craft',
    pillar2Body:
      'Halal-certified slaughter and first cut to classical protocols. Traceable from fell to plate — without exception.',
    pillar3Num: '03',
    pillar3Title: 'The culture',
    pillar3Body:
      'Norwegian food culture, open to the world. We honour where we come from and set a wider table.',

    plateCaption: 'Plate I · Watered by the Voss source',

    chapter3Roman: 'III',
    chapter3Label: 'The house',
    chapter3Title: 'Voss Halal AS',
    chapter3Lede:
      'A small, founder-led house, established 2026. Built patiently — from first principles.',
    foundedLabel: 'Established',
    foundedValue: 'Anno MMXXVI · Oslo & Voss',
    founderLabel: 'Founder & Managing director',
    founderValue: 'Murat Demirci',
    purposeLabel: 'Purpose',
    purposeValue:
      'To produce Norwegian halal meat and advance Norwegian food culture.',
    formLabel: 'Form',
    formValue: 'Limited company · Org. no. assigned at incorporation',

    chapter4Roman: 'IV',
    chapter4Label: 'Launch',
    chapter4Title: 'Stay close.',
    chapter4Body:
      'Subscribers are notified first about certification, the first cut, and reservations. No noise — only the things that matter.',
    placeholder: 'you@email.com',
    cta: 'Keep me posted',
    note: 'Launching 2026 · Subscribers notified first',

    contactLabel: 'Enquiries',
    contactEmail: 'demircimrd@gmail.com',
    contactPhone: '+47 92 54 36 01',
    addressLabel: 'Address',
    addressValue: 'Garver Ytteborgs vei 113, 0977 Oslo, Norway',

    colophonRule: 'Holding page · Voss Halal AS',
    colophonLeft: 'MMXXVI',
    colophonRight: 'Voss · Vestland · Norway',
    thanks: 'Thank you · merci · شكراً',
  },
};

function OnePager() {
  const [lang, setLang] = React.useState(window.__landingLang || 'no');
  React.useEffect(() => {
    window.__landingLang = lang;
    window.__setLandingLang = (l) => setLang(l);
  }, [lang]);

  const t = COPY_OP[lang];
  const p = window.PALETTES.stone;
  const pMid = window.PALETTES.midnight;

  const cssVars = {
    '--ink': p.ink,
    '--ink-soft': p.inkSoft,
    '--rule': p.rule,
    '--paper': p.paper,
    '--field-border': p.fieldBorder,
    '--accent': p.accent,
    '--font-display': '"Cormorant Garamond", "EB Garamond", serif',
    '--font-ui': '"Inter Tight", "Inter", system-ui, sans-serif',
  };

  return (
    <div style={{
      ...cssVars,
      background: p.paper,
      color: p.ink,
      fontFamily: 'var(--font-ui)',
      minHeight: '100vh',
      WebkitFontSmoothing: 'antialiased',
    }}>
      <Nav t={t} lang={lang} setLang={setLang} />
      <Hero t={t} />
      <Manifesto t={t} />
      <Pillars t={t} />
      <Plate t={t} pMid={pMid} />
      <House t={t} />
      <Launch t={t} />
      <Colophon t={t} />
    </div>
  );
}

// ─── Nav ─────────────────────────────────────────────
function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const p = window.PALETTES.stone;
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: scrolled ? '14px 40px' : '24px 56px',
      background: scrolled ? 'rgba(239,230,212,0.86)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: scrolled ? `1px solid ${p.rule}` : '1px solid transparent',
      transition: 'all 320ms cubic-bezier(.2,.7,.2,1)',
      color: p.ink,
    }}>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: p.inkSoft }}>
        {t.folio}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <LangSwitchInline lang={lang} setLang={setLang} />
      </div>
    </header>
  );
}

function LangSwitchInline({ lang, setLang }) {
  const item = (k, label) => (
    <button onClick={() => setLang(k)} style={{
      background: 'none', border: 0, padding: 0, cursor: 'pointer',
      fontFamily: 'inherit', fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase',
      color: 'currentColor',
      opacity: lang === k ? 1 : 0.4,
      borderBottom: lang === k ? '1px solid currentColor' : '1px solid transparent',
      paddingBottom: 2,
    }}>{label}</button>
  );
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
      {item('no', 'NO')}<span style={{ opacity: 0.3 }}>·</span>{item('en', 'EN')}
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────
function Hero({ t }) {
  const p = window.PALETTES.stone;
  return (
    <section style={{ position: 'relative', height: '100vh', minHeight: 720, overflow: 'hidden', background: p.paper }}>
      {/* landscape band — bottom-anchored, fading up */}
      <div style={{ position: 'absolute', inset: 0 }}>
        <window.Mountainscape palette="stone" id="hero" scene="pool" />
        {/* paper-fade scrim from top so headline sits in calm */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(180deg, ${p.paper} 0%, ${p.paper}cc 18%, ${p.paper}66 38%, transparent 60%)`,
        }} />
      </div>

      {/* hero copy — centered classical composition */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: '0 32px',
      }}>
        <div style={{
          fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.42em', textTransform: 'uppercase',
          color: p.inkSoft, display: 'flex', alignItems: 'center', gap: 14, marginBottom: 36,
        }}>
          <span style={{ width: 36, height: 1, background: p.ink, opacity: 0.4 }} />
          {t.eyebrow}
          <span style={{ width: 36, height: 1, background: p.ink, opacity: 0.4 }} />
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(64px, 11vw, 168px)', lineHeight: 0.95, letterSpacing: '-0.03em',
          margin: 0, textAlign: 'center', color: p.ink, textWrap: 'balance',
        }}>
          <span style={{ fontStyle: 'italic', display: 'block' }}>{t.heroLine1}</span>
          <span style={{ display: 'block', marginTop: 4 }}>{t.heroLine2}</span>
        </h1>

        <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 1, height: 28, background: p.ink, opacity: 0.4 }} />
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 22, letterSpacing: '0.06em', color: p.ink,
          }}>
            {t.heroSub}
          </div>
        </div>
      </div>

      {/* corner marks */}
      <div style={{
        position: 'absolute', left: 56, bottom: 32,
        fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
        color: p.inkSoft, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{ width: 28, height: 1, background: p.ink, opacity: 0.5 }} />
        Voss · Vestland · Norge
      </div>
      <a href="#manifest" style={{
        position: 'absolute', right: 56, bottom: 32,
        fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
        color: p.inkSoft, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10,
      }}>
        {t.scrollCue}
        <span style={{ width: 28, height: 1, background: p.ink, opacity: 0.5 }} />
      </a>
    </section>
  );
}

// ─── Manifesto ───────────────────────────────────────
function Manifesto({ t }) {
  const p = window.PALETTES.stone;
  return (
    <section id="manifest" style={{
      padding: 'clamp(96px, 14vw, 200px) clamp(32px, 7vw, 120px)',
      borderTop: `1px solid ${p.rule}`,
    }}>
      <ChapterHeader roman={t.chapter1Roman} label={t.chapter1Label} />

      <div style={{
        marginTop: 48,
        display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 4fr)', gap: 'clamp(48px, 7vw, 120px)',
        alignItems: 'start',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic',
          fontSize: 'clamp(40px, 6.5vw, 96px)', lineHeight: 1.02, letterSpacing: '-0.02em',
          margin: 0, color: p.ink, textWrap: 'balance', maxWidth: '14ch',
        }}>
          {t.chapter1Title}
        </h2>

        <div style={{ paddingTop: 14 }}>
          <p style={{
            fontFamily: 'var(--font-ui)', fontSize: 17, lineHeight: 1.65,
            color: p.ink, opacity: 0.9, margin: 0, textWrap: 'pretty',
          }}>
            {t.chapter1Body}
          </p>
          <div style={{
            marginTop: 56, paddingLeft: 28,
            borderLeft: `1px solid ${p.ink}`,
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 'clamp(20px, 2vw, 26px)', lineHeight: 1.4,
            color: p.ink, textWrap: 'balance',
          }}>
            {t.chapter1Pull}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Pillars ─────────────────────────────────────────
function Pillars({ t }) {
  const p = window.PALETTES.stone;
  const pillars = [
    { num: t.pillar1Num, title: t.pillar1Title, body: t.pillar1Body },
    { num: t.pillar2Num, title: t.pillar2Title, body: t.pillar2Body },
    { num: t.pillar3Num, title: t.pillar3Title, body: t.pillar3Body },
  ];
  return (
    <section style={{
      padding: 'clamp(96px, 14vw, 180px) clamp(32px, 7vw, 120px)',
      borderTop: `1px solid ${p.rule}`,
    }}>
      <ChapterHeader roman={t.chapter2Roman} label={t.chapter2Label} />

      <div style={{
        marginTop: 64,
        display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
        gap: 'clamp(32px, 4vw, 72px)',
      }}>
        {pillars.map((pl, i) => (
          <article key={i} style={{
            paddingTop: 32, borderTop: `1px solid ${p.ink}`,
          }}>
            <div style={{
              fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
              color: p.inkSoft, marginBottom: 28,
            }}>
              — {pl.num}
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
              fontSize: 'clamp(32px, 3.4vw, 44px)', lineHeight: 1.05, letterSpacing: '-0.015em',
              margin: 0, color: p.ink,
            }}>
              {pl.title}
            </h3>
            <p style={{
              fontFamily: 'var(--font-ui)', fontSize: 15, lineHeight: 1.65,
              color: p.ink, opacity: 0.82, margin: '24px 0 0', textWrap: 'pretty',
            }}>
              {pl.body}
            </p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ─── Plate (full-bleed image break, midnight) ───────
function Plate({ t, pMid }) {
  return (
    <section style={{
      position: 'relative', height: '78vh', minHeight: 560, overflow: 'hidden',
      background: pMid.paper,
    }}>
      <window.Mountainscape palette="midnight" id="plate" scene="waterfall-veil" />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 'clamp(32px, 7vw, 96px)', bottom: 'clamp(32px, 6vw, 64px)',
        display: 'flex', alignItems: 'center', gap: 16,
        fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
        color: pMid.ink, opacity: 0.92,
      }}>
        <span style={{ width: 36, height: 1, background: 'currentColor' }} />
        {t.plateCaption}
      </div>
      <div style={{
        position: 'absolute', right: 'clamp(32px, 7vw, 96px)', top: 'clamp(32px, 5vw, 56px)',
        fontFamily: 'var(--font-display)', fontSize: 14, letterSpacing: '0.32em',
        color: pMid.ink, opacity: 0.85,
      }}>
        № 001
      </div>
    </section>
  );
}

// ─── House (founder / colophon details) ─────────────
function House({ t }) {
  const p = window.PALETTES.stone;
  const rows = [
    { label: t.foundedLabel, value: t.foundedValue },
    { label: t.founderLabel, value: t.founderValue },
    { label: t.purposeLabel, value: t.purposeValue },
    { label: t.formLabel, value: t.formValue },
  ];
  return (
    <section style={{
      padding: 'clamp(96px, 14vw, 180px) clamp(32px, 7vw, 120px)',
      borderTop: `1px solid ${p.rule}`,
    }}>
      <ChapterHeader roman={t.chapter3Roman} label={t.chapter3Label} />

      <div style={{
        marginTop: 48,
        display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 4fr)', gap: 'clamp(48px, 7vw, 120px)',
        alignItems: 'start',
      }}>
        <div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic',
            fontSize: 'clamp(40px, 6vw, 88px)', lineHeight: 1.02, letterSpacing: '-0.02em',
            margin: 0, color: p.ink, textWrap: 'balance', maxWidth: '13ch',
          }}>
            {t.chapter3Title}
          </h2>
          <p style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.45, color: p.ink,
            margin: '32px 0 0', maxWidth: '34ch', textWrap: 'pretty',
          }}>
            {t.chapter3Lede}
          </p>
        </div>

        <dl style={{ margin: 0, paddingTop: 14 }}>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '160px 1fr', gap: 32,
              padding: '20px 0',
              borderTop: i === 0 ? `1px solid ${p.ink}` : `1px solid ${p.rule}`,
            }}>
              <dt style={{
                fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
                color: p.inkSoft, paddingTop: 4,
              }}>{r.label}</dt>
              <dd style={{
                margin: 0, fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.4,
                color: p.ink, textWrap: 'pretty',
              }}>{r.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

// ─── Launch / signup ────────────────────────────────
function Launch({ t }) {
  const p = window.PALETTES.stone;
  const [val, setVal] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <section style={{
      padding: 'clamp(96px, 14vw, 180px) clamp(32px, 7vw, 120px)',
      borderTop: `1px solid ${p.rule}`,
    }}>
      <ChapterHeader roman={t.chapter4Roman} label={t.chapter4Label} />

      <div style={{
        marginTop: 48,
        display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 4fr)', gap: 'clamp(48px, 7vw, 120px)',
        alignItems: 'end',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic',
          fontSize: 'clamp(40px, 6.5vw, 96px)', lineHeight: 1.0, letterSpacing: '-0.02em',
          margin: 0, color: p.ink, textWrap: 'balance', maxWidth: '10ch',
        }}>
          {t.chapter4Title}
        </h2>

        <div style={{ paddingBottom: 14 }}>
          <p style={{
            fontFamily: 'var(--font-ui)', fontSize: 16, lineHeight: 1.65,
            color: p.ink, opacity: 0.88, margin: 0, maxWidth: '36ch', textWrap: 'pretty',
          }}>
            {t.chapter4Body}
          </p>

          <div style={{ marginTop: 40, maxWidth: 480 }}>
            {done ? (
              <div style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                fontSize: 28, color: p.ink, paddingBottom: 8, borderBottom: `1px solid ${p.ink}`,
              }}>
                {t.thanks}
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); if (val) setDone(true); }}
                    style={{
                      display: 'flex', gap: 16,
                      borderBottom: `1px solid ${p.ink}`,
                      paddingBottom: 10,
                    }}>
                <input
                  value={val}
                  onChange={(e) => setVal(e.target.value)}
                  placeholder={t.placeholder}
                  type="email"
                  style={{
                    flex: 1, background: 'transparent', border: 0, outline: 'none',
                    fontFamily: 'var(--font-ui)', fontSize: 18, color: p.ink, padding: '8px 0',
                  }}
                />
                <button type="submit" style={{
                  background: 'transparent', border: 0, padding: '8px 0 8px 16px', cursor: 'pointer',
                  fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase',
                  color: p.ink, whiteSpace: 'nowrap',
                }}>
                  {t.cta} →
                </button>
              </form>
            )}
            <div style={{
              marginTop: 18,
              fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
              color: p.inkSoft,
            }}>
              {t.note}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Colophon / footer ───────────────────────────────
function Colophon({ t }) {
  const p = window.PALETTES.stone;
  return (
    <footer style={{
      padding: 'clamp(64px, 8vw, 96px) clamp(32px, 7vw, 120px) 40px',
      borderTop: `1px solid ${p.ink}`,
      color: p.ink,
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
        gap: 'clamp(32px, 4vw, 64px)', alignItems: 'start',
      }}>
        <div>
          <div style={miniLabel(p)}>{t.contactLabel}</div>
          <a href={`mailto:${t.contactEmail}`} style={miniValue(p)}>{t.contactEmail}</a>
          <div style={{ ...miniValue(p), marginTop: 6 }}>
            <a href={`tel:${t.contactPhone.replace(/\s/g, '')}`} style={{ color: 'inherit', textDecoration: 'none' }}>
              {t.contactPhone}
            </a>
          </div>
        </div>
        <div>
          <div style={miniLabel(p)}>{t.addressLabel}</div>
          <div style={miniValue(p)}>{t.addressValue}</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
          <div style={miniLabel(p)}>Voss Halal AS</div>
          <div style={miniValue(p)}>{t.colophonRule}</div>
        </div>
      </div>

      <div style={{
        marginTop: 'clamp(56px, 8vw, 96px)',
        paddingTop: 20, borderTop: `1px solid ${p.rule}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
        color: p.inkSoft,
      }}>
        <span>{t.colophonLeft}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, letterSpacing: '0.1em', textTransform: 'none', color: p.ink }}>
          Voss Halal
        </span>
        <span>{t.colophonRight}</span>
      </div>
    </footer>
  );
}

const miniLabel = (p) => ({
  fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
  color: p.inkSoft, marginBottom: 14,
});
const miniValue = (p) => ({
  fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.4,
  color: p.ink, textDecoration: 'none', display: 'block',
});

// ─── Chapter header (shared) ─────────────────────────
function ChapterHeader({ roman, label }) {
  const p = window.PALETTES.stone;
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 24,
      fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
      color: p.inkSoft,
    }}>
      <span style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 16, letterSpacing: '0.16em', color: p.ink,
      }}>
        {roman}.
      </span>
      <span style={{ width: 48, height: 1, background: p.ink, opacity: 0.5, alignSelf: 'center' }} />
      <span>{label}</span>
    </div>
  );
}

window.OnePager = OnePager;