/* Reserveren — één kaart met een stappen-wizard en pill-navigatie bovenaan.
   Stappen: gasten · datum · uur · gegevens · opmerkingen → bevestiging. */
function ReserveScreen({ onNavigate }) {
  const { Input, Button, Eyebrow, Ornament, Badge } = window.LoncinDesignSystem_6f2c51;
  const { LINKS } = window;

  const MONTHS = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
  const WEEKDAYS_FULL = ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'];
  const WEEKDAYS_MIN = ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'];

  // Tijdsloten — middag 12:00–13:45 en avond 19:00–20:45, per 15 minuten.
  const slotRange = (sh, sm, eh, em) => {
    const out = []; let h = sh, m = sm;
    while (h < eh || (h === eh && m <= em)) {
      out.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
      m += 15; if (m >= 60) { m = 0; h++; }
    }
    return out;
  };
  const LUNCH = slotRange(12, 0, 13, 45);
  const DINNER = slotRange(19, 0, 20, 45);

  /* Openingstijden per weekdag (0 = zondag … 6 = zaterdag).
     middag = lunchslots (12:00–14:00) · avond = dinerslots (19:00–22:00). */
  const DAY_HOURS = {
    0: { lunch: false, dinner: false }, // zondag — gesloten
    1: { lunch: false, dinner: true  }, // maandag — 19:00–22:00
    2: { lunch: true,  dinner: true  }, // dinsdag — 12:00–14:00, 19:00–22:00
    3: { lunch: true,  dinner: true  }, // woensdag
    4: { lunch: true,  dinner: true  }, // donderdag
    5: { lunch: true,  dinner: true  }, // vrijdag
    6: { lunch: false, dinner: true  }, // zaterdag — 19:00–22:00
  };
  const dayOpen = (d) => DAY_HOURS[d.getDay()] || { lunch: false, dinner: false };
  const isClosed = (d) => { const h = dayOpen(d); return !h.lunch && !h.dinner; };

  /* Capaciteit per service — vanaf 20 gereserveerde gasten is die service volzet
     en is telefonisch contact vereist. Reservaties worden lokaal bijgehouden. */
  const CAPACITY = 20;
  const dateKey = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  const readBookings = () => { try { return JSON.parse(localStorage.getItem('loncin_bookings') || '{}'); } catch (e) { return {}; } };
  const bookedFor = (d, session) => { if (!d) return 0; return readBookings()[`${dateKey(d)}|${session}`] || 0; };
  const sessionFull = (d, session) => bookedFor(d, session) >= CAPACITY;

  const today = React.useMemo(() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d; }, []);
  const STEPS = ['gasten', 'datum', 'uur', 'gegevens', 'opmerkingen'];
  const [step, setStep] = React.useState(0);
  const [view, setView] = React.useState(() => new Date(today.getFullYear(), today.getMonth(), 1));
  const [guests, setGuests] = React.useState(2);
  const [date, setDate] = React.useState(null);
  const [slot, setSlot] = React.useState(null);
  const [form, setForm] = React.useState({ voornaam: '', naam: '', email: '', tel: '' });
  const [notes, setNotes] = React.useState('');
  const [hasAllergie, setHasAllergie] = React.useState(false);
  const [allergie, setAllergie] = React.useState('');
  const [sent, setSent] = React.useState(false);

  const setField = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const sameDay = (a, b) => a && b && a.getTime() === b.getTime();
  const isPast = (d) => d.getTime() < today.getTime();
  const unavailable = (d) => isPast(d) || isClosed(d);

  const firstOfMonth = new Date(view.getFullYear(), view.getMonth(), 1);
  const startOffset = (firstOfMonth.getDay() + 6) % 7;
  const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startOffset; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(view.getFullYear(), view.getMonth(), d));
  while (cells.length % 7 !== 0) cells.push(null);
  const canPrev = view > new Date(today.getFullYear(), today.getMonth(), 1);
  const shiftMonth = (delta) => setView((v) => new Date(v.getFullYear(), v.getMonth() + delta, 1));

  const fmtDDMM = (d) => `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`;
  const fmtLong = (d) => `${WEEKDAYS_FULL[d.getDay()]} ${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()}`;

  const gegevensOk = form.voornaam.trim() && form.naam.trim() && form.email.trim() && form.tel.trim();
  const stepValid = [true, !!date, !!slot, gegevensOk, true];
  const canNext = stepValid[step];
  const isLast = step === STEPS.length - 1;

  const goNext = () => { if (!canNext) return; if (isLast) { recordBooking(); setSent(true); } else setStep((s) => s + 1); };
  const goPrev = () => setStep((s) => Math.max(0, s - 1));

  // Leg een bevestigde reservatie lokaal vast, zodat een service vanaf 20 gasten volzet raakt.
  const recordBooking = () => {
    if (!date || !slot) return;
    const session = LUNCH.includes(slot) ? 'middag' : 'avond';
    const key = `${dateKey(date)}|${session}`;
    const b = readBookings();
    b[key] = (b[key] || 0) + guests;
    try { localStorage.setItem('loncin_bookings', JSON.stringify(b)); } catch (e) { /* noop */ }
  };

  // Reset een gekozen tijdslot zodra de datum een service zonder dat slot of een volzette service krijgt.
  React.useEffect(() => {
    if (!date || !slot) return;
    const session = LUNCH.includes(slot) ? 'middag' : 'avond';
    const open = dayOpen(date);
    if ((session === 'middag' && !open.lunch) || (session === 'avond' && !open.dinner) || sessionFull(date, session)) setSlot(null);
  }, [date]); // eslint-disable-line react-hooks/exhaustive-deps

  // ---- pill nav ----
  const pills = [
    { label: date ? `voor ${guests}` : `voor ${guests}`, to: 0 },
    { label: date ? `op ${fmtDDMM(date)}` : 'kies datum', to: 1 },
    { label: slot ? `om ${slot}` : 'kies uur', to: 2 },
  ];
  const Pill = ({ label, to }) => {
    const active = step === to;
    return (
      <button
        type="button"
        onClick={() => setStep(to)}
        style={{
          flex: '1 1 0', minWidth: 0,
          padding: '0.6rem 0.8rem',
          borderRadius: 'var(--radius-pill, 999px)',
          fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body)',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          border: '1px solid',
          borderColor: active ? 'var(--metal-gold)' : 'var(--line-on-dark-strong)',
          background: active ? 'var(--metal-gold)' : 'transparent',
          color: active ? 'var(--text-on-metal)' : 'var(--text-secondary)',
          cursor: 'pointer', transition: 'all var(--dur-fast) var(--ease-standard)',
        }}
      >
        {label}
      </button>
    );
  };

  const Question = ({ children }) => (
    <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-h3, 1.4rem)', color: 'var(--text-primary)', letterSpacing: '0.01em', margin: '0 0 1.2rem' }}>
      {children}
    </h2>
  );

  // selectable list row (guests / time)
  const Row = ({ selected, onClick, left, right, disabled }) => (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem',
        padding: '0.85rem 1.1rem',
        borderRadius: 'var(--radius-card)',
        border: '1px solid',
        borderColor: selected ? 'var(--metal-gold)' : 'var(--line-on-dark-strong)',
        background: selected ? 'rgba(176,141,79,0.12)' : 'transparent',
        color: disabled ? 'var(--text-muted)' : 'var(--text-primary)',
        opacity: disabled ? 0.4 : 1,
        cursor: disabled ? 'not-allowed' : 'pointer',
        fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body-lg)',
        transition: 'all var(--dur-fast) var(--ease-standard)',
      }}
    >
      <span style={{ fontWeight: selected ? 600 : 400, whiteSpace: 'nowrap' }}>{left}</span>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: selected ? 'var(--metal-gold)' : 'var(--text-muted)', fontWeight: selected ? 600 : 400 }}>{right}</span>
    </button>
  );

  const FullNotice = () => (
    <div style={{ border: '1px solid var(--metal-gold)', borderRadius: 'var(--radius-card)', background: 'rgba(176,141,79,0.1)', padding: '1rem 1.1rem' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-body-lg)', color: 'var(--text-primary)', marginBottom: '0.35rem' }}>Volzet</div>
      <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body)', color: 'var(--text-secondary)', margin: 0, lineHeight: 'var(--leading-relaxed)' }}>
        Deze service is volgeboekt. Bel ons gerust op <a href={LINKS.tel} style={{ color: 'var(--metal-gold)' }}>+32 3 248 29 89</a> om zeker te zijn van een plaats.
      </p>
    </div>
  );

  const TimeList = ({ title, list, session }) => (
    <div style={{ marginBottom: '1rem' }}>
      <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'var(--text-small)', color: 'var(--text-muted)', margin: '0 0 0.5rem' }}>{title}</div>
      {sessionFull(date, session) ? <FullNotice /> : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          {list.map((t) => (
            <Row key={t} selected={slot === t} onClick={() => setSlot(t)} left={t} right={slot === t ? 'Geselecteerd' : 'Beschikbaar'} />
          ))}
        </div>
      )}
    </div>
  );

  // ---- confirmation ----
  if (sent) {
    return (
      <main style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-8) var(--gutter)' }}>
        <div data-reveal style={{ textAlign: 'center', maxWidth: 480 }}>
          <div style={{ marginBottom: '1.4rem' }}><Ornament variant="diamond" /></div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-display-m)', color: 'var(--text-primary)', margin: '1.2rem 0', letterSpacing: 'var(--tracking-display)' }}>
            Tot ziens bij Loncin
          </h2>
          <p style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)' }}>
            Wij ontvangen u graag op <strong style={{ color: 'var(--metal-gold)', fontWeight: 500 }}>{fmtLong(date)}</strong> om <strong style={{ color: 'var(--metal-gold)', fontWeight: 500 }}>{slot}</strong> met {guests} {guests === 1 ? 'gast' : 'gasten'}.
          </p>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-muted)', fontSize: 'var(--text-body)', marginTop: '0.8rem' }}>
            U ontvangt een bevestiging per e-mail binnen het uur.
          </p>
          <div style={{ marginTop: '2rem' }}>
            <Button variant="ghost" onClick={() => { setSent(false); setStep(0); setDate(null); setSlot(null); setGuests(2); }}>Nog een reservatie</Button>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main style={{ minHeight: '78vh', padding: 'var(--space-7) var(--gutter) var(--space-9)', display: 'flex', justifyContent: 'center' }}>
      <div
        data-reveal
        style={{
          width: '100%', maxWidth: 560,
          border: '1px solid var(--line-on-dark-strong)',
          borderRadius: 'var(--radius-card)',
          background: 'var(--surface-raised, #221F1A)',
          boxShadow: '0 30px 80px -40px rgba(0,0,0,0.8)',
          overflow: 'hidden',
          display: 'flex', flexDirection: 'column',
        }}
      >
        {/* Header */}
        <div style={{ position: 'relative', textAlign: 'center', padding: 'clamp(1.2rem, 4vw, 1.8rem) clamp(1.2rem, 4vw, 1.8rem) 0' }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-h2, 1.7rem)', color: 'var(--text-primary)', letterSpacing: 'var(--tracking-display)', margin: 0 }}>
            Ik reserveer
          </h1>
          <button
            type="button"
            aria-label="Sluiten"
            onClick={() => onNavigate && onNavigate('home')}
            style={{ position: 'absolute', top: 'clamp(1.2rem, 4vw, 1.8rem)', right: 'clamp(1.2rem, 4vw, 1.8rem)', width: 34, height: 34, borderRadius: 'var(--radius-sm)', border: '1px solid var(--line-on-dark)', background: 'transparent', color: 'var(--text-secondary)', cursor: 'pointer', fontSize: '1.1rem', lineHeight: 1 }}
          >
            ✕
          </button>
        </div>

        {/* Pill nav */}
        <div style={{ display: 'flex', gap: '0.6rem', padding: '1.1rem clamp(1.2rem, 4vw, 1.8rem)' }}>
          {pills.map((p) => <Pill key={p.to} label={p.label} to={p.to} />)}
        </div>

        {/* Step content */}
        <div style={{ flex: 1, minHeight: 320, maxHeight: '56vh', overflowY: 'auto', margin: '0 clamp(1.2rem, 4vw, 1.8rem)', padding: 'clamp(1.2rem, 4vw, 1.6rem)', borderRadius: 'var(--radius-card)', border: '1px solid var(--line-on-dark)', background: 'rgba(255,255,255,0.015)' }}>
          {step === 0 && (
            <div>
              <Question>Met hoeveel personen komt u?</Question>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                {[1, 2, 3, 4, 5, 6].map((n) => (
                  <Row key={n} selected={guests === n} onClick={() => setGuests(n)} left={`${n} ${n === 1 ? 'persoon' : 'personen'}`} right={guests === n ? 'Geselecteerd' : ''} />
                ))}
              </div>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'var(--text-small)', color: 'var(--text-muted)', margin: '1rem 0 0' }}>
                Meer dan 6 personen? Bel ons gerust op <a href={LINKS.tel} style={{ color: 'var(--metal-gold)' }}>+32 3 248 29 89</a>.
              </p>
            </div>
          )}

          {step === 1 && (
            <div>
              <Question>Welke datum wenst u langs te komen?</Question>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.9rem' }}>
                <button type="button" onClick={() => canPrev && shiftMonth(-1)} disabled={!canPrev} aria-label="Vorige maand" style={{ width: 34, height: 34, borderRadius: '50%', border: '1px solid var(--line-on-dark-strong)', background: 'transparent', color: canPrev ? 'var(--text-primary)' : 'var(--text-muted)', cursor: canPrev ? 'pointer' : 'not-allowed', opacity: canPrev ? 1 : 0.35, fontSize: '1rem', lineHeight: 1 }}>‹</button>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4, 1.15rem)', color: 'var(--text-primary)', textTransform: 'capitalize' }}>{MONTHS[view.getMonth()]} {view.getFullYear()}</span>
                <button type="button" onClick={() => shiftMonth(1)} aria-label="Volgende maand" style={{ width: 34, height: 34, borderRadius: '50%', border: '1px solid var(--line-on-dark-strong)', background: 'transparent', color: 'var(--text-primary)', cursor: 'pointer', fontSize: '1rem', lineHeight: 1 }}>›</button>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '4px', marginBottom: '4px' }}>
                {WEEKDAYS_MIN.map((w) => (
                  <div key={w} style={{ textAlign: 'center', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)', padding: '0.2rem 0' }}>{w}</div>
                ))}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '4px' }}>
                {cells.map((d, i) => {
                  if (!d) return <div key={`e${i}`} />;
                  const selected = sameDay(d, date);
                  const off = unavailable(d);
                  const isToday = sameDay(d, today);
                  return (
                    <button key={d.getTime()} type="button" onClick={() => { if (!off) setDate(d); }} disabled={off} aria-pressed={selected}
                      style={{
                        aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center',
                        borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body)',
                        border: '1px solid', borderColor: selected ? 'var(--metal-gold)' : (isToday && !off ? 'var(--line-on-dark-strong)' : 'transparent'),
                        background: selected ? 'var(--metal-gold)' : 'transparent',
                        color: selected ? 'var(--text-on-metal)' : (off ? 'var(--text-muted)' : 'var(--text-primary)'),
                        opacity: off ? 0.3 : 1, cursor: off ? 'not-allowed' : 'pointer',
                        transition: 'all var(--dur-fast) var(--ease-standard)',
                      }}
                    >{d.getDate()}</button>
                  );
                })}
              </div>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'var(--text-small)', color: 'var(--text-muted)', margin: '1rem 0 0' }}>Gesloten op zondag. Op maandag en zaterdag enkel ’s avonds.</p>
            </div>
          )}

          {step === 2 && (
            <div>
              <Question>Welk tijdstip wenst u langs te komen?</Question>
              {!date && <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-muted)', margin: '0 0 1rem' }}>Kies eerst een datum.</p>}
              <div style={{ opacity: date ? 1 : 0.5, pointerEvents: date ? 'auto' : 'none' }}>
                {date && dayOpen(date).lunch && <TimeList title="Middag" list={LUNCH} session="middag" />}
                {date && dayOpen(date).dinner && <TimeList title="Avond" list={DINNER} session="avond" />}
              </div>
            </div>
          )}

          {step === 3 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              <Question>Hoe kunnen wij u bereiken?</Question>
              <Input label="Voornaam" placeholder="Uw voornaam" value={form.voornaam} onChange={setField('voornaam')} required />
              <Input label="Achternaam" placeholder="Uw achternaam" value={form.naam} onChange={setField('naam')} required />
              <Input label="E-mail" type="email" placeholder="u@voorbeeld.be" value={form.email} onChange={setField('email')} required />
              <Input label="Telefoonnummer" type="tel" placeholder="+32 ..." value={form.tel} onChange={setField('tel')} required />
            </div>
          )}

          {step === 4 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              <Question>Heeft u nog vragen of opmerkingen?</Question>
              <textarea
                className="loncin-input"
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                rows={4}
                placeholder="Uw bericht …"
                style={{ width: '100%', resize: 'vertical', fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body)', color: 'var(--text-primary)', background: 'rgba(242,236,224,0.03)', border: '1px solid var(--line-on-dark-strong)', borderRadius: 'var(--radius-sm)', padding: '0.85rem 1rem' }}
              />
              <label style={{ display: 'flex', alignItems: 'flex-start', gap: '0.7rem', cursor: 'pointer' }}>
                <input type="checkbox" checked={hasAllergie} onChange={(e) => setHasAllergie(e.target.checked)} style={{ width: 20, height: 20, marginTop: 2, accentColor: 'var(--metal-gold)', flex: '0 0 auto' }} />
                <span style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', fontSize: 'var(--text-body)' }}>Heeft u allergieën om rekening mee te houden?</span>
              </label>
              {hasAllergie && (
                <textarea
                  className="loncin-input"
                  value={allergie}
                  onChange={(e) => setAllergie(e.target.value)}
                  rows={3}
                  placeholder="Welke allergieën?"
                  style={{ width: '100%', resize: 'vertical', fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body)', color: 'var(--text-primary)', background: 'rgba(242,236,224,0.03)', border: '1px solid var(--line-on-dark-strong)', borderRadius: 'var(--radius-sm)', padding: '0.85rem 1rem' }}
                />
              )}
            </div>
          )}
        </div>

        {/* Footer nav */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem', padding: 'clamp(1.2rem, 4vw, 1.8rem)' }}>
          {step > 0 ? (
            <button type="button" onClick={goPrev} style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-secondary)', textDecoration: 'underline', textUnderlineOffset: '0.3em' }}>
              Vorige
            </button>
          ) : <span />}
          <Button variant="primary" onClick={goNext} disabled={!canNext}>
            {isLast ? 'Reserveer nu' : 'Volgende stap'}
          </Button>
        </div>
      </div>
    </main>
  );
}
Object.assign(window, { ReserveScreen });