// V1 — Editorial Index (v4)
// Editorial luxury direction; restraint, cultural-office posture.
// References: System Magazine, NOWNESS, Apartamento, Kaai Editions, Nieuwe Instituut.
// Mobile responsive via injected media queries.

const V1 = () => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [readMore, setReadMore] = React.useState(false);
  const scrollRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  const [activeIdx, setActiveIdx] = React.useState(-1);

  const sections = [
    { num: '01', title: 'Position', anchor: 'position' },
    { num: '02', title: 'Practice', anchor: 'practice' },
    { num: '03', title: 'Working on', anchor: 'working' },
    { num: '04', title: 'References', anchor: 'references' },
    { num: '05', title: 'By', anchor: 'by' },
    { num: '06', title: 'Contact', anchor: 'contact' },
  ];

  // Inject responsive + interaction CSS once.
  React.useEffect(() => {
    if (document.getElementById('bb-responsive')) return;
    const style = document.createElement('style');
    style.id = 'bb-responsive';
    style.textContent = `
      .bb-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .2s; }
      .bb-link:hover { opacity: 0.55; }
      .bb-menu-item { transition: color .3s ease, transform .3s ease; }
      .bb-menu-item:hover { transform: translateX(10px); }
      .bb-menu-item:hover .bb-menu-item-title { color: #0a0a0a; }
      .bb-menu-item:hover .bb-menu-num { color: #0a0a0a; }
      .bb-menu-num { transition: color .3s ease; }
      .bb-menu-item-title { transition: color .3s ease; }
      .bb-ref-block { transition: opacity .25s ease; }
      .bb-ref-block:hover { opacity: 0.7; }
      .bb-arrow { transition: transform .25s ease; display: inline-block; }
      .bb-arrow-host:hover .bb-arrow { transform: translateX(6px); }
      @media (max-width: 820px) {
        .bb-row { grid-template-columns: 1fr !important; gap: 22px !important; padding: 72px 24px !important; }
        .bb-row-label { padding-top: 0 !important; display: flex; align-items: baseline; gap: 16px; }
        .bb-row-label-caption { display: none !important; }
        .bb-row-content { max-width: 100% !important; }
        .bb-header { padding: 18px 24px !important; }
        .bb-hero { padding: 64px 24px 64px !important; }
        .bb-hero-logo-wrap { margin-bottom: 64px !important; }
        .bb-hero-logo { width: min(280px, 70vw) !important; }
        .bb-hero-est { margin-bottom: 40px !important; }
        .bb-hero-title { font-size: 36px !important; letter-spacing: -0.2px !important; }
        .bb-hero-sub { margin-top: 36px !important; max-width: 100% !important; }
        .bb-signal-title { font-size: 56px !important; letter-spacing: -1.4px !important; }
        .bb-signal-intro { font-size: 20px !important; margin-top: 32px !important; }
        .bb-signal-statement { margin-top: 56px !important; padding: 24px 0 !important; }
        .bb-signal-statement-item { font-size: 26px !important; letter-spacing: -0.4px !important; padding: 6px 0 !important; }
        .bb-signal-body { grid-template-columns: 1fr !important; gap: 24px !important; margin-top: 48px !important; }
        .bb-dispatch { padding: 32px 24px !important; }
        .bb-dispatch-table { grid-template-columns: 1fr !important; gap: 4px !important; }
        .bb-dispatch-table > span:nth-child(odd) { margin-top: 14px !important; }
        .bb-curatorial-grid { grid-template-columns: 1fr !important; }
        .bb-practice-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        .bb-partners { gap: 6px 14px !important; }
        .bb-partners-item { font-size: 18px !important; }
        .bb-partners-sep { display: none !important; }
        .bb-by-title { font-size: 28px !important; }
        .bb-contact-headline { font-size: 20px !important; }
        .bb-contact-email { font-size: 22px !important; }
        .bb-contact-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
        .bb-side-rail { display: none !important; }
        .bb-footer { padding: 32px 24px 40px !important; }
        .bb-menu-overlay { padding: 24px !important; }
        .bb-menu-nav { padding-left: 0 !important; }
        .bb-menu-item-title { font-size: 36px !important; }
        .bb-menu-footer { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
        .bb-references-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
        .bb-ref-label-row { display: flex; gap: 16px; align-items: baseline; }
        .bb-ref-body-large { font-size: 18px !important; }
      }
      @media (max-width: 480px) {
        .bb-hero-title { font-size: 28px !important; }
        .bb-signal-title { font-size: 40px !important; }
        .bb-signal-statement-item { font-size: 22px !important; }
        .bb-by-title { font-size: 24px !important; }
        .bb-contact-email { font-size: 18px !important; }
      }
    `;
    document.head.appendChild(style);
  }, []);

  // Scroll progress + active section tracking
  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      const max = el.scrollHeight - el.clientHeight;
      setProgress(max > 0 ? el.scrollTop / max : 0);
      const offsets = sections.map(s => {
        const t = el.querySelector('#' + s.anchor);
        return t ? t.offsetTop : Infinity;
      });
      let cur = -1;
      offsets.forEach((o, i) => { if (o - 120 <= el.scrollTop) cur = i; });
      setActiveIdx(cur);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const goTo = (id) => {
    const el = scrollRef.current;
    const target = id === 'top' ? { offsetTop: 0 } : (el && el.querySelector('#' + id));
    if (target) el.scrollTo({ top: target.offsetTop - 8, behavior: 'smooth' });
    setMenuOpen(false);
  };

  // Tokens
  const C = {
    ink: '#0a0a0a',
    body: '#3d3d3d',
    mute: '#8a8a8a',
    soft: '#b8b8b8',
    hair: '#e6e6e2',
    paper: '#f6f5f1',
    bg: '#ffffff',
  };

  const FONT = '"Helvetica Neue", Helvetica, Arial, sans-serif';
  const light = { fontFamily: FONT, fontWeight: 300 };
  const reg = { fontFamily: FONT, fontWeight: 400 };
  const lab = { fontFamily: FONT, fontWeight: 400, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase' };

  const Logo = ({ size = 1, style }) => (
    <img src="assets/buro-babet-logo.png" alt="buro babet"
      style={{ height: 14 * size, width: 'auto', display: 'block', ...style }} />
  );

  // Section row layout
  const Row = ({ id, num, label, caption, children, soft }) => (
    <section id={id} className="bb-row" style={{
      display: 'grid', gridTemplateColumns: '140px 1fr',
      gap: 80, padding: '120px 56px',
      borderTop: `1px solid ${C.hair}`,
      background: soft ? C.paper : 'transparent',
    }}>
      <div className="bb-row-label" style={{ paddingTop: 6 }}>
        <div style={{ ...lab, color: C.ink }}>{label}</div>
        <div style={{ ...lab, color: C.soft, marginTop: 4 }}>§ {num}</div>
        {caption && (
          <div className="bb-row-label-caption" style={{ ...light, fontSize: 12, color: C.mute, marginTop: 24, lineHeight: 1.6, maxWidth: 110 }}>
            {caption}
          </div>
        )}
      </div>
      <div className="bb-row-content" style={{ maxWidth: 880 }}>{children}</div>
    </section>
  );

  return (
    <div ref={scrollRef} style={{
      width: '100%', height: '100%', overflow: 'auto',
      background: C.bg, color: C.body,
      ...light, fontSize: 15, lineHeight: 1.75,
      position: 'relative',
    }}>
      <div id="top" />

      {/* HEADER */}
      <header className="bb-header" style={{
        position: 'sticky', top: 0, zIndex: 20,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '24px 40px',
        background: 'rgba(255,255,255,0.94)',
        backdropFilter: 'blur(8px)',
      }}>
        <button onClick={() => goTo('top')} style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          opacity: Math.min(1, Math.max(0, (progress * 100 - 4) / 6)),
          transition: 'opacity .25s ease-out',
          pointerEvents: progress * 100 > 4 ? 'auto' : 'none',
        }}><Logo /></button>

        <button onClick={() => setMenuOpen(true)} style={{
          background: 'none', border: 'none', font: 'inherit', cursor: 'pointer', padding: 0,
          ...lab, color: C.ink, letterSpacing: 2,
        }}>Menu</button>

        <div style={{
          position: 'absolute', left: 0, bottom: 0, height: 1,
          width: `${progress * 100}%`, background: C.ink,
        }} />
      </header>

      {/* HERO */}
      <section className="bb-hero" style={{
        padding: '80px 56px 80px',
        textAlign: 'center',
      }}>
        <div className="bb-hero-logo-wrap" style={{
          display: 'flex', justifyContent: 'center', marginBottom: 96,
          opacity: Math.max(0, 1 - progress * 14),
          transform: `translateY(${-progress * 240}px)`,
          willChange: 'opacity, transform',
        }}>
          <img className="bb-hero-logo" src="assets/buro-babet-logo.png" alt="buro babet"
            style={{ width: 'min(440px, 56vw)', height: 'auto', display: 'block' }} />
        </div>

        <div className="bb-hero-est" style={{ ...lab, color: C.mute, marginBottom: 56, letterSpacing: 3 }}>
          EST. 2025
        </div>

        <h1 className="bb-hero-title" style={{
          ...light, color: C.ink,
          fontSize: 64, lineHeight: 1.15, margin: 0,
          letterSpacing: -0.4, maxWidth: 920,
          marginLeft: 'auto', marginRight: 'auto',
        }}>
          We design cultural collaborations<br />
          <span style={{ color: C.mute }}>between artists, institutions,<br />
          and the brands worthy of them.</span>
        </h1>

        <p className="bb-hero-sub" style={{
          marginTop: 56, fontSize: 14, lineHeight: 1.8, color: C.body,
          maxWidth: 540, marginLeft: 'auto', marginRight: 'auto',
        }}>
          A creative studio for cultural patronage.
          We invent, curate, and produce work that translates cultural practice
          into brand direction, collaborations and moments.
        </p>
      </section>

      {/* §01 POSITION */}
      <Row id="position" num="01" label="Position" caption="On what we do, and refuse to.">
        <p style={{ margin: 0, fontSize: 16, lineHeight: 1.85, color: C.body }}>
          <span style={{ ...lab, color: C.soft, marginRight: 12, verticalAlign: '0.05em' }}>i.</span>
          True patronage changes both sides. We work with brands that want to be
          changed by culture, not photographed next to it. We work with institutions
          that want resource without dilution. We translate between them.
        </p>
        <p style={{ margin: '36px 0 0', fontSize: 16, lineHeight: 1.85, color: C.body }}>
          <span style={{ ...lab, color: C.soft, marginRight: 12, verticalAlign: '0.05em' }}>ii.</span>
          We choose carefully. We don't do logos on walls, or names on programmes,
          or campaigns disguised as culture. We don't decorate, we don't broker.
        </p>
      </Row>

      {/* §02 PRACTICE */}
      <Row id="practice" num="02" label="Practice" caption="The format is the work." soft>
        <p style={{ margin: 0, fontSize: 16, lineHeight: 1.85, color: C.body }}>
          We design the format. We choose the participants. We protect both sides.
          We work where culture and commerce meet on equal terms, not where they
          pretend to.
        </p>
        <div className="bb-practice-grid" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 40 }}>
          {[
            ['Strategy', 'Direction, positioning, and the architecture of a collaboration.'],
            ['Production', 'Programmes, exhibitions, shows, from concept to opening.'],
            ['Mediation', 'Between artists, institutions, and the brands worthy of them.'],
          ].map(([k, v], i) => (
            <div key={i}>
              <div style={{ ...lab, color: C.ink, paddingBottom: 12, borderBottom: `1px solid ${C.soft}` }}>
                {String(i + 1).padStart(2, '0')} — {k}
              </div>
              <p style={{ ...light, fontSize: 14, lineHeight: 1.65, color: C.body, margin: '14px 0 0' }}>{v}</p>
            </div>
          ))}
        </div>

      </Row>

      {/* §03 SIGNAL */}
      <Row id="working" num="03" label="Working on" caption="Currently in motion.">
        <div style={{ ...lab, color: C.mute }}>№ 01 / 26 · Group exhibition</div>

        <h3 className="bb-signal-title" style={{
          ...light, color: C.ink,
          fontSize: 96, lineHeight: 0.96, letterSpacing: -2.4,
          margin: '24px 0 0',
        }}>
          SIGNAL '26
        </h3>

        <p className="bb-signal-intro" style={{
          margin: '48px 0 0',
          ...light, fontSize: 24, lineHeight: 1.45, color: C.ink,
          letterSpacing: -0.2, maxWidth: 720,
        }}>
          Where the industry meets the next gen culture shapers.
        </p>

        {/* Editorial statement */}
        <div className="bb-signal-statement" style={{
          marginTop: 88, padding: '36px 0',
          borderTop: `1px solid ${C.hair}`, borderBottom: `1px solid ${C.hair}`,
        }}>
          {[
            { line: 'One night.', tone: 'body' },
            { line: 'Twenty voices.', tone: 'body' },
            { line: 'Under the ground of Museumplein.', tone: 'ink' },
          ].map((item, i) => (
            <div key={i} className="bb-signal-statement-item" style={{
              ...light, color: item.tone === 'ink' ? C.ink : C.body,
              fontSize: 40, lineHeight: 1.22, letterSpacing: -0.6,
              padding: '10px 0',
            }}>
              {item.line}
            </div>
          ))}
        </div>

        {/* Body */}
        <div className="bb-signal-body" style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64,
        }}>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.9, color: C.body }}>
            A three-hour exhibition bringing together twenty of the most urgent
            newly graduated makers from Dutch art academies.
          </p>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.9, color: C.body }}>
            On Friday 16 October 2026, an underground bus garage beneath
            Amsterdam's Museumplein transforms into a temporary landscape of
            contemporary culture, presenting work across visual art, fashion,
            photography, digital practice, jewellery, spatial design and
            performance.
          </p>
        </div>

        <p style={{
          margin: '40px 0 0', fontSize: 16, lineHeight: 1.9, color: C.body,
          maxWidth: 760,
        }}>
          SIGNAL '26 exists at the exact moment before practices become fixed.
          Before institutional framing. Before market positioning.
        </p>

        {/* Read dispatch */}
        <button onClick={() => setReadMore(!readMore)} style={{
          marginTop: 64, padding: 0, background: 'none',
          borderBottom: `1px solid ${C.ink}`, borderTop: 'none', borderLeft: 'none', borderRight: 'none',
          font: 'inherit', cursor: 'pointer',
          ...lab, color: C.ink, paddingBottom: 4, letterSpacing: 2,
        }}>
          {readMore ? 'Close dispatch' : 'Read the dispatch'}
        </button>

        {/* Expanded dispatch */}
        <div style={{
          maxHeight: readMore ? 4000 : 0, overflow: 'hidden',
          transition: 'max-height .65s ease',
        }}>
          <div className="bb-dispatch" style={{
            marginTop: 40, padding: '48px 52px',
            background: C.paper, border: `1px solid ${C.hair}`,
          }}>
            {/* Why */}
            <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>01 · Why</div>
            <p style={{ margin: '18px 0 0', ...light, fontSize: 19, lineHeight: 1.75, color: C.ink, maxWidth: 720, letterSpacing: -0.1 }}>
              SIGNAL '26 was created around a simple belief: the moment of
              graduation is not an ending, but a beginning.
            </p>
            <p style={{ margin: '20px 0 0', fontSize: 16, lineHeight: 1.9, color: C.body, maxWidth: 720 }}>
              It is the point where new ideas, fresh perspectives and emerging
              practices enter the wider cultural conversation.
            </p>
            <p style={{ margin: '20px 0 0', fontSize: 16, lineHeight: 1.9, color: C.body, maxWidth: 720 }}>
              Bringing together twenty of the most compelling newly graduated
              makers from Dutch art academies, SIGNAL creates a curated meeting
              point between the next generation of artists and the broader
              cultural field: curators, institutions, collectors, creative
              directors, press and public.
            </p>
            <p style={{ margin: '20px 0 0', fontSize: 16, lineHeight: 1.9, color: C.body, maxWidth: 720 }}>
              Not as another graduation show, but as a concentrated moment of
              discovery, visibility and exchange.
            </p>
            <p style={{ margin: '20px 0 0', fontSize: 16, lineHeight: 1.9, color: C.body, maxWidth: 720 }}>
              A place where new practices are encountered early, meaningful
              connections are made, and the artists shaping what comes next meet
              the worlds around them.
            </p>

            {/* Info block */}
            <div className="bb-dispatch-table" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '160px 1fr', gap: 14 }}>
              {[
                ['Date', 'Friday 16 October 2026'],
                ['Duration', 'Three hours.'],
                ['Site', 'Underground bus garage, beneath Museumplein, Amsterdam. Never opened to the public before.'],
                ['Format', 'Exhibition, three rounds of speed artist talks, printed index.'],
                ['Disciplines', 'Visual art, fashion, photography, digital practice, jewellery, spatial design, cinematography.'],
                ['Audience', 'Creative directors, curators, institutions, press, public.'],
              ].map(([k, v]) => (
                <React.Fragment key={k}>
                  <span style={{ ...lab, color: C.mute }}>{k}</span>
                  <span style={{ ...light, fontSize: 14, lineHeight: 1.7, color: C.body }}>{v}</span>
                </React.Fragment>
              ))}
            </div>

            {/* Curatorial board */}
            <div style={{ marginTop: 56 }}>
              <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>02 · Curatorial board</div>
              <p style={{ margin: '18px 0 0', fontSize: 16, lineHeight: 1.9, color: C.body, maxWidth: 720 }}>
                The final selection of twenty is made together with an independent
                board of ten professionals from across visual art, fashion,
                design, architecture and institutional practice. Among them:
              </p>
              <div className="bb-curatorial-grid" style={{
                marginTop: 24,
                display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 32, rowGap: 0,
              }}>
                {[
                  'Raquel van Haver',
                  'Tess van Zalinge',
                  'Samir Bantal',
                  'Marina Elenskaya',
                  'Esmay Wagemans',
                  'Jochem Leegstra',
                  'Olivier Varossieau',
                  'Emma Waslander',
                  'Fidelio Faustino Ferrier-Oliviera',
                ].map((n, i) => (
                  <div key={n} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                    padding: '14px 0', borderTop: `1px solid ${C.hair}`,
                  }}>
                    <span style={{ ...light, fontSize: 15, color: C.ink }}>{n}</span>
                    <span style={{ ...lab, color: C.soft }}>{String(i + 1).padStart(2, '0')}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Partners */}
            <div style={{ marginTop: 56 }}>
              <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>03 · Partners</div>
              <div className="bb-partners" style={{
                marginTop: 28,
                display: 'flex', flexWrap: 'wrap', alignItems: 'baseline',
              }}>
                {['ANDSTAAT', 'Gemeente Amsterdam', 'Ganbaroo', 'Q-Park'].map((p, i, arr) => (
                  <React.Fragment key={p}>
                    <span className="bb-partners-item" style={{ ...light, fontSize: 22, color: C.ink, letterSpacing: -0.2 }}>{p}</span>
                    {i < arr.length - 1 && (
                      <span className="bb-partners-sep" style={{ ...light, color: C.soft, padding: '0 20px', fontSize: 22 }}>—</span>
                    )}
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Row>

      {/* §04 REFERENCES */}
      <Row id="references" num="04" label="References" caption="Encounters and fragments.">
        {/* Block 1 — Observation (clickable) */}
        <a href="https://www.linkedin.com/posts/babette-kolff-2ab77b154_de-vraag-die-ik-het-vaakst-krijg-van-afgestudeerde-share-7459243255428243456-Rs_j" target="_blank" rel="noopener noreferrer"
          className="bb-ref-block bb-arrow-host"
          style={{ display: 'block', textDecoration: 'none', color: 'inherit', paddingBottom: 56, borderBottom: `1px solid ${C.hair}` }}>
          <div className="bb-references-grid" style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 40 }}>
            <div className="bb-ref-label-row">
              <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>Observation</div>
              <div style={{ ...lab, color: C.soft, marginTop: 6, letterSpacing: 2 }}>01</div>
            </div>
            <div>
              <p className="bb-ref-body-large" style={{ margin: 0, ...light, fontSize: 22, lineHeight: 1.5, color: C.ink, letterSpacing: -0.2, maxWidth: 640 }}>
                New cultural movements rarely emerge in isolation. They take
                shape through visibility, conversation and the right encounters.
              </p>
              <div style={{ marginTop: 28, ...lab, color: C.mute, letterSpacing: 2 }}>
                Read on LinkedIn <span className="bb-arrow">↗</span>
              </div>
            </div>
          </div>
        </a>

        {/* Block 2 — Quoted */}
        <div style={{ padding: '56px 0', borderBottom: `1px solid ${C.hair}` }}>
          <div className="bb-references-grid" style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 40 }}>
            <div className="bb-ref-label-row">
              <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>Quoted in conversation</div>
              <div style={{ ...lab, color: C.soft, marginTop: 6, letterSpacing: 2 }}>02</div>
            </div>
            <div>
              <p className="bb-ref-body-large" style={{
                margin: 0, ...light, fontSize: 24, lineHeight: 1.45, color: C.ink, letterSpacing: -0.2, maxWidth: 720,
                fontStyle: 'italic',
              }}>
                "buro babet will connect the right people, no matter what
                discipline — combining expertise in reaching targeted audiences
                with thoughtful sensitivity to social topics and issues."
              </p>
              <div style={{ marginTop: 24, ...lab, color: C.soft, letterSpacing: 2 }}>
                — Curator, Amsterdam Museum
              </div>
            </div>
          </div>
        </div>

        {/* Block 3 — Reading (clickable) */}
        <a href="https://www.volkskrant.nl/columns-opinie/opinie-kunstenaars-kom-uit-jullie-bubbel-en-durf-de-echte-wereld-te-omarmen~b02b5be3/" target="_blank" rel="noopener noreferrer"
          className="bb-ref-block bb-arrow-host"
          style={{ display: 'block', textDecoration: 'none', color: 'inherit', paddingTop: 56 }}>
          <div className="bb-references-grid" style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 40 }}>
            <div className="bb-ref-label-row">
              <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>Reading</div>
              <div style={{ ...lab, color: C.soft, marginTop: 6, letterSpacing: 2 }}>03</div>
            </div>
            <div>
              <p className="bb-ref-body-large" style={{
                margin: 0, ...light, fontSize: 22, lineHeight: 1.5, color: C.ink, letterSpacing: -0.2, maxWidth: 640,
                fontStyle: 'italic',
              }}>
                "If art wants broader relevance, it cannot remain in
                conversation only with itself."
              </p>
              <div style={{ marginTop: 28, ...lab, color: C.mute, letterSpacing: 2 }}>
                de Volkskrant · Jurriaan Wesselink <span className="bb-arrow">↗</span>
              </div>
            </div>
          </div>
        </a>
      </Row>

      {/* §05 BY */}
      <Row id="by" num="05" label="By" caption="Lineage." soft>
        <div style={{ maxWidth: 760 }}>
          <h3 className="bb-by-title" style={{ ...light, color: C.ink, fontSize: 36, lineHeight: 1.2, margin: 0, letterSpacing: -0.4 }}>
            Founded by Babette Kolff.
          </h3>
          <p style={{ margin: '28px 0 0', fontSize: 16, lineHeight: 1.85, color: C.body }}>
            buro babet was started for the work that kept happening in the
            margins of other people's projects. Cultural collaborations
            that meant real exchange, not decoration. A place built around
            them, rather than a place that tolerated them.
          </p>
          <p style={{ margin: '20px 0 0', fontSize: 16, lineHeight: 1.85, color: C.body }}>
            Earlier practice spanned institutions
            <span style={{ color: C.mute }}> (Amsterdam Museum, Boijmans Depot, NXT Museum)</span>,
            fashion <span style={{ color: C.mute }}>(Amsterdam Fashion Week, Copenhagen Fashion Week, Salone del Mobile)</span>,
            and brands <span style={{ color: C.mute }}>(Sisley Paris, Hennessy, Hunkemöller, Keune)</span>.
          </p>
        </div>
      </Row>

      {/* §06 CONTACT */}
      <Row id="contact" num="06" label="Contact" caption="A letter, not a form.">
        <p className="bb-contact-headline" style={{ margin: 0, ...light, color: C.ink, fontSize: 28, lineHeight: 1.4, letterSpacing: -0.2, maxWidth: 760 }}>
          Working with us starts with a letter. If your brand or institution is
          ready for cultural collaboration that means something,
          <span style={{ color: C.mute }}> not the kind that's done before, decorated, and forgotten, </span>
          write us.
        </p>

        <a href="mailto:info@burobabet.com"
          className="bb-arrow-host"
          style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            marginTop: 56, padding: '24px 0',
            borderTop: `1px solid ${C.ink}`, borderBottom: `1px solid ${C.ink}`,
            color: C.ink, textDecoration: 'none',
          }}>
          <span className="bb-contact-email" style={{ ...light, fontSize: 32, letterSpacing: -0.3 }}>info@burobabet.com</span>
          <span className="bb-arrow" style={{ fontSize: 22 }}>↗</span>
        </a>

        <div className="bb-contact-grid" style={{
          marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          <div>
            <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>Studio</div>
            <a href="https://www.google.com/maps/search/?api=1&query=Eerste+Atjehstraat+56A+Amsterdam"
              target="_blank" rel="noopener noreferrer"
              className="bb-arrow-host"
              style={{ ...light, fontSize: 14, color: C.ink, marginTop: 8, textDecoration: 'none', display: 'block', lineHeight: 1.6 }}>
              Eerste Atjehstraat 56A<br />
              Amsterdam, NL <span className="bb-arrow">↗</span>
            </a>
          </div>
          <div>
            <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>Hours</div>
            <div style={{ ...light, fontSize: 14, color: C.ink, marginTop: 8 }}>By appointment</div>
          </div>
          <div>
            <div style={{ ...lab, color: C.mute, letterSpacing: 2 }}>Instagram</div>
            <a href="https://www.instagram.com/burobabet/" target="_blank" rel="noopener noreferrer"
              className="bb-arrow-host"
              style={{ ...light, fontSize: 14, color: C.ink, marginTop: 8, textDecoration: 'none', display: 'block' }}>
              @burobabet <span className="bb-arrow">↗</span>
            </a>
          </div>
        </div>
      </Row>

      {/* FOOTER */}
      <footer className="bb-footer" style={{
        padding: '32px 40px 48px',
        borderTop: `1px solid ${C.hair}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <Logo size={0.85} />
        <button onClick={() => goTo('top')} style={{
          background: 'none', border: 'none', font: 'inherit', cursor: 'pointer',
          ...lab, color: C.ink, letterSpacing: 2,
        }}>↑ Top</button>
      </footer>

      {/* Side rail */}
      <div className="bb-side-rail" style={{
        position: 'fixed', right: 14, top: '50%', transform: 'translateY(-50%)',
        display: 'flex', flexDirection: 'column', gap: 6, zIndex: 10,
      }}>
        {sections.map((s, i) => (
          <button key={s.anchor} onClick={() => goTo(s.anchor)} title={`${s.num} · ${s.title}`} style={{
            width: i === activeIdx ? 14 : 6, height: 1,
            background: i <= activeIdx ? C.ink : C.soft,
            border: 'none', cursor: 'pointer', padding: 0,
            transition: 'all .25s',
          }} />
        ))}
      </div>

      {/* MENU — redesigned: editorial, restrained, no grid box feel */}
      {menuOpen && (
        <div className="bb-menu-overlay" style={{
          position: 'fixed', inset: 0, zIndex: 50,
          background: C.bg, color: C.ink,
          padding: '32px 56px',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Logo />
            <button onClick={() => setMenuOpen(false)} style={{
              background: 'none', border: 'none', font: 'inherit', cursor: 'pointer', padding: 0,
              ...lab, color: C.ink, letterSpacing: 2,
            }}>Close</button>
          </div>

          <nav className="bb-menu-nav" style={{
            marginTop: 'auto', marginBottom: 'auto',
            maxWidth: 920, width: '100%',
            paddingLeft: 'min(120px, 8vw)',
            display: 'grid', gap: 24,
          }}>
            {sections.map((s, i) => (
              <button key={s.anchor} onClick={() => goTo(s.anchor)}
                className="bb-menu-item"
                style={{
                  display: 'block',
                  width: '100%', textAlign: 'left',
                  padding: 0,
                  background: 'none', cursor: 'pointer', border: 'none',
                  color: C.body, font: 'inherit',
                }}>
                <span className="bb-menu-num" style={{ ...lab, color: C.soft, display: 'block', marginBottom: 8, letterSpacing: 3 }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span className="bb-menu-item-title" style={{ ...light, color: C.mute, fontSize: 56, letterSpacing: -0.8, lineHeight: 1, display: 'block' }}>
                  {s.title}
                </span>
              </button>
            ))}
          </nav>

          <div className="bb-menu-footer" style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            ...lab, color: C.mute, letterSpacing: 1.5,
          }}>
            <span>Amsterdam, NL · By appointment</span>
            <a href="mailto:info@burobabet.com" style={{ color: C.ink, textDecoration: 'none', letterSpacing: 0.5, textTransform: 'none' }}>info@burobabet.com</a>
          </div>
        </div>
      )}
    </div>
  );
};

window.V1 = V1;
