// V2 Bieren — overzicht + detail
function V2BierenPage({ onNavigate, selected, onSelect }) {
  const bieren = window.SBA_BIEREN;
  const bier = bieren.find((b) => b.key === selected);
  if (bier) return <V2BierDetail bier={bier} onBack={() => onSelect(null)} onSelect={onSelect} />;
  return (
    <main style={{ background: V2.paper }}>
      <section style={{ background: `linear-gradient(rgba(28,37,48,0.72), rgba(28,37,48,0.86)), url('./assets/foto/cafe-avond.png') center/cover`, color: V2.cream, padding: '64px 32px', borderBottom: `3px double ${V2.koper}` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
          <Kicker style={{ justifyContent: 'center' }}>Het assortiment</Kicker>
          <h1 style={{ fontSize: 50, margin: '14px 0 12px' }}>Onze bieren</h1>
          <p style={{ fontSize: 18, opacity: 0.85, maxWidth: 560, margin: '0 auto' }}>
            Zeven karakters, gebrouwen met natuurlijke ingrediënten en geduld. Drink beter, niet meer.
          </p>
        </div>
      </section>
      <section style={{ padding: '72px 32px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26 }}>
          {bieren.map((b, i) => <V2BeerTile key={b.key} bier={b} index={i} onClick={() => onSelect(b.key)} />)}
        </div>
      </section>
    </main>
  );
}
window.V2BierenPage = V2BierenPage;

function V2BierDetail({ bier, onBack, onSelect }) {
  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;
  const anderen = window.SBA_BIEREN.filter((b) => b.key !== bier.key).slice(0, 3);
  return (
    <main style={{ background: V2.paper }}>
      <section style={{ background: V2.inkt, color: V2.cream, padding: '56px 32px 72px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ color: V2.koperLicht, fontWeight: 600, fontSize: 14, letterSpacing: '0.08em', textTransform: 'uppercase' }}>← Alle bieren</a>
          <div style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 64, alignItems: 'center', marginTop: 32 }}>
            <Reveal style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
              <div style={{ position: 'absolute', inset: '-10% -18%', background: `radial-gradient(circle, ${V2.koper}22, transparent 65%)` }}></div>
              <img src={bier.foto} alt={bier.naam} style={{ height: 420, objectFit: 'contain', filter: 'drop-shadow(0 30px 40px rgba(0,0,0,0.5))', position: 'relative' }} />
            </Reveal>
            <Reveal>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent === 'var(--bier-oeps)' ? V2.koperLicht : accent }}>
                {bier.stijl} · {bier.abv}
              </div>
              <h1 style={{ fontSize: 58, margin: '10px 0 18px' }}>{bier.naam}</h1>
              <p style={{ fontSize: 18, lineHeight: 1.75, opacity: 0.88, maxWidth: 520 }}>{bier.kort}</p>
              <div style={{ display: 'flex', gap: 24, marginTop: 30, borderTop: `1px solid ${V2.cream}22`, paddingTop: 22 }}>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: V2.koper }}>Stijl</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, marginTop: 4 }}>{bier.stijl}</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: V2.koper }}>Alcohol</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, marginTop: 4 }}>{bier.abv}</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: V2.koper }}>Gebrouwen in</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, marginTop: 4 }}>Almere</div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
      {bier.etiket && (
        <section style={{ padding: '72px 32px', background: V2.paper }}>
          <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <Reveal>
              <img src={bier.etiket} alt={`Etiket ${bier.naam}`} style={{ width: '100%', borderRadius: 4, border: `6px solid #FFFDF6`, boxShadow: '0 16px 44px rgba(36,47,63,0.22)', transform: 'rotate(-1.2deg)' }} />
            </Reveal>
            <Reveal>
              <Kicker style={{ justifyContent: 'flex-start' }}>Het etiket</Kicker>
              <h2 style={{ fontSize: 32, margin: '14px 0 14px', color: V2.navy }}>Elk bier draagt zijn eigen verhaal</h2>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: V2.navy }}>
                De etiketten van Stadsbrouwerij Almere tonen de plek waarnaar het bier vernoemd is —
                in de kleur die bij het karakter van het bier past.
              </p>
            </Reveal>
          </div>
        </section>
      )}
      <section style={{ padding: '0 32px 84px', background: V2.paper }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Kicker style={{ justifyContent: 'center', marginBottom: 30 }}>Proef ook</Kicker>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {anderen.map((b, i) => <V2BeerTile key={b.key} bier={b} index={i} onClick={() => onSelect(b.key)} />)}
          </div>
        </div>
      </section>
    </main>
  );
}
window.V2BierDetail = V2BierDetail;