/* global React, ReactDOM */
// Site sections — V3 (mai 2026 — retour client)

const AboModalCtx = React.createContext(null);

// ═════════════════════════════════════════════════════════════════════
// ── Helpers : agenda / dates ─────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const MONTHS_FR = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
const DAYS_FR_SHORT = ['L', 'M', 'M', 'J', 'V', 'S', 'D']; // lundi → dimanche

function pad2(n) { return n < 10 ? '0' + n : String(n); }
function toISO(date) { return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`; }

function buildCalendar(year, month) {
  const first = new Date(year, month, 1);
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  // We want Monday as first column (1=Mon … 0=Sun → push to 6)
  const offset = (first.getDay() + 6) % 7;
  const cells = [];
  for (let i = 0; i < offset; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));
  while (cells.length % 7 !== 0) cells.push(null);
  return cells;
}

function isDateAvailable(date, today) {
  if (!date) return false;
  if (date < today) return false;
  const cfg = window.AGENDA_CONFIG || { closedDays: [0, 1, 2], blockedDates: [] };
  if (cfg.closedDays.includes(date.getDay())) return false;
  if (cfg.blockedDates.includes(toISO(date))) return false;
  return true;
}

// ═════════════════════════════════════════════════════════════════════
// ── Agenda picker (mini calendrier + créneaux) ───────────────────────
// ═════════════════════════════════════════════════════════════════════
const AgendaPicker = ({ value, onChange }) => {
  const todayDate = React.useMemo(() => {
    const t = new Date(); t.setHours(0, 0, 0, 0); return t;
  }, []);
  const [view, setView] = React.useState(() => ({ y: todayDate.getFullYear(), m: todayDate.getMonth() }));
  const cells = buildCalendar(view.y, view.m);
  const cfg = window.AGENDA_CONFIG;
  const slots = value.date ? (cfg.slotsByDay[value.date.getDay()] || []) : [];

  const prevMonth = () => setView(v => v.m === 0 ? { y: v.y - 1, m: 11 } : { y: v.y, m: v.m - 1 });
  const nextMonth = () => setView(v => v.m === 11 ? { y: v.y + 1, m: 0 } : { y: v.y, m: v.m + 1 });
  const canGoPrev = view.y > todayDate.getFullYear() || (view.y === todayDate.getFullYear() && view.m > todayDate.getMonth());

  return (
    <div className="agenda-picker">
      <div className="agenda-header">
        <button type="button" className="agenda-nav" onClick={prevMonth} disabled={!canGoPrev} aria-label="Mois précédent">‹</button>
        <div className="agenda-title">{MONTHS_FR[view.m]} {view.y}</div>
        <button type="button" className="agenda-nav" onClick={nextMonth} aria-label="Mois suivant">›</button>
      </div>
      <div className="agenda-grid agenda-grid--head">
        {DAYS_FR_SHORT.map((d, i) => <div key={i} className="agenda-day-head">{d}</div>)}
      </div>
      <div className="agenda-grid">
        {cells.map((d, i) => {
          if (!d) return <div key={i} className="agenda-cell agenda-cell--empty" />;
          const available = isDateAvailable(d, todayDate);
          const selected = value.date && toISO(value.date) === toISO(d);
          return (
            <button
              key={i}
              type="button"
              className={`agenda-cell${available ? ' is-available' : ' is-blocked'}${selected ? ' is-selected' : ''}`}
              disabled={!available}
              onClick={() => onChange({ date: d, slot: null })}
            >
              {d.getDate()}
            </button>
          );
        })}
      </div>
      <div className="agenda-slots">
        {value.date ? (
          <>
            <div className="agenda-slots-label">Créneau du {value.date.getDate()} {MONTHS_FR[value.date.getMonth()].toLowerCase()}</div>
            <div className="agenda-slots-grid">
              {slots.length === 0 && <div className="agenda-no-slot">Pas de créneau ce jour-là</div>}
              {slots.map(s => (
                <button
                  key={s}
                  type="button"
                  className={`agenda-slot${value.slot === s ? ' is-selected' : ''}`}
                  onClick={() => onChange({ ...value, slot: s })}
                >
                  {s}
                </button>
              ))}
            </div>
          </>
        ) : (
          <div className="agenda-slots-empty">Sélectionnez une date pour voir les créneaux disponibles.</div>
        )}
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════
// ── Abonnement purchase modal (avec agenda du premier soin) ─────────
// ═════════════════════════════════════════════════════════════════════
const AboModal = ({ abo, onClose }) => {
  const [form, setForm] = React.useState({ prenom: '', nom: '', email: '', tel: '', message: '' });
  const [agenda, setAgenda] = React.useState({ date: null, slot: null });
  const [sent, setSent] = React.useState(false);

  const valid = form.prenom && form.email && form.tel && agenda.date && agenda.slot;

  const sendEmail = () => {
    const dateStr = agenda.date ? `${agenda.date.getDate()} ${MONTHS_FR[agenda.date.getMonth()]} ${agenda.date.getFullYear()}` : '';
    const subject = encodeURIComponent(`Abonnement ${abo.name} — ${form.prenom} ${form.nom}`.trim());
    const lines = [
      `Bonjour Maïté,`,
      ``,
      `Demande d'abonnement reçue via le site :`,
      ``,
      `Abonnement : ${abo.name} (${abo.duration})`,
      `Tarif : ${abo.price}€ — ${abo.saving}`,
      ``,
      `Coordonnées du client :`,
      `Prénom : ${form.prenom}`,
      `Nom : ${form.nom || '—'}`,
      `Email : ${form.email}`,
      `Téléphone : ${form.tel}`,
      ``,
      `Premier soin souhaité :`,
      `Date : ${dateStr}`,
      `Créneau : ${agenda.slot}`,
      ``,
      form.message ? `Message :\n${form.message}` : ``,
    ].filter(Boolean).join('\n');
    const body = encodeURIComponent(lines);
    window.location.href = `mailto:${window.CONTACT.email}?subject=${subject}&body=${body}`;
    setSent(true);
  };

  if (sent) {
    return (
      <div className="abo-modal-overlay" onClick={onClose}>
        <div className="abo-modal-box" onClick={e => e.stopPropagation()}>
          <div className="abo-modal-confirm">
            <div className="confirm-check">✓</div>
            <h3 className="display">Demande envoyée</h3>
            <p>Maïté recevra votre demande d'abonnement <strong>{abo.name}</strong> avec votre premier soin réservé. Elle vous recontactera rapidement pour confirmer.</p>
            <button className="btn-booking" onClick={onClose}>Fermer</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="abo-modal-overlay" onClick={onClose}>
      <div className="abo-modal-box abo-modal-box--xl" onClick={e => e.stopPropagation()}>
        <div className="abo-modal-header">
          <div style={{flex: 1}}>
            <div className="eyebrow">Abonnement · {abo.duration}</div>
            <h3 className="display" style={{fontSize: 28, margin: '6px 0 8px'}}>{abo.name}</h3>
            <div className="abo-modal-price">{abo.price}€ · {abo.saving}</div>
          </div>
          <button className="abo-modal-close" onClick={onClose} aria-label="Fermer">×</button>
        </div>
        <form className="abo-modal-form abo-modal-form--two-col" onSubmit={e => { e.preventDefault(); sendEmail(); }}>
          <div className="abo-form-col">
            <div className="abo-form-title">Vos coordonnées</div>
            <div className="field-row">
              <div className="field">
                <label>Prénom *</label>
                <input required value={form.prenom} onChange={e => setForm({...form, prenom: e.target.value})} />
              </div>
              <div className="field">
                <label>Nom</label>
                <input value={form.nom} onChange={e => setForm({...form, nom: e.target.value})} />
              </div>
            </div>
            <div className="field">
              <label>Email *</label>
              <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
            </div>
            <div className="field">
              <label>Téléphone *</label>
              <input required type="tel" value={form.tel} onChange={e => setForm({...form, tel: e.target.value})} />
            </div>
            <div className="field">
              <label>Message (optionnel)</label>
              <textarea rows={3} value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder="Questions, contre-indications, attentes..." />
            </div>
          </div>
          <div className="abo-form-col">
            <div className="abo-form-title">Réserver le premier soin</div>
            <AgendaPicker value={agenda} onChange={setAgenda} />
          </div>
          <div className="abo-form-footer">
            <button type="submit" className="btn-booking" disabled={!valid}>
              Envoyer ma demande <span>→</span>
            </button>
            <p className="abo-modal-note">Aucun prélèvement à ce stade. Maïté confirmera la séance par retour de mail.</p>
          </div>
        </form>
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════
// ── Service Booking modal — réservation d'un soin (soin pré-sélectionné)
// ═════════════════════════════════════════════════════════════════════
const ServiceBookingCtx = React.createContext(null);

const ServiceBookingModal = ({ service, onClose }) => {
  const [form, setForm] = React.useState({ prenom: '', nom: '', email: '', tel: '', message: '' });
  const [agenda, setAgenda] = React.useState({ date: null, slot: null });
  const [rappel48h, setRappel48h] = React.useState(true);
  const [sent, setSent] = React.useState(false);

  const valid = form.prenom && form.nom && form.email && form.tel && agenda.date && agenda.slot;

  const sendEmail = () => {
    const dateStr = agenda.date ? `${agenda.date.getDate()} ${MONTHS_FR[agenda.date.getMonth()]} ${agenda.date.getFullYear()}` : '';
    const subject = encodeURIComponent(`Réservation ${service.name} — ${form.prenom} ${form.nom}`.trim());
    const lines = [
      `Bonjour Maïté,`,
      ``,
      `Nouvelle demande de réservation reçue via le site :`,
      ``,
      `Soin : ${service.name} (${service.duration || ''})`,
      `Tarif : ${service.priceFrom ? 'àpd ' : ''}${service.price}€`,
      ``,
      `Coordonnées :`,
      `Prénom : ${form.prenom}`,
      `Nom : ${form.nom}`,
      `Email : ${form.email}`,
      `Téléphone : ${form.tel}`,
      ``,
      `Créneau souhaité :`,
      `Date : ${dateStr}`,
      `Heure : ${agenda.slot}`,
      ``,
      `Rappel 48h : ${rappel48h ? 'Oui' : 'Non'}`,
      ``,
      form.message ? `Message :\n${form.message}` : ``,
    ].filter(Boolean).join('\n');
    const body = encodeURIComponent(lines);
    window.location.href = `mailto:${window.CONTACT.email}?subject=${subject}&body=${body}`;
    setSent(true);
  };

  if (sent) {
    return (
      <div className="abo-modal-overlay" onClick={onClose}>
        <div className="abo-modal-box" onClick={e => e.stopPropagation()}>
          <div className="abo-modal-confirm">
            <div className="confirm-check">✓</div>
            <h3 className="display">Demande envoyée</h3>
            <p>Maïté a bien reçu votre demande pour le soin <strong>{service.name}</strong>. Elle confirmera par mail dans les plus brefs délais.</p>
            <button className="btn-booking" onClick={onClose}>Fermer</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="abo-modal-overlay" onClick={onClose}>
      <div className="abo-modal-box abo-modal-box--xl" onClick={e => e.stopPropagation()}>
        <div className="abo-modal-header">
          <div style={{flex: 1}}>
            <div className="eyebrow">Réservation · {service.duration || 'durée modulable'}</div>
            <h3 className="display" style={{fontSize: 28, margin: '6px 0 8px'}}>{service.name}</h3>
            <div className="abo-modal-price">{service.priceFrom ? 'àpd ' : ''}{service.price}€</div>
          </div>
          <button className="abo-modal-close" onClick={onClose} aria-label="Fermer">×</button>
        </div>
        <form className="abo-modal-form abo-modal-form--two-col" onSubmit={e => { e.preventDefault(); sendEmail(); }}>
          <div className="abo-form-col">
            <div className="abo-form-title">Vos coordonnées</div>
            <div className="field-row">
              <div className="field">
                <label>Prénom *</label>
                <input required value={form.prenom} onChange={e => setForm({...form, prenom: e.target.value})} />
              </div>
              <div className="field">
                <label>Nom *</label>
                <input required value={form.nom} onChange={e => setForm({...form, nom: e.target.value})} />
              </div>
            </div>
            <div className="field">
              <label>Email *</label>
              <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
            </div>
            <div className="field">
              <label>Téléphone *</label>
              <input required type="tel" value={form.tel} onChange={e => setForm({...form, tel: e.target.value})} />
            </div>
            <label className="checkbox-row" style={{marginTop: 8}}>
              <input type="checkbox" checked={rappel48h} onChange={e => setRappel48h(e.target.checked)} />
              <span>Je souhaite recevoir un rappel par email 48h avant le rendez-vous.</span>
            </label>
            <div className="field" style={{marginTop: 8}}>
              <label>Message (optionnel)</label>
              <textarea rows={2} value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder="Questions, contre-indications, attentes..." />
            </div>
          </div>
          <div className="abo-form-col">
            <div className="abo-form-title">Date & heure</div>
            <AgendaPicker value={agenda} onChange={setAgenda} />
          </div>
          <div className="abo-form-footer">
            <button type="submit" className="btn-booking" disabled={!valid}>
              Envoyer ma demande <span>→</span>
            </button>
            <p className="abo-modal-note">
              <strong>Aucun prélèvement à ce stade.</strong> Maïté confirmera votre rendez-vous par mail.
            </p>
          </div>
        </form>
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════
// ── Sticky top bar (info + CTA toujours visibles) ────────────────────
// ═════════════════════════════════════════════════════════════════════
const TopBar = () => (
  <div className="topbar">
    <div className="topbar-inner">
      <div className="topbar-info">
        <a href={`tel:${window.CONTACT.telephoneRaw}`} className="topbar-info-link">
          <span aria-hidden="true">☏</span> {window.CONTACT.telephone}
        </a>
        <a href={window.CONTACT.mapsUrl} target="_blank" rel="noopener noreferrer" className="topbar-info-link">
          <span aria-hidden="true">⌖</span> {window.CONTACT.adresse}
        </a>
      </div>
      <a href="#reserver" className="topbar-cta">Réserver une séance →</a>
    </div>
  </div>
);

// ═════════════════════════════════════════════════════════════════════
// ── Navigation ───────────────────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Nav = () => (
  <nav className="nav">
    <div className="nav-brand">
      <div className="mark mark--nav" style={{backgroundImage: 'url(assets/logo.png)'}} aria-label="Maïté" />
    </div>
    <div className="nav-links">
      <a href="#soins">Soins</a>
      <a href="#histoire">Histoire</a>
      <a href="#avis">Avis</a>
      <a href="#blog">Articles</a>
    </div>
    <a href="#reserver" className="nav-cta">Réserver</a>
  </nav>
);

// ═════════════════════════════════════════════════════════════════════
// ── Hero ─────────────────────────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Hero = () => (
  <header className="hero hero--v3" id="hero">
    <div className="hero-text">
      <div className="hero-eyebrow">
        <span className="dot" />
        <span className="eyebrow">{window.CONTACT.cabinet}</span>
      </div>
      <h1 className="display hero-title hero-title--v3">
        <span className="line-accent">À l'écoute</span>
        <span className="line-ink">de votre corps</span>
      </h1>
      <p className="lede hero-sub">
        Massages relaxants, soins énergétiques, drainage et remodelage depuis plus de 20 ans. Un moment pour vous, un souffle retrouvé.
      </p>
      <div className="hero-ctas">
        <a href="#reserver" className="btn btn-primary">
          Réserver une séance <span className="arrow">→</span>
        </a>
        <a href="#soins" className="btn btn-ghost btn-ghost--camel">Découvrir les soins</a>
      </div>
    </div>
    <div className="hero-visual hero-visual--v3">
      <div className="hero-photo-v3" style={{backgroundImage: 'url(assets/maite-hero.jpg)'}} />
      <div className="hero-logo-mandala" aria-hidden="true" />
    </div>
  </header>
);

// ═════════════════════════════════════════════════════════════════════
// ── Camel divider (remplace l'ancien ticker) ─────────────────────────
// ═════════════════════════════════════════════════════════════════════
const CamelBand = () => <div className="camel-band" aria-hidden="true" />;

// ═════════════════════════════════════════════════════════════════════
// ── Service detail modal — centré, sans scroll, CTA visible direct ───
// ═════════════════════════════════════════════════════════════════════
const ServiceDetailModal = ({ service, onClose, onReserve }) => {
  const cats = window.CATEGORIES;
  const cat = cats.find(c => c.id === service.cat);

  return (
    <div className="abo-modal-overlay" onClick={onClose}>
      <div className="abo-modal-box service-detail-box service-detail-box--compact" onClick={e => e.stopPropagation()}>
        <button className="abo-modal-close abo-modal-close--abs" onClick={onClose} aria-label="Fermer">×</button>
        <div className="service-detail-header">
          <div className="service-detail-eyebrow">{cat ? cat.label : ''}</div>
          <div className="service-detail-glyph">{service.glyph}</div>
          <h3 className="display service-detail-title">{service.name}</h3>
          <div className="service-detail-subtitle">{service.subtitle}</div>
        </div>
        <div className="service-detail-cta-block">
          <div className="service-detail-price-line">
            <span className="price">{service.priceFrom ? 'àpd ' : ''}{service.price}€</span>
            {service.duration && <span className="dur">{service.duration}</span>}
          </div>
          <button className="btn btn-primary" onClick={() => { onClose(); onReserve(service); }}>
            Réserver <span className="arrow">→</span>
          </button>
        </div>
        {service.details && (
          <>
            <p className="service-detail-intro">{service.details.intro}</p>
            <div className="service-detail-sections">
              <div className="service-detail-col">
                <h4 className="service-detail-heading">Bienfaits</h4>
                <ul className="service-detail-list service-detail-list--bien">
                  {service.details.bienfaits.map((b, i) => <li key={i}>{b}</li>)}
                </ul>
              </div>
              <div className="service-detail-col">
                <h4 className="service-detail-heading">Contre-indications</h4>
                <ul className="service-detail-list service-detail-list--ci">
                  {service.details.contreIndications.map((c, i) => <li key={i}>{c}</li>)}
                </ul>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════════════
// ── Services ─────────────────────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Services = () => {
  const cats = window.CATEGORIES;
  const [active, setActive] = React.useState('all');
  const [detailModal, setDetailModal] = React.useState(null);
  const openModal = React.useContext(AboModalCtx);
  const openBooking = React.useContext(ServiceBookingCtx);
  const visible = active === 'all' ? window.SERVICES : window.SERVICES.filter(s => s.cat === active);

  const visibleAbos = window.SUBSCRIPTIONS.filter(a => {
    if (active === 'all') return true;
    const linked = window.SERVICES.find(x => x.id === a.linkedTo);
    return linked && linked.cat === active;
  });

  return (
  <section className="section" id="soins">
    <div className="container">
      <div className="section-label">
        <span className="num">01 — Soins</span>
        <span className="rule" />
      </div>
      <div className="services-intro">
        <h2 className="display">
          Trois familles<br/>de soins bien-être. <em style={{color: 'var(--accent)', fontStyle: 'italic'}}>Une écoute.</em>
        </h2>
        <p className="body-text">
          J'écoute ce que votre corps exprime, et j'adapte mes soins à vos besoins. Massages relaxants, soins énergétiques, drainage et remodelage : les techniques varient, l'intention, elle, demeure.
        </p>
      </div>
      <div className="cat-filter">
        <button className={`cat-chip ${active === 'all' ? 'active' : ''}`} onClick={() => setActive('all')}>Tous</button>
        {cats.map(c => (
          <button key={c.id} className={`cat-chip ${active === c.id ? 'active' : ''}`} onClick={() => setActive(c.id)}>{c.label}</button>
        ))}
      </div>
      <div className="services-grid">
        {visible.map((s) => {
          const cat = cats.find(c => c.id === s.cat);
          return (
          <article key={s.id} className="service-card service-card--v3">
            <div className="service-card-cat">{cat.label}</div>
            <div className="service-card-glyph">{s.glyph}</div>
            <h3 className="service-card-title">{s.name}</h3>
            {s.subtitle && <div className="service-subtitle">{s.subtitle}</div>}
            <p className="service-card-desc">{s.desc}</p>
            <div className="foot">
              <span className="price">{s.priceFrom ? 'àpd ' : ''}{s.price}€</span>
              {s.duration && <span className="dur">{s.duration}</span>}
            </div>
            {s.details && (
              <button className="btn-savoir-plus btn-savoir-plus--filled" onClick={() => setDetailModal(s)}>
                En savoir plus <span>→</span>
              </button>
            )}
          </article>
        );})}
      </div>

      {(active === 'all' || visibleAbos.length > 0) && (
        <div className="abo-block abo-block--camel">
          <div className="abo-head">
            <span className="eyebrow eyebrow--cream">Abonnements</span>
            <span className="abo-tagline">10 séances · la 11ᵉ offerte</span>
          </div>
          <div className="abo-grid">
            {visibleAbos.map(a => (
              <div key={a.id} className="abo-card abo-card--camel">
                <div className="abo-name">{a.name}</div>
                <div className="abo-dur">{a.duration}</div>
                <div className="abo-price"><strong>{a.price}€</strong><span>au lieu de {a.perSession * 11}€</span></div>
                <div className="abo-save">{a.saving}</div>
                <button className="abo-buy-btn abo-buy-btn--white" onClick={() => openModal(a)}>
                  Acheter l'abonnement <span>→</span>
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
    {detailModal && <ServiceDetailModal service={detailModal} onClose={() => setDetailModal(null)} onReserve={openBooking} />}
  </section>
  );
};

// ═════════════════════════════════════════════════════════════════════
// ── Histoire ─────────────────────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Histoire = () => (
  <section className="story story--v3" id="histoire">
    <div className="container">
      <div className="section-label">
        <span className="num">02 — Mon histoire</span>
        <span className="rule" />
      </div>
      <div className="story-grid">
        <div className="story-media-wrap">
          <div className="story-media story--portrait" style={{backgroundImage: 'url(assets/maite-portrait.jpg)'}} />
        </div>
        <div className="story-text">
          <h2 className="display">
            D'une prise de conscience<br/><em>à une vocation.</em>
          </h2>
          <p className="first">
            D'abord reçu, puis donné, le massage m'a permis de prendre soin de moi et des autres.
          </p>
          <p>
            J'avais déjà une formation en réflexologie plantaire depuis 2003, mais je la gardais comme un jardin secret. Après une carrière passée dans le secteur administratif, devenu mon métier à plein temps et une manière d'accompagner d'autres personnes vers elles-mêmes. Aujourd'hui, je me suis formée depuis à différentes techniques de soins relaxants, énergisants et remodelants issues de pratiques qui nous viennent d'ailleurs.
          </p>
          <p>
            Je vous reçois au sein de mon cabinet, à Sterrebeek. Un espace cosy et pensé pour vous offrir une parenthèse de bien-être dans votre quotidien. On y vient pour être écouté.
          </p>
          <div className="story-signature">— Maïté</div>
        </div>
      </div>
    </div>
  </section>
);

// ═════════════════════════════════════════════════════════════════════
// ── Témoignages — 3 encadrés simples ─────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Temoignages = () => (
  <section className="testimonials testimonials--v3" id="avis">
    <div className="container">
      <div className="section-label">
        <span className="num">03 — Ce qu'on en dit</span>
        <span className="rule" />
      </div>
      <div className="testimonials-grid">
        {window.TESTIMONIALS.map((t) => (
          <article key={t.author} className="t-card">
            <span className="stars">★★★★★</span>
            <p className="body">"{t.body}"</p>
            <div className="meta">
              <div className="author">
                {t.author}
                <span className="s">{t.detail} · {t.source}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ═════════════════════════════════════════════════════════════════════
// ── Booking (Prendre rendez-vous) ────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Booking = () => (
  <section className="booking" id="reserver">
    <div className="container">
      <div className="booking-wrap">
        <div className="booking-side">
          <div className="eyebrow">04 — Réserver</div>
          <h2>Prendre<br/>rendez-vous.</h2>
          <p>Je vous reçois uniquement sur rendez-vous, au sein de mon cabinet situé dans un quartier calme à Sterrebeek.</p>
          <ul className="info-list info-list--v3">
            <li>
              <span>Adresse</span>
              <a href={window.CONTACT.mapsUrl} target="_blank" rel="noopener noreferrer" className="info-link">
                {window.CONTACT.adresse}
              </a>
            </li>
            <li>
              <span>Téléphone</span>
              <a href={`tel:${window.CONTACT.telephoneRaw}`} className="info-link">
                {window.CONTACT.telephone}
              </a>
            </li>
            <li>
              <span>Email</span>
              <a href={`mailto:${window.CONTACT.email}`} className="info-link">
                {window.CONTACT.email}
              </a>
            </li>
            <li><span>Paiement</span><span>Sur place, sans acompte</span></li>
            <li><span>Annulation</span><span>Gratuite 48h à l'avance</span></li>
          </ul>
        </div>
        <window.BookingFlow />
      </div>
    </div>
  </section>
);

// ═════════════════════════════════════════════════════════════════════
// ── Blog ─────────────────────────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Blog = () => (
  <section className="blog" id="blog">
    <div className="container">
      <div className="section-label">
        <span className="num">05 — Articles</span>
        <span className="rule" />
      </div>
      <div className="blog-head blog-head--v3">
        <h2 className="display">
          Les soins, le corps<br/><em style={{color: 'var(--accent)', fontStyle: 'italic'}}>et le bien-être.</em>
        </h2>
      </div>
      <div className="blog-grid">
        {window.BLOG_ARTICLES.map((a) => (
          <a key={a.id} href={`#article/${a.id}`} className="blog-card blog-card--link">
            <div className="blog-card-img">
              <div className="blog-card-img-placeholder">Photo à venir · {a.tag}</div>
            </div>
            <div className="blog-card-body">
              <div className="blog-card-tag">{a.tag}</div>
              <div className="blog-card-title">{a.title}</div>
              <p style={{fontSize: 13, color: 'var(--fg-soft)', lineHeight: 1.6, flex: 1}}>{a.intro}</p>
              <div className="blog-card-meta">
                <span>{a.date} · {a.readTime} de lecture</span>
                <span className="blog-card-read">Lire <span>→</span></span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ═════════════════════════════════════════════════════════════════════
// ── Blog Article View — page article complète (routing par hash) ─────
// ═════════════════════════════════════════════════════════════════════
const BlogArticleView = ({ article, onBack }) => {
  const linkedService = window.SERVICES.find(s => s.id === article.linkedService);
  const relatedArticles = window.BLOG_ARTICLES.filter(a => a.id !== article.id).slice(0, 2);
  const url = typeof window !== 'undefined' ? window.location.href : '';
  const shareTitle = encodeURIComponent(article.title);
  const shareUrl = encodeURIComponent(url);

  React.useEffect(() => { window.scrollTo(0, 0); }, [article.id]);

  return (
    <article className="blog-article">
      <div className="container container--narrow">
        <div className="blog-article-back">
          <button type="button" onClick={onBack} className="blog-article-back-link">← Tous les articles</button>
        </div>
        <header className="blog-article-header">
          <div className="blog-article-meta-top">
            <span className="blog-article-tag">{article.tag}</span>
            <span className="blog-article-date">{article.date} · {article.readTime} de lecture</span>
          </div>
          <h1 className="display blog-article-title">{article.title}</h1>
          <p className="blog-article-intro">{article.intro}</p>
        </header>

        <div className="blog-article-layout">
          <aside className="blog-article-toc">
            <div className="blog-article-toc-title">Sommaire</div>
            <ol>
              {article.sections.map((s, i) => (
                <li key={s.slug}><a href={`#${s.slug}`}>{i + 1}. {s.heading}</a></li>
              ))}
            </ol>
          </aside>

          <div className="blog-article-body">
            {article.sections.map((s) => (
              <section key={s.slug} id={s.slug} className="blog-article-section">
                <h2 className="blog-article-h2">{s.heading}</h2>
                {s.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
              </section>
            ))}

            <div className="blog-article-share">
              <span className="blog-article-share-label">Partager :</span>
              <a className="blog-article-share-link" href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`} target="_blank" rel="noopener noreferrer">Facebook</a>
              <a className="blog-article-share-link" href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">LinkedIn</a>
              <a className="blog-article-share-link" href={`https://twitter.com/intent/tweet?text=${shareTitle}&url=${shareUrl}`} target="_blank" rel="noopener noreferrer">X / Twitter</a>
              <a className="blog-article-share-link" href={`mailto:?subject=${shareTitle}&body=${shareUrl}`}>Email</a>
            </div>
          </div>
        </div>

        <aside className="blog-article-cta">
          <div className="blog-article-cta-text">
            <div className="eyebrow">Envie d'essayer ?</div>
            <h3 className="display">
              {linkedService ? `Découvrez le ${linkedService.name}.` : "Réservez votre séance."}
            </h3>
            <p>Je vous accueille uniquement sur rendez-vous, dans mon cabinet à Zaventem.</p>
          </div>
          <a href="#reserver" onClick={onBack} className="btn btn-primary">
            Réserver une séance <span className="arrow">→</span>
          </a>
        </aside>

        <section className="blog-article-map">
          <h3 className="blog-article-map-title">Le cabinet</h3>
          <div className="blog-article-map-frame">
            <iframe
              title="Cabinet Maïté"
              src="https://www.google.com/maps?q=Klaprozenhof+12+1933+Sterrebeek&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>
          <p className="blog-article-map-addr">{window.CONTACT.adresse}</p>
        </section>

        <section className="blog-article-related">
          <h3 className="blog-article-related-title">À lire ensuite</h3>
          <div className="blog-article-related-grid">
            {relatedArticles.map((a) => (
              <a key={a.id} className="blog-article-related-card" href={`#article/${a.id}`}>
                <div className="blog-card-tag">{a.tag}</div>
                <div className="blog-article-related-name">{a.title}</div>
                <p>{a.intro}</p>
                <span className="blog-card-read">Lire <span>→</span></span>
              </a>
            ))}
          </div>
        </section>
      </div>
    </article>
  );
};

// ═════════════════════════════════════════════════════════════════════
// ── Social icons (SVG inline) ────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const IconInstagram = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor" stroke="none" />
  </svg>
);
const IconLinkedIn = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M4.98 3.5A2.5 2.5 0 1 1 4.97 8.5a2.5 2.5 0 0 1 .01-5zM3 9.5h4v11H3v-11zm6 0h3.8v1.5h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V20.5h-4v-4.95c0-1.18-.02-2.7-1.65-2.7-1.65 0-1.9 1.29-1.9 2.62V20.5H9v-11z" />
  </svg>
);
const IconTreatwell = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
    <path d="M12 2C7 7 4 11 4 14a8 8 0 0 0 16 0c0-3-3-7-8-12z" />
  </svg>
);
const IconFacebook = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M22 12a10 10 0 1 0-11.56 9.88V14.9H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46H15.2c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.9h-2.33v6.98A10 10 0 0 0 22 12z" />
  </svg>
);

// ═════════════════════════════════════════════════════════════════════
// ── Footer ───────────────────────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const Footer = () => {
  const { socials } = window.CONTACT;
  const [newsletter, setNewsletter] = React.useState('');
  const [subscribed, setSubscribed] = React.useState(false);

  const handleNewsletter = (e) => {
    e.preventDefault();
    if (!newsletter) return;
    const subject = encodeURIComponent('Inscription newsletter — site Maïté');
    const body = encodeURIComponent(`Nouvelle inscription newsletter :\n\nEmail : ${newsletter}`);
    window.location.href = `mailto:${window.CONTACT.email}?subject=${subject}&body=${body}`;
    setSubscribed(true);
  };

  return (
    <footer className="footer footer--v3">
      <div className="container">
        <div className="footer-grid footer-grid--v3">
          <div className="footer-brand footer-brand--v3">
            <img src="assets/logo.png" alt="Maïté" className="footer-logo-img" />
          </div>
          <div className="footer-col">
            <ul>
              <li><a href="#soins">Soins</a></li>
              <li><a href="#histoire">Histoire</a></li>
              <li><a href="#avis">Avis</a></li>
              <li><a href="#blog">Articles</a></li>
              <li><a href="#reserver">Réserver</a></li>
            </ul>
          </div>
          <div className="footer-col footer-col--socials">
            <ul className="footer-socials">
              <li>
                <a href={socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                  <IconInstagram />
                  <span>Instagram</span>
                </a>
              </li>
              <li>
                <a href={socials.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                  <IconFacebook />
                  <span>Facebook</span>
                </a>
              </li>
            </ul>
          </div>
          <div className="footer-col footer-col--newsletter">
            <div className="footer-newsletter-title">Restez en lien</div>
            <p className="footer-newsletter-desc">
              Conseils bien-être & rappels saisonniers. Pas de spam, jamais.
            </p>
            {subscribed ? (
              <div className="footer-newsletter-thanks">Merci ! Je vous écris très vite.</div>
            ) : (
              <form className="footer-newsletter" onSubmit={handleNewsletter}>
                <input type="email" placeholder="Votre email" value={newsletter} onChange={e => setNewsletter(e.target.value)} required />
                <button type="submit">S'inscrire</button>
              </form>
            )}
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 — Maïté Massages & Bien-être</span>
          <span>Zaventem · conçu avec soin à Bruxelles</span>
        </div>
      </div>
    </footer>
  );
};

// ═════════════════════════════════════════════════════════════════════
// ── Site (root component) ────────────────────────────────────────────
// ═════════════════════════════════════════════════════════════════════
const parseArticleHash = () => {
  const h = (typeof window !== 'undefined' ? window.location.hash : '') || '';
  const m = h.match(/^#article\/([a-z0-9-]+)/i);
  if (!m) return null;
  return (window.BLOG_ARTICLES || []).find(a => a.id === m[1]) || null;
};

const Site = ({ theme = 'atelier', mobile = false }) => {
  const [aboModal, setAboModal] = React.useState(null);
  const [bookingModal, setBookingModal] = React.useState(null);
  const [currentArticle, setCurrentArticle] = React.useState(() => parseArticleHash());

  React.useEffect(() => {
    const onHashChange = () => setCurrentArticle(parseArticleHash());
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  const closeArticle = () => {
    if (window.location.hash.startsWith('#article/')) {
      history.pushState('', document.title, window.location.pathname + window.location.search);
      setCurrentArticle(null);
    }
  };

  return (
    <AboModalCtx.Provider value={setAboModal}>
    <ServiceBookingCtx.Provider value={setBookingModal}>
      <div className={`site theme-${theme} ${mobile ? 'mobile' : ''}`}>
        <TopBar />
        <Nav />
        {currentArticle ? (
          <BlogArticleView article={currentArticle} onBack={closeArticle} />
        ) : (
          <>
            <Hero />
            <CamelBand />
            <Services />
            <Histoire />
            <Temoignages />
            <Booking />
            <Blog />
          </>
        )}
        <Footer />
        {aboModal && <AboModal abo={aboModal} onClose={() => setAboModal(null)} />}
        {bookingModal && <ServiceBookingModal service={bookingModal} onClose={() => setBookingModal(null)} />}
      </div>
    </ServiceBookingCtx.Provider>
    </AboModalCtx.Provider>
  );
};

window.Site = Site;