// 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>
      {/* Het glas */}
      <section style={{ padding: '12px 32px 84px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 60, alignItems: 'center' }}>
          <Reveal style={{ display: 'flex', justifyContent: 'center' }}>
            <img src="./assets/foto/proefglas.png" alt="Het glas van Stadsbrouwerij Almere" style={{ width: '100%', maxWidth: 280, 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: 34, 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. De karakteristieke schuimknik
              houdt de schuimkraag mooi intact en bewaart de aroma's langer in het glas.
            </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.
            </p>
          </Reveal>
        </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;