/* 35 Jaar Loncin — tijdelijk scherm (echte inhoud volgt) */
function JubileumScreen({ onNavigate }) {
  const { Eyebrow, Ornament, Button, Badge } = window.LoncinDesignSystem_6f2c51;
  const { PhotoFrame, PageHead, LINKS } = window;
  return (
    <main style={{ paddingBottom: 'var(--space-9)' }}>
      <PageHead
        eyebrow="Jubileum"
        title="35 Jaar Loncin"
        intro="Vijfendertig jaar topkeuken in een herenhuis anno 1902. Wij vieren het met een bijzonder jubileummenu en een aantal feestelijke avonden."
      />

      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-6) var(--gutter)' }}>
        <figure style={{ margin: 0 }}>
          <div
            style={{
              position: 'relative',
              width: '100%',
              aspectRatio: '16 / 9',
              borderRadius: 'var(--radius-card)',
              overflow: 'hidden',
              border: '1px solid var(--line-on-dark-strong)',
              background: '#0E0C0A',
              boxShadow: '0 30px 80px -40px rgba(0,0,0,0.8)',
            }}
          >
            <video
              controls
              playsInline
              preload="metadata"
              poster="https://www.loncinrestaurant.be/nl/thumbnail/full/ryaZv/35jaarLONCIN.jpg"
              style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }}
            >
              <source src="https://testtf.be/Loncin/35yearsLoncin-Aftermovie%20(3).mp4" type="video/mp4" />
              Uw browser ondersteunt deze video niet.
            </video>
          </div>
          <figcaption style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', textAlign: 'center', marginTop: '1rem' }}>
            Aftermovie — 35 jaar Restaurant Loncin
          </figcaption>
        </figure>
      </section>

      <div style={{ maxWidth: 460, margin: 'var(--space-7) auto' }}><Ornament variant="diamond" /></div>

      <section style={{ textAlign: 'center', padding: '0 var(--gutter)' }}>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-muted)', maxWidth: '46ch', margin: '0 auto 1.8rem' }}>
          Het jubileummenu en de feestdata worden hier toegevoegd zodra ze bekend zijn.
        </p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" onClick={() => onNavigate('reserve')}>Reserveren</Button>
          <Button variant="ghost" onClick={() => onNavigate('cadeaubon')}>Cadeaubon</Button>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { JubileumScreen });