// V2 chrome — donker & vintage: header, footer, stempel-badge, sectiehulpjes
const V2 = {
  koper: '#C08A4B',
  koperLicht: '#D9A96A',
  inkt: '#1C2530',
  navyDeep: '#242F3F',
  navy: '#2F3C4F',
  cream: '#FCF1D5',
  paper: '#F6EFDE',
  rood: '#922630',
};
window.V2 = V2;

// Subtiele fade-in bij scroll
function useReveal() {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setShown(true); return; }
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, {
    opacity: shown ? 1 : 0,
    transform: shown ? 'none' : 'translateY(18px)',
    transition: 'opacity 0.7s ease, transform 0.7s ease',
  }];
}
window.useReveal = useReveal;

function Reveal({ children, style }) {
  const [ref, anim] = useReveal();
  return <div ref={ref} style={{ ...anim, ...style }}>{children}</div>;
}
window.Reveal = Reveal;

// Ronde "stempel" badge, licht gedraaid
function Stempel({ children, size = 120, rotate = -8, color = V2.koper, style }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      border: `2px solid ${color}`, boxShadow: `inset 0 0 0 5px transparent, inset 0 0 0 6px ${color}33`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center',
      transform: `rotate(${rotate}deg)`, color,
      fontFamily: 'var(--font-display)', fontSize: size * 0.13, lineHeight: 1.25,
      letterSpacing: '0.06em', textTransform: 'uppercase', padding: 12,
      ...style,
    }}>
      <div style={{ border: `1px solid ${color}66`, borderRadius: '50%', position: 'absolute', inset: 5 }}></div>
      {children}
    </div>
  );
}
window.Stempel = Stempel;

// Vintage kicker: — TEKST —
function Kicker({ children, color = V2.koper, style }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, color, fontWeight: 700, fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase', fontFamily: 'var(--font-body)', ...style }}>
      <span style={{ width: 34, height: 1, background: color, display: 'inline-block' }}></span>
      {children}
      <span style={{ width: 34, height: 1, background: color, display: 'inline-block' }}></span>
    </div>
  );
}
window.Kicker = Kicker;

function V2Button({ children, variant = 'koper', onClick, style }) {
  const [hover, setHover] = React.useState(false);
  const base = {
    fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, letterSpacing: '0.1em', textTransform: 'uppercase',
    padding: '15px 30px', cursor: 'pointer', borderRadius: 3, transition: 'all 0.25s ease', display: 'inline-block',
  };
  const variants = {
    koper: { background: hover ? V2.koperLicht : V2.koper, color: V2.inkt, border: `1px solid ${V2.koper}` },
    lijn: { background: hover ? 'rgba(252,241,213,0.1)' : 'transparent', color: V2.cream, border: `1px solid ${V2.cream}88` },
    donker: { background: hover ? V2.navy : V2.inkt, color: V2.cream, border: `1px solid ${V2.inkt}` },
  };
  return (
    <button onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={onClick}
      style={{ ...base, ...variants[variant], ...style }}>{children}</button>
  );
}
window.V2Button = V2Button;

function V2Header({ page, onNavigate }) {
  const items = ['Brouwerij', 'Bieren', 'Vrijwilligers'];
  const [hovered, setHovered] = React.useState(null);
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(28,37,48,0.94)', backdropFilter: 'blur(8px)', borderBottom: `1px solid ${V2.koper}44` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }} onClick={() => onNavigate('Home')}>
          <img src="./assets/logo/schild-creme.svg" alt="Stadsbrouwerij Almere" style={{ height: 62, filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.4))' }} />
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: V2.cream, lineHeight: 1.15 }}>
            Stadsbrouwerij<br />Almere
          </div>
        </div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
          {items.map((it) => (
            <a key={it} href="#" onClick={(e) => { e.preventDefault(); onNavigate(it); }}
              onMouseEnter={() => setHovered(it)} onMouseLeave={() => setHovered(null)}
              style={{
                color: page === it ? V2.koperLicht : V2.cream, fontWeight: 600, fontSize: 15, letterSpacing: '0.08em', textTransform: 'uppercase',
                textDecoration: 'none', borderBottom: `2px solid ${page === it || hovered === it ? V2.koper : 'transparent'}`,
                paddingBottom: 4, transition: 'all 0.2s ease',
              }}>{it}</a>
          ))}
          <V2Button variant="koper" style={{ padding: '11px 22px', fontSize: 13 }} onClick={() => onNavigate('Bieren')}>Proef ons bier</V2Button>
        </nav>
      </div>
    </header>
  );
}
window.V2Header = V2Header;

function V2Footer({ onNavigate }) {
  return (
    <footer style={{ background: V2.inkt, color: V2.cream, borderTop: `3px double ${V2.koper}`, padding: '56px 32px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 48, alignItems: 'start' }}>
        <div>
          <img src="./assets/logo/AlgemeneLogo-creme.svg" alt="Stadsbrouwerij Almere" style={{ height: 130 }} />
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, color: V2.koperLicht, marginTop: 12 }}>Drink beter, niet meer.</div>
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: V2.koper, marginBottom: 14 }}>Bezoek</div>
          <div style={{ lineHeight: 1.8, fontSize: 15, opacity: 0.85 }}>
            Stadslandgoed De Kemphaan<br />Kemphaanpad 4<br />1358 AC Almere<br />
            <a href="mailto:info@stadsbrouwerijalmere.nl" style={{ color: V2.koperLicht }}>info@stadsbrouwerijalmere.nl</a>
          </div>
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: V2.koper, marginBottom: 14 }}>Ontdek</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {['Brouwerij', 'Bieren', 'Vrijwilligers'].map((it) => (
              <a key={it} href="#" onClick={(e) => { e.preventDefault(); onNavigate(it); }} style={{ color: V2.cream, opacity: 0.85, fontSize: 15 }}>{it}</a>
            ))}
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1200, margin: '36px auto 0', paddingTop: 20, borderTop: `1px solid ${V2.cream}22`, display: 'flex', justifyContent: 'space-between', fontSize: 13, opacity: 0.6 }}>
        <span>© Stadsbrouwerij Almere</span>
        <span>Geen 18, geen alcohol · NIX18</span>
      </div>
    </footer>
  );
}
window.V2Footer = V2Footer;

function V2AgeGate({ onConfirm }) {
  const [denied, setDenied] = React.useState(false);
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(28,37,48,0.92)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div style={{ background: V2.paper, color: V2.navy, borderRadius: 6, border: `3px double ${V2.koper}`, padding: '48px 56px', maxWidth: 480, textAlign: 'center', boxShadow: '0 30px 80px rgba(0,0,0,0.5)' }}>
        <img src="./assets/logo/AlgemeneLogo.svg" alt="Stadsbrouwerij Almere" style={{ height: 110 }} />
        {denied ? (
          <div>
            <h2 style={{ fontSize: 26, margin: '20px 0 12px' }}>Tot over een paar jaar</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, margin: 0 }}>Deze website is bedoeld voor bezoekers van 18 jaar en ouder. Geen 18, geen alcohol.</p>
            <div style={{ display: 'inline-block', border: `2px solid ${V2.navy}`, borderRadius: 4, padding: '2px 12px', fontWeight: 700, fontSize: 14, marginTop: 20 }}>NIX18</div>
          </div>
        ) : (
          <div>
            <h2 style={{ fontSize: 28, margin: '20px 0 8px' }}>Ben je 18 jaar of ouder?</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, margin: '0 0 28px', color: 'var(--text-muted)' }}>Om onze website te bezoeken moet je 18 jaar of ouder zijn.</p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
              <V2Button variant="donker" onClick={onConfirm}>Ja, ik ben 18+</V2Button>
              <V2Button variant="koper" onClick={() => setDenied(true)}>Nee</V2Button>
            </div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 24 }}>Drink beter, niet meer. · NIX18</div>
          </div>
        )}
      </div>
    </div>
  );
}
window.V2AgeGate = V2AgeGate;