/* Tall Ships Race 2026 — tijdelijk scherm (echte inhoud volgt) */
function TallShipsScreen({ onNavigate }) {
  const { Eyebrow, Ornament, Button, Badge } = window.LoncinDesignSystem_6f2c51;
  const { PhotoFrame, PageHead, LINKS } = window;
  return (
    <main style={{ paddingBottom: 'var(--space-9)' }}>
      <PageHead
        eyebrow="Evenement · 2026"
        title="Tall Ships Race 2026"
        intro="Tijdens de Tall Ships Race in Antwerpen verwennen wij u met onze keuken — aan tafel in het herenhuis of aan boord, met zicht op de vloot."
      />

      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-6) var(--gutter)' }}>
        <img
          src={window.RES("assets/tall-ships-menu.png")}
          alt="Tall Ships Race 2026 — programma en formules aan boord van het luxe Yacht Evanna"
          style={{
            display: 'block',
            width: '100%',
            maxWidth: 'clamp(320px, 52vw, 560px)',
            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)',
          }}
        />
      </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 volledige programma, de menu’s en de datums worden hier toegevoegd zodra de details bekend zijn.
        </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, { TallShipsScreen });