/* Home */
function HomeScreen({ onNavigate }) {
  const { Eyebrow, Button, Ornament, SectionHeading, Badge, Card } = window.LoncinDesignSystem_6f2c51;
  const { PhotoFrame, MapEmbed, LINKS } = window;

  const heroBg = 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 y = window.scrollY || window.pageYOffset || 0;
      if (heroBg.current) heroBg.current.style.transform = `translate3d(0, ${(y * 0.32).toFixed(1)}px, 0) scale(1.12)`;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  return (
    <main>
      {/* Hero */}
      <section
        style={{
          minHeight: '92vh',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          textAlign: 'center',
          padding: 'var(--space-9) var(--gutter)',
          position: 'relative',
          overflow: 'hidden',
          background: '#141210',
        }}
      >
        {/* Full-bleed photo + parallax */}
        <img
          ref={heroBg}
          src={window.RES("assets/hero-jager.jpg")}
          alt=""
          aria-hidden="true"
          style={{
            position: 'absolute',
            inset: '-8% 0',
            width: '100%',
            height: '116%',
            objectFit: 'cover',
            objectPosition: 'center 42%',
            zIndex: 0,
            willChange: 'transform',
          }}
        />
        {/* Blend scrim — darkens for legibility and fades into the page */}
        <div
          aria-hidden="true"
          style={{
            position: 'absolute',
            inset: 0,
            zIndex: 1,
            background:
              'radial-gradient(85% 62% at 50% 34%, rgba(13,11,10,0.66) 0%, rgba(13,11,10,0.34) 46%, rgba(13,11,10,0) 78%), linear-gradient(to bottom, rgba(18,16,14,0.62) 0%, rgba(18,16,14,0.44) 26%, rgba(18,16,14,0.42) 52%, rgba(18,16,14,0.66) 80%, #141210 100%)',
          }}
        />
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <img src={window.RES("assets/crest-gold.png")} alt="" style={{ height: 96, marginBottom: '2rem' }} />
        <Eyebrow align="center" rule>Seizoensgebonden klassieke keuken · Door chef Frank Loncin</Eyebrow>
        <h1
          style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 400,
            fontSize: 'var(--text-display-l)',
            lineHeight: 'var(--leading-tight)',
            letterSpacing: 'var(--tracking-display)',
            color: 'var(--text-primary)',
            margin: '1.4rem 0 0',
            maxWidth: '17ch',
          }}
        >
          Restaurant Loncin
        </h1>
        <p
          style={{
            fontFamily: 'var(--font-serif)',
            fontSize: 'var(--text-body-lg)',
            lineHeight: 'var(--leading-relaxed)',
            color: 'var(--text-secondary)',
            maxWidth: '50ch',
            margin: '1.6rem 0 2.4rem',
          }}
        >
          De marktgebonden natuurproducten ondergaan door de passie van de chef een
          metamorfose tot tijdloze gerechten, geserveerd in een herenhuis anno 1902.
        </p>
        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="primary" size="lg" onClick={() => onNavigate('reserve')}>Reserveer een tafel</Button>
          <Button variant="ghost" size="lg" onClick={() => onNavigate('kaart')}>Bekijk de menukaart</Button>
        </div>
        </div>
      </section>

      {/* Philosophy split */}
      <section
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 'clamp(2rem, 5vw, 5rem)',
          alignItems: 'center',
          padding: 'var(--space-section) var(--gutter)',
          maxWidth: 'var(--container-max)',
          margin: '0 auto',
        }}
      >
        <PhotoFrame ratio="4 / 5" src="chef-frank.jpg" position="right 28%" label="Chef Frank Loncin in de keuken" tall />
        <div>
          <SectionHeading
            eyebrow="De chef"
            title={<>Vers van het veld<br />geserveerd.</>}
            intro={<>
              Chef Frank Loncin is een gepassioneerd jager, wat zich tijdens het jachtseizoen vertaalt in een uitzonderlijk vers aanbod aan wildgerechten. In de zomer maken wilde kreeften uit de Oosterschelde en zonnige klassiekers hun opwachting op de kaart. Alles wordt door Chef Frank zelf vers en met zorg bereid op de avond van service.
              <br /><br />
              Door het jaar heen kan je het restaurant ervaren met muzikale ondersteuning tijdens het diner tijdens speciale evenementen, samen met verschillende menu's die seizoensgebonden samengesteld worden.
            </>}
          />
        </div>
      </section>

      <div style={{ maxWidth: 460, margin: '0 auto' }}><Ornament variant="diamond" /></div>

      {/* Menus + philosophy */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-deep)', padding: 'var(--space-section) var(--gutter)' }}>
        {/* Subtle restaurant interior backdrop */}
        <div
          aria-hidden="true"
          style={{
            position: 'absolute',
            inset: 0,
            zIndex: 0,
            backgroundImage: `url(${window.RES('assets/restaurant-binnen.jpg')})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center 42%',
            opacity: 1,
            filter: 'saturate(0.9) brightness(0.92)',
          }}
        />
        <div
          aria-hidden="true"
          style={{
            position: 'absolute',
            inset: 0,
            zIndex: 1,
            background:
              'radial-gradient(78% 68% at 50% 48%, rgba(15,13,11,0.74) 0%, rgba(15,13,11,0.52) 52%, rgba(15,13,11,0.30) 100%), linear-gradient(to bottom, var(--surface-deep) 0%, rgba(15,13,11,0.34) 15%, rgba(15,13,11,0.34) 85%, var(--surface-deep) 100%)',
          }}
        />
        <div style={{ position: 'relative', zIndex: 2 }}>
        <div
          style={{
            maxWidth: '64ch',
            margin: '0 auto',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            textAlign: 'center',
          }}
        >
          <Eyebrow align="center" rule>De menu's</Eyebrow>
          <p
            style={{
              fontFamily: 'var(--font-serif)',
              fontStyle: 'italic',
              fontSize: 'var(--text-body-lg)',
              color: 'var(--text-secondary)',
              margin: '1.6rem 0 1.2rem',
            }}
          >
            Een héél wijze chef heeft ooit gezegd:
          </p>
          <blockquote
            style={{
              fontFamily: 'var(--font-display)',
              fontStyle: 'italic',
              fontWeight: 400,
              fontSize: 'var(--text-display-m)',
              lineHeight: 'var(--leading-snug)',
              color: 'var(--text-primary)',
              maxWidth: '22ch',
              margin: 0,
            }}
          >
            “Cuisiner est un art et créer de l’art exige de la patience.”
          </blockquote>
          <div
            style={{
              marginTop: '1rem',
              fontFamily: 'var(--font-serif)',
              fontSize: 'var(--text-body)',
              color: 'var(--metal-gold)',
            }}
          >
            (Koken is een kunst en kunst creëren vraagt geduld)
          </div>

          <p
            style={{
              fontFamily: 'var(--font-serif)',
              fontSize: 'var(--text-body-lg)',
              lineHeight: 'var(--leading-relaxed)',
              color: 'var(--text-secondary)',
              margin: '2.4rem 0 0',
              textWrap: 'pretty',
            }}
          >
            Geachte gast, om u beter te kunnen bedienen, vragen wij u om maximum drie voorgerechten
            en maximum drie hoofdgerechten per tafel te nemen. Vanaf zeven personen vragen wij om
            een menu te kiezen.
          </p>

          <div style={{ marginTop: '2.6rem' }}>
            <Button variant="primary" size="lg" onClick={() => onNavigate('kaart')}>Bekijk de menu's</Button>
          </div>
        </div>
        </div>
      </section>

      {/* Gallery */}
      <section style={{ background: 'var(--surface-light-2)', padding: 'var(--space-section) var(--gutter)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1.2rem' }}>
            <PhotoFrame ratio="1 / 1" src="wild-van-de-chef.jpg" position="center 55%" label="Gerecht — wild van de chef" />
            <PhotoFrame ratio="1 / 1" src="oosterschelde-kreeft.jpg" position="center 60%" label="Wilde kreeft — Oosterschelde" />
            <PhotoFrame ratio="1 / 1" src="open-keuken.jpg" position="center 30%" label="De open keuken" />
          </div>
          <div style={{ marginTop: '1.6rem', textAlign: 'center' }}>
            <Button variant="light" onClick={() => onNavigate('impressie')}>Naar de impressie</Button>
          </div>
        </div>
      </section>

      {/* Find us */}
      <section
        style={{
          maxWidth: 'var(--container-max)',
          margin: '0 auto',
          padding: 'var(--space-section) var(--gutter)',
        }}
      >
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
            gap: 'clamp(2rem, 5vw, 4rem)',
            alignItems: 'center',
          }}
        >
          <div>
            <SectionHeading eyebrow="Ons vinden" title="Markgravelei 127, Antwerpen" />
            <p style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', marginTop: '1.2rem', maxWidth: '52ch' }}>
              Een herenhuis anno 1902 in het hart van Antwerpen, met privéparking en een
              prachtige tuin. Reserveer telefonisch of online — wij ontvangen u graag.
            </p>
            <div style={{ marginTop: '1.8rem', display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
              <Button variant="primary" onClick={() => onNavigate('reserve')}>Reserveren</Button>
              <Button variant="ghost" onClick={() => onNavigate('contact')}>Contactgegevens</Button>
            </div>
          </div>
          <img
            src={window.RES("assets/loncin-gevel.jpg")}
            alt="De gevel van Restaurant Loncin — Markgravelei 127, Antwerpen"
            loading="lazy"
            style={{
              display: 'block',
              width: '100%',
              height: 'clamp(360px, 38vw, 520px)',
              objectFit: 'cover',
              objectPosition: 'center bottom',
              border: '1px solid var(--line-on-dark)',
              borderRadius: 'var(--radius-card)',
            }}
          />
        </div>
        <div style={{ marginTop: 'clamp(2rem, 5vw, 3.5rem)' }}>
          <MapEmbed height={460} />
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { HomeScreen });