/* sections.jsx — Les maux par les mots
   All content sections for the one-pager. Each section is a function component
   exported to window for app.jsx to compose.
*/

// ─── DATA ────────────────────────────────────────────────────────────────

const PROBLEMATIQUES = [
  {
    cat: "Émotions & bien-être",
    items: [
      { t: "Stress, anxiété, ruminations", d: "Apaiser un mental qui tourne, retrouver de la respiration au quotidien." },
      { t: "Confiance et estime de soi", d: "Sortir de relations toxiques, reposer ses bases, retrouver sa juste place." },
      { t: "Sommeil & détente profonde", d: "Renouer avec un sommeil réparateur, sans culpabilité ni performance." },
      { t: "Harcèlement scolaire", d: "Un cadre sécurisant pour les adolescents et les enfants, à leur rythme." },
    ],
  },
  {
    cat: "Habitudes & comportements",
    items: [
      { t: "Arrêt du tabac", d: "Reprendre le contrôle, libérer le corps et l'esprit, en peu de séances." },
      { t: "Gestion du poids", d: "Calmer les compulsions, retrouver une relation apaisée à la nourriture." },
      { t: "Addictions", d: "Alcool, écrans : déconstruire les automatismes, à votre rythme." },
      { t: "Schémas répétitifs", d: "Identifier les boucles, ouvrir d'autres portes, choisir autrement." },
    ],
  },
  {
    cat: "Santé & accompagnement médical",
    items: [
      { t: "Douleur chronique ou aiguë", d: "Fibromyalgie, migraines, douleurs persistantes : moduler la perception." },
      { t: "Préparation aux soins", d: "Avant une intervention médicale ou dentaire, traverser plus sereinement." },
      { t: "Phobies des soins", d: "Dentiste, hôpital, aiguilles, avion : désamorcer ce qui se fige." },
      { t: "Cancer & maladie", d: "Un soutien complémentaire, en lien avec votre équipe médicale." },
    ],
  },
  {
    cat: "Développement personnel",
    items: [
      { t: "Motivation & créativité", d: "Réveiller son élan, retrouver de l'envie, oser commencer." },
      { t: "Préparation aux examens", d: "Performances sportives, artistiques, oratoires : être prêt le jour J." },
      { t: "Croyances limitantes", d: "Mettre en lumière ce qui freine, faire de la place pour autre chose." },
      { t: "Transitions de vie", d: "Deuil, séparation, reconversion : avancer pas à pas, en sécurité." },
    ],
  },
];

const TESTIMONIALS = [
  { name: "Lou R.", initial: "L", q: "J'ai fait appel à Nadia pour tenter de mieux gérer mon stress et mon anxiété, notamment en période d'examens. Les séances m'ont grandement aidée à prendre du recul et à mettre en place des outils concrets pour apaiser mon stress. Je me sens aujourd'hui plus sereine et plus confiante face aux situations stressantes. Nadia est une personne bienveillante, douce, à l'écoute et très professionnelle. Je recommande vivement son accompagnement !", tag: "Stress & examens" },
  { name: "Dominique F.", initial: "D", q: "En deux séances seulement, Nadia avec son savoir-faire, son professionnalisme et sa gentillesse m'a débarrassé du poison qu'était la cigarette. Si vous aussi vous voulez soigner un mal qui est en vous, n'hésitez pas à contacter Nadia. Elle saura vous mettre à l'aise et guérira vos maux.", tag: "Arrêt du tabac" },
  { name: "Mélodie P.", initial: "M", q: "Je suis suivie par Mme Nadia Postorino depuis janvier 2026, et encore suivie. Pour ma part c'est une professionnelle de confiance — je suis suivie pour anxiété et autres, elle n'hésite pas à revoir ses séances si on ajoute de nouveaux maux. Je me sens écoutée et les séances m'apaisent.", tag: "Anxiété" },
  { name: "Sandra R.", initial: "S", q: "J'ai fait appel à cette thérapeute dans une période difficile de ma vie, je venais d'apprendre que j'avais un cancer... L'angoisse, la peur, le stress — un ensemble de sentiments difficiles à gérer. Après la première séance j'ai déjà senti un mieux. Nous nous sommes vues environ 1 fois par semaine, parfois 2, pour appréhender mes deux opérations et un conditionnement pour mes séances de radiothérapie (très utile). Madame Postorino est très professionnelle et très humaine. Merci beaucoup pour votre aide, votre professionnalisme et votre disponibilité.", tag: "Accompagnement médical" },
  { name: "Shona J.", initial: "S", q: "Très bonne expérience. Elle est à l'écoute, bienveillante et met rapidement en confiance. Les séances m'ont vraiment aidée à avancer sur mes problématiques. Je recommande sans hésiter !", tag: "Bien-être général" },
  { name: "Bettina S.", initial: "B", q: "Victime d'une violente chute en randonnée l'été dernier, j'ai sollicité Nadia, ne parvenant plus à trouver un sommeil paisible. Après une écoute attentive et douce elle a mené avec professionnalisme la séance me permettant ainsi de prendre de la distance avec cet accident et de mieux dormir. Je la recommande.", tag: "Sommeil & traumatisme" },
  { name: "Audrey L.", initial: "A", q: "Grâce au professionnalisme, l'implication et la patience de Nadia, cela fait maintenant 10 mois que je n'ai pas touché une cigarette. Je recommande vivement. Sa joie de vivre fait un bien fou.", tag: "Arrêt du tabac" },
  { name: "Grégory I.", initial: "G", q: "J'ai consulté Nadia pour l'arrêt du tabac et j'ai beaucoup apprécié son approche douce, professionnelle et personnalisée. Elle prend le temps de comprendre notre parcours et propose un accompagnement sérieux, sans jugement. Grâce à son suivi, j'ai pu avancer sereinement et durablement. Je recommande vivement à toute personne souhaitant arrêter de fumer avec une méthode respectueuse et efficace.", tag: "Arrêt du tabac" },
  { name: "Aline S.", initial: "A", q: "Je recommande vivement cette hypnothérapeute. Dès la première séance, je me suis sentie en confiance, écoutée et mes problématiques comprises. Les séances m'ont permis de faire de vrais progrès, notamment sur la gestion de mes émotions liés à l'alimentation ainsi que sur la gestion de la colère. On ressort apaisée des séances et avec des outils concrets. Un grand merci pour cet accompagnement de qualité !", tag: "Émotions & alimentation" },
  { name: "Nina R.", initial: "N", q: "Nadia est une hypnothérapeute dotée d'une grande sensibilité — elle arrive à déceler rapidement les points de blocage (pour moi problème de poids). Approche très positive, à l'écoute, climat de confiance dès le premier rendez-vous.", tag: "Gestion du poids" },
  { name: "Béatrice R.", initial: "B", q: "Je suis heureuse et reconnaissante d'avoir croisé Nadia sur mon chemin. Elle a su me mettre en confiance dès la première séance et a été le coup de pouce dont j'avais besoin pour guérir de mes blessures (angoisse et manque de confiance en moi) et avancer plus sereinement. Merci infiniment, plein de bonheur dans vos projets.", tag: "Confiance en soi" },
  { name: "Sue-ellen J.", initial: "S", q: "J'ai eu une expérience vraiment très positive avec cette séance d'hypnose. Dès le début, je me suis sentie en confiance grâce à une approche douce, bienveillante et très professionnelle. Les effets ont été concrets dès les premiers jours : plus de calme, un meilleur état d'esprit et une vraie sensation d'apaisement. Un grand merci pour cet accompagnement de qualité.", tag: "Apaisement & calme" },
  { name: "Séverine R.", initial: "S", q: "Une praticienne qui connaît son sujet ; très à l'écoute et bienveillante. Je recommande sans hésiter.", tag: "Bien-être général" },
  { name: "Bettina G.", initial: "B", q: "J'ai beaucoup de confiance en cette praticienne et je peux bien recommander ce cabinet. Une atmosphère calme, agréable et renforçante.", tag: "Cabinet & confiance" },
];

const STEPS = [
  { n: "01", t: "Accueil & échange", d: "Nous prenons le temps de comprendre ce qui vous amène, vos attentes, votre histoire. Aucun jugement, aucun sujet trop petit." },
  { n: "02", t: "Mise en relaxation", d: "Guidée par la voix, votre attention se recentre. Le corps se détend, l'esprit s'ouvre. Vous restez conscient·e et libre à chaque instant." },
  { n: "03", t: "Travail sur mesure", d: "Suggestions positives, métaphores, visualisations : adaptées à votre situation, à ce qui fait sens pour vous, jamais à un protocole tout fait." },
  { n: "04", t: "Retour & intégration", d: "Nous échangeons sur ce qui s'est passé, ce que vous avez ressenti, et préparons les prochaines étapes — à votre rythme." },
];

// ─── SECTIONS ────────────────────────────────────────────────────────────

function Nav({ onScrollTo }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [menuOpen]);

  const links = [
    { id: 'about', label: 'À propos' },
    { id: 'hypnose', label: 'L\'hypnose' },
    { id: 'problematiques', label: 'Problématiques' },
    { id: 'avis', label: 'Témoignages' },
    { id: 'infos', label: 'Infos pratiques' },
  ];
  const close = () => setMenuOpen(false);

  return (
    <>
      <nav className={`nav${scrolled ? ' nav--scrolled' : ''}`}>
        <div className="nav-inner">
          <a href="#top" className="brand" onClick={close}>
            <span className="brand-text">Maux <span style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>&</span> mot</span>
          </a>
          <div className="nav-links">
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`}>{l.label}</a>
            ))}
          </div>
          <div className="nav-cta">
            <a href="#contact" className="btn btn-terra">
              Prendre rendez-vous
              <span className="btn-arrow">→</span>
            </a>
          </div>
          <button
            className={`nav-burger${menuOpen ? ' open' : ''}`}
            onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
            aria-expanded={menuOpen}
          >
            <span /><span /><span />
          </button>
        </div>
      </nav>
      {menuOpen && (
        <div className="nav-drawer" role="dialog" aria-modal="true">
          <nav className="nav-drawer-links">
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`} onClick={close}>{l.label}</a>
            ))}
          </nav>
          <div className="nav-drawer-cta">
            <a href="#contact" className="btn btn-terra" onClick={close}>Prendre rendez-vous →</a>
            <a href="tel:+33" className="btn btn-ghost" onClick={close}>Appeler le cabinet</a>
          </div>
        </div>
      )}
    </>
  );
}

// ─── HERO Variants ───────────────────────────────────────────────────────

function HeroEditorial({ headlineKey, headlines }) {
  const h = headlines && headlines[headlineKey];
  const isCustom = h && h.mode === 'custom';
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">Hypnothérapeute · PNL</span>
            <h1 className="hero-h1" style={{ marginTop: 18 }}>
              {isCustom ? (
                <>{h.parts[0]}<br /><em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>{h.parts[1]}</em></>
              ) : (
                <>Et si les <span className="it">mots</span><br />apaisaient<br />les <span className="underline">maux</span>&nbsp;?</>
              )}
            </h1>
            <p className="hero-desc" style={{ maxWidth: 480, marginTop: 28, fontSize: 17, lineHeight: 1.55 }}>
              Nadia vous accueille dans un cadre bienveillant et sécurisant à
              Puttelange-aux-Lacs. Femmes, adolescents, enfants, hommes : retrouvez votre
              équilibre, à votre rythme.
            </p>
            <div className="hero-btns" style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <a href="#contact" className="btn btn-primary">
                Réserver une séance
                <span className="btn-arrow">→</span>
              </a>
              <a href="#hypnose" className="btn btn-ghost">Découvrir l'hypnose</a>
            </div>
            <div className="hero-meta">
              <span>5/5 <span className="stars">★★★★★</span></span>
              <span className="hero-meta-sep" />
              <span>15 avis vérifiés</span>
              <span className="hero-meta-sep" />
              <span>Resalib certifié</span>
            </div>
          </div>
          <div>
            <div className="hero-img imgph sage has-src" data-label=""
                 style={{ "--src": "url('uploads/banniere1.jpg')", backgroundImage: "var(--src)" }}>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 14 }}>
              <div className="card-sage" style={{ padding: '20px 22px', borderRadius: 18 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.7 }}>Cabinet</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginTop: 6, lineHeight: 1.25 }}>
                  15 rue de la plage,<br />Puttelange-aux-Lacs
                </div>
              </div>
              <div className="card-terra" style={{ padding: '20px 22px', borderRadius: 18 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.8 }}>Tarif</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginTop: 6, lineHeight: 1.25 }}>
                  60 — 80&nbsp;€<br /><span style={{ fontSize: 13, opacity: 0.85 }}>selon la séance</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroFullbleed({ headlineKey, headlines }) {
  const h = headlines && headlines[headlineKey];
  const isCustom = h && h.mode === 'custom';
  return (
    <section className="hero" id="top" style={{ paddingTop: 0, paddingBottom: 24 }}>
      <div className="hero-fullbleed">
        <div className="imgph sage has-src" data-label=""
             style={{ "--src": "url('uploads/banniere1.jpg')", backgroundImage: "var(--src)", backgroundSize: 'cover', backgroundPosition: 'center' }} />
        <div className="hero-content">
          <span className="eyebrow" style={{ color: 'rgba(255,255,255,.85)' }}>Hypnothérapie à Puttelange-aux-Lacs</span>
          <h1 style={{ marginTop: 22, fontSize: 'clamp(48px, 7vw, 92px)' }}>
            {isCustom ? (
              <>{h.parts[0]}<br /><em style={{ fontFamily: 'var(--font-serif)' }}>{h.parts[1]}</em></>
            ) : (
              <>Changez d'esprit,<br /><em style={{ fontFamily: 'var(--font-serif)' }}>changez de vie.</em></>
            )}
          </h1>
          <p style={{ color: 'rgba(255,255,255,.85)', maxWidth: 560, marginTop: 22, fontSize: 17 }}>
            Un accompagnement doux, professionnel et profondément humain pour traverser
            ce qui pèse — et retrouver votre liberté intérieure.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="#contact" className="btn btn-terra">Réserver une séance →</a>
            <a href="#hypnose" className="btn" style={{ background: 'rgba(255,255,255,.12)', color: '#fff', border: '1px solid rgba(255,255,255,.25)' }}>
              Comment ça se passe&nbsp;?
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroEdit({ headlineKey, headlines }) {
  const h = headlines && headlines[headlineKey];
  const isCustom = h && h.mode === 'custom';
  return (
    <section className="hero hero-edit" id="top" style={{ padding: 0 }}>
      <div className="hero-edit-top">
        <span className="eyebrow" style={{ justifyContent: 'center' }}>Nadia Postorino · Hypnothérapeute</span>
        <h1 style={{ marginTop: 24 }}>
          {isCustom ? (
            <>{h.parts[0]}<br /><em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>{h.parts[1]}</em></>
          ) : (
            <>Les maux,<br /><em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>par les mots.</em></>
          )}
        </h1>
        <p style={{ maxWidth: 620, margin: '28px auto 0', fontSize: 17 }}>
          Hypnothérapeute à Puttelange-aux-Lacs. Pour les adultes, les
          adolescents et les enfants — dans un cadre bienveillant et sécurisant.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#contact" className="btn btn-primary">Prendre rendez-vous →</a>
          <a href="#hypnose" className="btn btn-ghost">Découvrir la pratique</a>
        </div>
      </div>
      <div className="hero-edit-bottom">
        <div style={{ '--i': 0 }}>
          <div className="eyebrow">Approche</div>
          <h3 style={{ marginTop: 12 }}>Hypnothérapeute <span className="flourish">&amp;</span> PNL</h3>
          <p style={{ marginTop: 8 }}>Une pratique moderne, douce, en pleine conscience.</p>
        </div>
        <div style={{ '--i': 1 }}>
          <div className="eyebrow">Expérience</div>
          <h3 style={{ marginTop: 12 }}>+ de 20 ans en gendarmerie</h3>
          <p style={{ marginTop: 8 }}>Spécialisée dans les violences intrafamiliales.</p>
        </div>
        <div style={{ '--i': 2 }}>
          <div className="eyebrow">Avis</div>
          <h3 style={{ marginTop: 12 }}>5,0 <span className="flourish">/</span> 5 — 15 avis</h3>
          <p style={{ marginTop: 8 }}>Avis vérifiés sur Resalib.</p>
        </div>
      </div>
    </section>
  );
}

// ─── VALUES STRIP ────────────────────────────────────────────────────────

function ValuesStrip() {
  const items = ["Bienveillance", "Sécurité", "Écoute", "Confidentialité", "Cadre éthique", "Humanité"];
  return (
    <div className="container" style={{ marginTop: 32 }}>
      <div className="values-strip">
        {items.map((it, i) => (
          <React.Fragment key={it}>
            <span className="value-item">
              <span className="star">✦</span>
              <em style={{ fontStyle: 'italic' }}>{it}</em>
            </span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ─── ABOUT ───────────────────────────────────────────────────────────────

function About() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="hero-img imgph terra has-src" data-label=""
               style={{ "--src": "url('uploads/banniere2.jpg')", backgroundImage: "var(--src)", backgroundSize: 'cover', backgroundPosition: 'center', aspectRatio: '4/5' }} />
          <div>
            <span className="eyebrow">À propos · Nadia Postorino</span>
            <h2 style={{ marginTop: 18 }}>
              Vingt ans à protéger.<br />
              <em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>Aujourd'hui, à accompagner.</em>
            </h2>
            <p style={{ marginTop: 24, fontSize: 17 }}>
              Avant l'hypnose, j'ai exercé plus de vingt ans dans la Gendarmerie, en
              brigade et en maison de protection des familles, spécialisée dans les
              violences intrafamiliales. J'ai accompagné des femmes, des adolescents et
              des enfants dans certains des moments les plus difficiles de leur vie.
            </p>
            <p style={{ marginTop: 16, fontSize: 17 }}>
              C'est cette expérience humaine qui guide aujourd'hui ma pratique :
              un cadre vraiment sécurisant, du respect, du temps, et la conviction que
              chaque histoire mérite d'être entendue sans jugement.
            </p>

            <div className="stats-grid">
              <div>
                <div className="stat">20<sup>+</sup></div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', marginTop: 8 }}>années d'expérience</div>
              </div>
              <div>
                <div className="stat">30<sup>+</sup></div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', marginTop: 8 }}>séances réalisées</div>
              </div>
              <div>
                <div className="stat">40<sup>+</sup></div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', marginTop: 8 }}>clients accompagnés</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── HYPNOSE ─────────────────────────────────────────────────────────────

function Hypnose() {
  return (
    <section className="section" id="hypnose" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <span className="eyebrow">L'hypnose, simplement</span>
          <h2 style={{ marginTop: 18 }}>
            Une pratique <em style={{ fontFamily: 'var(--font-serif)' }}>douce</em>,<br />
            où vous restez <span style={{ color: 'var(--terra)' }}>libre</span>.
          </h2>
          <p style={{ marginTop: 24, fontSize: 17 }}>
            L'hypnose n'a rien d'un spectacle. C'est un état naturel
            de relaxation profonde, comme lorsque vous êtes absorbé·e par une
            lecture, ou que les kilomètres défilent sans vous en apercevoir. Pendant
            toute la séance, vous restez conscient·e, libre, maître de vos choix.
          </p>
        </div>

        <div className="steps" style={{ marginTop: 56 }}>
          {STEPS.map(s => (
            <div className="step" key={s.n}>
              <div className="step-num">— {s.n}</div>
              <div className="step-title">{s.t}</div>
              <div className="step-desc">{s.d}</div>
            </div>
          ))}
        </div>

        <div className="hypnose-cards">
          <div className="card-sage">
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,.7)' }}>Bon à savoir</span>
            <h3 style={{ marginTop: 14, fontSize: 26 }}>Vous restez maître de vous-même.</h3>
            <p style={{ color: 'rgba(255,255,255,.85)', marginTop: 12 }}>
              Pas de perte de contrôle, pas de manipulation. L'hypnothérapeute
              vous accompagne par la voix, mais c'est vous qui faites le travail
              toujours dans le respect de ce que vous êtes prêt·e à explorer.
            </p>
          </div>
          <div className="card" style={{ background: 'var(--bg)' }}>
            <span className="eyebrow">Durée & rythme</span>
            <h3 style={{ marginTop: 14, fontSize: 26 }}>Une à plusieurs séances.</h3>
            <p style={{ marginTop: 12 }}>
              Selon la problématique, quelques séances suffisent (par exemple
              pour l'arrêt du tabac). Pour d'autres situations, un suivi plus
              long peut être proposé. Toujours à votre rythme.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── PROBLEMATIQUES ──────────────────────────────────────────────────────

function Problematiques() {
  const [active, setActive] = React.useState(0);
  const gridRef = React.useRef(null);
  const mounted = React.useRef(false);
  const cat = PROBLEMATIQUES[active];

  React.useEffect(() => {
    if (!mounted.current) { mounted.current = true; return; }
    const cells = gridRef.current?.querySelectorAll('.prob-cell') ?? [];
    cells.forEach((cell, i) => {
      cell.style.setProperty('--rv-d', (i * 60) + 'ms');
      cell.classList.remove('rv-enter');
      void cell.offsetWidth;
      cell.classList.add('rv-enter');
    });
  }, [active]);

  return (
    <section className="section" id="problematiques">
      <div className="container">
        <div className="prob-head">
          <div>
            <span className="eyebrow">Problématiques accompagnées</span>
            <h2 style={{ marginTop: 18 }}>
              Ce que nous pouvons<br />
              <em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>traverser ensemble.</em>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, maxWidth: 480, marginLeft: 'auto' }}>
              Quatre grandes familles, un même engagement&nbsp;: vous accueillir
              tel·le que vous êtes, sans jugement, et avancer pas à pas vers
              ce qui compte pour vous.
            </p>
          </div>
        </div>

        <div className="tabs" role="tablist">
          {PROBLEMATIQUES.map((p, i) => (
            <button key={p.cat}
                    role="tab"
                    aria-selected={i === active}
                    className={`tab ${i === active ? 'active' : ''}`}
                    onClick={() => setActive(i)}>
              <span className="tab-num">0{i + 1}</span>{p.cat}
            </button>
          ))}
        </div>

        <div ref={gridRef} className="prob-grid">
          {cat.items.map((it, i) => (
            <div className="prob-cell" key={it.t}>
              <div className="prob-cell-num">— {String(i + 1).padStart(2, '0')}</div>
              <div>
                <div className="prob-cell-title">{it.t}</div>
                <div className="prob-cell-desc" style={{ marginTop: 10 }}>{it.d}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                <a href="#contact" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--terra)' }}>
                  En parler ensemble →
                </a>
              </div>
            </div>
          ))}
        </div>

        <p style={{ marginTop: 28, fontSize: 14, color: 'var(--ink-3)', fontStyle: 'italic'}}>
          Votre situation n'est pas listée&nbsp;? L'hypnose accompagne bien d'autres
          domaines, n'hésitez pas à m'en parler par téléphone ou message.
        </p>
      </div>
    </section>
  );
}

// ─── BENEFITS ────────────────────────────────────────────────────────────

function Benefits() {
  const blocks = [
    { t: "Plus de calme", d: "Gestion du stress, sommeil réparateur, émotions plus régulées." },
    { t: "Mieux vivre les soins", d: "Apaiser la douleur, traverser une intervention plus sereinement." },
    { t: "Reprendre le contrôle", d: "Arrêt du tabac, sortie d'addiction, alimentation apaisée." },
    { t: "Retrouver son élan", d: "Confiance, motivation, énergie pour avancer à nouveau." },
  ];
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="card-soft" style={{ padding: 'clamp(36px, 5vw, 64px)', background: 'var(--sage-4)', borderRadius: 'var(--radius-xl)' }}>
          <div className="ben-grid">
            <div>
              <span className="eyebrow">Bénéfices</span>
              <h2 style={{ marginTop: 16, fontSize: 'clamp(32px, 3.5vw, 48px)' }}>
                Ce que <em style={{ fontFamily: 'var(--font-serif)' }}>l'hypnose</em><br />peut <em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>changer</em>.
              </h2>
            </div>
            <div className="ben-list">
              {blocks.map((b, i) => (
                <div key={b.t} style={{ paddingTop: 18, borderTop: '1px solid rgba(43,42,38,.12)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>0{i + 1}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, marginTop: 8, fontWeight: 420, letterSpacing: '-0.01em' }}>{b.t}</div>
                  <p style={{ marginTop: 8, fontSize: 14.5 }}>{b.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── TESTIMONIALS ────────────────────────────────────────────────────────

function Testimonials() {
  const [page, setPage] = React.useState(0);
  const gridRef = React.useRef(null);
  const mounted = React.useRef(false);
  const PER = 3;
  const total = Math.ceil(TESTIMONIALS.length / PER);
  const slice = TESTIMONIALS.slice(page * PER, (page + 1) * PER);

  React.useEffect(() => {
    if (!mounted.current) { mounted.current = true; return; }
    const cards = gridRef.current?.querySelectorAll('.testimonial-card') ?? [];
    cards.forEach((card, i) => {
      card.style.setProperty('--rv-d', (i * 80) + 'ms');
      card.classList.remove('rv-enter');
      void card.offsetWidth;
      card.classList.add('rv-enter');
    });
  }, [page]);

  return (
    <section className="section" id="avis">
      <div className="container">
        <div className="testi-head">
          <div>
            <span className="eyebrow">Témoignages</span>
            <h2 style={{ marginTop: 18 }}>
              Ce qu'en disent
              <em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}> les personnes accompagnées.</em>
            </h2>
          </div>
          <div className="testi-pagination">
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
              {String(page + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
            </div>
            <button className="btn btn-ghost" style={{ width: 44, height: 44, padding: 0 }}
                    onClick={() => setPage((page - 1 + total) % total)} aria-label="Précédent">←</button>
            <button className="btn btn-ghost" style={{ width: 44, height: 44, padding: 0 }}
                    onClick={() => setPage((page + 1) % total)} aria-label="Suivant">→</button>
          </div>
        </div>

        <div ref={gridRef} className="testi-grid">
          {slice.map(t => (
            <div className="testimonial-card" key={t.name}>
              <div className="stars">★★★★★</div>
              <div className="testimonial-quote">« {t.q} »</div>
              <div className="testimonial-meta">
                <div className="testimonial-avatar">{t.initial}</div>
                <div>
                  <div style={{ fontWeight: 500 }}>{t.name}</div>
                  <div style={{ color: 'var(--ink-3)', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 2 }}>{t.tag}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 36, padding: '24px 28px', borderRadius: 'var(--radius)', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div className="stars" style={{ fontSize: 18 }}>★★★★★</div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 450 }}>5/5 sur 15 avis vérifiés</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>Profil et avis certifiés sur Resalib · uniquement clients réels</div>
            </div>
          </div>
          <a className="btn btn-ghost" href="#" target="_blank" rel="noreferrer">Voir tous les avis →</a>
        </div>
      </div>
    </section>
  );
}

// ─── INFO + CONTACT ──────────────────────────────────────────────────────

function Infos() {
  return (
    <section className="section" id="infos" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="info-grid">
          <div>
            <span className="eyebrow">Infos pratiques</span>
            <h2 style={{ marginTop: 18 }}>
              Ce qu'il faut <em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra)' }}>savoir</em><br />
              avant de venir.
            </h2>

            <div style={{ marginTop: 36 }}>
              <div className="kv">
                <div className="kv-k">Lieux</div>
                <div className="kv-v">Au cabinet à Puttelange-aux-Lacs · à domicile sur demande, en Moselle.</div>
              </div>
              <div className="kv">
                <div className="kv-k">Adresse</div>
                <div className="kv-v">15 rue de la plage, 57510 Puttelange-aux-Lacs</div>
              </div>
              <div className="kv">
                <div className="kv-k">Tarifs</div>
                <div className="kv-v">60 — 80&nbsp;€ selon la séance. 18 mutuelles remboursent l'hypnothérapie.</div>
              </div>
              <div className="kv">
                <div className="kv-k">Paiement</div>
                <div className="kv-v">Chèque · espèces.</div>
              </div>
              <div className="kv">
                <div className="kv-k">Public</div>
                <div className="kv-v">Adultes, adolescents, enfants.</div>
              </div>
              <div className="kv">
                <div className="kv-k">Horaires</div>
                <div className="kv-v">Sur rendez-vous. Créneaux plus tardifs possibles, par message, au cas par cas.</div>
              </div>
              <div className="kv">
                <div className="kv-k">Cadre</div>
                <div className="kv-v">Hypnothérapeute soumise à un code de déontologie. N° d'identification : 988&nbsp;033&nbsp;106&nbsp;00010.</div>
              </div>
            </div>
          </div>

          <ContactBlock />
        </div>
      </div>
    </section>
  );
}

function ContactBlock() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('send-mail.php', { method: 'POST', body: new FormData(e.target) });
      const json = await res.json();
      if (json.success) { setStatus('sent'); e.target.reset(); }
      else { setStatus('error'); }
    } catch { setStatus('error'); }
  };

  return (
    <div id="contact" style={{ display: 'grid', gap: 20, alignContent: 'start' }}>
      <div className="booking">
        <span className="eyebrow" style={{ color: 'rgba(240,235,225,.55)' }}>Prendre rendez-vous</span>
        <h3 style={{ fontSize: 30, lineHeight: 1.1, marginTop: 6, fontWeight: 400 }}>
          Faisons connaissance.<br />
          <em style={{ fontFamily: 'var(--font-serif)', color: 'var(--terra-2)' }}>Premier pas, en douceur.</em>
        </h3>
        <p style={{ marginTop: 6 }}>
          Réservez en ligne, ou écrivez-moi un mot — je vous réponds personnellement.
        </p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 8 }}>
          <a className="btn btn-primary" href="https://www.resalib.fr/praticien/114303-nadia-postorino-les-maux-par-les-mots-hypnotherapeute-puttelange-aux-lacs?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAdGRleARfEg5leHRuA2FlbQIxMQBzcnRjBmFwcF9pZA8xMjQwMjQ1NzQyODc0MTQAAaeIYJwex-TjkvlJYPnvNRgIq3nUVKe7hrVlo0t1as_J4lekJeHV2RXfwyAIpA_aem_sVacOIIlCuBrNo5RScRihw">Réserver sur Resalib →</a>
          <a className="btn btn-ghost" href="tel:+33000000000">+33 6 12 34 56 78</a>
        </div>
      </div>

      <form className="card" style={{ background: 'var(--bg)' }} onSubmit={handleSubmit}>
        <span className="eyebrow">Message direct</span>
        <h3 style={{ marginTop: 12, fontSize: 24 }}>Une question, un doute&nbsp;?</h3>
        <p style={{ fontSize: 14, marginTop: 6 }}>Tout échange est confidentiel.</p>
        <div style={{ display: 'grid', gap: 10, marginTop: 20 }}>
          <input name="prenom" className="input" placeholder="Votre prénom" required disabled={status === 'sending' || status === 'sent'} />
          <input name="email" type="email" className="input" placeholder="Adresse e-mail" required disabled={status === 'sending' || status === 'sent'} />
          <textarea name="message" className="input" placeholder="Quelques mots sur votre demande…" rows={4} required disabled={status === 'sending' || status === 'sent'} />
          <button className="btn btn-terra" type="submit" disabled={status === 'sending' || status === 'sent'} style={{ marginTop: 6 }}>
            {status === 'sent'    ? "Message envoyé · merci 🤍"
           : status === 'sending' ? "Envoi en cours…"
           : status === 'error'   ? "Erreur — réessayez →"
           :                        "Envoyer le message →"}
          </button>
          {status === 'error' && (
            <p style={{ fontSize: 13, color: 'var(--terra)', marginTop: 4 }}>
              Une erreur est survenue. Vérifiez votre connexion ou contactez-nous directement par téléphone.
            </p>
          )}
        </div>
        <style>{`
          .input{
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: var(--bg-2);
            font: inherit; color: inherit;
            outline: none;
            transition: border-color .2s, background .2s;
          }
          .input:focus{ border-color: var(--terra); background: var(--bg); }
          .input:disabled{ opacity: .55; cursor: not-allowed; }
        `}</style>
      </form>
    </div>
  );
}

// ─── FOOTER ─────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-brand-big">
          <span className="fbb-line" style={{ '--i': 0 }}>Changez d'esprit,</span>
          <em className="fbb-line" style={{ '--i': 1 }}>changez de vie.</em>
        </div>
        <div className="footer-grid" style={{ marginTop: 40 }}>
          <div className="footer-col">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <span className="brand-mark" style={{ background: 'var(--terra)' }}>n</span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18 }}>Les maux par les mots</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, marginTop: 2 }}>Nadia Postorino · Hypnothérapeute</div>
              </div>
            </div>
            <p style={{ color: 'rgba(240,235,225,.6)', maxWidth: 320, fontSize: 14 }}>
              Hypnothérapeute &amp; PNL à Puttelange-aux-Lacs (Moselle).
              Adultes, adolescents, enfants — dans un cadre bienveillant et sécurisant.
            </p>
          </div>
          <div className="footer-col">
            <h4>Naviguer</h4>
            <div style={{ display: 'grid', gap: 10 }}>
              <a href="#about">À propos</a>
              <a href="#hypnose">L'hypnose</a>
              <a href="#problematiques">Problématiques</a>
              <a href="#avis">Témoignages</a>
              <a href="#infos">Infos pratiques</a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Cabinet</h4>
            <div style={{ display: 'grid', gap: 10, color: 'rgba(240,235,225,.78)', fontSize: 14 }}>
              <span>15 rue de la plage</span>
              <span>57510 Puttelange-aux-Lacs</span>
              <span>Sur rendez-vous</span>
            </div>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <div style={{ display: 'grid', gap: 10 }}>
              <a href="https://www.resalib.fr/praticien/114303-nadia-postorino-les-maux-par-les-mots-hypnotherapeute-puttelange-aux-lacs?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAdGRleARfEg5leHRuA2FlbQIxMQBzcnRjBmFwcF9pZA8xMjQwMjQ1NzQyODc0MTQAAaeIYJwex-TjkvlJYPnvNRgIq3nUVKe7hrVlo0t1as_J4lekJeHV2RXfwyAIpA_aem_sVacOIIlCuBrNo5RScRihw">Réserver sur Resalib</a>
              <a href="tel:+33">+33 6 12 34 56 78</a>
              <a href="mailto:contact@lesmauxparlesmots.fr">contact@lesmauxparlesmots.fr</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 · Les maux par les mots</span>
          <a href="/mentions-legales">Mentions légales</a>
        </div>
      </div>
    </footer>
  );
}

// expose
Object.assign(window, {
  Nav, HeroEditorial, HeroFullbleed, HeroEdit,
  ValuesStrip, About, Hypnose, Problematiques,
  Benefits, Testimonials, Infos, Footer,
});