/* Seizoensmenu — de kaart volgt het seizoen: een uitgelicht menu van het moment,
   met daaronder een 3×2 overzicht van de seizoensmenu's die door het jaar terugkeren. */
function KreeftenScreen({ onNavigate }) {
  const { Eyebrow, Ornament, Button, Badge } = window.LoncinDesignSystem_6f2c51;
  const { PageHead, LINKS } = window;

  const [posterOpen, setPosterOpen] = React.useState(false);

  // Parallax for the featured image inside its fixed frame.
  const featImg = React.useRef(null);
  const featFrame = React.useRef(null);
  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    let raf = null;
    const update = () => {
      raf = null;
      const frame = featFrame.current, img = featImg.current;
      if (!frame || !img) return;
      const rect = frame.getBoundingClientRect();
      const vh = window.innerHeight || 800;
      const progress = (rect.top + rect.height / 2 - vh / 2) / vh; // ~ -1 .. 1
      img.style.transform = `translate3d(0, ${(progress * 38).toFixed(1)}px, 0)`;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  // The six seasonal menus that recur through the year (3×2 grid).
  const seasons = [
    { id: 'sz-asperge', name: 'Aspergemenu', season: 'Lente', months: 'apr – jun', img: 'assets/sz-asperge.jpg', pos: 'center 55%', desc: 'Witte asperges uit de streek, klassiek begeleid — het eerste teken van het nieuwe seizoen.' },
    { id: 'sz-kreeft', name: 'Kreeftenmenu', season: 'Zomer', months: 'mei – sep', img: 'assets/kreeftenmenu.jpg', pos: 'center 35%', desc: 'Wilde kreeft uit de Oosterschelde als rode draad door een licht, zonnig zomermenu.', now: true },
    { id: 'sz-zomer', name: 'Zomerklassiekers', season: 'Hoogzomer', months: 'jul – aug', img: 'assets/sz-vis.jpg', pos: 'center 50%', desc: 'Tomaat, Noordzeevis en frisse sauzen — de keuken op haar luchtigst.' },
    { id: 'sz-wild', name: 'Wildmenu', season: 'Najaar', months: 'okt – dec', img: 'assets/sz-wild.jpg', pos: 'center 60%', desc: 'Vers geschoten wild uit eigen jacht: het hart van het Loncin-jaar.' },
    { id: 'sz-truffel', name: 'Truffelmenu', season: 'Winter', months: 'dec – feb', img: 'assets/sz-truffel.jpg', pos: 'center 50%', desc: 'Verse truffel door alle gangen — rijk, warm en klassiek Frans.' },
    { id: 'sz-eindejaar', name: 'Eindejaarsmenu', season: 'Feestdagen', months: 'dec – jan', img: 'assets/sz-kaviaar.jpg', pos: 'center 50%', desc: 'Een feestelijk meergangenmenu met kaviaar, kreeft en truffel voor de eindejaarstafel.' },
  ];

  return (
    <main style={{ paddingBottom: 'var(--space-9)' }}>
      <PageHead
        eyebrow="Seizoensmenu"
        title="De kaart volgt het seizoen"
        intro={<>
          Bij Loncin beweegt de kaart mee met het jaar. Telkens staat één seizoensmenu centraal — van asperges en hoppescheuten in de lente tot wild in het najaar — opgebouwd rond wat op dat moment het mooist en het verst is.
          <br /><br />
          Wilt u zeker zijn dat de seizoensgebonden producten aanwezig zijn? Bel dan zeker eens voor je reserveert, wij zijn steeds afhankelijk van oogst en jacht.
        </>}
      />

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

      {/* Nu op de kaart — section header */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ textAlign: 'center', maxWidth: 'var(--container-prose)', margin: '0 auto' }}>
          <Eyebrow align="center" rule>Nu op de kaart</Eyebrow>
        </div>
      </section>

      {/* Featured — current seasonal menu */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-6) var(--gutter) var(--space-6)' }}>
        <div className="sz-feature" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'clamp(2rem, 5vw, 4rem)', alignItems: 'center' }}>
          <div
            ref={featFrame}
            style={{ width: '100%', aspectRatio: '4 / 3', borderRadius: 'var(--radius-card)', overflow: 'hidden', position: 'relative' }}
          >
            <img
              ref={featImg}
              src={window.RES("assets/kreeftenmenu.jpg")}
              alt="Chef Frank dresseert het kreeftenmenu — wilde kreeft uit de Oosterschelde"
              style={{ position: 'absolute', inset: '-9% 0', width: '100%', height: '118%', objectFit: 'cover', objectPosition: 'center 38%', willChange: 'transform' }}
            />
          </div>
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-display-m)', color: 'var(--text-primary)', margin: '0 0 1rem', letterSpacing: 'var(--tracking-display)', lineHeight: 'var(--leading-tight)' }}>
              Kreeftenmenu
            </h2>
            <p style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', maxWidth: '46ch' }}>
              In de zomermaanden — ruwweg van mei tot september — staat de wilde kreeft
              uit de Oosterschelde centraal. Een licht, zonnig seizoensmenu rond dit
              edele schaaldier, met klassieke Franse sauzen en groenten van het moment.
            </p>
            <div style={{ marginTop: '1.8rem', display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
              <Button variant="primary" onClick={() => setPosterOpen((o) => !o)} aria-expanded={posterOpen}>
                {posterOpen ? 'Verberg deze menu ↑' : 'Bekijk deze menu ↓'}
              </Button>
              <Button variant="ghost" onClick={() => onNavigate('reserve')}>Reserveren</Button>
            </div>
          </div>
        </div>

        {/* Uitklapbare kreeftenmenu-affiche */}
        {posterOpen && (
          <div className="sz-poster-reveal" style={{ marginTop: 'var(--space-6)' }}>
            <img
              src={window.RES("assets/kreeftenmenu-poster.png")}
              alt="Kreeftenmenu — de volledige menukaart"
              style={{
                display: 'block',
                width: '100%',
                maxWidth: 'clamp(320px, 48vw, 540px)',
                height: 'auto',
                margin: '0 auto',
                borderRadius: 'var(--radius-card)',
                border: '1px solid var(--line-on-dark)',
                boxShadow: '0 24px 60px -28px rgba(0,0,0,0.7)',
              }}
            />
            <div style={{ textAlign: 'center', marginTop: 'var(--space-5)' }}>
              <Button variant="ghost" onClick={() => setPosterOpen(false)}>Sluit menu ↑</Button>
            </div>
          </div>
        )}
      </section>

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

      {/* The year — 3×2 grid of recurring seasonal menus */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ textAlign: 'center', maxWidth: 'var(--container-prose)', margin: '0 auto var(--space-7)' }}>
          <Eyebrow align="center" rule>Doorheen het jaar</Eyebrow>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-secondary)', fontSize: 'var(--text-body-lg)', marginTop: '1.2rem' }}>
            De seizoensmenu's die telkens terugkeren — en wanneer u ze meestal op de kaart vindt.
          </p>
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 'clamp(1.2rem, 2.4vw, 2rem)',
          }}
          className="sz-grid"
        >
          {seasons.map((s) => (
            <article key={s.id} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              <div style={{ position: 'relative' }}>
                {s.img ? (
                  <img
                    src={window.RES(s.img)}
                    alt={`${s.name} — ${s.season.toLowerCase()}`}
                    loading="lazy"
                    style={{ display: 'block', width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', objectPosition: s.pos || 'center', borderRadius: 'var(--radius-card)' }}
                  />
                ) : (
                  <image-slot
                    id={s.id}
                    shape="rounded"
                    radius="12"
                    placeholder="Sleep hier een foto"
                    style={{ display: 'block', width: '100%', aspectRatio: '4 / 3', borderRadius: 'var(--radius-card)', overflow: 'hidden' }}
                  ></image-slot>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: '0.8rem' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-h2)', color: 'var(--text-primary)', margin: 0, letterSpacing: 'var(--tracking-display)' }}>{s.name}</h3>
                <span
                  style={{
                    flex: '0 0 auto',
                    fontFamily: 'var(--font-sans)',
                    fontSize: 'var(--text-caption)',
                    letterSpacing: 'var(--tracking-caps)',
                    textTransform: 'uppercase',
                    color: 'var(--metal-gold)',
                    border: '1px solid var(--line-on-dark-strong)',
                    borderRadius: 'var(--radius-pill, 999px)',
                    padding: '0.3rem 0.7rem',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {s.months}
                </span>
              </div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: '-0.4rem' }}>
                {s.season}
              </div>
              <p style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-relaxed)', margin: 0 }}>{s.desc}</p>
            </article>
          ))}
        </div>
      </section>

      <div style={{ maxWidth: 460, margin: 'var(--space-8) auto var(--space-7)' }}><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' }}>
          De exacte data en gangen van elk seizoensmenu worden aangekondigd zodra het seizoen begint.
        </p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" onClick={() => onNavigate('reserve')}>Reserveren</Button>
          <Button variant="ghost" href={LINKS.mail} target="_blank" rel="noopener noreferrer">Vraag info</Button>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { KreeftenScreen });