/* steps.jsx — Landing hero + 5 booking steps + confirmation */

const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS, useRef: useRefS } = React;

/* ─── Landing Hero ─────────────────────────────────────────────────────── */
function Hero({ lang, onBook, onPickSlot, nextAvailable }) {
  const t = I18N[lang].hero;
  return (
    <section className="hero" data-screen-label="00 Landing">
      <div className="hero-l">
        <div className="hero-eyebrow eyebrow">
          <span className="dot" />
          <span>{t.eyebrow}</span>
        </div>
        <h1 className="hero-title display">
          {t.title_1}
          <br />
          <em>{t.title_em}</em> {t.title_2}
        </h1>
        <p className="hero-sub">{t.sub}</p>
        <div className="hero-cta">
          <button className="btn btn-primary btn-lg" onClick={onBook}>
            {t.cta_book}<Icon name="arrow" size={16} />
          </button>
          <a className="btn btn-ghost btn-lg" href="tel:+37797700733">
            <Icon name="phone" size={16} />+377 97 70 07 33
          </a>
        </div>
        <div className="hero-stats">
          {t.stats.map((s, i) => (
            <div className="hero-stat" key={i}>
              <b className="display">{s.n}</b>
              <span>{s.l}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="hero-r">
        <div className="next-slot">
          <div className="label">{t.next_label}</div>
          <div className="when display">{t.next_when}</div>
          <div className="grid">
            {t.slots.map((s, i) => (
              <button key={s} className={`slot ${i === 0 ? 'featured' : ''}`}
                      onClick={() => onPickSlot(nextAvailable, s)}>
                {s}
              </button>
            ))}
          </div>
        </div>

        <div className="info-card">
          <div>
            <h4>{t.address.h}</h4>
            <p style={{ whiteSpace: 'pre-line' }}>{t.address.l}</p>
          </div>
          <div>
            <h4>{t.hours.h}</h4>
            {t.hours.rows.map(([d, h]) => (
              <div className="row" key={d}><span>{d}</span><span>{h}</span></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Step 1 — Treatment ───────────────────────────────────────────────── */
function Step1Treatment({ lang, state, setState, onNext }) {
  const t = I18N[lang].step1;
  const groups = TREATMENTS[lang].groups;
  return (
    <main className="step-main" data-screen-label="01 Treatment">
      <a href="tel:+37797700733" className="urgence-banner">
        <div>
          <b className="display">{t.urgence_t}<em>{t.urgence_em}</em></b>
          <p>{t.urgence_p}</p>
        </div>
        <span className="call"><Icon name="phone" size={14} />+377 97 70 07 33</span>
      </a>

      <div className="eyebrow">{`Étape 1 / 5`.replace('Étape', lang === 'fr' ? 'Étape' : 'Step')}</div>
      <h2 className="step-title">
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h2>
      <p className="step-lede">{t.lede}</p>

      {groups.map((g) => (
        <div key={g.title} className="tx-group">
          <div className="group-h">
            <h3>{g.title.replace(g.emTitle, '')}<em>{g.emTitle}</em></h3>
          </div>
          <div className="tx-grid">
            {g.items.map((it) => (
              <button
                key={it.id}
                className={`tx-card ${state.treatment === it.id ? 'selected' : ''}`}
                onClick={() => setState({ ...state, treatment: it.id })}
              >
                <div className="tx-icon"><Icon name={it.icon} size={24} /></div>
                <div className="tx-name display">{it.name}</div>
                <div className="tx-desc">{it.desc}</div>
                <div className="tx-meta">
                  <span className="tx-time">⏱ {it.time}</span>
                  <span className="tx-price">{it.price}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      ))}

      <div className="step-foot">
        <span />
        <button className="btn btn-primary" disabled={!state.treatment} onClick={onNext}>
          {t.cta_next}<Icon name="arrow" size={16} />
        </button>
      </div>
    </main>
  );
}

/* ─── Step 2 — Practitioner ────────────────────────────────────────────── */
function Step2Practitioner({ lang, state, setState, onNext, onBack }) {
  const t = I18N[lang].step2;
  const tBack = lang === 'fr' ? 'Retour' : 'Back';
  return (
    <main className="step-main" data-screen-label="02 Practitioner">
      <div className="eyebrow">{lang === 'fr' ? 'Étape 2 / 5' : 'Step 2 / 5'}</div>
      <h2 className="step-title">
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h2>
      <p className="step-lede">{t.lede}</p>

      <div className="prac-list">
        {PRACTITIONERS.map((p) => {
          const selected = state.practitioner === p.id;
          return (
            <button key={p.id}
                    className={`prac-card ${selected ? 'selected' : ''}`}
                    onClick={() => setState({ ...state, practitioner: p.id })}>
              <span className="prac-avatar">{p.initials}</span>
              <div>
                <h4 className="prac-name display">{p.name}</h4>
                <p className="prac-role">{lang === 'fr' ? p.role : p.roleEn}</p>
                <div className="prac-tags">
                  {p.tags.map((tag) => <span key={tag} className="prac-tag">{tag}</span>)}
                </div>
              </div>
              <div className="prac-meta">
                <span className="prac-langs mono">{p.langs.join(' · ')}</span>
                <span className="prac-radio" />
              </div>
            </button>
          );
        })}
        <button className={`prac-card ${state.practitioner === 'auto' ? 'selected' : ''}`}
                onClick={() => setState({ ...state, practitioner: 'auto' })}>
          <span className="prac-avatar auto"><Icon name="sparkle" size={20} /></span>
          <div>
            <h4 className="prac-name display">{t.auto_name}</h4>
            <p className="prac-role">{t.auto_role}</p>
            <div className="prac-tags">
              <span className="prac-tag">{t.auto_meta}</span>
            </div>
          </div>
          <div className="prac-meta">
            <span className="badge-reco">{t.reco}</span>
            <span className="prac-radio" />
          </div>
        </button>
      </div>

      <div className="step-foot">
        <button className="btn-back" onClick={onBack}><Icon name="arrowBack" size={14} />{tBack}</button>
        <button className="btn btn-primary" disabled={!state.practitioner} onClick={onNext}>
          {t.cta_next}<Icon name="arrow" size={16} />
        </button>
      </div>
    </main>
  );
}

/* ─── Step 3 — Calendar (day strip) ────────────────────────────────────── */
function Step3Calendar({ lang, state, setState, onNext, onBack, calendarStyle }) {
  const t = I18N[lang].step3;
  const tBack = lang === 'fr' ? 'Retour' : 'Back';
  const today = useMemoS(() => { const d = new Date(); d.setHours(0,0,0,0); return d; }, []);
  const [weekStart, setWeekStart] = useStateS(() => {
    const d = new Date(today);
    return d;
  });
  const [monthAnchor, setMonthAnchor] = useStateS(() => new Date(today.getFullYear(), today.getMonth(), 1));

  // ─── Day strip view ─────────
  const days = useMemoS(() => {
    const arr = [];
    for (let i = 0; i < 7; i++) {
      const d = new Date(weekStart);
      d.setDate(weekStart.getDate() + i);
      arr.push(d);
    }
    return arr;
  }, [weekStart]);

  const goPrev = () => {
    const d = new Date(weekStart);
    d.setDate(d.getDate() - 7);
    if (d < today) return;
    setWeekStart(d);
  };
  const goNext = () => {
    const d = new Date(weekStart);
    d.setDate(d.getDate() + 7);
    setWeekStart(d);
  };

  const monthLabel = useMemoS(() => {
    const t1 = I18N[lang];
    const last = days[6];
    if (days[0].getMonth() === last.getMonth()) {
      return `${t1.months[days[0].getMonth()]} ${days[0].getFullYear()}`;
    }
    return `${t1.months[days[0].getMonth()]} – ${t1.months[last.getMonth()]} ${last.getFullYear()}`;
  }, [days, lang]);

  const labelForDay = (d) => {
    const tt = I18N[lang];
    if (isSameDay(d, today)) return tt.today;
    const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1);
    if (isSameDay(d, tomorrow)) return tt.tomorrow;
    return tt.weekdays[(d.getDay() + 6) % 7];
  };

  const slots = state.date ? slotsForDay(state.date, lang) : null;

  // ─── Month view ─────────
  const monthDays = useMemoS(() => {
    const first = new Date(monthAnchor.getFullYear(), monthAnchor.getMonth(), 1);
    const startOffset = (first.getDay() + 6) % 7;
    const start = new Date(first);
    start.setDate(first.getDate() - startOffset);
    const arr = [];
    for (let i = 0; i < 42; i++) {
      const d = new Date(start);
      d.setDate(start.getDate() + i);
      arr.push(d);
    }
    return arr;
  }, [monthAnchor]);

  const monthLabelGrid = `${I18N[lang].months[monthAnchor.getMonth()]} ${monthAnchor.getFullYear()}`;

  return (
    <main className="step-main" data-screen-label="03 Date">
      <div className="eyebrow">{lang === 'fr' ? 'Étape 3 / 5' : 'Step 3 / 5'}</div>
      <h2 className="step-title">
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h2>
      <p className="step-lede">{t.lede}</p>

      {calendarStyle === 'strip' ? (
        <div className="cal-wrap">
          <div className="cal-head">
            <h4 className="display">{monthLabel}</h4>
            <div className="nav">
              <button onClick={goPrev} aria-label="Previous week"><Icon name="chevL" size={16} /></button>
              <button onClick={goNext} aria-label="Next week"><Icon name="chevR" size={16} /></button>
            </div>
          </div>
          <div className="cal-days">
            {days.map((d) => {
              const a = dayAvail(d);
              const tt = I18N[lang];
              const past = d < today;
              const unavail = past || !a.open || a.count === 0;
              const selected = isSameDay(d, state.date);
              return (
                <button key={d.toISOString()}
                        className={`cal-day ${unavail ? 'unavail' : ''} ${selected ? 'selected' : ''}`}
                        onClick={() => !unavail && setState({ ...state, date: new Date(d), time: null })}>
                  <span className="dow">{labelForDay(d)}</span>
                  <span className="dnum">{d.getDate()}</span>
                  <span className="avail">
                    {past ? '—' : (a.open && a.count > 0 ? `● ${tt.avail(a.count)}` : tt.avail_none)}
                  </span>
                </button>
              );
            })}
          </div>
          <div className="cal-slots">
            {!state.date ? (
              <div className="cal-empty">
                <div className="display">{t.empty_t}</div>
                <div>{t.empty_p}</div>
              </div>
            ) : (
              <>
                {slots.morning.length > 0 && (
                  <>
                    <div className="cal-section-label">{t.morning}</div>
                    {slots.morning.map((time) => (
                      <button key={time}
                              className={`cal-slot ${state.time === time ? 'selected' : ''}`}
                              onClick={() => setState({ ...state, time })}>
                        {time}
                      </button>
                    ))}
                  </>
                )}
                {slots.afternoon.length > 0 && (
                  <>
                    <div className="cal-section-label">{t.afternoon}</div>
                    {slots.afternoon.map((time) => (
                      <button key={time}
                              className={`cal-slot ${state.time === time ? 'selected' : ''}`}
                              onClick={() => setState({ ...state, time })}>
                        {time}
                      </button>
                    ))}
                  </>
                )}
                {slots.evening.length > 0 && (
                  <>
                    <div className="cal-section-label">{t.evening}</div>
                    {slots.evening.map((time) => (
                      <button key={time}
                              className={`cal-slot ${state.time === time ? 'selected' : ''}`}
                              onClick={() => setState({ ...state, time })}>
                        {time}
                      </button>
                    ))}
                  </>
                )}
                {slots.morning.length + slots.afternoon.length + slots.evening.length === 0 && (
                  <div className="cal-empty">
                    <div className="display">{I18N[lang].avail_none}</div>
                    <div>{lang === 'fr' ? 'Choisissez un autre jour.' : 'Pick another day.'}</div>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      ) : (
        // Month grid
        <div className="cal-wrap">
          <div className="cal-head">
            <h4 className="display">{monthLabelGrid}</h4>
            <div className="nav">
              <button onClick={() => {
                const d = new Date(monthAnchor); d.setMonth(d.getMonth() - 1);
                if (d.getFullYear() < today.getFullYear() || (d.getFullYear() === today.getFullYear() && d.getMonth() < today.getMonth())) return;
                setMonthAnchor(d);
              }}><Icon name="chevL" size={16} /></button>
              <button onClick={() => {
                const d = new Date(monthAnchor); d.setMonth(d.getMonth() + 1);
                setMonthAnchor(d);
              }}><Icon name="chevR" size={16} /></button>
            </div>
          </div>
          <div className="month-grid">
            {I18N[lang].weekdays_short.map((w, i) => (<div key={i} className="month-wkd">{w}</div>))}
            {monthDays.map((d) => {
              const inMonth = d.getMonth() === monthAnchor.getMonth();
              const a = dayAvail(d);
              const past = d < today;
              const unavail = past || !a.open || a.count === 0;
              const sel = isSameDay(d, state.date);
              return (
                <button key={d.toISOString()}
                        className={`month-cell ${!inMonth ? 'muted' : ''} ${unavail ? 'unavail' : 'has-avail'} ${sel ? 'selected' : ''}`}
                        onClick={() => !unavail && setState({ ...state, date: new Date(d), time: null })}>
                  {d.getDate()}
                </button>
              );
            })}
          </div>
          {state.date && (
            <div className="cal-slots" style={{ borderTop: '1px solid var(--hair)' }}>
              {(() => {
                const sl = slotsForDay(state.date, lang);
                const all = [...sl.morning, ...sl.afternoon, ...sl.evening];
                if (all.length === 0) return (
                  <div className="cal-empty">
                    <div className="display">{I18N[lang].avail_none}</div>
                  </div>
                );
                return all.map((time) => (
                  <button key={time}
                          className={`cal-slot ${state.time === time ? 'selected' : ''}`}
                          onClick={() => setState({ ...state, time })}>
                    {time}
                  </button>
                ));
              })()}
            </div>
          )}
        </div>
      )}

      <div className="step-foot">
        <button className="btn-back" onClick={onBack}><Icon name="arrowBack" size={14} />{tBack}</button>
        <button className="btn btn-primary" disabled={!state.date || !state.time} onClick={onNext}>
          {t.cta_next}<Icon name="arrow" size={16} />
        </button>
      </div>
    </main>
  );
}

/* ─── Step 4 — Patient Info ────────────────────────────────────────────── */
function Step4Info({ lang, state, setState, onNext, onBack }) {
  const t = I18N[lang].step4;
  const tBack = lang === 'fr' ? 'Retour' : 'Back';
  const p = state.patient;
  const setP = (k, v) => setState({ ...state, patient: { ...p, [k]: v } });
  const valid = p.first && p.last && p.phone && p.email && p.consent;
  const toggleAnt = (name) => {
    const next = p.antecedents.includes(name)
      ? p.antecedents.filter((n) => n !== name)
      : [...p.antecedents, name];
    setP('antecedents', next);
  };
  return (
    <main className="step-main" data-screen-label="04 Info">
      <div className="eyebrow">{lang === 'fr' ? 'Étape 4 / 5' : 'Step 4 / 5'}</div>
      <h2 className="step-title">
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h2>
      <p className="step-lede">{t.lede}</p>

      <div className="group-h"><h3>{t.antecedents}</h3></div>
      <div className="chk-grid">
        {t.antecedents_list.map((name) => (
          <label key={name} className={`chk-pill ${p.antecedents.includes(name) ? 'on' : ''}`}>
            <span className="chk-box" />
            <span>{name}</span>
            <input type="checkbox" hidden checked={p.antecedents.includes(name)}
                   onChange={() => toggleAnt(name)} />
          </label>
        ))}
      </div>

      <div className="group-h" style={{ marginTop: 28 }}>
        <h3>{lang === 'fr' ? 'Vos coordonnées' : 'Your contact details'}</h3>
      </div>
      <div className="form-grid">
        <Field label={t.first} required>
          <input value={p.first} onChange={(e) => setP('first', e.target.value)} placeholder={lang === 'fr' ? 'Sophia' : 'Sophia'} />
        </Field>
        <Field label={t.last} required>
          <input value={p.last} onChange={(e) => setP('last', e.target.value)} placeholder={lang === 'fr' ? 'Bianchi' : 'Bianchi'} />
        </Field>
        <Field label={t.dob}>
          <input type="date" value={p.dob} onChange={(e) => setP('dob', e.target.value)} />
        </Field>
        <Field label={t.phone} required>
          <input value={p.phone} onChange={(e) => setP('phone', e.target.value)} placeholder="+377 …" />
        </Field>
        <Field label={t.email} required>
          <input type="email" value={p.email} onChange={(e) => setP('email', e.target.value)} placeholder="sophia@example.com" />
        </Field>
        <Field label={t.status}>
          <select value={p.status} onChange={(e) => setP('status', e.target.value)}>
            {t.status_opts.map((o) => <option key={o.v} value={o.v}>{o.l}</option>)}
          </select>
        </Field>
        <Field label={t.ssn}>
          <input value={p.ssn} onChange={(e) => setP('ssn', e.target.value)} placeholder="1 75 …" />
        </Field>
        <Field label={t.mutuelle}>
          <input value={p.mutuelle} onChange={(e) => setP('mutuelle', e.target.value)} placeholder={lang === 'fr' ? 'Mutuelle Générale, MGEN…' : 'Insurance provider…'} />
        </Field>
        <Field label={t.notes} full>
          <textarea value={p.notes} onChange={(e) => setP('notes', e.target.value)} placeholder={t.notes_ph} />
        </Field>
      </div>

      <label className={`consent ${p.consent ? 'on' : ''}`}
             onClick={(e) => { e.preventDefault(); setP('consent', !p.consent); }}>
        <span className="chk-box" />
        <span>{t.consent}</span>
      </label>

      <div className="step-foot">
        <button className="btn-back" onClick={onBack}><Icon name="arrowBack" size={14} />{tBack}</button>
        <button className="btn btn-primary" disabled={!valid} onClick={onNext}>
          {t.cta_next}<Icon name="arrow" size={16} />
        </button>
      </div>
    </main>
  );
}

const Field = ({ label, children, required, full }) => (
  <div className={`form-field ${full ? 'full' : ''}`}>
    <label>{label}{required && <span style={{ color: 'var(--accent-ink)' }}> ·</span>}</label>
    {children}
  </div>
);

/* ─── Step 5 — Review ──────────────────────────────────────────────────── */
function Step5Review({ lang, state, onConfirm, onBack }) {
  const t = I18N[lang].step5;
  const tx = (() => {
    for (const g of TREATMENTS[lang].groups) {
      const m = g.items.find((x) => x.id === state.treatment);
      if (m) return m;
    }
    return null;
  })();
  const prac = state.practitioner === 'auto'
    ? { name: I18N[lang].step2.auto_name }
    : PRACTITIONERS.find((p) => p.id === state.practitioner);
  return (
    <main className="step-main" data-screen-label="05 Review">
      <div className="eyebrow">{lang === 'fr' ? 'Étape 5 / 5' : 'Step 5 / 5'}</div>
      <h2 className="step-title">
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h2>
      <p className="step-lede">{t.lede}</p>

      <div className="confirm-card">
        <div className="row">
          <span className="k">{I18N[lang].rail.treatment}</span>
          <span className="v"><b>{tx?.name}</b>{tx?.time} · {tx?.price}</span>
        </div>
        <div className="row">
          <span className="k">{I18N[lang].rail.practitioner}</span>
          <span className="v"><b>{prac?.name}</b>{prac?.role || (lang === 'fr' ? prac?.roleEn : '')}</span>
        </div>
        <div className="row">
          <span className="k">{I18N[lang].rail.date}</span>
          <span className="v">
            <b>{fmtDate(state.date, lang)}</b>{state.time}
          </span>
        </div>
        <div className="row">
          <span className="k">{I18N[lang].rail.place}</span>
          <span className="v">
            <b>Cabinet Maris</b>
            11 Allée des Camomilles · MC-98000 Monaco
          </span>
        </div>
        <div className="row">
          <span className="k">{I18N[lang].rail.patient}</span>
          <span className="v">
            <b>{state.patient.first} {state.patient.last}</b>
            {state.patient.email} · {state.patient.phone}
          </span>
        </div>
      </div>

      <div className="info-card" style={{ gridTemplateColumns: '1fr 1fr' }}>
        <div>
          <h4>{t.pay_t}</h4>
          <p style={{ color: 'var(--muted)' }}>{t.pay_p}</p>
        </div>
        <div>
          <h4>{t.cancel_t}</h4>
          <p style={{ color: 'var(--muted)' }}>{t.cancel_p}</p>
        </div>
      </div>

      <div className="step-foot">
        <button className="btn-back" onClick={onBack}><Icon name="arrowBack" size={14} />{t.back_edit}</button>
        <button className="btn btn-primary btn-lg" onClick={onConfirm}>
          <Icon name="check" size={16} />{t.confirm}
        </button>
      </div>
    </main>
  );
}

/* ─── ICS calendar file generator ──────────────────────────────────────── */
function downloadICS({ state, lang, refNum }) {
  const tx = (() => {
    for (const g of TREATMENTS[lang].groups) {
      const m = g.items.find((x) => x.id === state.treatment);
      if (m) return m;
    }
    return null;
  })();
  const prac = state.practitioner === 'auto'
    ? { name: I18N[lang].step2.auto_name }
    : PRACTITIONERS.find((p) => p.id === state.practitioner);

  // Parse time string ("14:30" or "2:30 pm") into hours/minutes
  const parseTime = (str) => {
    const m = String(str).match(/(\d{1,2}):(\d{2})(?:\s*(am|pm))?/i);
    if (!m) return [9, 0];
    let h = +m[1], mm = +m[2];
    if (m[3]) { if (m[3].toLowerCase() === 'pm' && h < 12) h += 12; if (m[3].toLowerCase() === 'am' && h === 12) h = 0; }
    return [h, mm];
  };
  // Duration parse ("1 h 30", "45 min", "1 h")
  const parseDur = (str) => {
    const s = String(str);
    let mins = 0;
    const h = s.match(/(\d+)\s*h/); if (h) mins += +h[1] * 60;
    const m = s.match(/(\d+)\s*min/); if (m) mins += +m[1];
    if (!h && !m) mins = 60;
    return mins;
  };
  const start = new Date(state.date);
  const [hh, mm] = parseTime(state.time);
  start.setHours(hh, mm, 0, 0);
  const end = new Date(start.getTime() + parseDur(tx?.time || '1 h') * 60000);

  const pad = (n) => String(n).padStart(2, '0');
  const ics = (d) => `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}T${pad(d.getUTCHours())}${pad(d.getUTCMinutes())}00Z`;

  const lines = [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//Cabinet Maris//RDV//FR',
    'CALSCALE:GREGORIAN',
    'METHOD:PUBLISH',
    'BEGIN:VEVENT',
    `UID:${refNum}@cabinet-maris.mc`,
    `DTSTAMP:${ics(new Date())}`,
    `DTSTART:${ics(start)}`,
    `DTEND:${ics(end)}`,
    `SUMMARY:${tx?.name || 'Rendez-vous'} — Cabinet Maris`,
    `DESCRIPTION:Praticien: ${prac?.name || '-'}\\nRéférence: ${refNum}`,
    'LOCATION:11 Allée des Camomilles, MC-98000 Monaco',
    'STATUS:CONFIRMED',
    'BEGIN:VALARM',
    'TRIGGER:-PT24H',
    'ACTION:DISPLAY',
    'DESCRIPTION:Rappel: rendez-vous au Cabinet Maris demain',
    'END:VALARM',
    'END:VEVENT',
    'END:VCALENDAR',
  ].join('\r\n');

  const blob = new Blob([ics], { type: 'text/calendar' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = `rdv-cabinet-maris-${refNum}.ics`;
  document.body.appendChild(a); a.click(); a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

/* ─── Processing screen ────────────────────────────────────────────────── */
function Processing({ lang, progress }) {
  const t = I18N[lang].processing;
  return (
    <section className="processing" data-screen-label="06 Processing">
      <div className="processing-orb" aria-hidden="true" />
      <h2>
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h2>
      <p>{t.lede}</p>
      <div className="processing-checklist">
        {t.steps.map((s, i) => {
          const state = i < progress ? 'done' : i === progress ? 'active' : '';
          return (
            <div key={s} className={`proc-item ${state}`}>
              <span className="proc-ic">
                {i < progress ? <Icon name="check" size={12} /> : <span>{i + 1}</span>}
              </span>
              <span>{s}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ─── Error screen ─────────────────────────────────────────────────────── */
function ErrorScreen({ lang, state, refNum, errorCause, onRetry, onBack }) {
  const t = I18N[lang].error;
  return (
    <section className="error-page" data-screen-label="06 Error">
      <div className="error-icon">
        <svg width="42" height="42" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10" />
          <path d="M12 8v4M12 16h.01" />
        </svg>
      </div>
      <h1>
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h1>
      <p>{t.p}</p>

      <div className="error-detail">
        <Icon name="info" size={16} />
        <div>
          <b>{t.detail_label}</b><br />
          {t.causes[errorCause % t.causes.length]}
        </div>
      </div>

      <div className="error-actions">
        <button className="btn btn-primary btn-lg" onClick={onRetry}>
          {t.retry}<Icon name="arrow" size={16} />
        </button>
        <button className="btn btn-ghost btn-lg" onClick={onBack}>
          {t.back_edit}
        </button>
      </div>

      <div className="error-fallback">
        <div className="error-fallback-ic"><Icon name="phone" size={20} /></div>
        <div>
          <h4>{t.fallback_t}</h4>
          <p>{t.fallback_p}</p>
        </div>
        <a className="btn btn-soft" href="tel:+37797700733">
          <Icon name="phone" size={14} />{t.fallback_btn}
        </a>
      </div>
    </section>
  );
}

/* ─── Confirmation ─────────────────────────────────────────────────────── */
function Confirmation({ lang, state, onAnother, refNum }) {
  const t = I18N[lang].confirm;
  const tx = (() => {
    for (const g of TREATMENTS[lang].groups) {
      const m = g.items.find((x) => x.id === state.treatment);
      if (m) return m;
    }
    return null;
  })();
  const prac = state.practitioner === 'auto'
    ? { name: I18N[lang].step2.auto_name }
    : PRACTITIONERS.find((p) => p.id === state.practitioner);
  return (
    <section className="confirm" data-screen-label="06 Confirmation">
      <div className="check">
        <Icon name="check" size={42} />
      </div>
      <h1>
        {t.title_1} <em>{t.title_em}</em>{t.title_2}
      </h1>
      <p>{t.p}</p>
      <div className="confirm-ref">
        <span>{t.ref}</span>
        <strong>{refNum}</strong>
      </div>

      <div className="confirm-card">
        <div className="row">
          <span className="k">{I18N[lang].rail.treatment}</span>
          <span className="v"><b>{tx?.name}</b>{tx?.time}</span>
        </div>
        <div className="row">
          <span className="k">{I18N[lang].rail.practitioner}</span>
          <span className="v"><b>{prac?.name}</b></span>
        </div>
        <div className="row">
          <span className="k">{I18N[lang].rail.date}</span>
          <span className="v"><b>{fmtDate(state.date, lang)}</b>{state.time}</span>
        </div>
        <div className="row">
          <span className="k">{I18N[lang].rail.place}</span>
          <span className="v"><b>Cabinet Maris</b>11 Allée des Camomilles, Monaco</span>
        </div>
      </div>

      <div className="confirm-pills">
        {t.pills.map((p) => (
          <span key={p} className="confirm-pill"><Icon name="check" size={12} />{p}</span>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
        <button className="btn btn-primary" onClick={() => downloadICS({ state, lang, refNum })}>
          <Icon name="calendar" size={14} />{t.addto}
        </button>
        <button className="btn btn-ghost" onClick={onAnother}>{t.another}</button>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, Step1Treatment, Step2Practitioner, Step3Calendar,
  Step4Info, Step5Review, Confirmation, Processing, ErrorScreen,
  Field, downloadICS,
});