{title}

setDrawerOpen(true)}/>

{module === "accueil" && } {module === "agenda" && } {module === "services" && } {module === "bookings" && } {module === "clients" && } {module === "fidelite" && } {module === "stats" && } {module === "factures" && } {module === "stock" && } {module === "settings" && } {module === "subscription" && }

{title}

setQuery(e.target.value)} placeholder="Rechercher un client…" style={{ width: "100%", padding: "8px 12px 8px 34px", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 8, fontSize: 13, fontFamily: "inherit", color: "var(--ink)", outline: "none", }}/> ⌘K {query.trim().length >= 2 && ( { setQuery(""); openModal(t, c); }}/> )}

{notifOpen && ( <>

setNotifOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }}/>

Notifications

{notifs.length > 0 && ( )}

{notifs.length === 0 ? (

Aucune notification pour le moment.

) : ( notifs.slice(0, 20).map(n => ( { setNotifOpen(false); if (n.type === "booking" && n.appointmentId && setMod) setMod("agenda"); if (n.type === "payment" && setMod) setMod("factures"); if (n.type === "stock" && setMod) setMod("stock"); }} onDelete={() => actions.deleteNotification(n.id)} /> )) )}

)}

{newOpen && ( <>

setNewOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }}/>

{newMenuItem("Nouveau client", "users", () => openModal("client"))} {newMenuItem("Nouveau rendez-vous", "calendar", () => openModal("appointment"))} {newMenuItem("Nouvelle facture", "invoice", () => openModal("invoice"))} {newMenuItem("Nouveau produit", "box", () => openModal("stock"))}

)}

); }; const SearchResults = ({ data, query, openModal }) => { const q = query.trim().toLowerCase(); const hits = data.clients.filter(c => c.name.toLowerCase().includes(q) || (c.email || "").toLowerCase().includes(q) ).slice(0, 6); return (

{hits.length === 0 && (

Aucun client trouvée.

)} {hits.map(c => ( ))}

); }; const timeAgo = (ts) => { const diff = Date.now() - ts; const m = Math.floor(diff / 60000); if (m < 1) return "à l'instant"; if (m < 60) return `il y a ${m} min`; const h = Math.floor(m / 60); if (h < 24) return `il y a ${h} h`; const d = Math.floor(h / 24); if (d === 1) return "hier"; if (d < 7) return `il y a ${d} j`; const w = Math.floor(d / 7); return `il y a ${w} sem.`; }; const NOTIF_ICON = { booking: { name: "calendar", bg: "var(--accent-soft)", c: "var(--accent-ink)" }, payment: { name: "euro", bg: "var(--sage-soft)", c: "oklch(38% 0.08 160)" }, stock: { name: "bell", bg: "oklch(97% 0.025 30)", c: "oklch(45% 0.14 30)" }, default: { name: "bell", bg: "var(--bg-alt)", c: "var(--ink-3)" }, }; const NotificationRow = ({ n, data, onClick, onDelete }) => { const icon = NOTIF_ICON[n.type] || NOTIF_ICON.default; const client = n.clientId ? findClient(data, n.clientId) : null; return (

e.currentTarget.style.background = "var(--bg-alt)"} onMouseLeave={e => e.currentTarget.style.background = n.read ? "transparent" : "color-mix(in oklab, var(--accent-soft) 40%, transparent)"} >

{n.title}

{timeAgo(n.createdAt)}

{n.message}

{client && (

{client.name}

)}

); }; const Avatar = ({ client, size = 32 }) => (

{client.name.split(" ").map(x => x[0]).slice(0,2).join("")}

); /* ================================================================ HOME DASHBOARD ================================================================ */ const AppHome = ({ data, actions, openModal, setMod }) => { const today = data.appointments.filter(a => a.day === cbTodayOffset() && !a.done).sort((x, y) => x.h - y.h); const next = today[0]; const firstName = (data.business.owner || "").split(" ")[0]; // Re-evaluate every minute so the line refreshes (e.g. from "Belle matinée" → "Presque midi"). const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 60000); return () => clearInterval(id); }, []); const greet = cbDynamicGreeting(firstName, today.length); const event = cbEventOfDay(); const bdays = cbBirthdaysToday(data.clients || []); const pause = cbActivePause(data.bookingSettings); const animCount = useAnimatedNumber(today.length, 650); const displayCount = today.length === 0 ? 0 : Math.max(1, Math.round(animCount)); return ( <> {/* Greeting — dynamic, time- & day-aware */}

{greet.msg} {greet.emoji} {event && ( {event.emoji} {event.label} )}

{today.length === 0 ? "Journée tranquille." : today.length === 1 ? `${displayCount} rendez-vous aujourd'hui.` : `${displayCount} rendez-vous aujourd'hui.`} {next && ( Prochain à {fmtH(next.h)} · {findClient(data, next.clientId)?.name} )}

{/* Pause / vacances active — bandeau doux pinned tout en haut */} {pause && (

🌴

En pause {" "}· De retour le {new Date(pause.end).toLocaleDateString("fr-FR", { day: "numeric", month: "long" })} — réservations en ligne suspendues.

)} {/* Anniversaires clients du jour — pinned, very discrete */} {bdays.length > 0 && (

🎂

{bdays.length === 1 ? "Anniversaire aujourd'hui" : `${bdays.length} anniversaires aujourd'hui`} {" "}· {bdays.map(c => c.name.split(" ")[0]).join(", ")} — un petit message ferait plaisir ✨

)} {/* ONE rich interactive block — tabs for the key insights */}

{/* Today's schedule — the main actionable block */}

Votre journée

{today.length === 0 ? (

Pas de rendez-vous aujourd'hui. Bonne journée !

) : (

{today.map(a => { const c = findClient(data, a.clientId); const s = findService(data, a.serviceId); const col = COLOR_MAP[a.color]; return (

{fmtH(a.h)}

{c && }

{c ? c.name : "—"}

{s ? s.name : ""}

{s && (

{fmtEUR(s.price)}

)}

); })}

)}

); }; /* ONE interactive widget with CA (day/week/month) + playful "Et si…" sims. */ const HomePulse = ({ data, setMod }) => { const [tab, setTab] = React.useState("ca"); const monthPaid = data.invoices.filter(i => i.paid).reduce((s, i) => s + i.amount, 0); const pending = data.invoices.filter(i => !i.paid).reduce((s, i) => s + i.amount, 0); const avgTicket = data.invoices.length > 0 ? monthPaid / data.invoices.length : 45; const [goal, setGoal] = React.useState(() => { const saved = +(localStorage.getItem("cb_goal_monthly") || 0); return saved > 0 ? saved : Math.max(4000, Math.ceil(monthPaid / 1000) * 1000 + 500); }); React.useEffect(() => { localStorage.setItem("cb_goal_monthly", String(goal)); }, [goal]); const pctGoal = Math.min(100, (monthPaid / goal) * 100); const remaining = Math.max(0, goal - monthPaid); const rdvToReach = Math.ceil(remaining / Math.max(avgTicket, 1)); const TABS = [ { id: "ca", label: "CA", icon: "euro" }, { id: "goal", label: "Objectif", icon: "zap" }, { id: "whatif", label: "Et si…", icon: "sparkle" }, ]; return (

{TABS.map(t => { const active = tab === t.id; return ( ); })}

{tab === "ca" && ( setMod("factures")}/> )} {tab === "goal" && ( )} {tab === "whatif" && ( )}

); }; const PulseCA = ({ monthPaid, pending, avgTicket, invoices, appointments, services, onMore }) => { const [range, setRange] = React.useState("week"); // day | week | upcoming | month const [hover, setHover] = React.useState(null); // Valeur en € pour un offset jour donné = somme des prix des prestations // de tous les RDV de ce jour (passés ou futurs). const valueForDay = React.useCallback((off) => { let sum = 0; for (const a of appointments) { if (a.day !== off) continue; const svc = services.find(s => s.id === a.serviceId); if (svc) sum += Number(svc.price) || 0; } return Math.round(sum); }, [appointments, services]); const todayOff = window.cbTodayOffset ? window.cbTodayOffset() : 0; const series = React.useMemo(() => { if (range === "day") { // RDV d'aujourd'hui par heure (8h → 19h) return Array.from({ length: 12 }, (_, i) => { const hour = 8 + i; let s = 0; for (const a of appointments) { if (a.day !== todayOff) continue; if (Math.floor(a.h) === hour) { const svc = services.find(svc => svc.id === a.serviceId); if (svc) s += Number(svc.price) || 0; } } return Math.round(s); }); } if (range === "week") { // 3 jours passés + aujourd'hui + 3 jours suivants return Array.from({ length: 7 }, (_, i) => valueForDay(todayOff - 3 + i)); } if (range === "upcoming") { // Aujourd'hui + 6 prochains jours (focus prévisionnel) return Array.from({ length: 7 }, (_, i) => valueForDay(todayOff + i)); } // 30 jours glissants : 7 passés + 23 à venir return Array.from({ length: 30 }, (_, i) => valueForDay(todayOff - 7 + i)); }, [appointments, services, range, todayOff, valueForDay]); // Index du "aujourd'hui" dans la série, pour le repère visuel const todayIdx = range === "week" ? 3 : range === "upcoming" ? 0 : range === "month" ? 7 : -1; const total = series.reduce((a, b) => a + b, 0); const max = Math.max(1, ...series); const width = 300, height = 70; const pts = series.map((v, i) => [ series.length === 1 ? width / 2 : (i / (series.length - 1)) * width, height - (v / max) * (height - 6) - 3, ]); const poly = pts.map(p => p.join(",")).join(" "); const area = `M 0 ${height} L ${poly.split(" ").join(" L ")} L ${width} ${height} Z`; // Libellé d'un point i de la série, basé sur son offset jour absolu const _hintForOffset = (off) => { const d = window.cbDateForOffset ? window.cbDateForOffset(off) : new Date(); const days = window.CB_FR_DAYS_SHORT || ["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"]; const months = window.CB_FR_MONTHS_SHORT || ["janv.","févr.","mars","avril","mai","juin","juil.","août","sept.","oct.","nov.","déc."]; return `${days[d.getDay()]} ${d.getDate()} ${months[d.getMonth()]}`; }; const labelMap = { day: { title: "Aujourd'hui", hint: (i) => `${8 + i}h` }, week: { title: "Cette semaine", hint: (i) => _hintForOffset(todayOff - 3 + i) }, upcoming: { title: "Les 7 prochains jours", hint: (i) => _hintForOffset(todayOff + i) }, month: { title: "30 jours glissants", hint: (i) => _hintForOffset(todayOff - 7 + i) }, }; const L = labelMap[range]; return (

{L.title}

{[["day", "Jour"], ["week", "Semaine"], ["upcoming", "À venir"], ["month", "Mois"]].map(([k, l]) => ( ))}

{hover != null ? fmtEUR(series[hover]) : fmtEUR(total)}

{hover != null ? L.hint(hover) : range === "upcoming" ? "potentiel à venir" : range === "week" ? "cette semaine (réel + prévu)" : range === "month" ? "sur 30 jours" : "aujourd'hui"}

{fmtEUR(pending)} en attente

); }; /* "Et si j'ajoute X prestations ce mois ?" */ const PulseWhatIf = ({ monthPaid, avgTicket, goal }) => { const [extra, setExtra] = React.useState(5); const projected = monthPaid + extra * avgTicket; const pct = Math.min(100, (projected / goal) * 100); const hours = Math.round(extra * 1.1); return (

Et si je fais

+{extra} prestations

setExtra(+e.target.value)} style={{ width: "100%", accentColor: "var(--accent)", cursor: "pointer", marginTop: 10 }}/>

{[ { l: "CA ajouté", v: fmtEUR(extra * avgTicket), sub: `${extra} × ${fmtEUR(avgTicket)}` }, { l: "Nouveau total", v: fmtEUR(projected), sub: pct >= 100 ? "objectif atteint 🎉" : `${Math.round(pct)}% de l'objectif` }, { l: "Temps estimé", v: `${hours} h`, sub: "prestation + pause" }, ].map((x, i) => (

{x.l}

{x.v}

{x.sub}

))}

); }; const PulseGoal = ({ goal, setGoal, monthPaid, pct, remaining, rdvToReach, avgTicket }) => (

Objectif du mois

{fmtEUR(goal)}

setGoal(+e.target.value)} style={{ width: "100%", accentColor: "var(--accent)", cursor: "pointer", marginTop: 8 }}/>

{fmtEUR(monthPaid)} encaissés {pct >= 100 ? "🎉 Objectif atteint" : `${Math.round(pct)}%`}

{pct >= 100 ? <>Objectif dépassé de {fmtEUR(monthPaid - goal)} ✨ : <>Encore {fmtEUR(remaining)} · environ {rdvToReach} prestations au panier moyen de {fmtEUR(avgTicket)}. }

); /* ================================================================ AGENDA — click cell to add, click appointment to delete / mark done ================================================================ */ const AppAgenda = (props) => { const isMobile = useIsMobile(); return isMobile ? : ; }; const AppAgendaMobile = ({ data, actions, openModal }) => { const todayOff = cbTodayOffset(); const [day, setDay] = React.useState(todayOff); const [selected, setSelected] = React.useState(null); const stripRef = React.useRef(null); const activeRef = React.useRef(null); // Bande défilable : aujourd'hui + 52 jours suivants. Tous les indices // sont en OFFSET ABSOLU (jours depuis l'ancre 2026-01-01) — comparable // directement avec a.day stocké en DB. const DAYS_BEFORE = 0; const DAYS_AFTER = 52; const TOTAL_DAYS = DAYS_BEFORE + 1 + DAYS_AFTER; const anchor = (() => { const d = new Date(); d.setHours(0,0,0,0); return d; })(); const DAY_NAMES_SHORT = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]; const MONTHS_SHORT = ["jan", "fév", "mar", "avr", "mai", "jui", "jui", "aoû", "sep", "oct", "nov", "déc"]; const daysList = React.useMemo(() => Array.from({ length: TOTAL_DAYS }, (_, idx) => { const offset = idx - DAYS_BEFORE; // 0 = today const d = new Date(anchor); d.setDate(anchor.getDate() + offset); return { idx: todayOff + offset, // offset absolu — comparable avec a.day en DB label: DAY_NAMES_SHORT[d.getDay()], dayNum: d.getDate(), monthLabel: MONTHS_SHORT[d.getMonth()], isToday: offset === 0, isPast: offset < 0, }; }), []); const dayAppts = data.appointments .filter(a => a.day === day) .sort((a, b) => a.h - b.h); const current = daysList.find(d => d.idx === day) || daysList[DAYS_BEFORE]; // Center the active day on mount + when day changes React.useEffect(() => { if (activeRef.current && stripRef.current) { const el = activeRef.current; const strip = stripRef.current; strip.scrollTo({ left: el.offsetLeft - strip.clientWidth / 2 + el.clientWidth / 2, behavior: "smooth" }); } }, [day]); return ( <>

{current.label} {current.dayNum} {current.monthLabel}

{dayAppts.length} RDV ce jour · {data.appointments.length} au total

{!current.isToday && ( )}

{/* Day strip — scrolls through ~2 months */}

{daysList.map((d) => { const n = data.appointments.filter(a => a.day === d.idx).length; const isActive = day === d.idx; return ( ); })}

{/* Appointments list */} {dayAppts.length === 0 ? (

Aucun rendez-vous ce jour.

) : (

{dayAppts.map(a => { const c = findClient(data, a.clientId); const s = findService(data, a.serviceId); const col = COLOR_MAP[a.color] || COLOR_MAP.accent; const isSelected = selected === a.id; return (

{isSelected && (

{a.done ? ( ) : ( )}

)}

); })}

)} ); }; const AppAgendaDesktop = ({ data, actions, openModal }) => { const hours = Array.from({ length: 11 }, (_, i) => i + 8); // 8–18 const [selected, setSelected] = React.useState(null); return ( <>

21 — 26 avril 2026

{DAY_LABELS.map((d, i) => (

{d.split(" ")[0]}

{d.split(" ")[1]}

))}

{hours.map(h => (

{h}:00

))}

{DAY_LABELS.map((d, dayIdx) => (

{hours.map(h => (

openModal("appointment", { day: _AGENDA_MONDAY_OFFSET + dayIdx, h })} style={{ height: 56, borderBottom: "1px solid var(--line)", cursor: "pointer", }} onMouseEnter={e => e.currentTarget.style.background = "var(--bg-alt)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"} /> ))} {data.appointments.filter(a => a.day === _AGENDA_MONDAY_OFFSET + dayIdx).map(a => { const c = findClient(data, a.clientId); const s = findService(data, a.serviceId); const col = COLOR_MAP[a.color] || COLOR_MAP.accent; const top = (a.h - 8) * 56; const height = a.d * 56 - 4; return ( ); })}

))}

{selected && (() => { const a = data.appointments.find(x => x.id === selected); if (!a) return null; const c = findClient(data, a.clientId); const s = findService(data, a.serviceId); return (

{c && }

{c ? c.name : "—"} {a.done && ( ✓ Facturé )}

{(() => { const d = cbDateForOffset(a.day); return `${CB_FR_DAYS_SHORT[d.getDay()]} ${d.getDate()} ${CB_FR_MONTHS_SHORT[d.getMonth()]}`; })()} · {fmtH(a.h)} — {fmtH(a.h + a.d)} · {s ? s.name : ""}{s ? ` · ${fmtEUR(s.price)}` : ""}

{a.done ? ( ) : ( )}

); })()} ); }; /* ================================================================ CLIENTS — filter, add, edit, delete ================================================================ */ const CLIENT_TAG_COLORS = { "VIP": { bg: "var(--warn-soft)", c: "var(--warn-ink)" }, "Fidèle": { bg: "var(--accent-soft)", c: "var(--accent-ink)" }, "Nouvelle": { bg: "var(--sage-soft)", c: "oklch(38% 0.08 160)" }, "Inactive": { bg: "var(--bg-alt)", c: "var(--ink-3)" }, }; const tagColor = (t) => CLIENT_TAG_COLORS[t] || { bg: "var(--bg-alt)", c: "var(--ink-3)" }; /* À-venir d'un client : RDV non terminés et dans le futur (day >= today). */ const clientUpcoming = (c, data) => { const todayOff = (typeof window !== "undefined" && window.cbTodayOffset) ? window.cbTodayOffset() : 0; let count = 0, planned = 0; for (const a of (data.appointments || [])) { if (a.clientId !== c.id) continue; if (a.done) continue; if (a.day < todayOff) continue; count++; const svc = (data.services || []).find(s => s.id === a.serviceId); if (svc) planned += Number(svc.price) || 0; } return { count, planned }; }; const ClientCardMobile = ({ c, data, actions, openModal }) => { const up = clientUpcoming(c, data); return (

Visites

{c.visits}

{up.count > 0 && (

+{up.count} à venir

)}

Dépensé

{fmtEUR(c.spent)}

{up.planned > 0 && (

+{fmtEUR(up.planned)} prévus

)}

Fidélité

{c.fid}/{data.fideliteRules.visits}

{c.last}

{c.email && ( )} {c.phone && ( )}

); }; /* Modale "Message groupé" : permet d'envoyer un email à plusieurs clients d'un coup (annonce, promo, fermeture exceptionnelle…). Utilise un mailto: avec les adresses en BCC pour que les destinataires ne se voient pas entre elles — pas de backend nécessaire. */ const BULK_TEMPLATES = [ { label: "Promotion", subject: "Une petite promo pour vous", body: "Bonjour,\n\nPour vous remercier de votre fidélité, je vous propose ce mois-ci [VOTRE OFFRE].\nValable jusqu'au [DATE].\n\nÀ très vite,\n[VOTRE PRÉNOM]", }, { label: "Nouveauté", subject: "Une nouveauté à découvrir", body: "Bonjour,\n\nJ'ai le plaisir de vous annoncer [NOUVELLE PRESTATION / NOUVEAU PRODUIT].\nN'hésitez pas à réserver pour découvrir.\n\nÀ très vite,\n[VOTRE PRÉNOM]", }, { label: "Fermeture", subject: "Fermeture exceptionnelle", body: "Bonjour,\n\nJe vous informe que je serai fermé·e du [DATE] au [DATE].\nJe vous recontacte dès la réouverture pour reprogrammer si besoin.\n\nMerci de votre compréhension,\n[VOTRE PRÉNOM]", }, ]; const BulkMessageModal = ({ open, onClose, clients, business }) => { const withEmail = (clients || []).filter(c => (c.email || "").trim()); const [selected, setSelected] = React.useState({}); // { [id]: true } const [subject, setSubject] = React.useState(""); const [body, setBody] = React.useState(""); // À l'ouverture : tout coché par défaut React.useEffect(() => { if (!open) return; const all = {}; withEmail.forEach(c => { all[c.id] = true; }); setSelected(all); setSubject(""); setBody(""); // eslint-disable-next-line }, [open]); const toggleAll = (val) => { const next = {}; withEmail.forEach(c => { next[c.id] = val; }); setSelected(next); }; const selectedCount = Object.values(selected).filter(Boolean).length; const selectedEmails = withEmail.filter(c => selected[c.id]).map(c => c.email); const applyTemplate = (t) => { setSubject(t.subject); setBody(t.body); }; const send = () => { if (selectedEmails.length === 0) { showToast("Sélectionnez au moins un client", "warn"); return; } if (!subject.trim() || !body.trim()) { showToast("Sujet et message requis", "warn"); return; } const from = (business && business.contactEmail) || ""; const params = new URLSearchParams(); params.set("bcc", selectedEmails.join(",")); params.set("subject", subject.trim()); params.set("body", body.trim()); // mailto: ouvre le client mail par défaut. Le pro envoie depuis sa propre adresse. const mailto = `mailto:${from}?${params.toString()}`; window.location.href = mailto; showToast(`Message ouvert pour ${selectedEmails.length} client${selectedEmails.length > 1 ? "s" : ""}`); onClose(); }; if (!open) return null; return ( }>

✦ Le message s'ouvrira dans votre application de mail. Les destinataires sont en copie cachée (BCC) — elles ne se verront pas entre elles.

{/* Templates */}

Modèles rapides

{BULK_TEMPLATES.map(t => ( ))}

Message

setBody(e.target.value)}
            placeholder="Bonjour,

Je vous propose…"
            rows={8}
            style={{ ...fieldInputStyle, resize: "vertical", minHeight: 160 }}/>
        </div>

{/* Recipients */}
        <div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
            <label style={fieldLabelStyle}>Destinataires ({selectedCount}/{withEmail.length})</label>
            <div style={{ display: "flex", gap: 6 }}>
              <button onClick={() => toggleAll(true)} className="btn btn-sm btn-ghost" style={{ height: 26, fontSize: 11.5 }}>
                Tout cocher
              </button>
              <button onClick={() => toggleAll(false)} className="btn btn-sm btn-ghost" style={{ height: 26, fontSize: 11.5 }}>
                Tout décocher
              </button>
            </div>
          </div>
          {withEmail.length === 0 ? (
            <div style={{
              padding: 16, textAlign: "center",
              background: "var(--bg-alt)", border: "1px dashed var(--line-strong)",
              borderRadius: 9, color: "var(--ink-3)", fontSize: 13,
            }}>
              Aucun client n'a d'email enregistré.
            </div>
          ) : (
            <div style={{
              maxHeight: 220, overflowY: "auto",
              background: "var(--bg-alt)", border: "1px solid var(--line)",
              borderRadius: 9, padding: 6,
            }}>
              {withEmail.map(c => {
                const checked = !!selected[c.id];
                return (
                  <label key={c.id} style={{
                    display: "flex", alignItems: "center", gap: 10,
                    padding: "7px 10px",
                    background: checked ? "var(--surface)" : "transparent",
                    borderRadius: 7, cursor: "pointer", fontSize: 13.5,
                  }}>
                    <input type="checkbox" checked={checked}
                      onChange={() => setSelected(s => ({ ...s, [c.id]: !checked }))}
                      style={{ width: 15, height: 15, accentColor: "var(--accent)", cursor: "pointer" }}/>
                    <span style={{ fontWeight: 520, color: "var(--ink)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {c.name}
                    </span>
                    <span style={{ fontSize: 12, color: "var(--ink-4)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 200 }}>
                      {c.email}
                    </span>
                  </label>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

const AppClients = ({ data, actions, openModal }) => {
  const isMobile = useIsMobile();
  const [search, setSearch] = React.useState("");
  const [bulkOpen, setBulkOpen] = React.useState(false);

const filtered = data.clients.filter(c => {
    if (!search.trim()) return true;
    const q = search.trim().toLowerCase();
    return c.name.toLowerCase().includes(q) || (c.email || "").toLowerCase().includes(q);
  });

const clientsWithEmail = data.clients.filter(c => (c.email || "").trim());

return (
    <>
      <div style={{ display: "flex", gap: 8, marginBottom: 14, alignItems: "center", flexWrap: "wrap" }}>
        <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Rechercher un client…" style={{
          padding: "9px 12px", flex: 1, minWidth: 160,
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 8, fontSize: 13.5, fontFamily: "inherit", color: "var(--ink)", outline: "none",
        }}/>
        {clientsWithEmail.length > 0 && (
          <button className="btn btn-sm btn-ghost"
            style={{ flexShrink: 0, border: "1px solid var(--line)" }}
            title={`Envoyer un message à ${clientsWithEmail.length} client${clientsWithEmail.length > 1 ? "s" : ""}`}
            onClick={() => setBulkOpen(true)}>
            <Icon name="mail" size={14}/>{isMobile ? "" : ` Message groupé`}
          </button>
        )}
        <button className="btn btn-sm" style={{ background: "var(--ink)", color: "var(--bg)", flexShrink: 0 }} onClick={() => openModal("client")}>
          <Icon name="plus" size={14}/>{isMobile ? "" : " Nouvelle"}
        </button>
      </div>

<BulkMessageModal open={bulkOpen} onClose={() => setBulkOpen(false)}
        clients={data.clients} business={data.business || {}}/>

{filtered.length === 0 ? (
        <div style={{ padding: 40, textAlign: "center", color: "var(--ink-4)", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12 }}>
          {search ? "Aucun client trouvée." : "Vous n'avez pas encore de clients. Ajoutez-en une pour commencer."}
        </div>
      ) : isMobile ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {filtered.map(c => (
            <ClientCardMobile key={c.id} c={c} data={data} actions={actions} openModal={openModal}/>
          ))}
        </div>
      ) : (
        <div className="app-scroll-x" style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, overflow: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, minWidth: 640 }}>
            <thead>
              <tr style={{ background: "var(--bg-alt)", textAlign: "left" }}>
                {["Cliente", "Visites", "Total dépensé", "Fidélité", "Dernière visite", ""].map(h => (
                  <th key={h} style={{ padding: "12px 16px", fontSize: 12.5, fontWeight: 520, color: "var(--ink-3)", borderBottom: "1px solid var(--line)" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtered.map((c, i) => {
                const up = clientUpcoming(c, data);
                return (
                <tr key={c.id} style={{ borderBottom: i < filtered.length - 1 ? "1px solid var(--line)" : "none" }} className="cb-row-hover">
                  <td style={{ padding: "12px 16px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <Avatar client={c}/>
                      <div>
                        <div style={{ fontWeight: 520, color: "var(--ink)" }}>{c.name}</div>
                        <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{c.email || c.phone || "—"}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: "12px 16px", fontFamily: "inherit", color: "var(--ink-2)" }}>
                    {c.visits}
                    {up.count > 0 && (
                      <span style={{ marginLeft: 6, fontSize: 11, color: "var(--accent-ink)", fontWeight: 580 }}>
                        +{up.count} à venir
                      </span>
                    )}
                  </td>
                  <td style={{ padding: "12px 16px", fontFamily: "inherit", fontWeight: 520 }}>
                    {fmtEUR(c.spent)}
                    {up.planned > 0 && (
                      <span style={{ marginLeft: 6, fontSize: 11, color: "var(--accent-ink)", fontWeight: 580 }}>
                        +{fmtEUR(up.planned)} prévus
                      </span>
                    )}
                  </td>
                  <td style={{ padding: "12px 16px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                      <div style={{ width: 60, height: 5, background: "var(--bg-alt)", borderRadius: 10, overflow: "hidden" }}>
                        <div style={{ width: `${(c.fid / data.fideliteRules.visits) * 100}%`, height: "100%", background: "var(--accent)" }}/>
                      </div>
                      <span style={{ fontSize: 11.5, color: "var(--ink-3)", fontFamily: "inherit" }}>{c.fid}/{data.fideliteRules.visits}</span>
                    </div>
                  </td>
                  <td style={{ padding: "12px 16px", color: "var(--ink-3)" }}>{c.last}</td>
                  <td style={{ padding: "12px 16px", textAlign: "right", whiteSpace: "nowrap" }}>
                    {c.email && (
                      <a href={`mailto:${c.email}`} className="btn btn-sm btn-ghost" aria-label="Envoyer un mail" style={{ height: 28, width: 28, padding: 0, color: "var(--ink-3)" }}>
                        <Icon name="mail" size={13}/>
                      </a>
                    )}
                    {c.phone && (
                      <a href={`tel:${c.phone.replace(/\s+/g, "")}`} className="btn btn-sm btn-ghost" aria-label="Appeler" style={{ height: 28, width: 28, padding: 0, color: "var(--ink-3)", marginLeft: 4 }}>
                        <Icon name="phone" size={13}/>
                      </a>
                    )}
                    <button onClick={() => openModal("client", { id: c.id })} className="btn btn-sm btn-ghost" style={{ height: 28, fontSize: 12, marginLeft: 4 }}>Modifier</button>
                    <button onClick={() => actions.deleteClient(c.id)} aria-label="Supprimer" className="btn btn-sm btn-ghost" style={{ height: 28, width: 28, padding: 0, fontSize: 12, color: "oklch(55% 0.18 25)", marginLeft: 4 }}>
                      <Icon name="close" size={12}/>
                    </button>
                  </td>
                </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </>
  );
};

/* ================================================================
   MESSAGES — send works
================================================================ */
const AppMessages = ({ data, actions }) => {
  const [draft, setDraft] = React.useState("");
  const active = data.activeConv;
  const client = active ? findClient(data, active) : null;
  const msgs = active ? (data.messages[active] || []) : [];
  const scrollRef = React.useRef(null);

React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [msgs.length, active]);

const send = () => {
    if (!draft.trim() || !active) return;
    actions.sendMessage(active, draft);
    setDraft("");
  };

return (
    <div className="app-messages-grid" style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden", display: "grid", gridTemplateColumns: "280px 1fr 260px", height: "calc(100vh - 220px)" }}>
      <div className={"app-messages-list" + (active ? " has-active" : "")} style={{ borderRight: "1px solid var(--line)", overflow: "auto" }}>
        <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--line)", fontSize: 13, fontWeight: 520 }}>
          Conversations <span style={{ color: "var(--ink-4)", fontWeight: 450 }}>({data.conversations.length})</span>
        </div>
        {data.conversations.map(conv => {
          const c = findClient(data, conv.clientId);
          if (!c) return null;
          const isActive = conv.clientId === active;
          return (
            <button key={conv.clientId} onClick={() => actions.openConv(conv.clientId)} style={{
              padding: "12px 16px",
              background: isActive ? "var(--accent-soft)" : "transparent",
              cursor: "pointer", display: "flex", gap: 10, alignItems: "center",
              width: "100%", textAlign: "left",
              border: "none", borderBottom: "1px solid var(--line)",
              fontFamily: "inherit",
            }}>
              <Avatar client={c} size={36}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div style={{ fontWeight: 520, fontSize: 13.5, color: "var(--ink)" }}>{c.name}</div>
                  <div style={{ fontSize: 11, color: "var(--ink-4)" }}>{conv.time}</div>
                </div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }}>{conv.last}</div>
              </div>
              {conv.unread > 0 && <div style={{ background: "var(--accent)", color: "white", borderRadius: 10, padding: "1px 7px", fontSize: 11, fontWeight: 600 }}>{conv.unread}</div>}
            </button>
          );
        })}
      </div>

<div className={"app-messages-thread" + (active ? " has-active" : "")} style={{ display: "flex", flexDirection: "column", background: "var(--bg)" }}>
        {client ? (
          <>
            <div style={{ padding: "14px 20px", borderBottom: "1px solid var(--line)", background: "var(--surface)", display: "flex", alignItems: "center", gap: 10 }}>
              <button onClick={() => actions.openConv(null)} className="app-messages-back" aria-label="Retour" style={{
                display: "none", background: "transparent", border: "none", cursor: "pointer",
                color: "var(--ink-2)", padding: 4,
              }}>
                <Icon name="arrow" size={18} style={{ transform: "rotate(180deg)" }}/>
              </button>
              <Avatar client={client} size={32}/>
              <div>
                <div style={{ fontWeight: 520, fontSize: 14 }}>{client.name}</div>
                <div style={{ fontSize: 11.5, color: "var(--sage)", display: "flex", alignItems: "center", gap: 4 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 50, background: "var(--sage)" }}/> En ligne
                </div>
              </div>
            </div>
            <div ref={scrollRef} style={{ flex: 1, padding: 20, display: "flex", flexDirection: "column", gap: 8, overflow: "auto" }}>
              {msgs.map(m => (
                <div key={m.id} style={{
                  alignSelf: m.from === "me" ? "flex-end" : "flex-start",
                  maxWidth: "70%",
                  display: "flex", flexDirection: "column",
                  alignItems: m.from === "me" ? "flex-end" : "flex-start",
                }}>
                  <div style={{
                    padding: "8px 12px",
                    background: m.from === "me" ? "var(--accent)" : "var(--surface)",
                    color: m.from === "me" ? "white" : "var(--ink)",
                    border: m.from === "me" ? "none" : "1px solid var(--line)",
                    borderRadius: 14, fontSize: 13.5,
                  }}>{m.text}</div>
                  <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 3, padding: "0 4px" }}>{m.time}</div>
                </div>
              ))}
            </div>
            <div style={{ padding: 14, borderTop: "1px solid var(--line)", background: "var(--surface)", display: "flex", gap: 8 }}>
              <input value={draft} onChange={e => setDraft(e.target.value)}
                onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
                placeholder="Écrire un message…" style={{
                  flex: 1, padding: "10px 14px",
                  background: "var(--bg)", border: "1px solid var(--line-strong)",
                  borderRadius: 10, fontSize: 13, fontFamily: "inherit",
                  color: "var(--ink)", outline: "none",
                }}/>
              <button className="btn btn-sm" onClick={send} style={{ background: "var(--accent)", color: "white" }}>
                <Icon name="arrow" size={14}/> Envoyer
              </button>
            </div>
          </>
        ) : (
          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-4)", fontSize: 14 }}>
            Sélectionnez une conversation.
          </div>
        )}
      </div>

<div className="app-messages-right" style={{ borderLeft: "1px solid var(--line)", padding: 20, background: "var(--surface)" }}>
        {client ? (
          <>
            <div style={{ textAlign: "center" }}>
              <div style={{ margin: "0 auto", display: "flex", justifyContent: "center" }}>
                <Avatar client={client} size={56}/>
              </div>
              <div style={{ marginTop: 10, fontWeight: 520 }}>{client.name}</div>
              <div style={{ fontSize: 12, color: "var(--ink-4)" }}>{client.visits > 10 ? "Cliente fidèle" : "Cliente"} · {client.visits} visites</div>
            </div>
            <div style={{ marginTop: 20, fontSize: 11.5, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 520 }}>Informations</div>
            <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 6, fontSize: 12.5 }}>
              {client.email && <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Email</span><span style={{ fontWeight: 520 }}>{client.email}</span></div>}
              {client.phone && <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Téléphone</span><span style={{ fontFamily: "inherit", fontWeight: 520 }}>{client.phone}</span></div>}
              {client.social && (() => {
                const net = (data.bookingSettings && data.bookingSettings.preferredSocial) || "instagram";
                const url = cbSocialUrl(net, client.social);
                return (
                  <div style={{ display: "flex", justifyContent: "space-between" }}>
                    <span style={{ color: "var(--ink-4)" }}>{CB_SOCIAL_LABEL[net] || "Réseau"}</span>
                    {url ? (
                      <a href={url} target="_blank" rel="noopener noreferrer"
                        style={{ fontWeight: 520, color: "var(--accent-ink)", textDecoration: "none" }}>
                        {client.social}
                      </a>
                    ) : (
                      <span style={{ fontWeight: 520 }}>{client.social}</span>
                    )}
                  </div>
                );
              })()}
              {client.birthday && <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Anniversaire</span><span style={{ fontFamily: "inherit", fontWeight: 520 }}>{client.birthday}</span></div>}
              <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Total dépensé</span><span style={{ fontFamily: "inherit", fontWeight: 520 }}>{fmtEUR(client.spent)}</span></div>
              <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-4)" }}>Fidélité</span><span style={{ fontFamily: "inherit", fontWeight: 520, color: "var(--accent-ink)" }}>{client.fid}/{data.fideliteRules.visits}</span></div>
            </div>
          </>
        ) : (
          <div style={{ color: "var(--ink-4)", fontSize: 13 }}>—</div>
        )}
      </div>
    </div>
  );
};

/* ================================================================
   FIDÉLITÉ — edit rules, add visits
================================================================ */
const FideliteClientRow = ({ c, data, actions }) => {
  const [copied, setCopied] = React.useState(false);
  const total = data.fideliteRules.visits;
  const remaining = Math.max(0, total - c.fid);
  const pct = Math.min(100, (c.fid / total) * 100);

const cardUrl = `${window.location.origin}${window.location.pathname}?card=${cbAuth.getCurrentUser()?.bookingSlug || ""}&cli=${c.id}`;

return (
    <div style={{
      padding: 14, background: "var(--surface)",
      border: "1px solid var(--line)", borderRadius: 12,
      display: "flex", flexDirection: "column", gap: 12,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Avatar client={c} size={40}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 520, fontSize: 14.5, color: "var(--ink)" }}>{c.name}</div>
          <div style={{ fontSize: 12.5, color: "var(--ink-4)", marginTop: 1 }}>
            {c.fid === total
              ? "🎁 Récompense prête"
              : remaining === 1
                ? "Plus qu'une visite !"
                : `Encore ${remaining} visites avant la récompense`}
          </div>
        </div>
        <div style={{
          fontFamily: "inherit", fontSize: 13, fontWeight: 600,
          color: c.fid === total ? "var(--sage)" : "var(--accent-ink)",
          padding: "4px 10px",
          background: c.fid === total ? "var(--sage-soft)" : "var(--accent-soft)",
          borderRadius: 6,
        }}>{c.fid}/{total}</div>
      </div>

{/* Progress bar */}
      <div style={{ height: 6, background: "var(--bg-alt)", borderRadius: 999, overflow: "hidden" }}>
        <div style={{
          width: `${pct}%`, height: "100%",
          background: c.fid === total ? "var(--sage)" : "var(--accent)",
          borderRadius: 999, transition: "width 0.3s",
        }}/>
      </div>

{/* Actions */}
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 2,
          border: "1px solid var(--line)", borderRadius: 8, padding: 2,
          background: "var(--bg-alt)",
        }}>
          <button onClick={() => actions.adjustFidelite(c.id, -1)} disabled={c.fid <= 0} style={{
            width: 30, height: 30, background: "transparent", border: "none",
            cursor: c.fid > 0 ? "pointer" : "not-allowed",
            color: "var(--ink-3)", fontSize: 16, borderRadius: 6,
            opacity: c.fid > 0 ? 1 : 0.4,
          }}>−</button>
          <button onClick={() => actions.adjustFidelite(c.id, +1)} disabled={c.fid >= total} style={{
            width: 30, height: 30, background: "transparent", border: "none",
            cursor: c.fid < total ? "pointer" : "not-allowed",
            color: "var(--accent)", fontSize: 16, borderRadius: 6,
            opacity: c.fid < total ? 1 : 0.4,
          }}>+</button>
        </div>
        <button onClick={copyLink} className="btn btn-sm btn-ghost" style={{ height: 34, fontSize: 12.5 }}>
          <Icon name={copied ? "check" : "link"} size={12}/> {copied ? "Copié" : "Lien"}
        </button>
        {c.fid >= total && (
          <button onClick={() => {
            if (!window.confirm(`Remettre la carte de ${c.name} à zéro ? (Récompense offerte)`)) return;
            actions.resetFidelite(c.id);
          }} className="btn btn-sm" style={{ height: 34, fontSize: 12.5, background: "var(--sage)", color: "white" }}>
            Offrir & réinitialiser
          </button>
        )}
      </div>
    </div>
  );
};

const AppFidelite = ({ data, actions, openModal }) => {
  const [search, setSearch] = React.useState("");
  const filtered = data.clients.filter(c => {
    if (!search.trim()) return true;
    return c.name.toLowerCase().includes(search.trim().toLowerCase());
  });
  const sorted = [...filtered].sort((a, b) => (b.fid || 0) - (a.fid || 0));

return (
    <div>
      {/* Rules banner */}
      <div style={{
        padding: "14px 18px", background: "var(--surface)",
        border: "1px solid var(--line)", borderRadius: 12, marginBottom: 16,
        display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 10,
          background: "linear-gradient(135deg, var(--accent) 0%, oklch(45% 0.22 288) 100%)",
          color: "white", display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
        }}>
          <Icon name="gift" size={22}/>
        </div>
        <div style={{ flex: 1, minWidth: 200 }}>
          <div style={{ fontWeight: 520, fontSize: 14.5 }}>Programme de fidélité</div>
          <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>
            {data.fideliteRules.visits} visites = {data.fideliteRules.rewardLabel}
          </div>
        </div>
        <button className="btn btn-sm btn-ghost" onClick={() => openModal("fidelite-rules")}>
          Modifier
        </button>
      </div>

{/* Search */}
      <input value={search} onChange={e => setSearch(e.target.value)}
        placeholder="Rechercher un client…" style={{
        padding: "9px 12px", width: "100%", marginBottom: 14,
        background: "var(--surface)", border: "1px solid var(--line)",
        borderRadius: 8, fontSize: 13.5, fontFamily: "inherit", color: "var(--ink)", outline: "none",
      }}/>

{/* Client cards list */}
      {sorted.length === 0 ? (
        <div style={{ padding: 40, textAlign: "center", color: "var(--ink-4)", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12 }}>
          Aucun client trouvée.
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {sorted.map(c => <FideliteClientRow key={c.id} c={c} data={data} actions={actions}/>)}
        </div>
      )}
    </div>
  );
};

/* ================================================================
   PROMOS — add, cycle status, delete
================================================================ */
const AppPromos = ({ data, actions, openModal }) => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
      <h3 style={{ fontSize: 16 }}>Campagnes en cours</h3>
      <button className="btn btn-sm" style={{ background: "var(--ink)", color: "var(--bg)" }} onClick={() => openModal("promo")}>
        <Icon name="plus" size={14}/> Nouvelle promotion
      </button>
    </div>
    <div className="app-col-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 20 }}>
      {data.promos.map(p => {
        const pColor = {
          "Actif":     { bg: "var(--sage-soft)", c: "oklch(38% 0.08 160)" },
          "Programmé": { bg: "var(--accent-soft)", c: "var(--accent-ink)" },
          "Brouillon": { bg: "var(--bg-alt)", c: "var(--ink-3)" },
        }[p.status];
        return (
          <div key={p.id} style={{ padding: 20, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
              <Icon name="tag" size={20} style={{ color: "var(--ink-3)" }}/>
              <button onClick={() => actions.togglePromoStatus(p.id)}
                style={{ padding: "3px 8px", fontSize: 10.5, fontWeight: 600, background: pColor.bg, color: pColor.c, border: "none", borderRadius: 4, cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.04em", fontFamily: "inherit" }}>
                {p.status}
              </button>
            </div>
            <h4 style={{ marginTop: 14, fontSize: 15 }}>{p.title}</h4>
            <div style={{ marginTop: 4, fontSize: 12.5, color: "var(--ink-3)" }}>{p.segment}</div>
            <div style={{ marginTop: 14, padding: "8px 10px", background: "var(--bg-alt)", borderRadius: 8, fontSize: 12, color: "var(--ink-2)", fontFamily: "inherit" }}>{p.detail}</div>
            <button onClick={() => actions.deletePromo(p.id)} className="btn btn-sm btn-ghost" style={{ marginTop: 10, width: "100%", height: 28, fontSize: 12, color: "oklch(55% 0.18 25)" }}>
              Supprimer
            </button>
          </div>
        );
      })}
    </div>
    <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, padding: 24 }}>
      <h3 style={{ fontSize: 16 }}>Performances des 30 derniers jours</h3>
      <div className="app-kpi-4" style={{ marginTop: 16, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {[["184", "SMS envoyés"], ["43", "Conversions"], ["23%", "Taux de conversion"], ["+612 €", "CA généré"]].map(([v, l]) => (
          <div key={l}>
            <div style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 500 }}>{l}</div>
            <div style={{ fontFamily: "var(--ff-display)", fontSize: 26, fontWeight: 580, letterSpacing: "-0.025em", marginTop: 4 }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* ================================================================
   STATS — desktop: full dashboard / mobile: one simple tabbed block
================================================================ */
const AppStats = (props) => {
  const isMobile = useIsMobile();
  return isMobile ? <AppStatsMobile {...props}/> : <AppStatsDesktop {...props}/>;
};

/* ====== Helpers stats (données réelles uniquement) ====== */
const _CB_FR_M_SHORT = ["Janv","Févr","Mars","Avril","Mai","Juin","Juil","Août","Sept","Oct","Nov","Déc"];
const _statsForData = (data) => {
  const todayOff = (window.cbTodayOffset && window.cbTodayOffset()) || 0;
  const today = new Date();
  const services = data.services || [];
  const appointments = data.appointments || [];
  const priceFor = (sid) => {
    const s = services.find(x => x.id === sid);
    return s ? Number(s.price) || 0 : 0;
  };

// Reviens en arrière sur 6 mois (mois courant inclus)
  const months = [];
  for (let k = 5; k >= 0; k--) {
    const d = new Date(today.getFullYear(), today.getMonth() - k, 1);
    months.push({
      key: `${d.getFullYear()}-${d.getMonth()}`,
      label: _CB_FR_M_SHORT[d.getMonth()],
      year: d.getFullYear(),
      month: d.getMonth(),
      v: 0,        // CA réalisé (RDV done)
      count: 0,    // nb RDV done
    });
  }

// Agrège les RDV done par mois
  for (const a of appointments) {
    if (!a.done) continue;
    const d = window.cbDateForOffset ? window.cbDateForOffset(a.day) : new Date();
    const k = `${d.getFullYear()}-${d.getMonth()}`;
    const m = months.find(x => x.key === k);
    if (m) { m.v += priceFor(a.serviceId); m.count += 1; }
  }

const thisMonth = months[months.length - 1];
  const lastMonth = months[months.length - 2];
  const thisMonthCA = thisMonth ? thisMonth.v : 0;
  const lastMonthCA = lastMonth ? lastMonth.v : 0;
  const rdvDoneThisMonth = thisMonth ? thisMonth.count : 0;
  const panier = rdvDoneThisMonth > 0 ? thisMonthCA / rdvDoneThisMonth : 0;
  const deltaPct = lastMonthCA > 0
    ? Math.round(((thisMonthCA - lastMonthCA) / lastMonthCA) * 100)
    : (thisMonthCA > 0 ? 100 : 0);

// Panier moyen mois précédent — pour comparer
  const lastPanier = lastMonth && lastMonth.count > 0 ? lastMonth.v / lastMonth.count : 0;
  const deltaPanier = panier - lastPanier;

// Top prestations — compte RDV done par service (vrais chiffres)
  const byService = {};
  for (const a of appointments) {
    if (!a.done) continue;
    const s = services.find(x => x.id === a.serviceId);
    if (!s) continue;
    const e = byService[s.id] || (byService[s.id] = { name: s.name, count: 0, rev: 0 });
    e.count += 1;
    e.rev += Number(s.price) || 0;
  }
  const topPrestations = Object.values(byService)
    .sort((a, b) => b.rev - a.rev)
    .slice(0, 5);

// No-show : RDV passés (day < today) marqués non-done
  let noShow = 0, eligible = 0;
  for (const a of appointments) {
    if (a.day >= todayOff) continue;
    eligible += 1;
    if (!a.done) noShow += 1;
  }
  const noShowPct = eligible > 0 ? Math.round((noShow / eligible) * 1000) / 10 : 0;

// Le compte est-il vide ?
  const isEmpty = appointments.length === 0;

return { months, thisMonthCA, lastMonthCA, deltaPct, rdvDoneThisMonth, panier, deltaPanier, topPrestations, noShowPct, isEmpty };
};

const StatsEmptyState = () => (
  <div style={{
    padding: "40px 24px", textAlign: "center",
    background: "var(--surface)", border: "1px solid var(--line)",
    borderRadius: 14,
  }}>
    <div style={{ fontSize: 36, marginBottom: 10 }}>📊</div>
    <div style={{ fontSize: 16, fontWeight: 580, color: "var(--ink)", marginBottom: 6 }}>
      Pas encore de statistiques
    </div>
    <div style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.5, maxWidth: 380, margin: "0 auto" }}>
      Vos chiffres apparaîtront ici dès que vous aurez des rendez-vous marqués
      comme « faits » dans l'agenda.
    </div>
  </div>
);

const AppStatsMobile = ({ data }) => {
  const stats = React.useMemo(() => _statsForData(data), [data]);
  if (stats.isEmpty) return <StatsEmptyState/>;

const series = stats.months.map(m => ({ m: m.label, v: m.v }));
  const [active, setActive] = React.useState(series.length - 1);
  const current = series[active] || series[series.length - 1];
  const maxVal = Math.max(1, ...series.map(d => d.v));
  const prev = active > 0 ? series[active - 1].v : 0;
  const delta = current.v - prev;
  const deltaPct = prev > 0 ? Math.round((delta / prev) * 100) : (current.v > 0 ? 100 : 0);
  const total = series.reduce((s, d) => s + d.v, 0);

return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {/* Hero CA — uniquement le mois courant, données réelles */}
      <div style={{
        padding: "22px 20px",
        background: "linear-gradient(135deg, var(--accent) 0%, oklch(45% 0.22 288) 100%)",
        borderRadius: 16, color: "white",
      }}>
        <div style={{ fontSize: 12, opacity: 0.85, textTransform: "uppercase", letterSpacing: "0.06em" }}>
          CA · {current.m}
        </div>
        <div style={{
          fontFamily: "var(--ff-display)", fontSize: "clamp(32px, 7vw, 44px)",
          fontWeight: 580, letterSpacing: "-0.03em", marginTop: 4,
          fontVariantNumeric: "tabular-nums",
        }}>{fmtEUR(current.v)}</div>
        {prev > 0 && (
          <div style={{
            marginTop: 10, display: "inline-flex", alignItems: "center", gap: 5,
            fontSize: 12.5, background: "rgba(255,255,255,0.18)",
            padding: "4px 10px", borderRadius: 999,
          }}>
            <Icon name="arrowUp" size={11} stroke={2.4}
              style={{ transform: delta < 0 ? "rotate(180deg)" : "none" }}/>
            {delta >= 0 ? "+" : ""}{deltaPct}% vs mois précédent
          </div>
        )}
      </div>

{/* Interactive chart — 6 mois réels */}
      <div style={{ padding: 18, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14 }}>
        <div style={{ fontSize: 12.5, color: "var(--ink-4)", fontWeight: 500, marginBottom: 14 }}>
          6 derniers mois — touchez une barre
        </div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 140 }}>
          {series.map((d, i) => {
            const h = (d.v / maxVal) * 120;
            const isActive = active === i;
            return (
              <button key={i} onClick={() => setActive(i)}
                style={{
                  flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                  background: "transparent", border: "none", padding: 0, cursor: "pointer", fontFamily: "inherit",
                }}>
                <div style={{
                  width: "100%", height: Math.max(h, 2),
                  background: isActive
                    ? "linear-gradient(to top, var(--accent) 0%, oklch(65% 0.2 288) 100%)"
                    : "var(--accent-soft-2)",
                  borderRadius: 6, transition: "background .2s, height .25s cubic-bezier(0.22, 1, 0.36, 1)",
                }}/>
                <div style={{
                  fontSize: 10.5, fontWeight: isActive ? 600 : 500,
                  color: isActive ? "var(--accent-ink)" : "var(--ink-4)",
                }}>{d.m}</div>
              </button>
            );
          })}
        </div>
        <div style={{
          marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line)",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12,
        }}>
          <MobileStat label="Panier moyen" value={fmtEUR(stats.panier)}/>
          <MobileStat label="RDV faits ce mois" value={stats.rdvDoneThisMonth}/>
          <MobileStat label="Total 6 mois" value={fmtEUR(total)}/>
          <MobileStat label="Taux no-show" value={stats.noShowPct + "%"}/>
        </div>
      </div>
    </div>
  );
};

const MobileStat = ({ label, value }) => (
  <div>
    <div style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 500 }}>{label}</div>
    <div style={{
      fontFamily: "var(--ff-display)", fontSize: 20, fontWeight: 580,
      letterSpacing: "-0.025em", marginTop: 2, fontVariantNumeric: "tabular-nums",
    }}>{value}</div>
  </div>
);

const AppStatsDesktop = ({ data }) => {
  const stats = React.useMemo(() => _statsForData(data), [data]);
  const [hoverMonth, setHoverMonth] = React.useState(null);
  const [hoverPresta, setHoverPresta] = React.useState(null);

if (stats.isEmpty) return <StatsEmptyState/>;

const monthlyData = stats.months.map(m => ({ m: m.label, v: m.v }));
  const maxMonth = Math.max(1, ...monthlyData.map(d => d.v));
  const topPrestations = stats.topPrestations.map(p => [p.name, p.rev, p.count]);
  const maxRev = Math.max(1, ...topPrestations.map(p => p[1]));

return (
    <div>
      {/* Hero stat */}
      <div style={{
        padding: "24px 28px", marginBottom: 16,
        background: "linear-gradient(135deg, var(--accent) 0%, oklch(45% 0.22 288) 100%)",
        borderRadius: 16, color: "white",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap",
      }}>
        <div>
          <div style={{ fontSize: 12, opacity: 0.85, textTransform: "uppercase", letterSpacing: "0.06em" }}>Chiffre d'affaires ce mois</div>
          <div style={{
            fontFamily: "var(--ff-display)", fontSize: "clamp(32px, 4vw, 44px)",
            fontWeight: 580, letterSpacing: "-0.03em", marginTop: 4,
          }}>{fmtEUR(stats.thisMonthCA)}</div>
          {stats.lastMonthCA > 0 && (
            <div style={{ marginTop: 8, display: "inline-flex", alignItems: "center", gap: 5, fontSize: 13, background: "rgba(255,255,255,0.18)", padding: "4px 10px", borderRadius: 999 }}>
              <Icon name="arrowUp" size={12} stroke={2.4} style={{ transform: stats.deltaPct < 0 ? "rotate(180deg)" : "none" }}/>
              {stats.deltaPct >= 0 ? "+" : ""}{stats.deltaPct}% vs mois dernier
            </div>
          )}
        </div>
        <div style={{
          display: "flex", gap: 4, alignItems: "flex-end", height: 60,
          opacity: 0.95, flexShrink: 0,
        }}>
          {monthlyData.map((d, i) => (
            <div key={i} style={{
              width: 12, height: `${(d.v / maxMonth) * 100}%`,
              background: i === 5 ? "rgba(255,255,255,0.95)" : "rgba(255,255,255,0.4)",
              borderRadius: 3,
            }}/>
          ))}
        </div>
      </div>

{/* Secondary KPIs — données réelles */}
      <div className="app-kpi-4" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginBottom: 18 }}>
        {[
          { l: "RDV faits ce mois", v: stats.rdvDoneThisMonth, d: null, icon: "calendar", tone: "sage" },
          { l: "Panier moyen",      v: fmtEUR(stats.panier),
            d: stats.deltaPanier !== 0 && Math.abs(stats.deltaPanier) >= 0.5
                ? `${stats.deltaPanier > 0 ? "+" : ""}${fmtEUR(stats.deltaPanier)}`
                : null,
            icon: "euro", tone: "accent" },
          { l: "Taux no-show",      v: stats.noShowPct + "%", d: null, icon: "clock", tone: "warn" },
        ].map((k, i) => {
          const tones = {
            sage:   { bg: "var(--sage-soft)",   c: "oklch(38% 0.08 160)" },
            accent: { bg: "var(--accent-soft)", c: "var(--accent-ink)" },
            warn:   { bg: "oklch(97% 0.025 30)",c: "oklch(42% 0.14 30)" },
          }[k.tone];
          return (
            <div key={i} style={{
              padding: 18, background: "var(--surface)", border: "1px solid var(--line)",
              borderRadius: 14, display: "flex", flexDirection: "column", gap: 10,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 9,
                background: tones.bg, color: tones.c,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name={k.icon} size={15}/>
              </div>
              <div>
                <div style={{ fontFamily: "var(--ff-display)", fontSize: 26, fontWeight: 580, letterSpacing: "-0.03em" }}>{k.v}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>{k.l}</div>
                {k.d && (
                  <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11.5, color: "var(--sage)", background: "var(--sage-soft)", padding: "2px 8px", borderRadius: 999 }}>
                    <Icon name="arrowUp" size={10} stroke={2.4} style={{ transform: k.d.startsWith("-") ? "rotate(180deg)" : "none" }}/> {k.d}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

{/* Chart + top services */}
      <div className="app-split" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 }}>
        <div style={{ padding: 22, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14, position: "relative" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, gap: 8, flexWrap: "wrap" }}>
            <h3 style={{ fontSize: 15 }}>Chiffre d'affaires</h3>
            <div style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 500 }}>6 derniers mois</div>
          </div>

{/* Tooltip */}
          {hoverMonth != null && (
            <div style={{
              position: "absolute", top: 56,
              left: `${((40 + hoverMonth * 76 + 24) / 500) * 100}%`,
              transform: "translateX(-50%)",
              background: "var(--ink)", color: "var(--bg)",
              padding: "6px 10px", borderRadius: 6,
              fontSize: 12, fontWeight: 500,
              pointerEvents: "none",
              whiteSpace: "nowrap",
              zIndex: 2,
            }}>
              {monthlyData[hoverMonth].m} · <strong>{fmtEUR(monthlyData[hoverMonth].v)}</strong>
            </div>
          )}

<div style={{ padding: 22, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14 }}>
          <h3 style={{ fontSize: 15, marginBottom: 16 }}>Top prestations</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {topPrestations.map(([name, rev, count], i) => {
              const isHover = hoverPresta === i;
              const pct = (rev / maxRev) * 100;
              return (
                <div key={name}
                  onMouseEnter={() => setHoverPresta(i)}
                  onMouseLeave={() => setHoverPresta(null)}
                  style={{
                    padding: "8px 10px",
                    background: isHover ? "var(--bg-alt)" : "transparent",
                    borderRadius: 8, cursor: "pointer",
                    transition: "background 0.15s",
                  }}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 5, gap: 8 }}>
                    <span style={{ color: "var(--ink)", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      <span style={{ color: "var(--ink-4)", marginRight: 6, fontWeight: 500 }}>#{i + 1}</span>
                      {name}
                    </span>
                    <span style={{ fontFamily: "inherit", fontWeight: 600, flexShrink: 0, color: isHover ? "var(--accent-ink)" : "var(--ink)" }}>{fmtEUR(rev)}</span>
                  </div>
                  <div style={{ height: 6, background: "var(--bg-alt)", borderRadius: 10, overflow: "hidden" }}>
                    <div style={{
                      width: `${pct}%`, height: "100%",
                      background: (isHover || i === 0) ? "var(--accent)" : "var(--accent-soft-2)",
                      borderRadius: 10,
                      transition: "background 0.15s",
                    }}/>
                  </div>
                  {isHover && (
                    <div style={{ fontSize: 11.5, color: "var(--ink-4)", marginTop: 4 }}>
                      {count} prestation{count > 1 ? "s" : ""} · moy. {fmtEUR(rev / Math.max(count, 1))}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ================================================================
   FACTURES — toggle paid, add, delete, French-compliant detail view
================================================================ */

// Full French-compliant invoice detail (printable)
const InvoiceDetailModal = ({ invoice, data, onClose }) => {
  if (!invoice) return null;
  const b = data.business || {};
  const c = findClient(data, invoice.clientId);
  const isCredit = (invoice.amount < 0) || !!invoice.creditOf;
  // TVA — utilise le taux figé sur la facture si présent (snapshot à l'émission),
  // sinon retombe sur le statut courant du business.
  const vatRate = invoice.vatRate != null && invoice.vatRate > 0
    ? Number(invoice.vatRate)
    : (b.vatStatus === "applicable" ? Number(b.vatRate || 0) : 0);
  const vatActive = vatRate > 0;
  const amountTTC = invoice.amount;
  const amountHT = vatActive ? +(amountTTC / (1 + vatRate / 100)).toFixed(2) : amountTTC;
  const vatAmount = vatActive ? +(amountTTC - amountHT).toFixed(2) : 0;
  const dueLabel = invoice.dueDate || (b.paymentTermsDays > 0 ? `Sous ${b.paymentTermsDays} jours` : "À réception");

const missingFields = [];
  if (!b.address) missingFields.push("adresse");
  if (!b.siret)   missingFields.push("SIRET");

const handlePrint = () => window.print();

return (
    <Modal open={!!invoice} onClose={onClose} wide
      title={`Facture ${invoice.number || invoice.id}`}
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Fermer</button>
          <button className="btn btn-primary" onClick={handlePrint}>
            <Icon name="invoice" size={14}/> Imprimer / PDF
          </button>
        </>
      }>
      {missingFields.length > 0 && (
        <div style={{
          marginBottom: 16, padding: "10px 14px",
          background: "var(--warn-soft)", border: "1px solid var(--warn-soft-2)",
          borderRadius: 8, fontSize: 13, color: "var(--warn-ink)", lineHeight: 1.5,
        }}>
          <strong>Champs manquants pour conformité :</strong> {missingFields.join(", ")}. Ajoutez-les dans <em>Paramètres → Informations légales</em>.
        </div>
      )}

{/* Printable invoice body */}
      <div id="cb-invoice-print" style={{
        padding: "28px 32px", background: "white",
        border: "1px solid var(--line)", borderRadius: 10,
        fontFamily: "var(--ff-text)", color: "#111",
        lineHeight: 1.5, fontSize: 13.5,
      }}>
        {/* Header: emitter + invoice meta */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 24 }}>
          <div>
            <div style={{ fontFamily: "var(--ff-display)", fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em" }}>
              {b.name || "Votre activité"}
            </div>
            <div style={{ fontSize: 12.5, marginTop: 6, color: "#555", whiteSpace: "pre-line" }}>
              {b.owner}{b.legalForm ? ` · ${b.legalForm}` : ""}{"\n"}
              {b.address || "— adresse à renseigner —"}{"\n"}
              {[b.postalCode, b.city].filter(Boolean).join(" ")}{"\n"}
              {b.phone ? `Tél : ${b.phone}` : ""}{b.contactEmail ? `${b.phone ? " · " : ""}${b.contactEmail}` : ""}
            </div>
            <div style={{ fontSize: 11.5, marginTop: 8, color: "#777", fontFamily: "inherit" }}>
              SIRET : {b.siret || "— à renseigner —"}{b.vatNumber ? ` · TVA : ${b.vatNumber}` : ""}
              {b.rcsRm ? <><br/>{b.rcsRm}</> : null}
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontFamily: "var(--ff-display)", fontSize: 28, fontWeight: 700, letterSpacing: "-0.025em", textTransform: "uppercase" }}>
              {isCredit ? "Avoir" : "Facture"}
            </div>
            <div style={{ fontSize: 13, marginTop: 8, fontFamily: "inherit" }}>
              N° {invoice.number || invoice.id}
            </div>
            {invoice.creditOf && (
              <div style={{ fontSize: 12, color: "#777", marginTop: 2, fontFamily: "inherit" }}>
                Annule la facture {invoice.creditOf}
              </div>
            )}
            <div style={{ fontSize: 12.5, color: "#555", marginTop: 4 }}>
              Date d'émission : {invoice.date}
            </div>
            <div style={{ fontSize: 12.5, color: "#555" }}>
              Date de prestation : {invoice.prestationDate || invoice.date}
            </div>
            <div style={{ fontSize: 12.5, color: "#555" }}>
              Date d'échéance : {dueLabel}
            </div>
          </div>
        </div>

{/* Recipient */}
        <div style={{ padding: "12px 14px", background: "#f7f7f9", borderRadius: 8, marginBottom: 20, fontSize: 12.5 }}>
          <div style={{ fontSize: 11, color: "#777", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4 }}>
            Facturé à
          </div>
          <div style={{ fontWeight: 600 }}>{c ? c.name : "—"}</div>
          {c && c.email && <div style={{ color: "#555" }}>{c.email}</div>}
          {c && c.phone && <div style={{ color: "#555" }}>{c.phone}</div>}
        </div>

{/* Line items */}
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5, marginBottom: 16 }}>
          <thead>
            <tr style={{ borderBottom: "2px solid #333", textAlign: "left" }}>
              <th style={{ padding: "8px 4px", fontWeight: 600 }}>Désignation</th>
              <th style={{ padding: "8px 4px", fontWeight: 600, textAlign: "center" }}>Qté</th>
              <th style={{ padding: "8px 4px", fontWeight: 600, textAlign: "right" }}>Prix unit. HT</th>
              {vatActive && <th style={{ padding: "8px 4px", fontWeight: 600, textAlign: "right" }}>TVA</th>}
              <th style={{ padding: "8px 4px", fontWeight: 600, textAlign: "right" }}>Total HT</th>
            </tr>
          </thead>
          <tbody>
            <tr style={{ borderBottom: "1px solid #ddd" }}>
              <td style={{ padding: "10px 4px" }}>
                {invoice.designation || "Prestation de service"}
                <div style={{ fontSize: 11.5, color: "#777", marginTop: 2 }}>
                  {invoice.prestationDate ? `Réalisée le ${invoice.prestationDate}` : ""}
                </div>
              </td>
              <td style={{ padding: "10px 4px", textAlign: "center", fontFamily: "inherit" }}>1</td>
              <td style={{ padding: "10px 4px", textAlign: "right", fontFamily: "inherit" }}>{amountHT.toFixed(2)} €</td>
              {vatActive && <td style={{ padding: "10px 4px", textAlign: "right", fontFamily: "inherit" }}>{vatRate}%</td>}
              <td style={{ padding: "10px 4px", textAlign: "right", fontFamily: "inherit", fontWeight: 600 }}>{amountHT.toFixed(2)} €</td>
            </tr>
          </tbody>
        </table>

{/* Totals */}
        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 24 }}>
          <div style={{ minWidth: 260, fontSize: 12.5 }}>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}>
              <span style={{ color: "#555" }}>Total HT</span>
              <span style={{ fontFamily: "inherit" }}>{amountHT.toFixed(2)} €</span>
            </div>
            {vatActive ? (
              <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}>
                <span style={{ color: "#555" }}>TVA ({vatRate}%)</span>
                <span style={{ fontFamily: "inherit" }}>{vatAmount.toFixed(2)} €</span>
              </div>
            ) : (
              <div style={{ fontSize: 11, color: "#777", padding: "4px 0", fontStyle: "italic" }}>
                TVA non applicable — art. 293 B du CGI
              </div>
            )}
            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderTop: "2px solid #333", marginTop: 4, fontSize: 15, fontWeight: 700 }}>
              <span>Total TTC</span>
              <span style={{ fontFamily: "inherit" }}>{amountTTC.toFixed(2)} €</span>
            </div>
          </div>
        </div>

{/* Payment terms + legal mentions */}
        <div style={{ paddingTop: 16, borderTop: "1px solid #ddd", fontSize: 11.5, color: "#555", lineHeight: 1.6 }}>
          <div style={{ fontWeight: 600, color: "#333", marginBottom: 4 }}>Modalités de paiement</div>
          <div>Échéance : {dueLabel}. Moyens acceptés : {b.paymentMethods || "—"}.</div>
          {b.iban && <div style={{ fontFamily: "inherit", fontSize: 11 }}>IBAN : {b.iban}</div>}
          <div style={{ marginTop: 4, fontSize: 11, color: "#777" }}>
            Aucun escompte n'est accordé en cas de paiement anticipé.
          </div>

<div style={{ marginTop: 12, fontSize: 11, color: "#777" }}>
            En cas de retard de paiement, des pénalités sont applicables au taux de la Banque centrale européenne + 10 points.
            Indemnité forfaitaire pour frais de recouvrement : 40 € (art. L441-10 du Code de commerce).
          </div>

{(b.mediatorName || b.mediatorUrl) && (
            <div style={{ marginTop: 10, fontSize: 11, color: "#777" }}>
              Médiateur de la consommation : {b.mediatorName || "—"}{b.mediatorUrl ? ` · ${b.mediatorUrl}` : ""} (art. L612-1 du Code de la consommation).
            </div>
          )}

{invoice.paid && !isCredit && (
            <div style={{
              marginTop: 14, display: "inline-block",
              padding: "4px 12px", background: "oklch(88% 0.08 160)",
              color: "oklch(30% 0.1 160)", borderRadius: 999,
              fontSize: 12, fontWeight: 600,
            }}>✓ PAYÉE</div>
          )}
        </div>
      </div>
    </Modal>
  );
};

const AppFactures = ({ data, actions, openModal }) => {
  const isMobile = useIsMobile();
  const [viewId, setViewId] = React.useState(null);
  const b = data.business || {};
  const legalReady = b.address && b.siret;
  const viewInvoice = viewId ? data.invoices.find(i => i.id === viewId) : null;

return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, gap: 10 }}>
        <h3 style={{ fontSize: 16 }}>Vos factures</h3>
        <button className="btn btn-sm" style={{ background: "var(--ink)", color: "var(--bg)" }} onClick={() => openModal("invoice")}>
          <Icon name="plus" size={14}/>{isMobile ? "" : " Nouvelle facture"}
        </button>
      </div>

{!legalReady && (
        <div style={{
          padding: "12px 14px", marginBottom: 14,
          background: "var(--warn-soft)", border: "1px solid var(--warn-soft-2)",
          borderRadius: 10, fontSize: 13, color: "var(--warn-ink)", lineHeight: 1.5,
          display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap",
        }}>
          <Icon name="shield" size={15} style={{ flexShrink: 0 }}/>
          <div style={{ flex: 1, minWidth: 200 }}>
            <strong>Factures non conformes :</strong> ajoutez votre adresse et SIRET dans les paramètres pour qu'elles respectent la loi française.
          </div>
        </div>
      )}
      {data.invoices.length === 0 ? (
        <div style={{ padding: 40, textAlign: "center", color: "var(--ink-4)", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12 }}>
          Aucune facture pour le moment.
        </div>
      ) : isMobile ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {data.invoices.map(f => (
            <InvoiceCardMobile key={f.id} f={f} data={data} actions={actions} onView={() => setViewId(f.id)}/>
          ))}
        </div>
      ) : (
        <div className="app-scroll-x" style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, overflow: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, minWidth: 640 }}>
            <thead>
              <tr style={{ background: "var(--bg-alt)", textAlign: "left" }}>
                {["Numéro", "Cliente", "Date", "Montant", "Statut", ""].map(h => (
                  <th key={h} style={{ padding: "12px 16px", fontSize: 12.5, fontWeight: 520, color: "var(--ink-3)", borderBottom: "1px solid var(--line)" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {data.invoices.map((f, i) => {
                const c = findClient(data, f.clientId);
                return (
                  <tr key={f.id} style={{ borderBottom: i < data.invoices.length - 1 ? "1px solid var(--line)" : "none" }}>
                    <td style={{ padding: "12px 16px", fontFamily: "inherit", fontSize: 12, color: "var(--ink-3)" }}>{f.number || f.id}</td>
                    <td style={{ padding: "12px 16px", fontWeight: 520 }}>{c ? c.name : "—"}</td>
                    <td style={{ padding: "12px 16px", color: "var(--ink-3)" }}>{f.date}</td>
                    <td style={{ padding: "12px 16px", fontFamily: "inherit", fontWeight: 520 }}>{fmtEUR(f.amount)}</td>
                    <td style={{ padding: "12px 16px" }}>
                      <button onClick={() => actions.toggleInvoicePaid(f.id)} style={{
                        padding: "3px 8px", fontSize: 11, fontWeight: 520, borderRadius: 4,
                        background: f.paid ? "var(--sage-soft)" : "var(--warn-soft)",
                        color: f.paid ? "oklch(38% 0.08 160)" : "var(--warn-ink)",
                        border: "none", cursor: "pointer", fontFamily: "inherit",
                      }}>{f.paid ? "Payée" : "En attente"}</button>
                    </td>
                    <td style={{ padding: "12px 16px", textAlign: "right", whiteSpace: "nowrap" }}>
                      <button onClick={() => setViewId(f.id)} className="btn btn-sm btn-ghost" style={{ height: 28, fontSize: 12 }}>Voir</button>
                      {f.creditOf || (f.amount < 0) ? null : (
                        <button onClick={() => actions.deleteInvoice(f.id)} className="btn btn-sm btn-ghost" style={{ height: 28, fontSize: 12, color: "oklch(55% 0.18 25)", marginLeft: 4 }} title="Annuler par avoir (la facture ne peut pas être supprimée)">Annuler</button>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

<InvoiceDetailModal invoice={viewInvoice} data={data} onClose={() => setViewId(null)}/>
    </div>
  );
};

/* ================================================================
   STOCK — adjust quantities, add, delete
================================================================ */
const STOCK_STATUS_COLOR = {
  ok:       ["var(--sage-soft)", "oklch(38% 0.08 160)", "Suffisant"],
  low:      ["var(--warn-soft)", "var(--warn-ink)", "Bas"],
  critical: ["oklch(96% 0.04 30)", "oklch(48% 0.18 30)", "Critique"],
};
const stockStatusOf = (it) => it.qty >= it.min ? "ok" : it.qty < Math.ceil(it.min / 2) ? "critical" : "low";

const StockCardMobile = ({ it, actions }) => {
  const stColor = STOCK_STATUS_COLOR[stockStatusOf(it)];
  const isLow = it.qty < it.min;
  return (
    <div style={{
      background: "var(--surface)",
      border: "1px solid " + (isLow ? stColor[1] + "33" : "var(--line)"),
      borderRadius: 12, padding: 14,
      display: "flex", flexDirection: "column", gap: 12,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", gap: 10 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 520, fontSize: 14.5, color: "var(--ink)" }}>{it.name}</div>
          <div style={{ fontSize: 12.5, color: "var(--ink-4)", marginTop: 3 }}>
            {fmtEUR(it.price)} · seuil {it.min}
          </div>
        </div>
        <span style={{
          padding: "3px 8px", fontSize: 10.5, fontWeight: 600, borderRadius: 4,
          background: stColor[0], color: stColor[1], flexShrink: 0,
          textTransform: "uppercase", letterSpacing: "0.04em",
        }}>{stColor[2]}</span>
      </div>

<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
        <div style={{
          display: "flex", alignItems: "center",
          border: "1px solid var(--line)", borderRadius: 10, padding: 3,
          background: "var(--bg-alt)",
        }}>
          <button onClick={() => actions.adjustStock(it.id, -1)} aria-label="Diminuer" style={{
            width: 40, height: 40, background: "transparent", border: "none",
            cursor: "pointer", color: "var(--ink-2)", fontSize: 20,
            borderRadius: 7, fontFamily: "inherit",
          }}>−</button>
          <span style={{
            fontFamily: "inherit", fontSize: 16, fontWeight: 600,
            minWidth: 48, textAlign: "center", color: "var(--ink)",
          }}>{it.qty}</span>
          <button onClick={() => actions.adjustStock(it.id, +1)} aria-label="Augmenter" style={{
            width: 40, height: 40, background: "transparent", border: "none",
            cursor: "pointer", color: "var(--ink-2)", fontSize: 20,
            borderRadius: 7, fontFamily: "inherit",
          }}>+</button>
        </div>
        <div style={{ display: "flex", gap: 6, flexShrink: 0 }}>
          <button onClick={() => actions.adjustStock(it.id, +5)} className="btn btn-sm btn-ghost" style={{ height: 36, fontSize: 12.5, padding: "0 10px" }}>+5</button>
          <button onClick={() => actions.deleteStockItem(it.id)} aria-label="Supprimer" className="btn btn-sm btn-ghost" style={{ height: 36, width: 36, padding: 0, color: "oklch(55% 0.18 25)" }}>
            <Icon name="close" size={14}/>
          </button>
        </div>
      </div>
    </div>
  );
};

const AppStock = ({ data, actions, openModal }) => {
  const isMobile = useIsMobile();
  const low = data.stock.filter(s => s.qty < s.min);
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, gap: 10 }}>
        <h3 style={{ fontSize: 16 }}>Votre stock</h3>
        <button className="btn btn-sm" style={{ background: "var(--ink)", color: "var(--bg)" }} onClick={() => openModal("stock")}>
          <Icon name="plus" size={14}/>{isMobile ? "" : " Nouveau produit"}
        </button>
      </div>
      {low.length > 0 && (
        <div style={{
          padding: 14, background: "oklch(97% 0.025 30)",
          border: "1px solid oklch(90% 0.04 30)", borderRadius: 10,
          marginBottom: 16, display: "flex", gap: 12, alignItems: "center",
        }}>
          <div style={{
            width: 34, height: 34, borderRadius: 8,
            background: "oklch(70% 0.14 30)", color: "white",
            display: "flex", alignItems: "center", justifyContent: "center",
            flexShrink: 0,
          }}>
            <Icon name="bell" size={16}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 520, fontSize: 13.5, color: "oklch(32% 0.14 30)" }}>
              {low.length} produit{low.length > 1 ? "s" : ""} à commander
            </div>
            <div style={{
              fontSize: 12, color: "oklch(42% 0.14 30)", marginTop: 2,
              lineHeight: 1.5,
            }}>
              {low.map(s => `${s.name} (${s.qty})`).join(", ")}
            </div>
          </div>
        </div>
      )}

{isMobile ? (
        data.stock.length === 0 ? (
          <div style={{ padding: 36, textAlign: "center", color: "var(--ink-4)", fontSize: 14, background: "var(--surface)", border: "1px dashed var(--line-strong)", borderRadius: 12 }}>
            Aucun produit. Ajoutez le premier pour commencer.
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {data.stock.map(it => (
              <StockCardMobile key={it.id} it={it} actions={actions}/>
            ))}
          </div>
        )
      ) : (
        <div className="app-scroll-x" style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, overflow: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, minWidth: 640 }}>
            <thead>
              <tr style={{ background: "var(--bg-alt)", textAlign: "left" }}>
                {["Produit", "Stock", "Seuil mini", "Prix unitaire", "Statut", ""].map(h => (
                  <th key={h} style={{ padding: "12px 16px", fontSize: 12.5, fontWeight: 520, color: "var(--ink-3)", borderBottom: "1px solid var(--line)" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {data.stock.map((it, i) => {
                const stColor = STOCK_STATUS_COLOR[stockStatusOf(it)];
                return (
                  <tr key={it.id} style={{ borderBottom: i < data.stock.length - 1 ? "1px solid var(--line)" : "none" }}>
                    <td style={{ padding: "12px 16px", fontWeight: 520 }}>{it.name}</td>
                    <td style={{ padding: "12px 16px" }}>
                      <div style={{ display: "inline-flex", alignItems: "center", gap: 6, border: "1px solid var(--line)", borderRadius: 7, padding: 2 }}>
                        <button onClick={() => actions.adjustStock(it.id, -1)} style={{ width: 22, height: 22, background: "transparent", border: "none", cursor: "pointer", color: "var(--ink-3)", borderRadius: 4, fontSize: 14 }}>−</button>
                        <span style={{ fontFamily: "inherit", fontSize: 13, minWidth: 22, textAlign: "center" }}>{it.qty}</span>
                        <button onClick={() => actions.adjustStock(it.id, +1)} style={{ width: 22, height: 22, background: "transparent", border: "none", cursor: "pointer", color: "var(--ink-3)", borderRadius: 4, fontSize: 14 }}>+</button>
                      </div>
                    </td>
                    <td style={{ padding: "12px 16px", fontFamily: "inherit", color: "var(--ink-4)" }}>{it.min}</td>
                    <td style={{ padding: "12px 16px", fontFamily: "inherit" }}>{fmtEUR(it.price)}</td>
                    <td style={{ padding: "12px 16px" }}>
                      <span style={{ padding: "3px 8px", fontSize: 11, fontWeight: 520, borderRadius: 4, background: stColor[0], color: stColor[1] }}>{stColor[2]}</span>
                    </td>
                    <td style={{ padding: "12px 16px", textAlign: "right" }}>
                      <button onClick={() => actions.adjustStock(it.id, +5)} className="btn btn-sm btn-ghost" style={{ height: 28, fontSize: 12 }}>+5 réappro</button>
                      <button onClick={() => actions.deleteStockItem(it.id)} className="btn btn-sm btn-ghost" style={{ height: 28, fontSize: 12, color: "oklch(55% 0.18 25)", marginLeft: 4 }}>Retirer</button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

/* ================================================================
   PRISE DE RDV — public booking link + settings
================================================================ */
const DAY_FULL_LABELS = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

// Migrate legacy bookingSettings → schedule if missing
const resolveSchedule = (bs) => {
  if (bs.schedule) return bs.schedule;
  const daysOpen = bs.daysOpen || [1, 2, 3, 4, 5, 6];
  const h = bs.hours || { start: 9, end: 18 };
  const s = {};
  for (let i = 1; i <= 7; i++) {
    s[i] = { open: daysOpen.includes(i), start: h.start, end: h.end };
  }
  return s;
};

/* ============ SERVICES — gestion des prestations proposées ============ */
const AppServices = ({ data, actions }) => {
  const services = data.services || [];
  const [editing, setEditing] = React.useState(null); // null | "new" | service.id
  const [draft, setDraft] = React.useState({ name: "", price: "", duration: "1", description: "", active: true });

return (
    <div style={{ maxWidth: 760 }}>
      <div style={{ marginBottom: 18, display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
        <div>
          <h3 style={{ fontSize: 20 }}>Vos prestations</h3>
          <p style={{ fontSize: 14, color: "var(--ink-3)", marginTop: 6, lineHeight: 1.5 }}>
            Ajoutez ici tout ce que vous proposez. Les prestations <strong>actives</strong> apparaîtront sur votre page de réservation.
          </p>
        </div>
        {editing === null && (
          <button onClick={startNew} className="btn btn-accent btn-sm">
            <Icon name="plus" size={13}/> Nouvelle prestation
          </button>
        )}
      </div>

{/* Form add/edit */}
      {editing !== null && (
        <div style={{
          marginBottom: 18, padding: 18,
          background: "var(--surface)", border: `1px solid var(--accent-soft-2)`,
          borderRadius: 14, boxShadow: "var(--sh-2)",
        }}>
          <div style={{ fontSize: 14, fontWeight: 580, marginBottom: 14 }}>
            {editing === "new" ? "Nouvelle prestation" : "Modifier"}
          </div>
          <div style={{ display: "grid", gap: 12 }}>
            <ServiceField label="Nom de la prestation *" value={draft.name}
              onChange={v => setDraft({ ...draft, name: v })}
              placeholder="ex. Coupe + brushing"/>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="app-split">
              <ServiceField label="Prix (€)" type="number" value={draft.price}
                onChange={v => setDraft({ ...draft, price: v })}
                placeholder="45"/>
              <ServiceField label="Durée (heures)" type="number" value={draft.duration}
                onChange={v => setDraft({ ...draft, duration: v })}
                placeholder="1" step="0.25"/>
            </div>
            <div>
              <label style={{ fontSize: 12.5, color: "var(--ink-3)", display: "block", marginBottom: 4 }}>
                Description (optionnel — visible par vos clients)
              </label>
              <textarea value={draft.description} onChange={e => setDraft({ ...draft, description: e.target.value })}
                placeholder="Ce qui est inclus, conditions particulières…"
                rows={2}
                style={{ ...fieldInputStyle, resize: "vertical", minHeight: 60 }}/>
            </div>
            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 14 }}>
              <input type="checkbox" checked={draft.active} onChange={e => setDraft({ ...draft, active: e.target.checked })}
                style={{ width: 16, height: 16, accentColor: "var(--accent)", cursor: "pointer" }}/>
              <span>Visible sur la page de réservation</span>
            </label>
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
            <button onClick={save} className="btn btn-accent btn-sm">
              {editing === "new" ? "Ajouter" : "Enregistrer"}
            </button>
            <button onClick={cancel} className="btn btn-ghost btn-sm">Annuler</button>
          </div>
        </div>
      )}

{/* List */}
      {services.length === 0 ? (
        <div style={{
          padding: "40px 20px", textAlign: "center",
          background: "var(--bg-alt)", border: "1px dashed var(--line-strong)",
          borderRadius: 12, color: "var(--ink-3)",
        }}>
          <div style={{ fontSize: 32, marginBottom: 8 }}>✦</div>
          <div style={{ fontSize: 14.5, fontWeight: 520, color: "var(--ink-2)" }}>Aucune prestation pour le moment</div>
          <div style={{ fontSize: 13, marginTop: 6 }}>Cliquez sur « Nouvelle prestation » pour commencer.</div>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {services.map(s => {
            const active = s.active !== false;
            return (
              <div key={s.id} style={{
                padding: "14px 16px",
                background: "var(--surface)",
                border: `1px solid ${active ? "var(--line)" : "var(--line)"}`,
                borderLeft: active ? `3px solid var(--accent)` : `3px solid var(--ink-4)`,
                borderRadius: 10,
                opacity: active ? 1 : 0.62,
                display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap",
              }}>
                <div style={{ flex: 1, minWidth: 180 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <span style={{ fontSize: 14.5, fontWeight: 580, color: "var(--ink)" }}>{s.name}</span>
                    {!active && (
                      <span style={{
                        padding: "2px 8px", background: "var(--bg-alt)",
                        border: "1px solid var(--line)", borderRadius: 999,
                        fontSize: 10.5, fontWeight: 600, color: "var(--ink-3)",
                      }}>Masquée</span>
                    )}
                  </div>
                  <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2, display: "flex", gap: 12, flexWrap: "wrap" }}>
                    <span>{fmtDuration(s.duration)}</span>
                    <span style={{ fontWeight: 580, color: "var(--accent-ink)" }}>
                      {s.price ? `${s.price} €` : "Gratuit"}
                    </span>
                  </div>
                  {s.description && (
                    <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.45 }}>
                      {s.description}
                    </div>
                  )}
                </div>
                <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                  <button onClick={() => actions.toggleServiceActive(s.id)} title={active ? "Masquer" : "Afficher"}
                    className="btn btn-sm btn-ghost" style={{ height: 30, fontSize: 12 }}>
                    {active ? "Masquer" : "Afficher"}
                  </button>
                  <button onClick={() => startEdit(s)} title="Modifier"
                    className="btn btn-sm btn-ghost" style={{ height: 30, width: 30, padding: 0 }}>
                    <Icon name="settings" size={13}/>
                  </button>
                  <button onClick={() => actions.deleteService(s.id)} title="Supprimer"
                    className="btn btn-sm btn-ghost" style={{ height: 30, width: 30, padding: 0, color: "oklch(55% 0.18 25)" }}>
                    <Icon name="trash" size={13}/>
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

const ServiceField = ({ label, value, onChange, placeholder, type = "text", step }) => (
  <div>
    <label style={{ fontSize: 12.5, color: "var(--ink-3)", display: "block", marginBottom: 4 }}>{label}</label>
    <input type={type} step={step} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
      style={fieldInputStyle}/>
  </div>
);

const saveSlug = () => {
    const newSlug = cbAuth.updateBookingSlug(draftSlug);
    setSlug(newSlug);
    setEditingSlug(false);
    showToast("Lien mis à jour");
  };

const updateDay = (isoIdx, patch) => {
    const next = { ...schedule, [isoIdx]: { ...schedule[isoIdx], ...patch } };
    actions.updateBookingSettings({ schedule: next });
  };

const removeVacation = (id) => {
    actions.updateBookingSettings({ vacations: vacations.filter(v => v.id !== id) });
  };

return (
    <div style={{ maxWidth: 760 }}>
      <div style={{ marginBottom: 24 }}>
        <h3 style={{ fontSize: 20 }}>Votre lien de réservation</h3>
        <p style={{ fontSize: 14, color: "var(--ink-3)", marginTop: 6 }}>
          Partagez-le sur Instagram, WhatsApp, votre carte de visite. Vos clients choisissent un créneau elles-mêmes.
        </p>
      </div>

{/* The URL card — non-mono label, readable URL */}
      <div style={{
        padding: 20, background: "var(--surface)",
        border: "1px solid var(--line)", borderRadius: 14,
        marginBottom: 18,
      }}>
        <div style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 500, marginBottom: 10 }}>
          Votre lien public
        </div>
        <div style={{
          display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap",
          padding: "10px 14px", background: "var(--bg-alt)",
          border: "1px solid var(--line)", borderRadius: 10,
        }}>
          <Icon name="link" size={15} style={{ color: "var(--accent-ink)", flexShrink: 0 }}/>
          <span style={{
            flex: 1, fontSize: 13.5,
            color: "var(--ink-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
            minWidth: 0,
          }}>{url}</span>
          <button onClick={copy} className="btn btn-sm" style={{
            background: copied ? "var(--sage)" : "var(--ink)",
            color: "var(--bg)", flexShrink: 0,
          }}>
            <Icon name={copied ? "check" : "copy"} size={13}/> {copied ? "Copié" : "Copier"}
          </button>
          <a href={url} target="_blank" rel="noopener noreferrer" className="btn btn-sm btn-ghost" style={{ flexShrink: 0 }}>
            <Icon name="external" size={13}/> Aperçu
          </a>
        </div>

{/* Slug editor */}
        <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <div style={{ fontSize: 12.5, color: "var(--ink-4)" }}>Identifiant personnalisé :</div>
          {editingSlug ? (
            <>
              <input value={draftSlug} onChange={e => setDraftSlug(e.target.value)} style={{
                padding: "4px 10px", fontSize: 13,
                background: "var(--bg)", border: "1px solid var(--line-strong)",
                borderRadius: 6, color: "var(--ink)", outline: "none", minWidth: 200,
                fontFamily: "inherit",
              }}/>
              <button onClick={saveSlug} className="btn btn-sm btn-primary" style={{ height: 28, fontSize: 12 }}>Enregistrer</button>
              <button onClick={() => { setEditingSlug(false); setDraftSlug(slug); }} className="btn btn-sm btn-ghost" style={{ height: 28, fontSize: 12 }}>Annuler</button>
            </>
          ) : (
            <>
              <span style={{
                fontSize: 13, padding: "2px 10px",
                background: "var(--bg-alt)", borderRadius: 6,
                color: "var(--ink-2)", fontWeight: 500,
              }}>{slug}</span>
              <button onClick={() => { setDraftSlug(slug); setEditingSlug(true); }} className="btn btn-sm btn-ghost" style={{ height: 26, fontSize: 11.5 }}>
                Modifier
              </button>
            </>
          )}
        </div>
      </div>

{/* Réseau social préféré pour le contact client */}
      <div style={{
        padding: 20, background: "var(--surface)",
        border: "1px solid var(--line)", borderRadius: 14, marginBottom: 18,
      }}>
        <div style={{ fontSize: 15, fontWeight: 520, marginBottom: 6 }}>Réseau social préféré</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 14, lineHeight: 1.5 }}>
          À la réservation, vos clients pourront indiquer leur pseudo sur ce réseau pour faciliter les échanges.
          Choisissez « Aucun » pour ne pas demander cette info.
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <select value={bs.preferredSocial || "instagram"}
            onChange={e => actions.updateBookingSettings({ preferredSocial: e.target.value })}
            style={{
              padding: "8px 12px", fontSize: 13.5, fontFamily: "inherit",
              background: "var(--bg)", border: "1px solid var(--line-strong)",
              borderRadius: 8, color: "var(--ink)", outline: "none", minWidth: 200,
            }}>
            <option value="instagram">Instagram</option>
            <option value="facebook">Facebook</option>
            <option value="tiktok">TikTok</option>
            <option value="snapchat">Snapchat</option>
            <option value="whatsapp">WhatsApp</option>
            <option value="none">Aucun — ne pas demander</option>
          </select>
        </div>
      </div>

{/* Per-day schedule */}
      <div style={{
        padding: 20, background: "var(--surface)",
        border: "1px solid var(--line)", borderRadius: 14, marginBottom: 18,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14, flexWrap: "wrap", gap: 8 }}>
          <div style={{ fontSize: 15, fontWeight: 520 }}>Horaires par jour</div>
          <div>
            <label style={{ fontSize: 12.5, color: "var(--ink-3)", marginRight: 8 }}>Pas des créneaux :</label>
            <select value={bs.slotDuration || 30} onChange={e => actions.updateBookingSettings({ slotDuration: +e.target.value })}
              style={{
                padding: "4px 8px", fontSize: 13, fontFamily: "inherit",
                background: "var(--bg)", border: "1px solid var(--line-strong)",
                borderRadius: 6, color: "var(--ink)", outline: "none",
              }}>
              {[15, 30, 45, 60].map(m => <option key={m} value={m}>{m} min</option>)}
            </select>
          </div>
        </div>

<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[1, 2, 3, 4, 5, 6, 7].map(isoIdx => {
            const day = schedule[isoIdx] || { open: false, start: 9, end: 18, break: false, breakStart: 12.5, breakEnd: 13.5 };
            const hourSelectStyle = {
              padding: "4px 8px", fontSize: 13, fontFamily: "inherit",
              background: "var(--bg)", border: "1px solid var(--line-strong)",
              borderRadius: 6, color: "var(--ink)", outline: "none",
            };
            return (
              <div key={isoIdx} style={{
                padding: "10px 14px",
                background: day.open ? "var(--bg-alt)" : "transparent",
                border: "1px solid var(--line)", borderRadius: 10,
                opacity: day.open ? 1 : 0.6,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                  <div style={{ minWidth: 90, fontSize: 13.5, fontWeight: 520, color: "var(--ink)" }}>
                    {DAY_FULL_LABELS[isoIdx - 1]}
                  </div>
                  <ToggleSwitch checked={day.open} onChange={(v) => updateDay(isoIdx, { open: v })}/>
                  {day.open ? (
                    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                      <select value={day.start} onChange={e => updateDay(isoIdx, { start: +e.target.value })} style={hourSelectStyle}>
                        {Array.from({ length: 28 }, (_, i) => 6 + i * 0.5).map(h => (
                          <option key={h} value={h}>{fmtH(h)}</option>
                        ))}
                      </select>
                      <span style={{ fontSize: 12, color: "var(--ink-4)" }}>→</span>
                      <select value={day.end} onChange={e => updateDay(isoIdx, { end: +e.target.value })} style={hourSelectStyle}>
                        {Array.from({ length: 28 }, (_, i) => 7 + i * 0.5).map(h => (
                          <option key={h} value={h}>{fmtH(h)}</option>
                        ))}
                      </select>
                    </div>
                  ) : (
                    <span style={{ fontSize: 12.5, color: "var(--ink-4)" }}>Fermé</span>
                  )}
                </div>
                {/* Lunch break row */}
                {day.open && (
                  <div style={{
                    marginTop: 8, paddingTop: 10, borderTop: "1px dashed var(--line)",
                    display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap",
                    fontSize: 12.5,
                  }}>
                    <label style={{
                      display: "flex", alignItems: "center", gap: 8,
                      cursor: "pointer", color: "var(--ink-2)",
                    }}>
                      <input type="checkbox" checked={!!day.break}
                        onChange={e => updateDay(isoIdx, { break: e.target.checked })}
                        style={{ accentColor: "var(--accent)", width: 15, height: 15 }}/>
                      <Icon name="clock" size={12} style={{ color: "var(--ink-3)" }}/>
                      Pause déjeuner
                    </label>
                    {day.break && (
                      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                        <select value={day.breakStart || 12.5} onChange={e => updateDay(isoIdx, { breakStart: +e.target.value })} style={{ ...hourSelectStyle, fontSize: 12.5 }}>
                          {Array.from({ length: 16 }, (_, i) => 10 + i * 0.5).map(h => (
                            <option key={h} value={h}>{fmtH(h)}</option>
                          ))}
                        </select>
                        <span style={{ fontSize: 12, color: "var(--ink-4)" }}>→</span>
                        <select value={day.breakEnd || 13.5} onChange={e => updateDay(isoIdx, { breakEnd: +e.target.value })} style={{ ...hourSelectStyle, fontSize: 12.5 }}>
                          {Array.from({ length: 16 }, (_, i) => 11 + i * 0.5).map(h => (
                            <option key={h} value={h}>{fmtH(h)}</option>
                          ))}
                        </select>
                      </div>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

{/* Vacations / closures */}
      <div style={{
        padding: 20, background: "var(--surface)",
        border: "1px solid var(--line)", borderRadius: 14, marginBottom: 18,
      }}>
        <div style={{ fontSize: 15, fontWeight: 520, marginBottom: 6 }}>Périodes de fermeture</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 14, lineHeight: 1.5 }}>
          Vacances, congés, événements exceptionnels. Ces périodes sont visibles par vos clients sur la page de réservation — elles ne pourront pas réserver dessus.
        </div>

{vacations.length > 0 && (
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 14 }}>
            {vacations.map(v => (
              <div key={v.id} style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "10px 14px", background: "var(--bg-alt)",
                border: "1px solid var(--line)", borderRadius: 10,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: "var(--warn-soft)", color: "var(--warn-ink)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0,
                }}>
                  <Icon name="calendar" size={15}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 520, color: "var(--ink)" }}>{v.reason}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 1 }}>
                    Du {new Date(v.start).toLocaleDateString("fr-FR")} au {new Date(v.end).toLocaleDateString("fr-FR")}
                  </div>
                </div>
                <button onClick={() => removeVacation(v.id)} aria-label="Supprimer" className="btn btn-sm btn-ghost" style={{ height: 30, width: 30, padding: 0, color: "oklch(55% 0.18 25)" }}>
                  <Icon name="close" size={13}/>
                </button>
              </div>
            ))}
          </div>
        )}

<div style={{
          padding: 14, background: "var(--bg-alt)",
          border: "1px dashed var(--line-strong)", borderRadius: 10,
          display: "grid", gap: 10,
          gridTemplateColumns: "1fr 1fr",
          minWidth: 0, overflow: "hidden",
        }} className="app-split">
          <div style={{ minWidth: 0 }}>
            <label style={{ fontSize: 12.5, color: "var(--ink-3)", display: "block", marginBottom: 4 }}>Du</label>
            <input type="date" value={newVac.start} onChange={e => setNewVac({ ...newVac, start: e.target.value })} style={fieldInputStyle}/>
          </div>
          <div style={{ minWidth: 0 }}>
            <label style={{ fontSize: 12.5, color: "var(--ink-3)", display: "block", marginBottom: 4 }}>Au</label>
            <input type="date" value={newVac.end} onChange={e => setNewVac({ ...newVac, end: e.target.value })} style={fieldInputStyle}/>
          </div>
          <div style={{ gridColumn: "1 / -1", minWidth: 0 }}>
            <label style={{ fontSize: 12.5, color: "var(--ink-3)", display: "block", marginBottom: 4 }}>Motif (optionnel)</label>
            <input type="text" value={newVac.reason} onChange={e => setNewVac({ ...newVac, reason: e.target.value })}
              placeholder="Vacances d'été, formation…"
              style={fieldInputStyle}/>
          </div>
          <div style={{ gridColumn: "1 / -1" }}>
            <button onClick={addVacation} className="btn btn-accent btn-sm" style={{ width: "100%" }}>
              <Icon name="plus" size={13}/> Ajouter cette période
            </button>
          </div>
        </div>
      </div>

{/* Beta disclaimer */}
      <div style={{
        padding: "10px 14px", background: "var(--bg-alt)",
        border: "1px dashed var(--line-strong)", borderRadius: 10,
        fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5,
        overflowWrap: "anywhere", wordBreak: "break-word",
      }}>
        <strong style={{ color: "var(--ink-2)" }}>Note bêta :</strong> pendant la bêta, les réservations fonctionnent sur le même navigateur que vous. La synchro serveur arrive au lancement officiel.
      </div>
    </div>
  );
};

const ToggleSwitch = ({ checked, onChange }) => (
  <button onClick={() => onChange(!checked)} aria-pressed={checked} style={{
    width: 44, height: 24, borderRadius: 999, border: "none",
    background: checked ? "var(--accent)" : "var(--line-strong)",
    cursor: "pointer", padding: 2, flexShrink: 0,
    transition: "background 0.15s",
  }}>
    <div style={{
      width: 20, height: 20, borderRadius: "50%", background: "white",
      boxShadow: "var(--sh-1)",
      transform: checked ? "translateX(20px)" : "translateX(0)",
      transition: "transform 0.15s",
    }}/>
  </button>
);

/* ================================================================
   SETTINGS
================================================================ */
// Tons des sections de paramètres — alignés sur CB_TONE pour la cohérence
// avec la sidebar. Activité réutilise l'indigo de "Mon activité" sidebar ;
// Compte réutilise la lavande de "Mon compte".
const SETTINGS_TONES = {
  business: { ...CB_TONE.activity, icon: "sparkle" }, // indigo (= sidebar Mon activité)
  legal:    { ...CB_TONE.legal,    icon: "shield"  }, // bleu
  account:  { ...CB_TONE.account,  icon: "users"   }, // lavande (= sidebar Mon compte)
  contact:  { ...CB_TONE.contact,  icon: "mail"    }, // teal
  data:     { ...CB_TONE.data,     icon: "box"     }, // peach
};

const SettingsSection = ({ title, subtitle, tone, children, style, accordion, open, onToggle }) => {
  const t = SETTINGS_TONES[tone] || SETTINGS_TONES.business;

// Mode accordéon (mobile) : carte blanche neutre, accent uniquement quand ouvert.
  if (accordion) {
    return (
      <div style={{
        marginBottom: 10,
        background: "var(--surface)",
        border: `1px solid ${open ? "var(--accent-soft-2)" : "var(--line)"}`,
        borderRadius: 14, overflow: "hidden",
        transition: "border-color .25s ease, box-shadow .25s ease",
        boxShadow: open ? "0 6px 18px -10px rgba(15,18,30,0.10)" : "none",
      }}>
        <button onClick={onToggle} style={{
          width: "100%", padding: "14px 14px",
          display: "flex", alignItems: "center", gap: 12,
          background: "transparent",
          border: "none", cursor: "pointer", fontFamily: "inherit", textAlign: "left",
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 11, flexShrink: 0,
            background: open ? "var(--accent)" : "var(--bg-alt)",
            color: open ? "white" : (t.dot || "var(--ink-3)"),
            display: "flex", alignItems: "center", justifyContent: "center",
            transition: "background .25s, color .25s",
          }}>
            <Icon name={t.icon} size={16}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14.5, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.01em" }}>
              {title}
            </div>
            {subtitle && (
              <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 2 }}>
                {subtitle}
              </div>
            )}
          </div>
          <div style={{
            width: 28, height: 28, borderRadius: 8, flexShrink: 0,
            color: "var(--ink-4)",
            display: "flex", alignItems: "center", justifyContent: "center",
            transition: "transform .3s cubic-bezier(0.22, 1, 0.36, 1)",
            transform: open ? "rotate(180deg)" : "rotate(0)",
          }}>
            <Icon name="arrow" size={14} style={{ transform: "rotate(90deg)" }}/>
          </div>
        </button>
        <div style={{
          display: "grid",
          gridTemplateRows: open ? "1fr" : "0fr",
          opacity: open ? 1 : 0,
          transition: "grid-template-rows .32s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease",
        }}>
          <div style={{ overflow: "hidden" }}>
            <div style={{
              padding: "4px 16px 18px",
              borderTop: "1px solid var(--line)",
              marginTop: 4,
              display: "flex", flexDirection: "column", gap: 14,
              ...style,
            }}>{children}</div>
          </div>
        </div>
      </div>
    );
  }

// Mode desktop classique : titre + carte surface.
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: t.bg, color: t.ink,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name={t.icon} size={13}/>
        </div>
        <div>
          <h3 style={{ fontSize: 15, fontWeight: 580, letterSpacing: "-0.01em", lineHeight: 1.2 }}>{title}</h3>
          {subtitle && <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 1 }}>{subtitle}</div>}
        </div>
      </div>
      <div style={{
        background: "var(--surface)", border: "1px solid var(--line)",
        borderRadius: 12, padding: 20,
        display: "flex", flexDirection: "column", gap: 14,
        ...style,
      }}>{children}</div>
    </div>
  );
};

/* Avatar partagé — affiche la photo si présente, sinon les initiales avec gradient coloré */
const ProAvatar = ({ url, initials, hue = 30, size = 32, ring = false }) => {
  const ringStyle = ring ? {
    boxShadow: `0 0 0 2px var(--surface), 0 0 0 4px color-mix(in oklab, oklch(70% 0.14 ${hue}) 50%, transparent)`,
  } : {};
  if (url) {
    return (
      <img src={url} alt={initials || ""} style={{
        width: size, height: size, borderRadius: size / 2,
        objectFit: "cover", flexShrink: 0, display: "block",
        ...ringStyle,
      }}/>
    );
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: size / 2,
      background: `linear-gradient(135deg, oklch(80% 0.12 ${hue}), oklch(68% 0.16 ${(hue + 40) % 360}))`,
      color: "white", display: "flex", alignItems: "center", justifyContent: "center",
      fontSize: size * 0.38, fontWeight: 600, flexShrink: 0,
      letterSpacing: "-0.01em",
      boxShadow: `0 4px 10px -4px oklch(70% 0.14 ${hue})`,
      ...ringStyle,
    }}>
      {initials || "?"}
    </div>
  );
};

/* Uploader : lit un fichier, le redimensionne à 256 px, stocke en data URL */
const AvatarUploader = ({ currentUrl, initials, hue, onChange }) => {
  const inputRef = React.useRef(null);
  const [busy, setBusy] = React.useState(false);

return (
    <div style={{
      display: "flex", alignItems: "center", gap: 16,
      padding: "10px 12px", background: "var(--bg-alt)",
      border: "1px solid var(--line)", borderRadius: 12,
    }}>
      <ProAvatar url={currentUrl} initials={initials} hue={hue} size={64} ring/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 520, color: "var(--ink)" }}>
          Photo de profil
        </div>
        <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 2, lineHeight: 1.4 }}>
          Apparaît sur votre page publique de réservation et sur vos factures.
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 8, flexWrap: "wrap" }}>
          <input
            ref={inputRef} type="file" accept="image/*"
            onChange={e => handleFile(e.target.files && e.target.files[0])}
            style={{ display: "none" }}
          />
          <button type="button" className="btn btn-sm btn-ghost"
            disabled={busy} onClick={() => inputRef.current && inputRef.current.click()}>
            <Icon name="sparkle" size={12}/> {busy ? "Envoi…" : (currentUrl ? "Changer" : "Ajouter une photo")}
          </button>
          {currentUrl && (
            <button type="button" className="btn btn-sm btn-ghost"
              onClick={() => { onChange(""); showToast("Photo retirée", "warn"); }}
              style={{ color: "oklch(55% 0.18 25)" }}>
              Retirer
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

/* Resize + encode as base64 data URL. Returns a square ~maxSize portrait. */
const resizeImage = (file, maxSize) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onerror = reject;
  reader.onload = () => {
    const img = new Image();
    img.onerror = reject;
    img.onload = () => {
      const size = maxSize;
      const s = Math.min(img.width, img.height);
      const sx = (img.width - s) / 2;
      const sy = (img.height - s) / 2;
      const canvas = document.createElement("canvas");
      canvas.width = size; canvas.height = size;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, sx, sy, s, s, 0, 0, size, size);
      resolve(canvas.toDataURL("image/jpeg", 0.85));
    };
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
});

const AppSettings = ({ data, actions, go }) => {
  const b = data.business || {};
  const [form, setForm] = React.useState({
    name: b.name || "",
    owner: b.owner || "",
    phone: b.phone || "",
    contactEmail: b.contactEmail || "",
    address: b.address || "",
    postalCode: b.postalCode || "",
    city: b.city || "",
    siret: b.siret || "",
    legalForm: b.legalForm || "Auto-entrepreneur",
    vatStatus: b.vatStatus || "franchise",
    vatNumber: b.vatNumber || "",
    vatRate: b.vatRate || 20,
    iban: b.iban || "",
    paymentTermsDays: b.paymentTermsDays || 0,
    paymentMethods: b.paymentMethods || "Virement, espèces, carte",
    rcsRm: b.rcsRm || "",
    mediatorName: b.mediatorName || "",
    mediatorUrl: b.mediatorUrl || "",
  });

// Contact form (to ClientBase team)
  const [contact, setContact] = React.useState({ subject: "Question générale", message: "" });
  const [contactSent, setContactSent] = React.useState(false);

// Modale de confirmation pour les actions dangereuses (reset / delete)
  const [dangerModal, setDangerModal] = React.useState(null); // null | "reset" | "delete"

const user = cbAuth.getCurrentUser();
  const emailVerified = !!(user && user.emailVerified);

// États locaux pour les 3 actions sécurité
  const [verifBusy, setVerifBusy]   = React.useState(false);
  const [verifSent, setVerifSent]   = React.useState(false);
  const [emailOpen, setEmailOpen]   = React.useState(false);
  const [newEmail, setNewEmail]     = React.useState("");
  const [emailBusy, setEmailBusy]   = React.useState(false);
  const [emailMsg,  setEmailMsg]    = React.useState(null); // {ok|err, text}
  const [pwBusy,    setPwBusy]      = React.useState(false);
  const [pwSent,    setPwSent]      = React.useState(false);

const set = (patch) => setForm(f => ({ ...f, ...patch }));

const [contactBusy, setContactBusy] = React.useState(false);
  const sendContact = async (e) => {
    e.preventDefault();
    if (!contact.message.trim() || contact.message.trim().length < 10) {
      showToast("Message trop court", "warn"); return;
    }
    const u = user || {};
    setContactBusy(true);
    const res = await window.sendContactMail({
      subject: `[ClientBase In-app — ${contact.subject}] ${u.email || "Utilisateur"}`,
      from: u.ownerName || u.email || "Utilisateur ClientBase",
      replyTo: u.email || "no-reply@clientbase.fr",
      message: contact.message,
      meta: {
        Activité: (data.business && data.business.name) || "—",
        Source: "App pro / Paramètres → Nous contacter",
      },
    });
    setContactBusy(false);
    if (res.error) { showToast(res.error, "warn"); return; }
    setContactSent(true);
    setTimeout(() => setContactSent(false), 4500);
    showToast("Message envoyé à l'équipe");
    setContact({ subject: "Question générale", message: "" });
  };

const resendVerification = async () => {
    setVerifBusy(true);
    const res = await cbAuth.resendVerification();
    setVerifBusy(false);
    if (res.error) { showToast(res.error, "warn"); return; }
    setVerifSent(true);
    setTimeout(() => setVerifSent(false), 8000);
    showToast("Email de vérification envoyé ✉");
  };

const doLogout = () => {
    if (!window.confirm("Vous déconnecter de ClientBase ?")) return;
    cbAuth.logout();
    showToast("Déconnecté", "warn");
  };

// Accordéon : sur mobile, chaque section est pliable. Helper qui fait
  // basculer la section cliquée (fermer si même id, ouvrir sinon).
  const toggle = (id) => setTab(tab === id ? null : id);
  const accord = (id) => isMobile ? {
    accordion: true,
    open: tab === id,
    onToggle: () => toggle(id),
  } : {};

return (
    <div style={{ maxWidth: 680, paddingBottom: 48 }}>
      {!isMobile && (
        /* Desktop — barre d'onglets horizontale */
        <div style={{
          marginBottom: 20,
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 12, padding: 4,
          display: "flex", gap: 2,
        }}>
          {tabs.map(t => {
            const isActive = tab === t.id;
            const tone = SETTINGS_TONES[t.tone] || SETTINGS_TONES.business;
            return (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                flex: 1,
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7,
                padding: "9px 12px",
                fontSize: 12.5, fontWeight: 520,
                background: isActive ? tone.bg : "transparent",
                color: isActive ? tone.ink : "var(--ink-3)",
                border: "none", borderRadius: 9, cursor: "pointer", fontFamily: "inherit",
                transition: "background .15s, color .15s",
                whiteSpace: "nowrap",
              }}>
                <Icon name={t.icon} size={13}/>
                {t.label}
              </button>
            );
          })}
        </div>
      )}

{/* Identité */}
      {(isMobile || tab === "business") && (
      <SettingsSection title="Votre activité" subtitle="Photo, nom, contact, identité" tone="business" {...accord("business")}>
        <AvatarUploader
          currentUrl={data.business.avatar}
          initials={data.business.initials || (data.business.owner || "?").split(" ").map(x => x[0]).slice(0,2).join("").toUpperCase()}
          hue={data.business.hue}
          onChange={(dataUrl) => actions.updateBusiness({ avatar: dataUrl || "" })}
        />
        <FormField label="Nom de l'activité" value={form.name} onChange={v => set({ name: v })}/>
        <FormField label="Votre nom" value={form.owner} onChange={v => set({ owner: v })}/>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }} className="app-split">
          <FormField label="Téléphone" value={form.phone} onChange={v => set({ phone: v })} placeholder="06 12 34 56 78"/>
          <FormField label="Email de contact" type="email" value={form.contactEmail} onChange={v => set({ contactEmail: v })} placeholder="contact@votre-activité.fr"/>
        </div>
        <div>
          <button className="btn btn-primary" onClick={() => saveSection(["name", "owner", "phone", "contactEmail"])}>
            Enregistrer
          </button>
        </div>
      </SettingsSection>
      )}

{/* Infos légales pour factures */}
      {(isMobile || tab === "legal") && (
      <SettingsSection title="Informations légales" subtitle="Obligatoires pour vos factures" tone="legal" {...accord("legal")}>
        <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: -4, marginBottom: 6, lineHeight: 1.5 }}>
          Ces informations apparaissent sur vos factures. Elles sont <strong>obligatoires</strong> en France (art. L441-9 du Code de commerce).
        </div>
        <FormSelect label="Forme juridique" value={form.legalForm} onChange={v => set({ legalForm: v })}
          options={["Auto-entrepreneur", "Entreprise individuelle (EI)", "EURL", "SASU", "SARL", "SAS", "Autre"]}/>
        <FormField label="SIRET" value={form.siret} onChange={v => set({ siret: v })} placeholder="123 456 789 00012"/>
        <FormField label="Adresse" value={form.address} onChange={v => set({ address: v })} placeholder="12 rue du Commerce"/>
        <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 10 }}>
          <FormField label="Code postal" value={form.postalCode} onChange={v => set({ postalCode: v })} placeholder="75015"/>
          <FormField label="Ville" value={form.city} onChange={v => set({ city: v })} placeholder="Paris"/>
        </div>
        <FormSelect label="Statut TVA" value={form.vatStatus} onChange={v => set({ vatStatus: v })}
          options={[
            ["franchise",  "Franchise en base (auto-ent. / petite entreprise) — sans TVA"],
            ["applicable", "Assujetti·e à la TVA"],
          ]}/>
        {form.vatStatus === "applicable" && (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 120px", gap: 10 }}>
            <FormField label="N° TVA intracommunautaire" value={form.vatNumber} onChange={v => set({ vatNumber: v })} placeholder="FR12345678901"/>
            <FormField label="Taux (%)" value={String(form.vatRate)} onChange={v => set({ vatRate: parseFloat(v) || 0 })}/>
          </div>
        )}
        <FormField label="IBAN (facultatif)" value={form.iban} onChange={v => set({ iban: v })} placeholder="FR76 XXXX XXXX XXXX"/>
        <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 10 }}>
          <div>
            <label style={fieldLabelStyle}>Délai paiement (jours)</label>
            <input type="number" min="0" max="60" value={form.paymentTermsDays}
              onChange={e => set({ paymentTermsDays: parseInt(e.target.value, 10) || 0 })}
              style={fieldInputStyle}/>
          </div>
          <FormField label="Moyens de paiement acceptés" value={form.paymentMethods} onChange={v => set({ paymentMethods: v })}/>
        </div>
        <FormField label="Immatriculation RCS / RM (facultatif)" value={form.rcsRm} onChange={v => set({ rcsRm: v })}
          placeholder="ex : RCS Paris 123 456 789 — ou — RM 91 123 456 789"/>
        <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: -8, lineHeight: 1.5 }}>
          Commerçant : numéro RCS + ville du greffe. Artisan : numéro Répertoire des Métiers + département.
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <FormField label="Médiateur de la consommation" value={form.mediatorName} onChange={v => set({ mediatorName: v })}
            placeholder="ex : MEDICYS"/>
          <FormField label="Site / contact du médiateur" value={form.mediatorUrl} onChange={v => set({ mediatorUrl: v })}
            placeholder="ex : medicys.fr"/>
        </div>
        <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: -8, lineHeight: 1.5 }}>
          Obligatoire pour tout pro vendant à des particuliers (art. L612-1 Code de la consommation).
          Trouver un médiateur référencé : <a href="https://www.economie.gouv.fr/mediation-conso" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent-ink)", fontWeight: 520 }}>economie.gouv.fr/mediation-conso</a>.
        </div>
        <div>
          <button className="btn btn-primary" onClick={() => saveSection([
            "address", "postalCode", "city", "siret", "legalForm",
            "vatStatus", "vatNumber", "vatRate", "iban", "paymentTermsDays", "paymentMethods",
            "rcsRm", "mediatorName", "mediatorUrl",
          ])}>
            Enregistrer
          </button>
        </div>
      </SettingsSection>
      )}

{/* Contact ClientBase */}
      {(isMobile || tab === "contact") && (
      <SettingsSection title="Nous contacter" subtitle="Un bug, une question, une idée" tone="contact" {...accord("contact")}>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: -4, lineHeight: 1.5 }}>
          Un bug, une suggestion, une question ? On répond en moins de 24 h ouvrées.
        </div>
        {contactSent ? (
          <div style={{
            padding: "16px 18px", background: "var(--sage-soft)",
            border: "1px solid oklch(88% 0.03 160)", borderRadius: 10,
            display: "flex", gap: 10, alignItems: "center",
            color: "oklch(38% 0.08 160)",
          }}>
            <Icon name="check" size={18} stroke={2.6}/>
            <div>
              <div style={{ fontWeight: 520 }}>Message envoyé</div>
              <div style={{ fontSize: 12.5, marginTop: 2 }}>On vous répond à {user?.email || "votre email"}.</div>
            </div>
          </div>
        ) : (
          <form onSubmit={sendContact} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <FormSelect label="Sujet" value={contact.subject} onChange={v => setContact({ ...contact, subject: v })}
              options={["Question générale", "Bug à signaler", "Suggestion de fonctionnalité", "Demande commerciale", "Autre"]}/>
            <FormTextarea label="Votre message" value={contact.message} onChange={v => setContact({ ...contact, message: v })} rows={5} placeholder="Décrivez votre demande…"/>
            <div>
              <button type="submit" disabled={contactBusy} className="btn btn-primary" style={{ opacity: contactBusy ? 0.7 : 1 }}>
                <Icon name="mail" size={13}/> {contactBusy ? "Envoi…" : "Envoyer à l'équipe"}
              </button>
            </div>
          </form>
        )}
      </SettingsSection>

)}

{/* RGPD / Reset / Delete account */}
      {(isMobile || tab === "data") && (
      <SettingsSection title="Vos données" subtitle="RGPD, export, suppression" tone="data" {...accord("data")}>
        <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
          Vos données sont hébergées en France (Paris), dans l'Union européenne, et chiffrées en transit.{" "}
          {go && (
            <a href="#" onClick={(e) => { e.preventDefault(); go("legal"); }} style={{ color: "var(--accent-ink)", fontWeight: 520 }}>
              En savoir plus sur vos droits
            </a>
          )}.
        </div>

{/* Export RGPD */}
        <div className="app-split-row" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 14, flexWrap: "wrap", paddingTop: 14, borderTop: "1px solid var(--line)",
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 520, fontSize: 14 }}>Exporter mes données</div>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.5 }}>
              Télécharge une copie complète de vos données au format JSON (compte, clients, RDV, factures, prestations, stock).
              Conforme au droit à la portabilité (RGPD art. 20).
            </div>
          </div>
          <button className="btn btn-ghost" onClick={() => {
            try {
              const u = cbAuth.getCurrentUser() || {};
              const payload = {
                exportedAt: new Date().toISOString(),
                format: "ClientBase RGPD export v1",
                account: { email: u.email || "", name: u.name || "", emailVerified: !!u.emailVerified },
                data: data,
              };
              const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
              const url = URL.createObjectURL(blob);
              const a = document.createElement("a");
              const stamp = new Date().toISOString().slice(0, 10);
              a.href = url;
              a.download = `clientbase-export-${stamp}.json`;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              setTimeout(() => URL.revokeObjectURL(url), 1000);
              showToast("Export téléchargé", "ok");
            } catch (e) {
              showToast("Échec de l'export — réessayez", "warn");
            }
          }}>
            <Icon name="arrow" size={12} style={{ transform: "rotate(90deg)" }}/> Télécharger (JSON)
          </button>
        </div>

{/* Réinitialiser */}
        <div className="app-split-row" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 14, flexWrap: "wrap", paddingTop: 14, borderTop: "1px solid var(--line)",
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 520, fontSize: 14 }}>Réinitialiser les données</div>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.5 }}>
              Supprime <strong>définitivement</strong> toutes vos clients, RDV, factures, prestations et statistiques.
              Votre compte reste actif — vous pouvez recommencer de zéro.
            </div>
          </div>
          <button className="btn btn-ghost" onClick={() => setDangerModal("reset")}
            style={{ color: "oklch(55% 0.18 25)", borderColor: "oklch(85% 0.05 25)" }}>
            Réinitialiser
          </button>
        </div>

{/* Supprimer le compte */}
        <div className="app-split-row" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 14, flexWrap: "wrap", paddingTop: 14, borderTop: "1px solid var(--line)",
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 520, fontSize: 14, color: "oklch(45% 0.2 25)" }}>Supprimer mon compte</div>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.5 }}>
              Supprime votre compte ClientBase <strong>et toutes vos données</strong>.
              Action <strong>irréversible</strong> — vous ne pourrez plus vous reconnecter avec cet email.
            </div>
          </div>
          <button onClick={() => setDangerModal("delete")} style={{
            padding: "8px 14px", fontSize: 13, fontWeight: 580,
            background: "oklch(55% 0.2 25)", color: "white",
            border: "none", borderRadius: 999, cursor: "pointer", fontFamily: "inherit",
          }}>
            Supprimer le compte
          </button>
        </div>
      </SettingsSection>

)}

{/* Compte — email + sécurité */}
      {((isMobile || tab === "account") && user) && (
        <SettingsSection title="Compte" subtitle="Email, sécurité, session" tone="account" {...accord("account")}>
          {/* Bloc identité avec badge vérifié/non vérifié */}
          <div style={{
            padding: "14px 16px",
            background: "var(--bg-alt)", border: "1px solid var(--line)",
            borderRadius: 12,
            display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap",
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 11, flexShrink: 0,
              background: emailVerified ? "var(--sage-soft)" : "var(--warn-soft)",
              color: emailVerified ? "var(--sage)" : "var(--warn-ink)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name={emailVerified ? "check" : "mail"} size={18} stroke={emailVerified ? 2.6 : 1.8}/>
            </div>
            <div style={{ flex: 1, minWidth: 180 }}>
              <div style={{ fontSize: 14, fontWeight: 560, color: "var(--ink)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                {user.email}
              </div>
              <div style={{ marginTop: 4, display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                {emailVerified ? (
                  <span style={{
                    display: "inline-flex", alignItems: "center", gap: 4,
                    padding: "2px 8px", fontSize: 11, fontWeight: 600,
                    background: "var(--sage-soft)", color: "oklch(38% 0.08 160)",
                    borderRadius: 999,
                  }}>
                    <Icon name="check" size={10} stroke={2.8}/> Vérifié
                  </span>
                ) : (
                  <span style={{
                    display: "inline-flex", alignItems: "center", gap: 4,
                    padding: "2px 8px", fontSize: 11, fontWeight: 600,
                    background: "var(--warn-soft)", color: "var(--warn-ink)",
                    borderRadius: 999,
                  }}>
                    <Icon name="clock" size={10} stroke={2.6}/> Non vérifié
                  </span>
                )}
                <span style={{ fontSize: 12, color: "var(--ink-4)" }}>
                  · Compte créé le {new Date(user.createdAt).toLocaleDateString("fr-FR")}
                </span>
              </div>
            </div>
          </div>

{/* Action : re-envoyer l'email de vérification (si non vérifié) */}
          {!emailVerified && (
            <div style={{
              padding: "14px 16px",
              background: "var(--warn-soft)", border: "1px solid var(--warn-soft-2)",
              borderRadius: 12, color: "var(--warn-ink)",
              display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap",
            }}>
              <div style={{ flex: 1, minWidth: 180 }}>
                <div style={{ fontSize: 13.5, fontWeight: 560 }}>Confirmez votre email</div>
                <div style={{ fontSize: 12.5, marginTop: 2, lineHeight: 1.5 }}>
                  Un email de confirmation a été envoyé à {user.email}. Cliquez sur le lien qu'il contient pour activer toutes les fonctionnalités.
                </div>
              </div>
              <button onClick={resendVerification} disabled={verifBusy || verifSent} className="btn btn-sm"
                style={{ background: "var(--warn-ink)", color: "white", opacity: (verifBusy || verifSent) ? 0.7 : 1 }}>
                {verifBusy ? "Envoi…" : verifSent ? "Envoyé ✓" : "Renvoyer l'email"}
              </button>
            </div>
          )}

{/* Action : changer l'email */}
          <div style={{
            padding: "14px 16px",
            background: "var(--surface)", border: "1px solid var(--line)",
            borderRadius: 12,
          }}>
            <div style={{
              display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap",
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                background: "var(--accent-soft)", color: "var(--accent-ink)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name="mail" size={16}/>
              </div>
              <div style={{ flex: 1, minWidth: 160 }}>
                <div style={{ fontSize: 13.5, fontWeight: 560 }}>Changer l'adresse email</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>
                  On enverra un lien de confirmation à la nouvelle adresse.
                </div>
              </div>
              {!emailOpen && (
                <button onClick={() => setEmailOpen(true)} className="btn btn-sm btn-ghost">
                  Modifier
                </button>
              )}
            </div>
            {emailOpen && (
              <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }}>
                <input type="email" value={newEmail} onChange={e => setNewEmail(e.target.value)}
                  placeholder="nouvelle@adresse.fr"
                  style={fieldInputStyle}/>
                {emailMsg && (
                  <div style={{
                    padding: "9px 12px", borderRadius: 9, fontSize: 13,
                    background: emailMsg.kind === "ok" ? "var(--sage-soft)" : "oklch(96% 0.04 25)",
                    border: `1px solid ${emailMsg.kind === "ok" ? "oklch(88% 0.03 160)" : "oklch(88% 0.06 25)"}`,
                    color:      emailMsg.kind === "ok" ? "oklch(38% 0.08 160)" : "oklch(42% 0.15 25)",
                  }}>{emailMsg.text}</div>
                )}
                <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", flexWrap: "wrap" }}>
                  <button onClick={() => { setEmailOpen(false); setNewEmail(""); setEmailMsg(null); }}
                    className="btn btn-sm btn-ghost">Annuler</button>
                  <button onClick={submitChangeEmail} disabled={emailBusy} className="btn btn-sm btn-accent"
                    style={{ opacity: emailBusy ? 0.7 : 1 }}>
                    {emailBusy ? "Envoi…" : "Envoyer le lien"}
                  </button>
                </div>
              </div>
            )}
          </div>

{/* Action : reset password */}
          <div style={{
            padding: "14px 16px",
            background: "var(--surface)", border: "1px solid var(--line)",
            borderRadius: 12,
            display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap",
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
              background: "var(--accent-soft)", color: "var(--accent-ink)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name="lock" size={16}/>
            </div>
            <div style={{ flex: 1, minWidth: 160 }}>
              <div style={{ fontSize: 13.5, fontWeight: 560 }}>Réinitialiser le mot de passe</div>
              <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>
                On envoie un lien sécurisé à {user.email}.
              </div>
            </div>
            <button onClick={sendPasswordReset} disabled={pwBusy || pwSent} className="btn btn-sm btn-ghost"
              style={{ opacity: (pwBusy || pwSent) ? 0.7 : 1 }}>
              {pwBusy ? "Envoi…" : pwSent ? "Envoyé ✓" : "Envoyer le lien"}
            </button>
          </div>

{/* Logout — bouton rouge plein pour bien le distinguer */}
          <div style={{
            paddingTop: 12, borderTop: "1px solid var(--line)",
            display: "flex", justifyContent: "flex-end",
          }}>
            <button onClick={doLogout} style={{
              padding: "9px 16px", fontSize: 13.5, fontWeight: 580,
              background: "oklch(55% 0.2 25)", color: "white",
              border: "none", borderRadius: 999, cursor: "pointer", fontFamily: "inherit",
              display: "inline-flex", alignItems: "center", gap: 7,
            }}>
              <Icon name="arrow" size={13} style={{ transform: "rotate(180deg)" }}/>
              Se déconnecter
            </button>
          </div>
        </SettingsSection>
      )}

{/* Modale de confirmation pour reset / delete account */}
      <DangerConfirmModal
        kind={dangerModal}
        onClose={() => setDangerModal(null)}
        onConfirm={async () => {
          const k = dangerModal;
          setDangerModal(null);
          if (k === "reset") await actions.reset();
          if (k === "delete") await actions.deleteAccount();
        }}
      />
    </div>
  );
};

/* Modale de confirmation forte — exige de TAPER un mot pour valider une
   action irréversible (réinitialiser ou supprimer le compte). */
const DangerConfirmModal = ({ kind, onClose, onConfirm }) => {
  const [typed, setTyped] = React.useState("");
  React.useEffect(() => { setTyped(""); }, [kind]);

if (!kind) return null;
  const isDelete = kind === "delete";
  const requiredWord = isDelete ? "SUPPRIMER" : "RESET";
  const valid = typed.trim().toUpperCase() === requiredWord;

const title = isDelete ? "Supprimer définitivement votre compte ?" : "Réinitialiser toutes vos données ?";

return (
    <Modal open={true} onClose={onClose}
      title={title}
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button onClick={onConfirm} disabled={!valid} style={{
            padding: "9px 16px", fontSize: 13.5, fontWeight: 580,
            background: valid ? "oklch(55% 0.2 25)" : "var(--bg-alt)",
            color: valid ? "white" : "var(--ink-4)",
            border: "none", borderRadius: 999,
            cursor: valid ? "pointer" : "not-allowed", fontFamily: "inherit",
          }}>
            {isDelete ? "Supprimer mon compte" : "Tout réinitialiser"}
          </button>
        </>
      }>
      <div style={{ display: "grid", gap: 14 }}>
        <div style={{
          padding: "14px 16px",
          background: "oklch(96% 0.04 25)", border: "1px solid oklch(88% 0.06 25)",
          borderRadius: 10, color: "oklch(35% 0.15 25)", fontSize: 13.5, lineHeight: 1.55,
        }}>
          <strong>⚠️ Cette action est irréversible.</strong>
          <ul style={{ margin: "8px 0 0", paddingLeft: 18, lineHeight: 1.55 }}>
            <li>Toutes vos clients seront supprimées</li>
            <li>Tous vos rendez-vous (passés et à venir) seront supprimés</li>
            <li>Toutes vos factures, prestations et statistiques seront perdues</li>
            <li>Aucune sauvegarde ne sera conservée — <strong>impossible de récupérer</strong></li>
            {isDelete && (
              <li style={{ marginTop: 6, fontWeight: 580 }}>
                Votre compte ClientBase ({(window.cbAuth && cbAuth.getCurrentUser() && cbAuth.getCurrentUser().email) || "vous"}) sera supprimé
              </li>
            )}
          </ul>
        </div>
        <div>
          <label style={{ fontSize: 13, color: "var(--ink-2)", display: "block", marginBottom: 6 }}>
            Pour confirmer, tapez <strong style={{ color: "oklch(55% 0.2 25)" }}>{requiredWord}</strong> ci-dessous :
          </label>
          <input value={typed} onChange={e => setTyped(e.target.value)} autoFocus
            placeholder={requiredWord}
            style={{ ...fieldInputStyle, letterSpacing: "0.04em", fontWeight: 500 }}/>
        </div>
      </div>
    </Modal>
  );
};

/* ================================================================
   SUBSCRIPTION — trial status, plan comparison, upgrade CTAs
================================================================ */
const SUBSCRIPTION_PLANS = [
  {
    id: "free",
    name: "Découverte",
    price: 0,
    tagline: "Pour tester tranquillement",
    cta: "Revenir en gratuit",
    features: [
      { kind: "check", t: "Agenda personnel" },
      { kind: "check", t: "Fiches clients (jusqu'à 20)" },
      { kind: "check", t: "Suivi du stock" },
      { kind: "check", t: "Support client" },
      { kind: "cross", t: "Page publique de réservation" },
      { kind: "cross", t: "Cartes de fidélité" },
      { kind: "cross", t: "Facturation" },
      { kind: "cross", t: "Statistiques détaillées" },
    ],
    disabled: true,
  },
  {
    id: "pro",
    name: "Pro",
    price: 9.99,
    tagline: "Le cœur de l'activité",
    cta: "Passer en Pro",
    highlight: true,
    disabled: true,
    features: [
      { kind: "check", t: "Agenda personnel" },
      { kind: "check", t: "Fiches clients (jusqu'à 50)" },
      { kind: "check", t: "Page publique de réservation" },
      { kind: "check", t: "Facturation conforme (jusqu'à 100 / mois)" },
      { kind: "check", t: "Statistiques détaillées" },
      { kind: "check", t: "Support client" },
      { kind: "cross", t: "Suivi du stock" },
      { kind: "cross", t: "Cartes de fidélité" },
    ],
  },
  {
    id: "business",
    name: "Business",
    price: 19.99,
    tagline: "Pour les équipes ambitieuses",
    cta: "Choisir Business",
    betaFree: true,
    features: [
      { kind: "check", t: "Clientes illimitées" },
      { kind: "check", t: "Factures illimitées, conformes françaises" },
      { kind: "check", t: "Page publique de réservation" },
      { kind: "check", t: "Cartes de fidélité partageables" },
      { kind: "check", t: "Suivi du stock + alertes" },
      { kind: "check", t: "Statistiques détaillées (jour/semaine/mois)" },
      { kind: "check", t: "Support client prioritaire" },
    ],
  },
];

const AppSubscription = ({ data, go, setMod }) => {
  // Bêta ouverte pour 3 mois à partir d'aujourd'hui. Durée susceptible d'être allongée.
  const betaDurationDays = 90;
  const betaStart = React.useMemo(() => {
    const saved = localStorage.getItem("cb_beta_start_v1");
    if (saved) return +saved;
    const now = Date.now();
    localStorage.setItem("cb_beta_start_v1", String(now));
    return now;
  }, []);
  const betaEnd = betaStart + betaDurationDays * 24 * 60 * 60 * 1000;

// Countdown qui tick toutes les secondes
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);

const remaining = Math.max(0, betaEnd - now);
  const days    = Math.floor(remaining / (1000 * 60 * 60 * 24));
  const hours   = Math.floor((remaining / (1000 * 60 * 60)) % 24);
  const minutes = Math.floor((remaining / (1000 * 60)) % 60);
  const seconds = Math.floor((remaining / 1000) % 60);
  const trialPct = Math.max(0, Math.min(100, ((betaDurationDays * 24 * 60 * 60 * 1000 - remaining) / (betaDurationDays * 24 * 60 * 60 * 1000)) * 100));
  const currentPlan = "free";

return (
    <div style={{ maxWidth: 880 }}>
      {/* Trial status banner */}
      <div style={{
        padding: "22px 24px", marginBottom: 22,
        background: "linear-gradient(135deg, var(--accent) 0%, oklch(45% 0.22 300) 100%)",
        borderRadius: 16, color: "white",
        position: "relative", overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", top: -40, right: -40,
          width: 160, height: 160, borderRadius: "50%",
          background: "rgba(255,255,255,0.12)", pointerEvents: "none",
        }}/>
        <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <div>
            <style>{`
              @keyframes cbHeartbeat {
                0%, 100% { transform: scale(1); }
                50%      { transform: scale(1.08); }
              }
              @keyframes cbBlink {
                0%, 100% { opacity: 1; }
                50%      { opacity: 0.35; }
              }
            `}</style>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{
                width: 8, height: 8, borderRadius: 50, background: "white",
                animation: "cbHeartbeat 1.4s ease-in-out infinite",
              }}/>
              <div style={{ fontSize: 12, opacity: 0.85, textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 520 }}>
                Bêta en cours — accès Business offert
              </div>
            </div>
            {/* Countdown tiles — tick every second */}
            <div style={{ display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap" }}>
              {[
                { v: days,    l: days > 1 ? "jours" : "jour" },
                { v: hours,   l: "h" },
                { v: minutes, l: "min" },
                { v: seconds, l: "s", blink: true },
              ].map((x, i) => (
                <div key={i} style={{
                  background: "rgba(255,255,255,0.14)",
                  border: "1px solid rgba(255,255,255,0.18)",
                  borderRadius: 10, padding: "8px 10px",
                  minWidth: 56, textAlign: "center",
                  backdropFilter: "blur(4px)",
                  WebkitBackdropFilter: "blur(4px)",
                }}>
                  <div style={{
                    fontFamily: "var(--ff-display)", fontSize: 22, fontWeight: 600,
                    letterSpacing: "-0.02em", lineHeight: 1, fontVariantNumeric: "tabular-nums",
                    animation: x.blink ? "cbBlink 1s ease-in-out infinite" : "none",
                  }}>
                    {String(x.v).padStart(2, "0")}
                  </div>
                  <div style={{ fontSize: 10, opacity: 0.82, marginTop: 3, letterSpacing: "0.04em" }}>
                    {x.l}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 10, width: 260, maxWidth: "100%", height: 5, background: "rgba(255,255,255,0.2)", borderRadius: 999, overflow: "hidden" }}>
              <div style={{
                width: `${trialPct}%`, height: "100%",
                background: "linear-gradient(90deg, white 0%, oklch(90% 0.12 300) 100%)",
                borderRadius: 999, transition: "width 1s linear",
              }}/>
            </div>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.5, maxWidth: 300, opacity: 0.92 }}>
            Durée prévue : <strong>3 mois</strong> — mais <strong>ce délai peut être allongé</strong>,
            rien n'est encore figé. Pendant toute la bêta, toutes les fonctionnalités <strong>Business</strong> sont
            débloquées gratuitement.
          </div>
        </div>
      </div>

{/* Plan comparison */}
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14,
        marginBottom: 22,
      }} className="app-col-3">
        {SUBSCRIPTION_PLANS.map(p => (
          <div key={p.id} style={{
            padding: "22px 20px", borderRadius: 16,
            background: p.betaFree
              ? "linear-gradient(180deg, var(--sage-soft) 0%, var(--surface) 70%)"
              : p.highlight ? "linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 70%)"
              : "var(--surface)",
            border: p.betaFree ? "1px solid oklch(88% 0.03 160)"
              : p.highlight ? "1px solid var(--accent-soft-2)"
              : "1px solid var(--line)",
            position: "relative", display: "flex", flexDirection: "column", gap: 14,
            opacity: p.disabled ? 0.6 : 1,
            filter: p.disabled ? "grayscale(0.35)" : "none",
            transition: "opacity .2s, filter .2s, transform .2s",
          }}>
            {p.highlight && !p.disabled && (
              <div style={{
                position: "absolute", top: -10, left: 20,
                padding: "3px 10px", background: "var(--accent)",
                color: "white", borderRadius: 999, fontSize: 10.5, fontWeight: 600,
                letterSpacing: "0.04em", textTransform: "uppercase",
              }}>Recommandé</div>
            )}
            {p.betaFree && (
              <div style={{
                position: "absolute", top: -10, left: 20,
                padding: "3px 10px", background: "var(--sage)",
                color: "white", borderRadius: 999, fontSize: 10.5, fontWeight: 600,
                letterSpacing: "0.04em", textTransform: "uppercase",
              }}>Gratuit pendant la bêta</div>
            )}
            <div>
              <div style={{ fontSize: 13, color: "var(--ink-4)", fontWeight: 500 }}>{p.tagline}</div>
              <div style={{ fontSize: 18, fontWeight: 580, marginTop: 2, letterSpacing: "-0.01em" }}>{p.name}</div>
            </div>
            <div>
              <span style={{
                fontFamily: "var(--ff-display)", fontSize: 36, fontWeight: 580,
                letterSpacing: "-0.03em",
              }}>{p.price === 0 ? "0 €" : `${p.price.toString().replace('.', ',')} €`}</span>
              <span style={{ fontSize: 13, color: "var(--ink-4)", marginLeft: 6 }}>/ mois</span>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 13, color: "var(--ink-2)" }}>
              {p.features.map(f => {
                const isCross = f.kind === "cross";
                const isSoon  = f.kind === "soon";
                return (
                  <li key={f.t} style={{ display: "flex", gap: 8, alignItems: "flex-start", lineHeight: 1.4 }}>
                    <span style={{
                      width: 18, height: 18, borderRadius: 50, flexShrink: 0, marginTop: 1,
                      background: isCross ? "var(--bg-alt)" : isSoon ? "var(--accent-soft)" : "var(--sage-soft)",
                      color: isCross ? "var(--ink-4)" : isSoon ? "var(--accent-ink)" : "var(--sage)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                    }}>
                      <Icon name={isCross ? "close" : isSoon ? "clock" : "check"} size={11} stroke={2.6}/>
                    </span>
                    <span style={{
                      color: isCross ? "var(--ink-4)" : isSoon ? "var(--ink-3)" : "var(--ink-2)",
                      textDecoration: isCross ? "line-through" : "none",
                    }}>
                      {f.t}
                      {isSoon && (
                        <span style={{
                          marginLeft: 6, padding: "1px 7px",
                          background: "var(--accent-soft)", color: "var(--accent-ink)",
                          borderRadius: 6, fontSize: 10, fontWeight: 600,
                        }}>Bientôt</span>
                      )}
                    </span>
                  </li>
                );
              })}
            </ul>
            <button
              disabled={p.disabled || currentPlan === p.id}
              onClick={() => showToast("Bientôt disponible — on vous préviendra !")}
              className={`btn ${p.betaFree ? "btn-accent" : p.highlight ? "btn-accent" : "btn-ghost"}`}
              style={{
                marginTop: "auto",
                opacity: p.disabled ? 0.5 : 1,
                cursor: p.disabled ? "not-allowed" : "pointer",
              }}>
              {currentPlan === p.id ? "Plan actuel" : p.cta}
            </button>
          </div>
        ))}
      </div>

{/* Mini-pills de réassurance */}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 4 }}>
        {[
          "🇫🇷 Hébergé en France",
          "🔒 RGPD & chiffré",
          "🤝 Sans engagement",
        ].map(t => (
          <span key={t} style={{
            display: "inline-flex", alignItems: "center", gap: 5,
            padding: "5px 11px",
            background: "var(--surface)", border: "1px solid var(--line)",
            borderRadius: 999, fontSize: 12, fontWeight: 500, color: "var(--ink-2)",
          }}>{t}</span>
        ))}
      </div>

{/* Nouveautés intégrées à l'abonnement */}
      <SubscriptionChangelog data={data}/>
    </div>
  );
};

/* Nouveautés affichées sous les plans — rappelle ce qui arrive et dans quel plan.
   Dépliable pour rester compact par défaut. */
const SubscriptionChangelog = ({ data }) => {
  const [open, setOpen] = React.useState(false);
  const [msg, setMsg] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const changelog = (typeof window !== "undefined" && window.CB_CHANGELOG) || [];

return (
    <div style={{
      marginTop: 20,
      background: "var(--bg-alt)", border: "1px solid var(--line)",
      borderRadius: 16, overflow: "hidden",
    }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", padding: "18px 22px",
        display: "flex", alignItems: "center", gap: 14,
        background: "transparent", border: "none", cursor: "pointer",
        fontFamily: "inherit", textAlign: "left",
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: 11, flexShrink: 0,
          background: "var(--accent-soft)", color: "var(--accent-ink)",
          display: "flex", alignItems: "center", justifyContent: "center",
          border: "1px solid var(--accent-soft-2)",
        }}>
          <Icon name="sparkle" size={18}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--accent-ink)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
            Ce qui arrive bientôt
          </div>
          <div style={{ fontSize: 15, fontWeight: 580, letterSpacing: "-0.015em", color: "var(--ink)", marginTop: 2 }}>
            Roadmap ClientBase
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-4)", marginTop: 2 }}>
            {open ? "Fermer" : "Voir ce qui est prévu + suggérer une idée"}
          </div>
        </div>
        <div style={{
          width: 30, height: 30, borderRadius: 9, flexShrink: 0,
          background: "var(--surface)", border: "1px solid var(--line)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--ink-3)",
          transition: "transform .3s cubic-bezier(0.22, 1, 0.36, 1)",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>
          <Icon name="plus" size={14}/>
        </div>
      </button>

<div style={{
        display: "grid",
        gridTemplateRows: open ? "1fr" : "0fr",
        opacity: open ? 1 : 0,
        transition: "grid-template-rows .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease",
      }}>
        <div style={{ overflow: "hidden" }}>
          <div style={{ padding: "0 22px 20px" }}>
            {/* Timeline courte */}
            <div style={{ position: "relative" }}>
              <div aria-hidden style={{
                position: "absolute", left: 11, top: 6, bottom: 6, width: 2,
                background: "linear-gradient(180deg, var(--accent-soft-2), var(--line))",
                borderRadius: 2,
              }}/>
              {changelog.map((r, i) => (
                <div key={r.version} style={{
                  position: "relative", paddingLeft: 34,
                  paddingBottom: i < changelog.length - 1 ? 16 : 0,
                }}>
                  <div style={{
                    position: "absolute", left: 2, top: 4,
                    width: 18, height: 18, borderRadius: 50,
                    background: r.upcoming ? "var(--surface)" : "var(--accent)",
                    border: `2px solid ${r.upcoming ? "var(--accent-soft-2)" : "var(--accent)"}`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "white",
                  }}>
                    {!r.upcoming && <Icon name="check" size={9} stroke={3}/>}
                  </div>
                  <div style={{
                    background: "var(--surface)", border: "1px solid var(--line)",
                    borderRadius: 12, padding: "12px 14px",
                  }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                      <span style={{
                        fontSize: 11, padding: "2px 7px",
                        background: r.upcoming ? "var(--bg-alt)" : "var(--accent-soft)",
                        color: r.upcoming ? "var(--ink-3)" : "var(--accent-ink)",
                        borderRadius: 6, fontWeight: 600,
                      }}>v{r.version}</span>
                      <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{r.date}</span>
                      <span style={{
                        padding: "2px 7px", fontSize: 10, fontWeight: 600,
                        background: r.upcoming ? "oklch(95% 0.05 300)" : "var(--sage-soft)",
                        color:      r.upcoming ? "oklch(42% 0.18 300)" : "oklch(38% 0.08 160)",
                        borderRadius: 999,
                      }}>{r.tag}</span>
                    </div>
                    <div style={{ marginTop: 6, fontSize: 14, fontWeight: 560, letterSpacing: "-0.01em" }}>{r.title}</div>
                    <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "flex", flexDirection: "column", gap: 5 }}>
                      {r.items.slice(0, 3).map(it => (
                        <li key={it} style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.45 }}>
                          <span style={{
                            width: 14, height: 14, borderRadius: 50, flexShrink: 0, marginTop: 2,
                            background: r.upcoming ? "var(--bg-alt)" : "var(--sage-soft)",
                            color: r.upcoming ? "var(--ink-4)" : "var(--sage)",
                            display: "inline-flex", alignItems: "center", justifyContent: "center",
                          }}>
                            <Icon name={r.upcoming ? "clock" : "check"} size={8} stroke={2.6}/>
                          </span>
                          {it}
                        </li>
                      ))}
                      {r.items.length > 3 && (
                        <li style={{ fontSize: 11.5, color: "var(--ink-4)", paddingLeft: 22 }}>
                          + {r.items.length - 3} autre{r.items.length - 3 > 1 ? "s" : ""}…
                        </li>
                      )}
                    </ul>
                  </div>
                </div>
              ))}
            </div>

{/* Suggérer une idée */}
            <div style={{
              marginTop: 16, padding: "16px 18px",
              background: "var(--surface)", border: "1px solid var(--accent-soft-2)",
              borderRadius: 12,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 9, flexShrink: 0,
                  background: "var(--accent)", color: "white",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <Icon name="heart" size={14}/>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: "var(--accent-ink)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
                    Votre idée
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 560, color: "var(--ink)", letterSpacing: "-0.01em", marginTop: 1 }}>
                    Qu'est-ce qu'on devrait ajouter ?
                  </div>
                </div>
              </div>
              {sent ? (
                <div style={{
                  marginTop: 12, padding: "10px 12px",
                  background: "var(--sage-soft)", border: "1px solid oklch(88% 0.03 160)",
                  borderRadius: 10, fontSize: 13, color: "oklch(38% 0.08 160)",
                  display: "flex", gap: 8, alignItems: "center",
                }}>
                  <Icon name="check" size={15} stroke={2.6}/>
                  Merci ! Votre idée est bien arrivée.
                </div>
              ) : (
                <>
                  <textarea value={msg} onChange={e => setMsg(e.target.value)}
                    rows={2}
                    placeholder="Ex. « J'aimerais envoyer une carte cadeau pour l'anniversaire d'un client. »"
                    style={{
                      marginTop: 12, width: "100%", padding: "10px 12px",
                      fontSize: 16, fontFamily: "inherit", background: "var(--bg)",
                      border: "1px solid var(--line-strong)", borderRadius: 9,
                      color: "var(--ink)", outline: "none", resize: "vertical", minHeight: 64,
                      boxSizing: "border-box",
                    }}/>
                  <div style={{ marginTop: 10, display: "flex", justifyContent: "flex-end" }}>
                    <button onClick={sendIdea} disabled={busy} className="btn btn-sm btn-accent"
                      style={{ opacity: busy ? 0.7 : 1 }}>
                      {busy ? "Envoi…" : "Envoyer l'idée"} <Icon name="arrow" size={12}/>
                    </button>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ================================================================
   MODAL FORMS
================================================================ */
const ClientFormModal = ({ modal, onClose, data, actions }) => {
  const open = modal && modal.type === "client";
  const editing = open && modal.ctx && modal.ctx.id ? findClient(data, modal.ctx.id) : null;
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", birthday: "", social: "", notes: "" });

React.useEffect(() => {
    if (!open) return;
    if (editing) {
      setForm({
        name: editing.name, email: editing.email || "",
        phone: editing.phone || "", birthday: editing.birthday || "",
        social: editing.social || "", notes: editing.notes || "",
      });
    } else {
      setForm({ name: "", email: "", phone: "", birthday: "", social: "", notes: "" });
    }
  }, [open, editing && editing.id]);

const submit = () => {
    if (!form.name.trim()) { showToast("Le nom est requis", "warn"); return; }
    if (editing) actions.updateClient(editing.id, form);
    else actions.addClient(form);
    onClose();
  };

return (
    <Modal open={!!open} onClose={onClose}
      title={editing ? `Modifier — ${editing.name}` : "Nouveau client"}
      footer={
        <>
          {editing && (
            <button className="btn btn-ghost cb-btn-destructive"
              onClick={() => { actions.deleteClient(editing.id); onClose(); }}>Supprimer</button>
          )}
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" onClick={submit}>{editing ? "Enregistrer" : "Créer la fiche"}</button>
        </>
      }>
      <div style={{ display: "grid", gap: 14 }}>
        <FormField label="Nom complet" value={form.name} onChange={v => setForm({ ...form, name: v })} placeholder="Léa Morel" required autoFocus/>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <FormField label="Email" type="email" value={form.email} onChange={v => setForm({ ...form, email: v })} placeholder="lea@exemple.fr"/>
          <FormField label="Téléphone" value={form.phone} onChange={v => setForm({ ...form, phone: v })} placeholder="06 12 34 56 78"/>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <FormField label="Anniversaire (optionnel)" value={form.birthday} onChange={v => setForm({ ...form, birthday: v })} placeholder="JJ/MM — ex. 14/03"/>
          <FormField label={`${CB_SOCIAL_LABEL[(data.bookingSettings && data.bookingSettings.preferredSocial) || "instagram"] || "Réseau social"} (optionnel)`}
            value={form.social} onChange={v => setForm({ ...form, social: v })}
            placeholder={CB_SOCIAL_PLACEHOLDER[(data.bookingSettings && data.bookingSettings.preferredSocial) || "instagram"] || "@pseudo"}/>
        </div>
        <FormTextarea label="Notes (allergies, préférences…)" value={form.notes} onChange={v => setForm({ ...form, notes: v })} placeholder="Préfère les couleurs nude." rows={3}/>
      </div>
    </Modal>
  );
};

React.useEffect(() => {
    if (!open) return;
    const initialSvc = ctx.serviceId
      ? data.services.find(s => s.id === ctx.serviceId)
      : data.services[0];
    setForm({
      clientId: ctx.clientId || (data.clients[0] ? data.clients[0].id : ""),
      serviceId: ctx.serviceId || (data.services[0] ? data.services[0].id : ""),
      day: ctx.day != null ? ctx.day : cbTodayOffset(),
      h:   ctx.h   != null ? ctx.h   : 9,
      d: initialSvc ? Number(initialSvc.duration) || 1 : 1,
      color: "accent",
    });
  }, [open, ctx.day, ctx.h, ctx.clientId, ctx.serviceId]);

// Quand on change la prestation, on récupère sa durée par défaut.
  // L'utilisateur peut ensuite modifier librement via le picker minutes.
  const onServiceChange = (newId) => {
    const svc = data.services.find(s => s.id === newId);
    setForm(f => ({
      ...f,
      serviceId: newId,
      d: svc ? Number(svc.duration) || 1 : f.d,
    }));
  };

const hourOptions = [];
  for (let h = 8; h < 19; h += 0.25) {
    hourOptions.push([h.toString(), fmtH(h)]);
  }

// Options de durée en MINUTES, par tranches de 15 min jusqu'à 4 h.
  // value = durée en HEURES (cohérent avec le stockage de a.d).
  const durationOptions = [];
  for (let m = 15; m <= 240; m += 15) {
    const hours = m / 60;
    const label = m < 60
      ? `${m} min`
      : m % 60 === 0
        ? `${m / 60} h`
        : `${Math.floor(m / 60)} h ${String(m % 60).padStart(2, "0")}`;
    durationOptions.push([String(hours), label]);
  }

return (
    <Modal open={!!open} onClose={onClose}
      title="Nouveau rendez-vous"
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" onClick={submit}>Ajouter au planning</button>
        </>
      }>
      <div style={{ display: "grid", gap: 14 }}>
        <FormSelect label="Cliente" value={form.clientId} onChange={v => setForm({ ...form, clientId: v })} required
          options={data.clients.length === 0 ? [["", "— Aucun client. Ajoutez-en d'abord —"]] : data.clients.map(c => [c.id, c.name])}/>
        <FormSelect label="Prestation" value={form.serviceId} onChange={onServiceChange} required
          options={data.services.map(s => [s.id, `${s.name} — ${fmtEUR(s.price)}`])}/>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <FormSelect label="Jour" value={String(form.day)} onChange={v => setForm({ ...form, day: parseInt(v, 10) })}
            options={DAY_LABELS.map((d, i) => [String(_AGENDA_MONDAY_OFFSET + i), d])}/>
          <FormSelect label="Heure" value={String(form.h)} onChange={v => setForm({ ...form, h: parseFloat(v) })}
            options={hourOptions}/>
        </div>
        <FormSelect label="Durée" value={String(form.d)} onChange={v => setForm({ ...form, d: parseFloat(v) })}
          options={durationOptions}/>
        <FormSelect label="Couleur" value={form.color} onChange={v => setForm({ ...form, color: v })} options={COLOR_CHOICES}/>
      </div>
    </Modal>
  );
};

const InvoiceFormModal = ({ modal, onClose, data, actions }) => {
  const open = modal && modal.type === "invoice";
  const [form, setForm] = React.useState({ clientId: "", designation: "", amount: "", paid: false });

React.useEffect(() => {
    if (!open) return;
    setForm({
      clientId: data.clients[0] ? data.clients[0].id : "",
      designation: "", amount: "", paid: false,
    });
  }, [open]);

return (
    <Modal open={!!open} onClose={onClose} title="Nouvelle facture"
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" onClick={submit}>Créer</button>
        </>
      }>
      <div style={{ display: "grid", gap: 14 }}>
        <FormSelect label="Cliente" value={form.clientId} onChange={v => setForm({ ...form, clientId: v })} required
          options={data.clients.map(c => [c.id, c.name])}/>
        <FormField label="Désignation de la prestation" value={form.designation} onChange={v => setForm({ ...form, designation: v })}
          placeholder="ex : Coupe + brushing femme" required/>
        <FormField label="Montant TTC (€)" value={form.amount} onChange={v => setForm({ ...form, amount: v })} placeholder="45,00" required/>
        <label style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13.5, cursor: "pointer" }}>
          <input type="checkbox" checked={form.paid} onChange={e => setForm({ ...form, paid: e.target.checked })}
            style={{ accentColor: "var(--accent)", width: 16, height: 16 }}/>
          Marquer comme payée
        </label>
      </div>
    </Modal>
  );
};

const StockFormModal = ({ modal, onClose, actions }) => {
  const open = modal && modal.type === "stock";
  const [form, setForm] = React.useState({ name: "", qty: "", min: "", price: "" });

React.useEffect(() => {
    if (!open) return;
    setForm({ name: "", qty: "", min: "", price: "" });
  }, [open]);

return (
    <Modal open={!!open} onClose={onClose} title="Nouveau produit"
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" onClick={submit}>Ajouter</button>
        </>
      }>
      <div style={{ display: "grid", gap: 14 }}>
        <FormField label="Nom du produit" value={form.name} onChange={v => setForm({ ...form, name: v })} placeholder="Base coat OPI" required autoFocus/>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
          <FormField label="Stock actuel" value={form.qty} onChange={v => setForm({ ...form, qty: v })} placeholder="10"/>
          <FormField label="Seuil mini" value={form.min} onChange={v => setForm({ ...form, min: v })} placeholder="3"/>
          <FormField label="Prix (€)" value={form.price} onChange={v => setForm({ ...form, price: v })} placeholder="12,90"/>
        </div>
      </div>
    </Modal>
  );
};

const PromoFormModal = ({ modal, onClose, actions }) => {
  const open = modal && modal.type === "promo";
  const [form, setForm] = React.useState({ title: "", segment: "", detail: "", status: "Brouillon" });

React.useEffect(() => {
    if (!open) return;
    setForm({ title: "", segment: "", detail: "", status: "Brouillon" });
  }, [open]);

return (
    <Modal open={!!open} onClose={onClose} title="Nouvelle promotion"
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" onClick={submit}>Créer la campagne</button>
        </>
      }>
      <div style={{ display: "grid", gap: 14 }}>
        <FormField label="Titre" value={form.title} onChange={v => setForm({ ...form, title: v })} placeholder="Anniversaires avril" required autoFocus/>
        <FormField label="Cible / segment" value={form.segment} onChange={v => setForm({ ...form, segment: v })} placeholder="Clientes fidèles, VIP…"/>
        <FormField label="Détail (ex : -15%, SMS samedi 10h…)" value={form.detail} onChange={v => setForm({ ...form, detail: v })}/>
        <FormSelect label="Statut" value={form.status} onChange={v => setForm({ ...form, status: v })}
          options={[["Brouillon", "Brouillon"], ["Programmé", "Programmé"], ["Actif", "Actif"]]}/>
      </div>
    </Modal>
  );
};

const FideliteRulesModal = ({ modal, onClose, data, actions }) => {
  const open = modal && modal.type === "fidelite-rules";
  const [visits, setVisits] = React.useState(data.fideliteRules.visits);
  const [rewardLabel, setRewardLabel] = React.useState(data.fideliteRules.rewardLabel);

React.useEffect(() => {
    if (!open) return;
    setVisits(data.fideliteRules.visits);
    setRewardLabel(data.fideliteRules.rewardLabel);
  }, [open]);

return (
    <Modal open={!!open} onClose={onClose} title="Règles de fidélité"
      footer={
        <>
          <button className="btn btn-ghost" onClick={onClose}>Annuler</button>
          <button className="btn btn-primary" onClick={submit}>Enregistrer</button>
        </>
      }>
      <div style={{ display: "grid", gap: 14 }}>
        <FormField label="Nombre de visites pour obtenir la récompense" value={String(visits)} onChange={v => setVisits(v)}/>
        <FormField label="Récompense" value={rewardLabel} onChange={setRewardLabel} placeholder="1 prestation offerte"/>
      </div>
    </Modal>
  );
};

Object.assign(window, { AppShell });

{c.title}

{title}

{today.length === 0 ? "Journée tranquille." : today.length === 1 ? `${displayCount} rendez-vous aujourd'hui.` : `${displayCount} rendez-vous aujourd'hui.`} {next && ( Prochain à {fmtH(next.h)} · {findClient(data, next.clientId)?.name} )}

Votre journée