/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

/* ===========================================================
   DATA
=========================================================== */
const RITUELS = [
  {
    id: 'decouverte',
    nom: 'Découverte',
    image: './images/main-page/rituels/decouverte.webp',
    duree: '45 min',
    prix: '80 €',
    tone: 'green',
    layout: 'wide',
    desc: "Un premier pas vers vous. Ce soin soulage les tensions, stimule la circulation et vous aide à comprendre ce qui fatigue votre cuir chevelu.",
    etapes: [
      "Cascades d'eau chaude",
      'Gommage du cuir chevelu',
      'Massage crânien complet avec ustensiles de stimulation',
      'Shampoing détente en plusieurs étapes',
      'Soin des longueurs + bain de vapeur',
      'Séchage',
    ],
  },
  {
    id: 'evasion',
    nom: 'Évasion',
    image: './images/main-page/rituels/evasions.webp',
    duree: '1h',
    prix: '95 €',
    tone: 'gold',
    layout: 'vertical',
    desc: "Pour celles qui veulent comprendre et lâcher prise. Démangeaisons, tiraillements, chute, excès de sébum… ce soin cible vos inconforts tout en vous offrant un véritable moment de détente.",
    etapes: [
      "Cascades d'eau chaude",
      'Démaquillage et gommage doux du visage',
      'Modelage visage',
      'Gommage du cuir chevelu',
      'Massage crânien complet avec outils de stimulation',
      'Soin ayurvédique adapté aux problématiques',
      'Shampoing détente en plusieurs étapes',
      'Soin des longueurs + bain de vapeur',
      'Séchage',
    ],
  },
  {
    id: 'premium',
    nom: 'Premium',
    image: './images/main-page/rituels/premium.webp',
    duree: '1h30',
    prix: '120 €',
    badge: 'Best-Seller',
    tone: 'green',
    layout: 'vertical',
    desc: "L'expérience complète. Un soin profond qui relâche le corps, soulage le cuir chevelu et recharge l'énergie. Peau, cheveux, tensions : on prend soin de tout.",
    etapes: [
      'Démaquillage, gommage du visage',
      "Cascades d'eau chaude",
      'Gommage du cuir chevelu',
      'Massage crânien complet avec outils de stimulation',
      'Soin ayurvédique personnalisé (sébum, pellicules, inflammations…)',
      'Massage du haut du corps aux huiles naturelles (buste, épaules, trapèzes)',
      'Modelage visage',
      'Shampoing détente en plusieurs étapes',
      'Soin des longueurs',
      'Bain de vapeur',
      'Massage des bras',
      'Séchage',
    ],
  },
  {
    id: 'k-serenity',
    nom: 'Rituel K-Serenity',
    image: './images/main-page/rituels/k-serenity.webp',
    duree: '1h45',
    prix: '140 €',
    badge: 'Signature',
    tone: 'gold',
    layout: 'wide',
    reverse: true,
    desc: 'Inspiré des rituels de beauté coréens. Dix-huit étapes exclusives mêlant aromathérapie, ultrasons, techniques manuelles et soins naturels sur-mesure. Purifie, oxygène et revitalise.',
    etapes: [
      "Cascades d'eau chaude",
      'Peigne haute fréquence (purification + microcirculation)',
      'Sérum ciblé selon les problématiques',
      'Aromathérapie aux huiles essentielles adaptées',
      'Ultrasons et vibrations pour pénétration des actifs',
      'Casque de vapeur',
      'Démaquillage et gommage doux du visage',
      'Massage visage, cou, buste, trapèzes et nuque',
      'Masque visage au collagène',
      'Rinçage thérapeutique en cascade',
      'Double shampoing et massage crânien',
      'Soin des longueurs',
      'Bain de vapeur',
      'massage des bras et mains aux huiles naturelles',
      'Rinçage final',
      'Séchage et mise en beauté naturelle',
      'Crème hydratante visage',
      'Tisane relaxante',
    ],
  },
  {
    id: 'circuit',
    nom: 'Circuit Bien-Être',
    image: './images/main-page/rituels/circuit-bien-etre.webp',
    sousTitre: 'Massage des 5 Continents & Head Spa',
    duree: '1h30',
    prix: '155 €',
    tone: 'green',
    layout: 'hero',
    desc: "Un soin complet pour relâcher les tensions et retrouver une profonde sensation de bien-être. Détente du corps, rééquilibrage de l'esprit, expérience sensorielle totale.",
    etapes: [
      'Sauna décontractant (15-min)',
      'Massage des 5 Continents personnalisé selon la zone de votre choix',
      "Cascades d'eau chaude", 
      'Gommage du cuir chevelu', 
      'Massage crânien complet avec ustensiles de stimulation',
      'Shampoing détente en plusieurs étapes', 
      'Soin des longueurs + bain de vapeur', 
      'Séchage',
      'Tisane chaude offerte',
    ],
  },
  {
    id: 'maman-enfant',
    nom: 'Rituel Maman / Enfant',
    image: './images/main-page/rituels/maman-enfant.webp',
    duree: '1h15',
    prix: '155 €',
    badge: 'Duo',
    tone: 'gold',
    layout: 'wide',
    desc: "Inspirée de la formule Évasion et du rituel des Tout-Petits, cette expérience a été pensée pour offrir un moment de bien-être partagé tout en douceur. Relaxation profonde et soins capillaires adaptés à chacun, dans une atmosphère apaisante et sécurisante.",
    etapes: [
      "Cascades d'eau chaude",
      'Démaquillage et gommage en douceur du visage uniquement pour la maman',
      'Massage du visage',
      'Gommage du cuir chevelu en douceur',
      'Massage crânien complet avec outils de stimulation',
      'Shampoing en plusieurs étapes pour détendre en profondeur',
      'Soin des longueurs + bain de vapeur',
      'Massage des bras',
      'Séchage',
    ],
  },
  
];

const MADEROTHERAPIE = {
  id: 'maderotherapie',
  nom: 'La Madérothérapie Visage',
  image: './images/main-page/rituels/maderotherapie.webp',
  duree: '35 min',
  prix: '75 €',
  tag: 'Visage',
  intro: "Une technique naturelle et non invasive qui utilise des outils en bois sculptés à la main pour redessiner, tonifier et raviver l'éclat du visage.",
  bienfaits: [
    {
      titre: 'Effet lifting immédiat',
      texte: "Grâce à des mouvements précis, la peau est tonifiée, les traits rehaussés et l'ovale du visage redessiné.",
    },
    {
      titre: 'Circulation sanguine et lymphatique',
      texte: "Une meilleure oxygénation des tissus et un drainage en profondeur, pour dégonfler et éclaircir le teint.",
    },
    {
      titre: 'Collagène et élastine',
      texte: "Activation de la production naturelle : l'élasticité et la fermeté de la peau s'améliorent, les ridules s'atténuent.",
    },
    {
      titre: 'Détoxification et détente',
      texte: "Élimine les toxines accumulées et détend les muscles faciaux contractés par le stress.",
    },
    {
      titre: 'Teint lumineux',
      texte: "Le visage paraît plus reposé, éclatant et visiblement plus jeune.",
    },
  ],
};

const TOUT_PETITS = {
  id: 'tout-petits',
  nom: 'Rituel des Tout-Petits',
  image: './images/main-page/rituels/tout-petits.webp',
  duree: '45 min',
  prix: '60 €',
  age: '4–11 ans',
  desc: "Un moment de bien-être doux et ludique, pensé spécialement pour les enfants. Une bulle de détente rassurante, rien qu'à eux.",
  etapes: [
    "Cascades d'eau chaude",
    'Gommage doux du cuir chevelu',
    'Massage crânien complet avec ustensiles de stimulation',
    'Shampoing détente en plusieurs étapes',
    'Soin des longueurs + bain de vapeur',
    'Séchage',
  ],
};

/* ===========================================================
   HOOKS & PRIMITIVES
=========================================================== */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add('in');
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ as: Tag = 'div', className = '', style, delay = 0, children, ...rest }) {
  const ref = useReveal();
  return (
    <Tag
      ref={ref}
      className={`reveal ${className}`}
      style={{ transitionDelay: `${delay}s`, ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

/* ===========================================================
   RITUAL CARD
=========================================================== */
function RitualCard({ ritual, index, isOpen, onToggle }) {
  const layoutClass = `layout-${ritual.layout}${ritual.reverse ? ' reverse' : ''}`;
  const phClass = ritual.tone === 'gold' ? 'ph-gold' : 'ph-green';

  return (
    <Reveal as="article" className={`rit-card ${layoutClass}`} delay={index * 0.08}>
      <div className="rit-image">
        {ritual.image ? (
          <img
            src={ritual.image}
            alt={`Soin ${ritual.nom} — BIO HEAD SPA`}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              position: 'absolute',
              inset: 0,
            }}
            loading="lazy"
            onError={(e) => {
              e.target.style.display = 'none';
              e.target.nextSibling.style.display = 'flex';
            }}
          />
        ) : null}
        <div
          className={`ph ${phClass}`}
          style={ritual.image ? { display: 'none' } : {}}
        >
          <span className="ph-label">Photo — {ritual.nom.toLowerCase()}</span>
        </div>
        {ritual.badge && (
          <div className={`rit-badge ${ritual.badge.toLowerCase() === 'signature' ? 'signature' : ''}`}>
            <span className="dot"></span>{ritual.badge}
          </div>
        )}
        {ritual.layout === 'hero' && (
          <div className="rit-price-tag">{ritual.duree} · {ritual.prix}</div>
        )}
      </div>

      <div className="rit-body">
        <div className="rit-meta">
          <span>{ritual.duree}</span>
          <span style={{ color: 'var(--gold)', opacity: 0.6 }}>·</span>
          <span className="rit-price">{ritual.prix}</span>
        </div>
        <h3 className="rit-name">{ritual.nom}</h3>
        {ritual.sousTitre && <div className="rit-sub">{ritual.sousTitre}</div>}
        <p className="rit-desc">{ritual.desc}</p>

        <div className="rit-rule"></div>

        <button
          className="rit-toggle"
          onClick={onToggle}
          aria-expanded={isOpen}
          aria-controls={`steps-${ritual.id}`}
        >
          <span>{isOpen ? 'Masquer les étapes' : `Voir les ${ritual.etapes.length} étapes`}</span>
          <span className={`acc-icon ${isOpen ? 'open' : ''}`}>+</span>
        </button>

        <div id={`steps-${ritual.id}`} className={`rit-steps-panel ${isOpen ? 'open' : ''}`}>
          <ol className="rit-steps">
            {ritual.etapes.map((e, i) => (
              <li key={i} className="rit-step">
                <span className="rit-step-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="rit-step-text">{e}</span>
              </li>
            ))}
          </ol>
          <a href="#reserver" className="btn-pill rit-reserve">
            Réserver {ritual.nom} <span aria-hidden>→</span>
          </a>
        </div>
      </div>
    </Reveal>
  );
}

/* ===========================================================
   MADÉROTHÉRAPIE VISAGE — formule complémentaire
=========================================================== */
function Maderotherapie() {
  const [open, setOpen] = useState(false);
  return (
    <Reveal className="rit-madero">
      <div className="madero-body">
        <span className="ornament" style={{ color: 'var(--gold)', fontSize: '0.7rem', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500 }}>
          La formule en plus
        </span>
        <h3 className="rit-name madero-name">{MADEROTHERAPIE.nom}</h3>
        <div className="rit-meta madero-meta">
          <span>{MADEROTHERAPIE.duree}</span>
          <span style={{ color: 'var(--gold)', opacity: 0.6 }}>·</span>
          <span className="rit-price madero-price">{MADEROTHERAPIE.prix}</span>
        </div>
        <p className="madero-intro">{MADEROTHERAPIE.intro}</p>

        <div className="madero-rule"></div>

        <button
          className="rit-toggle madero-toggle"
          onClick={() => setOpen(!open)}
          aria-expanded={open}
        >
          <span>{open ? 'Masquer les bienfaits' : 'En savoir plus'}</span>
          <span className={`acc-icon ${open ? 'open' : ''}`}>+</span>
        </button>

        <div className={`rit-steps-panel ${open ? 'open' : ''}`}>
          <ul className="madero-bienfaits">
            {MADEROTHERAPIE.bienfaits.map((b, i) => (
              <li key={i} className="madero-bienfait">
                <span className="madero-dot" aria-hidden>•</span>
                <span className="madero-bienfait-text">
                  <strong>{b.titre}.</strong> {b.texte}
                </span>
              </li>
            ))}
          </ul>
          <a href="#reserver" className="btn-pill madero-reserve">
            Réserver la madérothérapie <span aria-hidden>→</span>
          </a>
        </div>
      </div>

      <div className="madero-image">
        {MADEROTHERAPIE.image ? (
          <img
            src={MADEROTHERAPIE.image}
            alt="Madérothérapie visage — BIO HEAD SPA"
            style={{
              position: 'absolute',
              inset: 0,
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              zIndex: 1,
            }}
            loading="lazy"
            onError={(e) => {
              e.target.style.display = 'none';
              e.target.nextSibling.style.display = 'flex';
            }}
          />
        ) : null}
        <div
          className="ph ph-green"
          style={MADEROTHERAPIE.image ? { display: 'none' } : {}}
        >
          <span className="ph-label">Photo — madérothérapie visage</span>
        </div>
        <span className="madero-tag">{MADEROTHERAPIE.tag}</span>
      </div>
    </Reveal>
  );
}

/* ===========================================================
   TOUT-PETITS
=========================================================== */
function ToutPetits() {
  const [open, setOpen] = useState(false);
  return (
    <Reveal className="rit-toutpetits">
      <div className="tp-image">
        {TOUT_PETITS.image ? (
          <img
            src={TOUT_PETITS.image}
            alt="Rituel tout-petits — BIO HEAD SPA"
            style={{
              position: 'absolute',
              inset: 0,
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              zIndex: 1,
            }}
            loading="lazy"
            onError={(e) => {
              e.target.style.display = 'none';
              e.target.nextSibling.style.display = 'flex';
            }}
          />
        ) : null}
        <div
          className="ph ph-gold"
          style={TOUT_PETITS.image ? { display: 'none' } : {}}
        >
          <span className="ph-label">Photo — rituel tout-petits</span>
        </div>
        <span className="tp-tag">4–11 ans</span>
      </div>
      <div>
        <div className="ornament" style={{ color: 'var(--gold)', fontSize: '0.7rem', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500 }}>
          Pour les enfants
        </div>
        <h3 className="rit-name" style={{ marginTop: '1rem', fontSize: 'clamp(2rem, 3vw, 2.6rem)' }}>
          {TOUT_PETITS.nom}
        </h3>
        <div className="rit-meta" style={{ marginTop: '0.9rem' }}>
          <span>{TOUT_PETITS.duree}</span>
          <span style={{ color: 'var(--gold)', opacity: 0.6 }}>·</span>
          <span className="rit-price">{TOUT_PETITS.prix}</span>
        </div>
        <p className="rit-desc" style={{ marginTop: '1.25rem' }}>{TOUT_PETITS.desc}</p>

        <div className="rit-rule"></div>

        <button className="rit-toggle" onClick={() => setOpen(!open)} aria-expanded={open}>
          <span>{open ? 'Masquer les étapes' : `Voir les ${TOUT_PETITS.etapes.length} étapes`}</span>
          <span className={`acc-icon ${open ? 'open' : ''}`}>+</span>
        </button>

        <div className={`rit-steps-panel ${open ? 'open' : ''}`}>
          <ol className="rit-steps">
            {TOUT_PETITS.etapes.map((e, i) => (
              <li key={i} className="rit-step">
                <span className="rit-step-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="rit-step-text">{e}</span>
              </li>
            ))}
          </ol>
          <a href="#reserver" className="btn-pill rit-reserve">
            Réserver pour mon enfant <span aria-hidden>→</span>
          </a>
        </div>
      </div>
    </Reveal>
  );
}

/* ===========================================================
   SAUNA BANNER
=========================================================== */
function SaunaBanner() {
  return (
    <Reveal className="rit-sauna">
      <div className="sauna-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M7 14c.5-2 2-3 2-5s-1.5-3-1.5-5" />
          <path d="M12 14c.5-2 2-3 2-5s-1.5-3-1.5-5" />
          <path d="M17 14c.5-2 2-3 2-5s-1.5-3-1.5-5" />
          <path d="M4 20h16" />
        </svg>
      </div>
      <div className="sauna-text">
        <strong>Prolongez l'expérience</strong>
        <div className="label">En option sur tous les rituels — hors Tout-Petits</div>
      </div>
      <div className="sauna-meta">
        Sauna <span>·</span> 15 min <span>·</span> 15 €
      </div>
    </Reveal>
  );
}
/* ===========================================================
   BON À SAVOIR — practical info + contre-indications
=========================================================== */
function BonASavoir() {
  const aSavoir = [
    'Confirmez votre venue 24 à 48h avant le rendez-vous.',
    'Règlement en espèces.',
    'Les bijoux et piercings pendants sont à retirer avant la séance.',
    "Pas d'accompagnants — un moment réservé à vous.",
    'Annulation du rendez-vous au-delà de 10 minutes de retard.',
  ];

  const contre = [
    'Extensions de cheveux — risque de décollement.',
    'Plaies ou lésions du cuir chevelu : irritations, coupures, eczéma, psoriasis sévère, mycoses, folliculites.',
    'Fièvre, état grippal ou maladie infectieuse.',
    'Présence de poux ou lentes.',
    'Chirurgie récente au niveau du crâne, du visage ou du cou.',
    'Sensibilité accrue du cuir chevelu — nous adaptons le protocole.',
  ];

  return (
    <Reveal as="section" className="rit-savoir">
      <header className="rit-savoir-head">
        <span className="ornament">Bon à savoir</span>
        <h3>Quelques <em>Précisions</em> Avant de Vous Accueillir</h3>
      </header>

      <div className="rit-savoir-grid">

        <article className="rit-savoir-card">
          <div className="rit-savoir-icon" aria-hidden>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 22c0-6 3-10 9-12-2 8-5 11-9 12z"/>
              <path d="M12 22c0-6-3-10-9-12 2 8 5 11 9 12z"/>
              <path d="M12 22V10"/>
            </svg>
          </div>
          <div className="label">À savoir avant votre séance</div>
          <h4>Le rituel commence avant la porte.</h4>
          <ul className="rit-savoir-list">
            {aSavoir.map((t, i) => (
              <li key={i}>
                <span className="rit-savoir-mark" aria-hidden></span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </article>

        <article className="rit-savoir-card rit-savoir-card--contre">
          <div className="rit-savoir-icon" aria-hidden>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="9"/>
              <line x1="6.5" y1="6.5" x2="17.5" y2="17.5"/>
            </svg>
          </div>
          <div className="label">Contre-indications</div>
          <h4>Pour votre sécurité, certaines situations nous amènent à reporter.</h4>
          <ul className="rit-savoir-list">
            {contre.map((t, i) => (
              <li key={i}>
                <span className="rit-savoir-mark rit-savoir-mark--x" aria-hidden></span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <p className="rit-savoir-foot">
            En cas de doute, contactez-nous : nous adapterons votre séance avec bienveillance.
          </p>
        </article>

      </div>
    </Reveal>
  );
}

/* ===========================================================
   CARTE CADEAU
=========================================================== */
function CarteCadeau() {
  return (
    <Reveal className="rit-cadeau">
      <span className="ornament" aria-hidden="true">Carte cadeau</span>
      <h3>Offrez Une <em>Parenthèse</em></h3>
      <p>
        Toutes nos formules sont disponibles en carte cadeau,
        à offrir pour célébrer, remercier, ou simplement faire du bien. Disponible en institut ou par mail
      </p>
      <div className="cadeau-contact">
        <span className="cadeau-contact-label">Commandez par</span>
        <div className="cadeau-contact-links">
          <a href="mailto:bioheadspa@gmail.com" className="cadeau-link">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            <span>bioheadspa@gmail.com</span>
          </a>
          <span className="cadeau-sep" aria-hidden="true">·</span>
          <a href="tel:+32491495753" className="cadeau-link">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span>+32 491 49 57 53</span>
          </a>
        </div>
      </div>
    </Reveal>
  );
}

/* ===========================================================
   PLANITY WIDGET LOADER
=========================================================== */
function PlanityWidget() {
  useEffect(() => {
    // Évite de charger le script deux fois
    if (document.getElementById('planity-script')) return;

    const container = document.getElementById('myContainerId');
    if (!container) return;

    window.planity = {
      key: '-Oqu1CNY7hyqb9SDGUTy',
      primaryColor: '#3f0919',
      appointmentContainer: container,
      options: { countryCode: 'BE' },
    };

    const polyfills = document.createElement('script');
    polyfills.src = 'https://d2skjte8udjqxw.cloudfront.net/widget/production/2/polyfills.latest.js';
    document.body.appendChild(polyfills);

    const app = document.createElement('script');
    app.id = 'planity-script';
    app.src = 'https://d2skjte8udjqxw.cloudfront.net/widget/production/2/app.latest.js';
    document.body.appendChild(app);
  }, []);

  return (
    <section className="rit-section" style={{ paddingTop: '3rem' }} id="reserver">
      <div className="rit-section-inner" style={{ maxWidth: 900 }}>
        <Reveal className="text-center" style={{ marginBottom: '2.5rem' }}>
          <div className="ornament justify-center inline-flex" style={{ color: 'var(--gold)' }}>
            <span className="label" style={{ color: 'var(--gold)' }}>Réservation en ligne</span>
          </div>
          <h2 className="h-section" style={{ marginTop: '1.25rem' }}>Réservez Votre <em>Parenthèse</em></h2>
          <p style={{ color: 'var(--muted)', fontSize: '1rem', lineHeight: 1.8, marginTop: '0.75rem', maxWidth: 480, marginLeft: 'auto', marginRight: 'auto' }}>
            Choisissez votre rituel, votre créneau, et laissez-vous guider. Confirmation instantanée.
          </p>
        </Reveal>
        <Reveal delay={0.15}>
          <div className="rit-planity-wrapper">
            <div id="myContainerId"></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===========================================================
   NAVIGATION
=========================================================== */
function PageNav() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: 'index.html', label: 'Accueil' },
    { href: 'index.html#avis', label: 'Avis' },
    { href: 'index.html#contact', label: 'Contact' },
  ];

  return (
    <>
      <header
        className="fixed top-0 left-0 right-0 z-50 transition-all duration-500"
        style={{
          background: scrolled ? 'rgba(250, 246, 241, 0.92)' : 'transparent',
          backdropFilter: scrolled ? 'blur(12px)' : 'none',
          boxShadow: scrolled ? '0 1px 0 rgba(26,26,26,0.06), 0 10px 30px -20px rgba(26,26,26,0.15)' : 'none',
        }}
      >
        <div className="max-w-[1400px] mx-auto px-6 lg:px-12 flex items-center justify-between" style={{ height: scrolled ? 72 : 88 }}>
          <a href="index.html" className="font-display text-xl" style={{ color: 'var(--green)', letterSpacing: '0.12em', whiteSpace: 'nowrap' }}>
            BIO HEAD SPA
          </a>
          <nav className="hidden lg:flex items-center gap-9">
            {links.map((l) => (
              <a
                key={l.label}
                href={l.href}
                className="nav-link"
                style={l.active ? { color: 'var(--green)' } : {}}
              >
                {l.label}
              </a>
            ))}
          </nav>
          <div className="hidden lg:block">
            <a href="#reserver" className="btn-pill small">Réserver</a>
          </div>
          {/* Mobile hamburger */}
          <button
            onClick={() => setMobileOpen(true)}
            className="lg:hidden flex flex-col gap-[5px] p-2"
            aria-label="Ouvrir le menu"
          >
            <span style={{ width: 26, height: 1.5, background: 'var(--green)' }}></span>
            <span style={{ width: 26, height: 1.5, background: 'var(--green)' }}></span>
            <span style={{ width: 18, height: 1.5, background: 'var(--green)' }}></span>
          </button>
        </div>
      </header>

      {/* Mobile drawer */}
      <div
        className="lg:hidden fixed top-0 right-0 bottom-0 z-[60]"
        style={{
          width: '80%',
          maxWidth: 360,
          background: 'var(--bg)',
          transform: mobileOpen ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)',
        }}
      >
        <div className="flex flex-col h-full p-8">
          <div className="flex items-center justify-between mb-12">
            <span className="font-display text-lg" style={{ color: 'var(--green)', letterSpacing: '0.12em' }}>BIO HEAD SPA</span>
            <button onClick={() => setMobileOpen(false)} aria-label="Fermer" className="text-3xl font-light" style={{ color: 'var(--green)' }}>×</button>
          </div>
          <nav className="flex flex-col gap-6">
            {links.map((l) => (
              <a key={l.label} href={l.href} onClick={() => setMobileOpen(false)} className="nav-link" style={{ fontSize: '0.95rem' }}>{l.label}</a>
            ))}
          </nav>
          <a href="#reserver" onClick={() => setMobileOpen(false)} className="btn-pill mt-10 justify-center">Réserver</a>
        </div>
      </div>
      {mobileOpen && (
        <div onClick={() => setMobileOpen(false)} className="lg:hidden fixed inset-0 z-[55]" style={{ background: 'rgba(26,26,26,0.4)' }} />
      )}
    </>
  );
}

/* ===========================================================
   FOOTER
=========================================================== */
function PageFoot() {
  return (
    <footer style={{ background: 'var(--footer-bg)', color: 'var(--footer-text)', padding: '3rem 1.5rem 2rem' }}>
      <div className="max-w-[1280px] mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
        <div>
          <div className="font-display text-[1.3rem]" style={{ color: 'var(--cream)', letterSpacing: '0.1em' }}>BIO HEAD SPA</div>
          <div className="label mt-2" style={{ color: 'var(--footer-text)', fontSize: '0.7rem' }}>
            Rue de l'Industrie 181, 7080 Frameries · +32 491 495 753
          </div>
        </div>
        <div className="flex items-center gap-6">
          <a href="index.html" className="f-link">← Retour à l'accueil</a>
          <a href="#reserver" className="f-link" style={{ color: 'var(--gold)' }}>Réserver</a>
        </div>
      </div>
    </footer>
  );
}

/* ===========================================================
   MAIN — UNE SEULE FONCTION NosRituels
=========================================================== */
function NosRituels() {
  const [openId, setOpenId] = useState(null);

  return (
    <main className="rit-page">
      {/* Hero */}
      <section className="rit-section" style={{ paddingBottom: '4rem' }}>
        <div className="rit-section-inner">
          <Reveal className="rit-hero">
            <span className="ornament">Nos Rituels</span>
            <h2 className="h-section">Nos Soins, Une Même <em>Promesse</em></h2>
            <p>
              Votre rituel commence par <strong style={{ color: 'var(--green)' }}> une boisson de bienvenue au choix </strong> et 
              <strong style={{ color: 'var(--green)' }}> d'un diagnostic personnalisé de votre cuir chevelu. </strong> 
              On adapte les gestes, les soins et la durée à ce dont vous avez vraiment besoin.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Grid des rituels */}
      <section className="rit-section">
        <div className="rit-section-inner">
          <div className="rit-grid">
            {RITUELS.map((r, i) => (
              <RitualCard
                key={r.id}
                ritual={r}
                index={i}
                isOpen={openId === r.id}
                onToggle={() => setOpenId(openId === r.id ? null : r.id)}
              />
            ))}
          </div>

          <SaunaBanner />
          <Maderotherapie />
          <ToutPetits />
          <BonASavoir />
          <CarteCadeau />
        </div>
      </section>

      {/* Réservation Planity */}
      <PlanityWidget />
    </main>
  );
}
/* ===========================================================
   APP
=========================================================== */
function App() {
  return (
    <>
      <PageNav />
      <NosRituels />
      <PageFoot />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);