// V2 Home — donker & sfeervol, vintage accenten
function V2HomePage({ onNavigate }) {
  const bieren = window.SBA_BIEREN;
  return (
    <main>
      {/* Hero — donker met fles-portret */}
      <section style={{ background: `linear-gradient(100deg, rgba(28,37,48,0.94) 38%, rgba(28,37,48,0.5)), url('./assets/foto/tappen.png') right center/cover`, color: V2.cream, position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '110px 32px 120px', display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 40, alignItems: 'center' }}>
          <Reveal>
            <Kicker style={{ justifyContent: 'flex-start' }}>Sinds het raadsbesluit · Almere</Kicker>
            <h1 style={{ fontSize: 62, margin: '20px 0 22px', lineHeight: 1.08, textShadow: '0 2px 20px rgba(0,0,0,0.4)' }}>
              Bier met het<br />karakter van<br /><span style={{ color: V2.koperLicht }}>onze stad.</span>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.65, opacity: 0.88, maxWidth: 460, margin: '0 0 34px' }}>
              In de koperen ketels aan het Kemphaanpad brouwen wij ambachtelijke bieren,
              vernoemd naar de plekken van Almere — van Pampus tot Weerwater.
            </p>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              <V2Button variant="koper" onClick={() => onNavigate('Bieren')}>Ontdek onze bieren</V2Button>
              <V2Button variant="lijn" onClick={() => onNavigate('Brouwerij')}>Ons verhaal</V2Button>
            </div>
          </Reveal>
          <Reveal style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <img src="./assets/foto/fles-portret.jpg" alt="Fles Stadsbrouwerij Almere" style={{ width: 300, borderRadius: 6, boxShadow: '0 40px 80px rgba(0,0,0,0.55)', transform: 'rotate(2deg)', border: `1px solid ${V2.koper}55` }} />
            <div style={{ position: 'absolute', bottom: -18, left: 30, background: 'rgba(28,37,48,0.88)', border: `1px solid ${V2.koper}`, borderRadius: 3, padding: '8px 18px', color: V2.koperLicht, fontWeight: 700, fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', transform: 'rotate(-2deg)' }}>
              Ambachtelijk gebrouwen
            </div>
          </Reveal>
        </div>
        <div style={{ height: 3, background: `linear-gradient(90deg, transparent, ${V2.koper}, transparent)` }}></div>
      </section>

      {/* Bierenrij op papier */}
      <section style={{ background: V2.paper, padding: '84px 32px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <Reveal style={{ textAlign: 'center', marginBottom: 48 }}>
            <Kicker style={{ justifyContent: 'center' }}>Het assortiment</Kicker>
            <h2 style={{ fontSize: 40, margin: '14px 0 10px', color: V2.navy }}>Zeven bieren, één stad</h2>
            <p style={{ fontSize: 17, color: 'var(--text-muted)', maxWidth: 540, margin: '0 auto' }}>
              Elk bier draagt de naam van een plek uit Almere. Eén uitzondering bevestigt de regel.
            </p>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
            {bieren.slice(0, 4).map((b, i) => <V2BeerTile key={b.key} bier={b} index={i} onClick={() => onNavigate('Bieren', b.key)} />)}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, marginTop: 22, maxWidth: 880, marginLeft: 'auto', marginRight: 'auto' }}>
            {bieren.slice(4).map((b, i) => <V2BeerTile key={b.key} bier={b} index={i + 4} onClick={() => onNavigate('Bieren', b.key)} />)}
          </div>
          <Reveal style={{ textAlign: 'center', marginTop: 44 }}>
            <V2Button variant="donker" onClick={() => onNavigate('Bieren')}>Bekijk alle bieren</V2Button>
          </Reveal>
        </div>
      </section>

      {/* Proefglas */}
      <section style={{ background: V2.paper, padding: '84px 32px', borderTop: `1px solid var(--border-subtle)` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 60, alignItems: 'center' }}>
          <Reveal style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <img src="./assets/foto/proefglas.png" alt="Het glas van Stadsbrouwerij Almere" style={{ width: '100%', maxWidth: 300, filter: 'drop-shadow(0 22px 30px rgba(36,47,63,0.35))' }} />
          </Reveal>
          <Reveal>
            <Kicker style={{ justifyContent: 'flex-start' }}>De beleving</Kicker>
            <h2 style={{ fontSize: 36, margin: '14px 0 16px', color: V2.navy }}>Een glas dat het bier laat spreken</h2>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: V2.navy }}>
              Een bijzonder bier verdient aandacht — voor de smaak, de geur, de schuimkraag
              en het verhaal erachter. Daarom schenken wij onze bieren in een speciaal glas,
              ontworpen door internationaal biersommelier Ben Vinken.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: V2.navy }}>
              De karakteristieke schuimknik houdt de schuimkraag mooi intact en bewaart de aroma's
              langer in het glas — juist in die kraag zit een groot deel van de smaakbeleving.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: V2.navy, fontStyle: 'italic' }}>
              Neem dus eerst de tijd om te ruiken voordat je de eerste slok neemt. Zo ontdek je
              mout, hop, gist en kruiden zoals de brouwer ze bedoeld heeft.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Verhaal-band donker */}
      <section style={{ background: V2.navyDeep, color: V2.cream, padding: '92px 32px', borderTop: `3px double ${V2.koper}`, borderBottom: `3px double ${V2.koper}` }}>
        <div style={{ maxWidth: 1200, 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: 38, margin: '16px 0 18px' }}>Geboren uit een raadsbesluit,<br />gedragen door vakmanschap</h2>
            <p style={{ fontSize: 17, lineHeight: 1.75, opacity: 0.85 }}>
              De gemeenteraad van Almere besloot dat een groeiende stad een eigen stadsbrouwerij
              verdiende. In de koperen ketels van Stadsbrouwerij Almere wordt sindsdien ieder bier
              met zorg gebrouwen, geproefd en verfijnd. Kwaliteit boven kwantiteit.
            </p>
            <div style={{ display: 'flex', gap: 18, alignItems: 'center', marginTop: 26 }}>
              <V2Button variant="koper" onClick={() => onNavigate('Brouwerij')}>Lees ons verhaal</V2Button>
              <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('Vrijwilligers'); }} style={{ color: V2.koperLicht, fontWeight: 600 }}>Meebrouwen? →</a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Bezoek op papier */}
      <section style={{ background: V2.paper, padding: '84px 32px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <Reveal>
            <Kicker style={{ justifyContent: 'flex-start' }}>Kom langs</Kicker>
            <h2 style={{ fontSize: 36, margin: '14px 0 16px', color: V2.navy }}>Bezoek de brouwerij</h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: V2.navy }}>
              Je vindt ons op Stadslandgoed De Kemphaan, aan de rand van het Almeerderhout.
              Kom langs voor een rondleiding of proeverij.
            </p>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, margin: '10px 0 26px', color: V2.navy }}>
              Kemphaanpad 4 · 1358 AC Almere
            </div>
            <V2Button variant="donker" onClick={() => onNavigate('Bieren')}>Bekijk het assortiment</V2Button>
          </Reveal>
          <Reveal style={{ position: 'relative' }}>
            <img src="./assets/foto/kemphaan-gebouw.png" alt="De Kemphaan" style={{ width: '100%', borderRadius: 6, aspectRatio: '5/3', objectFit: 'cover', border: `6px solid ${V2.cream}`, boxShadow: '0 18px 50px rgba(36,47,63,0.25)' }} />
            <Stempel size={110} rotate={7} color={V2.rood} style={{ position: 'absolute', top: -24, right: 18, background: V2.paper }}>
              De<br />Kemphaan<br />Almere
            </Stempel>
          </Reveal>
        </div>
      </section>
    </main>
  );
}
window.V2HomePage = V2HomePage;

// Bier-tegel: etiketkleur-band, fles, naam
function V2BeerTile({ bier, index, onClick }) {
  const [hover, setHover] = React.useState(false);
  const accents = {
    oeps: 'var(--bier-oeps)', pampus: 'var(--bier-pampus)', weerwater: 'var(--bier-weerwater)',
    oostvaarders: 'var(--bier-oostvaarders)', overgooi: 'var(--bier-overgooi)', madeleine: 'var(--bier-madeleine)',
    almere50: 'var(--feest-rood)',
  };
  const accent = accents[bier.key] || V2.koper;
  return (
    <Reveal>
      <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          background: '#FFFDF6', border: '1px solid var(--border-subtle)', borderTop: `4px solid ${accent}`, borderRadius: 5,
          cursor: 'pointer', overflow: 'hidden', textAlign: 'center', paddingBottom: 20,
          transform: hover ? 'translateY(-6px) rotate(-0.4deg)' : 'none',
          boxShadow: hover ? '0 22px 44px rgba(36,47,63,0.22)' : '0 3px 10px rgba(36,47,63,0.08)',
          transition: 'all 0.3s ease',
        }}>
        <div style={{ background: V2.paper, padding: '18px 0 10px' }}>
          <img src={bier.foto} alt={bier.naam} style={{ height: 170, objectFit: 'contain', filter: 'drop-shadow(0 10px 14px rgba(36,47,63,0.25))', transform: hover ? 'scale(1.05)' : 'none', transition: 'transform 0.3s ease' }} />
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 21, color: V2.navy, marginTop: 12 }}>{bier.naam}</div>
        <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: accent, marginTop: 4 }}>
          {bier.stijl} · {bier.abv}
        </div>
      </div>
    </Reveal>
  );
}
window.V2BeerTile = V2BeerTile;