// V2 Brouwerij (verhaal) + Vrijwilligers
function V2BrouwerijPage({ onNavigate }) {
  return (
    <main style={{ background: V2.paper }}>
      <section style={{ background: `linear-gradient(rgba(28,37,48,0.82), rgba(28,37,48,0.88)), url('./assets/foto/installatie-2.jpeg') center/cover`, color: V2.cream, padding: '96px 32px', borderBottom: `3px double ${V2.koper}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <Kicker style={{ justifyContent: 'center' }}>Ons verhaal</Kicker>
          <h1 style={{ fontSize: 54, margin: '16px 0 14px' }}>Een stad brouwen</h1>
          <p style={{ fontSize: 19, lineHeight: 1.7, opacity: 0.88, maxWidth: 620, margin: '0 auto' }}>
            Een stad is meer dan woningen en wegen. Een stad leeft door cultuur, verhalen en
            ontmoetingsplaatsen. Daarom brouwt Almere haar eigen bier.
          </p>
        </div>
      </section>

      <section style={{ padding: '84px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <Reveal>
            <Kicker style={{ justifyContent: 'flex-start' }}>De oorsprong</Kicker>
            <h2 style={{ fontSize: 34, margin: '14px 0 16px', color: V2.navy }}>Het begon met een raadsbesluit</h2>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: V2.navy }}>
              De gemeenteraad van Almere besloot dat een groeiende stad een eigen stadsbrouwerij
              verdiende. Vanuit die gedachte ontstond de brouwerij op Stadslandgoed De Kemphaan.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: V2.navy }}>
              Na moeilijke jaren werd de brouwerij voortgezet door vrijwilligers. Sindsdien wordt
              de brouwerij volledig gedragen door vrijwilligers die hun tijd en kennis inzetten.
              Brouwers, techneuten, verkopers en verhalenvertellers.
            </p>
          </Reveal>
          <Reveal style={{ position: 'relative' }}>
            <img src="./assets/foto/brouwerij-gebouw.png" alt="Het gebouw van de brouwerij" style={{ width: '100%', borderRadius: 6, border: `6px solid #FFFDF6`, boxShadow: '0 18px 50px rgba(36,47,63,0.25)' }} />
            <Stempel size={112} rotate={6} style={{ position: 'absolute', bottom: -22, left: -18, background: V2.paper }}>
              Sinds het<br />raadsbesluit
            </Stempel>
          </Reveal>
        </div>
      </section>

      {/* Fotostrip ketels */}
      <section style={{ padding: '0 32px 84px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 16 }}>
            <img src="./assets/foto/ketels-koper.png" alt="De koperen brouwketels" style={{ width: '100%', height: 260, objectFit: 'cover', borderRadius: 5, border: `5px solid #FFFDF6`, boxShadow: '0 8px 24px rgba(36,47,63,0.16)' }} />
            <img src="./assets/foto/gisttanks.png" alt="Brouwketel en gisttanks" style={{ width: '100%', height: 260, objectFit: 'cover', borderRadius: 5, border: `5px solid #FFFDF6`, boxShadow: '0 8px 24px rgba(36,47,63,0.16)', transform: 'rotate(0.6deg)' }} />
            <img src="./assets/foto/brouwzaal-installatie.png" alt="De brouwinstallatie" style={{ width: '100%', height: 260, objectFit: 'cover', borderRadius: 5, border: `5px solid #FFFDF6`, boxShadow: '0 8px 24px rgba(36,47,63,0.16)', transform: 'rotate(-0.6deg)' }} />
          </div>
          <div style={{ fontSize: 14, color: 'var(--text-muted)', marginTop: 12, textAlign: 'center', fontStyle: 'italic' }}>
            De koperen ketels van Stadsbrouwerij Almere, het begin van elk bier.
          </div>
        </div>
      </section>

      <section style={{ background: V2.navyDeep, color: V2.cream, padding: '84px 32px', borderTop: `3px double ${V2.koper}`, borderBottom: `3px double ${V2.koper}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <Reveal>
            <img src="./assets/foto/ketels-koper.png" alt="De koperen brouwketels" style={{ width: '100%', borderRadius: 6, border: `1px solid ${V2.koper}44`, boxShadow: '0 24px 60px rgba(0,0,0,0.45)' }} />
          </Reveal>
          <Reveal>
            <Kicker style={{ justifyContent: 'flex-start' }}>Het ambacht</Kicker>
            <h2 style={{ fontSize: 34, margin: '14px 0 16px' }}>Het ambacht staat centraal</h2>
            <p style={{ fontSize: 17, lineHeight: 1.75, opacity: 0.87 }}>
              Wij brouwen bier als ambacht. Met natuurlijke ingrediënten, zorgvuldig geselecteerde
              moutsoorten en geduld. Ieder recept wordt geproefd, besproken en verfijnd tot het klopt.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.75, opacity: 0.87 }}>
              Onze bieren dragen de namen van de stad: Pampus, Weerwater, Oostvaarders, Overgooi.
              Eén uitzondering bevestigt de regel — Oeps, het bier dat ontstond door een vergissing.
            </p>
            <V2Button variant="koper" style={{ marginTop: 10 }} onClick={() => onNavigate('Bieren')}>Ontdek de bieren</V2Button>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '84px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <Reveal>
            <Kicker style={{ justifyContent: 'flex-start' }}>De mensen</Kicker>
            <h2 style={{ fontSize: 34, margin: '14px 0 16px', color: V2.navy }}>Gedragen door mensen</h2>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: V2.navy }}>
              Onze vrijwilligers komen uit verschillende beroepen en leeftijden. Wat hen verbindt is
              nieuwsgierigheid naar bier, techniek, smaak en het ambacht.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: V2.navy }}>
              Iedereen leert van elkaar. Iedereen mag vragen stellen. Iedereen draagt kennis over.
            </p>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('Vrijwilligers'); }} style={{ fontWeight: 700, color: V2.rood }}>Meebouwen aan de brouwerij →</a>
          </Reveal>
          <Reveal>
            <img src="./assets/foto/leren-brouwen.jpg" alt="Samen brouwen" style={{ width: '100%', borderRadius: 6, border: `6px solid #FFFDF6`, boxShadow: '0 18px 50px rgba(36,47,63,0.25)', transform: 'rotate(0.8deg)' }} />
          </Reveal>
        </div>
      </section>

      <section style={{ background: `linear-gradient(rgba(28,37,48,0.8), rgba(28,37,48,0.88)), url('./assets/foto/proeflokaal.png') center/cover`, color: V2.cream, padding: '96px 32px', textAlign: 'center' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <Reveal>
            <Kicker style={{ justifyContent: 'center' }}>Vooruitblik</Kicker>
            <h2 style={{ fontSize: 34, margin: '16px 0 16px' }}>Waar wij naartoe werken</h2>
            <p style={{ fontSize: 18, lineHeight: 1.75, opacity: 0.87 }}>
              Wij willen een herkenbare culturele organisatie binnen Almere zijn. Op termijn zien wij
              een brouwerij die verbonden is aan een ontmoetingsplek — een proeflokaal waar stad,
              verhaal en bier samenkomen.
            </p>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, marginTop: 26, color: V2.koperLicht }}>Drink beter, niet meer.</div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}
window.V2BrouwerijPage = V2BrouwerijPage;

function V2VrijwilligersPage() {
  const rollen = [
    ['Brouwer', 'Meedraaien op brouwdagen: schroten, maischen, koken, vergisten.'],
    ['Techniek', 'Installatie, leidingwerk en onderhoud van de brouwzaal.'],
    ['Verkoop & events', 'Proeverijen, rondleidingen en markten in de stad.'],
    ['Verhalenvertellers', 'Communicatie, geschiedenis en het verhaal van Almere.'],
  ];
  return (
    <main style={{ background: V2.paper }}>
      <section style={{ background: V2.navyDeep, color: V2.cream, padding: '72px 32px', borderBottom: `3px double ${V2.koper}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <Kicker style={{ justifyContent: 'center' }}>Meebrouwen</Kicker>
          <h1 style={{ fontSize: 48, margin: '14px 0 12px' }}>Bouw mee aan de brouwerij</h1>
          <p style={{ fontSize: 18, opacity: 0.85, maxWidth: 560, margin: '0 auto' }}>
            De brouwerij wordt volledig gedragen door vrijwilligers. Iedereen leert van elkaar,
            iedereen draagt kennis over.
          </p>
        </div>
      </section>
      <section style={{ padding: '72px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {rollen.map(([titel, tekst]) => (
            <Reveal key={titel}>
              <div style={{ background: '#FFFDF6', border: '1px solid var(--border-subtle)', borderTop: `4px solid ${V2.koper}`, borderRadius: 5, padding: '26px 22px', height: '100%', boxSizing: 'border-box' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 21, color: V2.navy, marginBottom: 8 }}>{titel}</div>
                <div style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--text-muted)' }}>{tekst}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
      <section style={{ padding: '0 32px 84px' }}>
        <div style={{ maxWidth: 640, margin: '0 auto', background: '#FFFDF6', border: `3px double ${V2.koper}`, borderRadius: 6, padding: '48px 44px', textAlign: 'center' }}>
          <h2 style={{ fontSize: 28, color: V2.navy, margin: '0 0 10px' }}>Meebrouwen of vragen?</h2>
          <p style={{ color: 'var(--text-muted)', margin: '0 0 26px', fontSize: 16, lineHeight: 1.65 }}>
            Stuur ons een e-mail en vertel kort wie je bent en waar je enthousiast van wordt.
          </p>
          <a href="mailto:info@stadsbrouwerijalmere.nl" style={{ display: 'inline-block', fontFamily: 'var(--font-display)', fontSize: 21, color: V2.rood, fontWeight: 600 }}>info@stadsbrouwerijalmere.nl</a>
        </div>
      </section>
    </main>
  );
}
const v2Input = {
  fontFamily: 'var(--font-body)', fontSize: 16, padding: '13px 16px', borderRadius: 4,
  border: '1px solid var(--border-subtle)', background: '#fff', color: 'var(--text-body)', outline: 'none',
};
window.V2VrijwilligersPage = V2VrijwilligersPage;