/* Juridische pagina's — cookies, privacy en disclaimer.
   Eén scherm dat op basis van de actieve route (screen-prop) de juiste inhoud toont. */
function LegalScreen({ onNavigate, screen }) {
  const { Eyebrow, Ornament } = window.LoncinDesignSystem_6f2c51;
  const { PageHead, LINKS } = window;

  const CONTENT = {
    privacy: {
      eyebrow: 'Juridisch',
      title: 'Privacyverklaring',
      intro: 'Restaurant Loncin hecht veel belang aan de bescherming van uw persoonsgegevens en verwerkt deze met de nodige zorg, conform de Algemene Verordening Gegevensbescherming (AVG/GDPR).',
      sections: [
        { h: 'Welke gegevens verzamelen wij?', p: ['Wanneer u een tafel reserveert of contact met ons opneemt, verwerken wij de gegevens die u zelf meedeelt: uw naam, telefoonnummer, e-mailadres en eventuele opmerkingen of dieetwensen. Deze gegevens zijn noodzakelijk om uw reservatie correct af te handelen.'] },
        { h: 'Waarvoor gebruiken wij uw gegevens?', p: ['Uw gegevens worden uitsluitend gebruikt om uw reservatie te bevestigen en te beheren, om u te contacteren in verband met uw bezoek, en om te voldoen aan onze wettelijke verplichtingen. Wij verkopen uw gegevens nooit aan derden.'] },
        { h: 'Hoelang bewaren wij uw gegevens?', p: ['Wij bewaren uw gegevens niet langer dan noodzakelijk voor de doeleinden waarvoor zij werden verzameld, behoudens een langere bewaartermijn die door de wet wordt opgelegd.'] },
        { h: 'Uw rechten', p: ['U heeft het recht om uw gegevens in te kijken, te laten verbeteren of te laten verwijderen. Neem hiervoor contact met ons op via het onderstaande adres.'] },
      ],
    },
    cookies: {
      eyebrow: 'Juridisch',
      title: 'Cookiebeleid',
      intro: 'Onze website gebruikt enkel de cookies die noodzakelijk zijn om de site goed te laten werken en om uw ervaring te verbeteren.',
      sections: [
        { h: 'Wat zijn cookies?', p: ['Cookies zijn kleine tekstbestanden die bij een bezoek aan onze website op uw toestel worden geplaatst. Ze helpen ons om de website vlot te laten functioneren en uw voorkeuren te onthouden.'] },
        { h: 'Welke cookies gebruiken wij?', p: ['Wij gebruiken voornamelijk functionele cookies die onmisbaar zijn voor de werking van de site, zoals het onthouden van uw reservatiestappen. Voor analytische of marketingcookies vragen wij steeds uw voorafgaande toestemming.'] },
        { h: 'Cookies beheren', p: ['U kunt cookies op elk moment beheren of verwijderen via de instellingen van uw browser. Houd er rekening mee dat het uitschakelen van bepaalde cookies de werking van de website kan beïnvloeden.'] },
      ],
    },
    disclaimer: {
      eyebrow: 'Juridisch',
      title: 'Disclaimer',
      intro: 'De informatie op deze website wordt met de grootste zorg samengesteld, maar kan zonder voorafgaande kennisgeving worden gewijzigd.',
      sections: [
        { h: 'Aansprakelijkheid', p: ['Restaurant Loncin streeft ernaar de informatie op deze website actueel en correct te houden. Toch kunnen wij niet garanderen dat alle informatie steeds volledig, juist of up-to-date is. Aan de menukaarten, prijzen en openingstijden op deze website kunnen geen rechten worden ontleend.'] },
        { h: 'Externe links', p: ['Deze website kan verwijzingen of links naar websites van derden bevatten. Wij zijn niet verantwoordelijk voor de inhoud of het privacybeleid van die externe websites.'] },
        { h: 'Intellectuele eigendom', p: ['Alle teksten, foto’s en vormgeving op deze website zijn eigendom van Restaurant Loncin en mogen niet zonder uitdrukkelijke toestemming worden overgenomen.'] },
      ],
    },
  };

  const data = CONTENT[screen] || CONTENT.privacy;

  return (
    <main style={{ paddingBottom: 'var(--space-9)' }}>
      <PageHead eyebrow={data.eyebrow} title={data.title} intro={data.intro} />

      <section style={{ maxWidth: 'var(--container-prose)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ margin: '0 auto var(--space-6)', maxWidth: 320 }}><Ornament variant="diamond" /></div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          {data.sections.map((s, i) => (
            <div key={i}>
              <h2
                style={{
                  fontFamily: 'var(--font-display)',
                  fontWeight: 400,
                  fontSize: 'var(--text-h3, 1.4rem)',
                  color: 'var(--text-primary)',
                  letterSpacing: '0.01em',
                  margin: '0 0 0.8rem',
                }}
              >
                {s.h}
              </h2>
              {s.p.map((para, j) => (
                <p
                  key={j}
                  style={{
                    fontFamily: 'var(--font-serif)',
                    fontSize: 'var(--text-body)',
                    color: 'var(--text-secondary)',
                    lineHeight: 'var(--leading-relaxed)',
                    margin: j === 0 ? 0 : '0.8rem 0 0',
                    textWrap: 'pretty',
                  }}
                >
                  {para}
                </p>
              ))}
            </div>
          ))}
        </div>

        <div
          style={{
            marginTop: 'var(--space-7)',
            paddingTop: 'var(--space-6)',
            borderTop: '1px solid var(--line-on-dark)',
            fontFamily: 'var(--font-serif)',
            fontSize: 'var(--text-body)',
            color: 'var(--text-secondary)',
            lineHeight: 'var(--leading-relaxed)',
            textAlign: 'center',
          }}
        >
          <p style={{ margin: 0 }}>
            Vragen over dit beleid? Contacteer ons op{' '}
            <a href={LINKS.mail} style={{ color: 'var(--metal-gold)' }}>info@loncinrestaurant.be</a>{' '}
            of <a href={LINKS.tel} style={{ color: 'var(--metal-gold)' }}>+32 3 248 29 89</a>.
          </p>
          <p style={{ margin: '0.6rem 0 0', fontSize: 'var(--text-small)', color: 'var(--text-muted)', fontStyle: 'italic' }}>
            Restaurant Loncin · Markgravelei 127, 2018 Antwerpen · BTW BE0430 932 396
          </p>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { LegalScreen });