{STEPS.map((s, i) => { const done = i < idx, active = i === idx; return (

{done ? : } {s.label}

{i < STEPS.length - 1 && (

)} ); })}

); } // ---- Aside summary ---------------------------------------------------- function AsideRow({ icon, label, value, onEdit }) { return (

{label}

{value || "—"}

{onEdit && value && }

); } function AsideSummary({ b, goStep }) { const svc = SERVICES.find((s) => s.id === b.service); const zone = ZONES.find((z) => z.id === b.zone); const total = b.party * DEPOSIT_PER_SEAT; return ( ); } // ---- Step 1 : search -------------------------------------------------- function StepSearch({ b, setB, next }) { return (

Date setB({ ...b, date: d, slot: "" })} />

Service

{SERVICES.map((s) => ( ))}

Couverts

setB({ ...b, party: v, slot: "" })} />

{b.party >= 8 && (

Pour les grandes tablées, le salon privé est idéal — vous pourrez le sélectionner à l'étape suivante.

)}

Ambiance souhaitée

{ZONES.map((z) => ( ))}

); } // ---- Step 2 : slots --------------------------------------------------- function StepSlots({ b, setB, next, back }) { const slots = slotsFor(b.date, b.service, b.party); const available = slots.filter((s) => !s.full); return (

s.id === b.service).name} · ${partyLabel(b.party)}`} /> {available.length === 0 ? (

Complet pour ce service

Essayez un autre jour ou l'autre service — il reste souvent des tables.

) : ( <>

Disponible Dernières places Complet

{slots.map((s) => { const selected = b.slot === s.label; return ( ); })}

)}

); } // ---- Step 3 : details ------------------------------------------------- function Field({ label, value, onChange, type = "text", placeholder, error, ...rest }) { return (

{label} onChange(e.target.value)} style={error ? { borderColor: "var(--ember)" } : null} {...rest} /> {error &&

{error}

}

); } function StepDetails({ b, setB, next, back }) { const [touched, setTouched] = useState(false); const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(b.email); const phoneOk = b.phone.replace(/\D/g, "").length >= 9; const valid = b.firstName.trim() && b.lastName.trim() && emailOk && phoneOk; const submit = () => { setTouched(true); if (valid) next(); }; return (

setB({ ...b, firstName: v })} placeholder="Camille" error={touched && !b.firstName.trim() ? "Champ requis" : ""} /> setB({ ...b, lastName: v })} placeholder="Rey" error={touched && !b.lastName.trim() ? "Champ requis" : ""} />

setB({ ...b, email: v })} placeholder="camille@email.fr" error={touched && !emailOk ? "E-mail invalide" : ""} /> setB({ ...b, phone: v })} placeholder="06 12 34 56 78" error={touched && !phoneOk ? "Numéro invalide" : ""} />

Occasion (facultatif)

{OCCASIONS.map((o) => ( ))}

Une demande particulière ? (facultatif)

setB({ ...b, notes: e.target.value })}
            placeholder="Allergies, poussette, fauteuil, table près du feu…" />
        </div>
      </div>
      <div style={{ marginTop: 36, display: "flex", justifyContent: "space-between", gap: 12 }}>
        <button className="btn btn--ghost" onClick={back}><Icon name="arrow-left" size={16} /> Retour</button>
        <button className="btn btn--ember" onClick={submit} disabled={touched && !valid}>Vers l'acompte <Icon name="arrow-right" size={16} /></button>
      </div>
    </div>
  );
}

// ---- Step 4 : payment -------------------------------------------------
function StepPayment({ b, setB, confirm, back }) {
  const [card, setCard] = useState({ num: "", exp: "", cvc: "", name: "" });
  const [touched, setTouched] = useState(false);
  const [loading, setLoading] = useState(false);
  const total = b.party * DEPOSIT_PER_SEAT;

const pay = () => {
    setTouched(true);
    if (!valid) return;
    setLoading(true);
    setTimeout(() => confirm(), 1200);
  };

return (
    <div className="page-fade">
      <SectionHead title="Confirmez avec un acompte" sub={`Un acompte de ${fmtEur(total)} valide votre table. Il est intégralement déduit de votre addition.`} />
      <div style={{ marginTop: 34, maxWidth: 620 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", background: "var(--ember-soft)", borderRadius: 12, marginBottom: 26 }}>
          <Icon name="lock" size={18} style={{ color: "var(--ember-deep)" }} />
          <span style={{ fontSize: 13.5, color: "var(--ember-deep)", lineHeight: 1.5 }}>Paiement sécurisé. Remboursable jusqu'à 24 h avant le service. <strong>Prototype — aucune carte n'est débitée.</strong></span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <Field label="Numéro de carte" value={card.num} onChange={(v) => setCard({ ...card, num: fmtNum(v) })}
            placeholder="4242 4242 4242 4242" inputMode="numeric"
            error={touched && !numOk ? "16 chiffres attendus" : ""} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            <Field label="Expiration" value={card.exp} onChange={(v) => setCard({ ...card, exp: fmtExp(v) })}
              placeholder="MM/AA" inputMode="numeric" error={touched && !expOk ? "MM/AA" : ""} />
            <Field label="Cryptogramme" value={card.cvc} onChange={(v) => setCard({ ...card, cvc: v.replace(/\D/g, "").slice(0, 4) })}
              placeholder="123" inputMode="numeric" error={touched && !cvcOk ? "3 chiffres" : ""} />
          </div>
          <Field label="Titulaire de la carte" value={card.name} onChange={(v) => setCard({ ...card, name: v })}
            placeholder="CAMILLE REY" error={touched && !nameOk ? "Nom requis" : ""} />
        </div>
      </div>
      <div style={{ marginTop: 36, display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
        <button className="btn btn--ghost" onClick={back} disabled={loading}><Icon name="arrow-left" size={16} /> Retour</button>
        <button className="btn btn--ember" onClick={pay} disabled={loading || (touched && !valid)}>
          {loading ? "Validation…" : <>Payer {fmtEur(total)} & réserver <Icon name="arrow-right" size={16} /></>}
        </button>
      </div>
    </div>
  );
}

// ---- Confirmation -----------------------------------------------------
function Confirmation({ resa, go }) {
  const svc = SERVICES.find((s) => s.id === resa.service);
  const zone = ZONES.find((z) => z.id === resa.zone);
  return (
    <div className="container page-fade" style={{ padding: "70px 32px 90px", maxWidth: 720 }}>
      <div style={{ textAlign: "center" }}>
        <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--ember)", color: "var(--paper)", display: "grid", placeItems: "center", margin: "0 auto 26px", animation: "fadeUp 0.6s var(--ease) both" }}>
          <Icon name="check" size={34} stroke={2} />
        </div>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Réservation confirmée</div>
        <h1 style={{ fontSize: "clamp(32px, 5vw, 52px)" }}>À très bientôt, {resa.firstName}</h1>
        <p style={{ marginTop: 18, fontSize: 16.5, color: "var(--ink-soft)", lineHeight: 1.7, maxWidth: 480, margin: "18px auto 0" }}>
          Un e-mail de confirmation part vers <strong style={{ color: "var(--ink)" }}>{resa.email}</strong>. Votre acompte de {fmtEur(resa.deposit)} a bien été reçu.
        </p>
      </div>

<div style={{ marginTop: 40, background: "var(--paper)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 26px", background: "var(--espresso)", color: "var(--bone)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <span style={{ width: 28, height: 28, borderRadius: "50%", display: "grid", placeItems: "center", background: "var(--ember)", color: "var(--paper)" }}><Icon name="flame" size={16} /></span>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 20, letterSpacing: "0.1em" }}>BRAISE</span>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold)" }}>Référence</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 16, letterSpacing: "0.06em" }}>{resa.ref}</div>
          </div>
        </div>
        <div style={{ padding: "8px 26px 22px" }}>
          {[["calendar", "Date", formatLong(resa.dateISO)], [svc ? svc.icon : "moon", "Service & heure", `${svc ? svc.name : ""} · ${resa.slot}`],
            ["users", "Couverts", partyLabel(resa.party)], ["flame", "Ambiance", zone ? zone.name : "—"],
            ...(resa.occasion && resa.occasion !== "Sans occasion" ? [["spark", "Occasion", resa.occasion]] : [])].map(([ic, l, v], i, arr) => (
            <div key={l} style={{ display: "flex", alignItems: "center", gap: 14, padding: "15px 0", borderBottom: i < arr.length - 1 ? "1px solid var(--line-soft)" : "none" }}>
              <span style={{ color: "var(--ember)" }}><Icon name={ic} size={18} /></span>
              <span style={{ fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-faint)", width: 130, flexShrink: 0 }}>{l}</span>
              <span style={{ fontSize: 15.5, fontWeight: 500, textTransform: l === "Date" ? "capitalize" : "none" }}>{v}</span>
            </div>
          ))}
        </div>
      </div>

<div style={{ marginTop: 22, fontSize: 13.5, color: "var(--ink-soft)", display: "flex", gap: 10, alignItems: "flex-start", lineHeight: 1.6 }}>
        <Icon name="pin" size={16} style={{ color: "var(--ember)", marginTop: 2, flexShrink: 0 }} />
        <span>{RESTO.address}. Merci d'arriver à l'heure — la table est tenue 15 minutes. Pour modifier, retrouvez votre réservation dans votre espace.</span>
      </div>

<div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <button className="btn btn--ember" onClick={() => go("mes-resas")}>Voir mes réservations <Icon name="arrow-right" size={16} /></button>
        <button className="btn btn--ghost" onClick={() => go("home")}>Retour à l'accueil</button>
      </div>
    </div>
  );
}

// ---- Booking flow orchestrator ----------------------------------------
function BookingFlow({ seed, go, addReservation }) {
  const todayPlus = (() => { const d = new Date(); d.setDate(d.getDate() + 1); if (isClosed(d)) d.setDate(d.getDate() + 1); return toISO(d); })();
  const [b, setB] = useState(() => ({
    date: seed?.date || "", service: seed?.service || "diner", party: seed?.party || 2,
    zone: "salle", slot: "",
    firstName: "", lastName: "", email: "", phone: "", occasion: "Sans occasion", notes: "",
  }));
  const [step, setStep] = useState(seed?.date ? "slots" : "search");
  const [confirmed, setConfirmed] = useState(null);

useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [step]);

if (confirmed) return <Confirmation resa={confirmed} go={go} />;

const goStep = (s) => setStep(s);

const doConfirm = () => {
    const resa = {
      ref: makeRef(), dateISO: b.date, service: b.service, slot: b.slot, party: b.party,
      zone: b.zone, firstName: b.firstName, lastName: b.lastName, email: b.email, phone: b.phone,
      occasion: b.occasion, notes: b.notes, status: "confirmee", deposit: b.party * DEPOSIT_PER_SEAT,
    };
    addReservation(resa);
    setConfirmed(resa);
  };

return (
    <div className="container" style={{ padding: "48px 32px 90px" }}>
      <Stepper current={step} />
      <div className="resa-grid" style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 48, alignItems: "start" }}>
        <div>
          {step === "search" && <StepSearch b={b} setB={setB} next={() => setStep("slots")} />}
          {step === "slots" && <StepSlots b={b} setB={setB} next={() => setStep("details")} back={() => setStep("search")} />}
          {step === "details" && <StepDetails b={b} setB={setB} next={() => setStep("payment")} back={() => setStep("slots")} />}
          {step === "payment" && <StepPayment b={b} setB={setB} confirm={doConfirm} back={() => setStep("details")} />}
        </div>
        <AsideSummary b={b} goStep={goStep} />
      </div>
    </div>
  );
}

Object.assign(window, { BookingFlow, Confirmation });