// Booking modal — multi-step (cruise → date+slot → details → confirm)
function BookingModal({ open, onClose, initialCruise = 0 }) {
  const { t, lang } = useI18n();
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    cruise: initialCruise,
    date: null,
    slot: null,
    people: 2,
    name: '',
    email: '',
    phone: '',
    notes: '',
  });
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setStep(0);
      setDone(false);
      setData(d => ({ ...d, cruise: initialCruise }));
    }
  }, [open, initialCruise]);

  useScrollLock(open);
  if (!open) return null;

  const cruise = t.cruises.items[data.cruise];

  // Pricing extraction (parse "from €65" → 65; for private "/ boat" use flat)
  const priceMatch = cruise.price.match(/(\d+)/);
  const basePrice = priceMatch ? parseInt(priceMatch[1]) : 0;
  const isFlatBoat = cruise.unit.includes('boat') || cruise.unit.includes('barcaț') || cruise.unit.includes('embarc');
  const total = isFlatBoat ? basePrice : basePrice * data.people;
  const deposit = Math.round(total * 0.3);

  const slots = ['10:00 – 14:00', '14:00 – 18:00', '17:00 – 19:00', '19:00 – 21:00'];
  const takenSlots = data.date ? [(data.date.day * 7) % 4] : [];

  const next = () => setStep(s => Math.min(s + 1, 3));
  const back = () => setStep(s => Math.max(s - 1, 0));

  const submit = (e) => {
    e.preventDefault();
    setDone(true);
  };

  const canNext = (() => {
    if (step === 0) return data.cruise !== null;
    if (step === 1) return data.date && data.slot !== null;
    if (step === 2) return data.name && data.email;
    return false;
  })();

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="modal-head">
          <h2 className="modal-title">{done ? t.book.success : t.book.title}</h2>
          <button className="close-btn" onClick={onClose} aria-label="Close" style={{ borderColor: 'var(--line-strong)', color: 'var(--ink)' }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M18 6L6 18M6 6l12 12" strokeLinecap="round"/></svg>
          </button>
        </div>

        {done ? (
          <div className="modal-body" style={{ textAlign: 'center', padding: '64px 32px' }}>
            <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'rgba(184, 146, 76, 0.15)', color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
            </div>
            <h3 className="display" style={{ fontSize: 32, marginBottom: 12 }}>{t.book.success}</h3>
            <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.6, maxWidth: 420, margin: '0 auto 32px' }}>{t.book.successSub}</p>
            <div style={{ background: 'var(--cream)', borderRadius: 'var(--r-2)', padding: 24, textAlign: 'left', maxWidth: 480, margin: '0 auto' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12, fontSize: 14 }}>
                <span style={{ color: 'var(--ink-mute)' }}>{cruise.name}</span>
                <span style={{ fontWeight: 500 }}>{data.date ? `${data.date.day}/${data.date.month + 1}` : ''}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12, fontSize: 14 }}>
                <span style={{ color: 'var(--ink-mute)' }}>{slots[data.slot]}</span>
                <span>{data.people} {t.book.people.toLowerCase()}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--line)', fontFamily: 'var(--display)', fontSize: 20, color: 'var(--terracotta)' }}>
                <span>{t.book.total}</span>
                <span>{total}€</span>
              </div>
            </div>
            <button className="btn btn-primary btn-lg" style={{ marginTop: 32 }} onClick={onClose}>{t.book.done}</button>
          </div>
        ) : (
          <>
            <div className="modal-body">
              {/* Steps bar */}
              <div className="steps-bar">
                {[0, 1, 2, 3].map(i => (
                  <div key={i} className={'step-dot ' + (i <= step ? 'active' : '')}></div>
                ))}
              </div>
              <div className="step-label">
                {[t.book.step1, t.book.step2, t.book.step3, t.book.step4][step]}
              </div>

              {step === 0 && (
                <div className="modal-cruise-list">
                  {t.cruises.items.map((c, i) => (
                    <button
                      key={i}
                      type="button"
                      className={'modal-cruise-opt ' + (data.cruise === i ? 'selected' : '')}
                      onClick={() => setData({...data, cruise: i})}
                    >
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div className="modal-cruise-opt-name">{c.name}</div>
                        <div className="modal-cruise-opt-meta">{c.duration} · {c.time.split('/')[0].trim()}</div>
                      </div>
                      <div className="modal-cruise-opt-price">
                        <div className="v">{c.price}</div>
                        <div className="u">{c.unit}</div>
                      </div>
                    </button>
                  ))}
                </div>
              )}

              {step === 1 && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                  <Calendar selected={data.date} onSelect={d => setData({...data, date: d, slot: null})} />
                  {data.date && (
                    <div>
                      <div className="step-label" style={{ marginBottom: 12 }}>{t.book.slot}</div>
                      <div className="slots-grid">
                        {slots.map((s, i) => (
                          <button
                            key={i}
                            type="button"
                            className={'slot-btn ' + (data.slot === i ? 'selected' : '') + (takenSlots.includes(i) ? ' taken' : '')}
                            onClick={() => !takenSlots.includes(i) && setData({...data, slot: i})}
                            disabled={takenSlots.includes(i)}
                          >{s}</button>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {step === 2 && (
                <form style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  <div>
                    <div className="step-label" style={{ marginBottom: 12 }}>{t.book.people}</div>
                    <div className="stepper">
                      <button type="button" onClick={() => setData({...data, people: Math.max(1, data.people - 1)})} disabled={data.people <= 1}>−</button>
                      <span className="stepper-value">{data.people}</span>
                      <button type="button" onClick={() => setData({...data, people: Math.min(10, data.people + 1)})} disabled={data.people >= 10}>+</button>
                    </div>
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label>{t.contact.form.name}</label>
                      <input required value={data.name} onChange={e => setData({...data, name: e.target.value})} />
                    </div>
                    <div className="field">
                      <label>{t.contact.form.email}</label>
                      <input type="email" required value={data.email} onChange={e => setData({...data, email: e.target.value})} />
                    </div>
                  </div>
                  <div className="field">
                    <label>{t.contact.form.phone}</label>
                    <input type="tel" value={data.phone} onChange={e => setData({...data, phone: e.target.value})} />
                  </div>
                  <div className="field">
                    <label>{t.contact.form.message}</label>
                    <textarea rows="3" value={data.notes} onChange={e => setData({...data, notes: e.target.value})}></textarea>
                  </div>
                </form>
              )}

              {step === 3 && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-2)', padding: 24 }}>
                    <ConfirmRow label={t.cruises.eyebrow} value={cruise.name} />
                    <ConfirmRow label={t.book.step2} value={data.date ? `${String(data.date.day).padStart(2,'0')}.${String(data.date.month + 1).padStart(2,'0')}.${data.date.year}` : '—'} />
                    <ConfirmRow label={t.book.slot} value={slots[data.slot]} />
                    <ConfirmRow label={t.book.people} value={String(data.people)} />
                    <ConfirmRow label={t.contact.form.name} value={data.name} />
                    <ConfirmRow label={t.contact.form.email} value={data.email} />
                    {data.phone && <ConfirmRow label={t.contact.form.phone} value={data.phone} />}
                    <hr style={{ border: 'none', borderTop: '1px solid var(--line)', margin: '16px 0' }} />
                    <ConfirmRow label={t.book.total} value={`${total} €`} highlight />
                    <ConfirmRow label={t.book.deposit} value={`${deposit} € · ${t.book.payRest}`} sub />
                  </div>
                  <p style={{ fontSize: 12, color: 'var(--ink-mute)', lineHeight: 1.5 }}>{t.book.legalNote}</p>
                </div>
              )}
            </div>

            <div className="modal-foot">
              <div className="modal-summary">
                {(step >= 1 && data.date && data.slot !== null) ? (
                  <>
                    <span style={{ color: 'var(--ink-mute)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>{t.book.total}</span>
                    <span className="total">{total} €</span>
                  </>
                ) : (
                  <span style={{ color: 'var(--ink-mute)', fontSize: 13 }}>
                    {step + 1} / 4
                  </span>
                )}
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                {step > 0 && (
                  <button className="btn btn-ghost btn-sm" onClick={back}>← {t.book.back}</button>
                )}
                {step < 3 ? (
                  <button className="btn btn-primary btn-sm" onClick={next} disabled={!canNext} style={{ opacity: canNext ? 1 : 0.4 }}>
                    {t.book.next} →
                  </button>
                ) : (
                  <button className="btn btn-primary btn-sm" onClick={submit}>
                    {t.book.confirm} →
                  </button>
                )}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function ConfirmRow({ label, value, highlight, sub }) {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'baseline',
      gap: 16,
      padding: sub ? '4px 0' : '8px 0',
    }}>
      <span style={{
        fontSize: sub ? 12 : 13,
        color: 'var(--ink-mute)',
        letterSpacing: '0.04em',
      }}>{label}</span>
      <span style={{
        fontFamily: highlight ? 'var(--display)' : 'var(--body)',
        fontSize: highlight ? 22 : (sub ? 12 : 15),
        color: highlight ? 'var(--terracotta)' : (sub ? 'var(--ink-mute)' : 'var(--ink)'),
        fontWeight: highlight ? 500 : 500,
        textAlign: 'right',
      }}>{value}</span>
    </div>
  );
}

// ===== CALENDAR =====
function Calendar({ selected, onSelect }) {
  const { lang } = useI18n();
  const today = new Date();
  const [view, setView] = React.useState({ year: today.getFullYear(), month: today.getMonth() });

  const monthNames = {
    ro: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie','Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
    en: ['January','February','March','April','May','June','July','August','September','October','November','December'],
    es: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
  }[lang];
  const dows = {
    ro: ['L','Ma','Mi','J','V','S','D'],
    en: ['M','T','W','T','F','S','S'],
    es: ['L','M','X','J','V','S','D'],
  }[lang];

  const firstDay = new Date(view.year, view.month, 1);
  const lastDay = new Date(view.year, view.month + 1, 0);
  // Mon = 0
  const startOffset = (firstDay.getDay() + 6) % 7;
  const daysInMonth = lastDay.getDate();

  const cells = [];
  for (let i = 0; i < startOffset; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const todayIs = (d) => d === today.getDate() && view.month === today.getMonth() && view.year === today.getFullYear();
  const isPast = (d) => {
    const dt = new Date(view.year, view.month, d);
    const todayMidnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    return dt < todayMidnight;
  };
  // Mock: every 5th day is fully booked
  const isBooked = (d) => (d * 7 + view.month) % 11 === 0;
  // Available booking dot for ~70% of future days
  const isAvailable = (d) => !isPast(d) && !isBooked(d);

  const isSelected = (d) => selected && selected.day === d && selected.month === view.month && selected.year === view.year;

  const canPrev = !(view.year === today.getFullYear() && view.month === today.getMonth());

  return (
    <div className="calendar">
      <div className="calendar-head">
        <div className="calendar-title">{monthNames[view.month]} {view.year}</div>
        <div className="calendar-nav">
          <button onClick={() => setView(v => ({ year: v.month === 0 ? v.year - 1 : v.year, month: (v.month + 11) % 12 }))} disabled={!canPrev} aria-label="Previous month">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button onClick={() => setView(v => ({ year: v.month === 11 ? v.year + 1 : v.year, month: (v.month + 1) % 12 }))} aria-label="Next month">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
      <div className="calendar-grid">
        {dows.map((d, i) => <div key={i} className="calendar-dow">{d}</div>)}
        {cells.map((d, i) => {
          if (d === null) return <div key={i}></div>;
          const past = isPast(d);
          const booked = isBooked(d);
          const cls = ['calendar-day'];
          if (past) cls.push('disabled');
          else if (booked) cls.push('booked');
          else if (isAvailable(d)) cls.push('available');
          if (todayIs(d)) cls.push('today');
          if (isSelected(d)) cls.push('selected');
          return (
            <button
              key={i}
              className={cls.join(' ')}
              onClick={() => !past && !booked && onSelect({ day: d, month: view.month, year: view.year })}
              disabled={past || booked}
              type="button"
            >
              {d}
            </button>
          );
        })}
      </div>
      <div className="calendar-legend">
        <div className="calendar-legend-item">
          <span className="calendar-legend-dot" style={{ background: 'var(--gold)' }}></span>
          <span>{ {ro: 'Disponibil', en: 'Available', es: 'Disponible'}[lang] }</span>
        </div>
        <div className="calendar-legend-item">
          <span style={{ textDecoration: 'line-through', opacity: 0.5 }}>00</span>
          <span>{ {ro: 'Rezervat', en: 'Booked', es: 'Reservado'}[lang] }</span>
        </div>
        <div className="calendar-legend-item">
          <span className="calendar-legend-dot" style={{ background: 'var(--terracotta)' }}></span>
          <span>{ {ro: 'Selectat', en: 'Selected', es: 'Seleccionado'}[lang] }</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BookingModal, Calendar, ConfirmRow });