const { useState, useEffect, useRef } = React;

// Pull shared atoms / icons from window (populated by shared.jsx)
const {
  MV_Header: Header,
  MV_Footer: Footer,
  MV_BackToTop: BackToTop,
  MV_SectionLabel: SectionLabelBase,
  MV_Ornament: Ornament,
  MV_Stat: Stat,
  MV_PhoneFrame: PhoneFrame,
  MV_FigCaption: FigCaptionBase,
  MV_Lightbox: Lightbox,
  MV_Zoomable: Zoomable,
  MV_ArrowRight: ArrowRight,
  MV_ArrowDown: ArrowDown,
  MV_ArrowUpRight: ArrowUpRight,
  MV_IconDownloadSmall: IconDownloadSmall,
  MV_Check: Check,
  MV_IconWebsite: IconWebsite,
  MV_IconDownload: IconDownload,
  MV_IconBook: IconBook,
  MV_IconFilm: IconFilm,
  MV_IconShield: IconShield,
  MV_IconLock: IconLock,
  MV_IconClock: IconClock,
} = window;

/* =========================================================================
   TWEAKS
   ========================================================================= */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "numbering": "arabic",
  "conclusionTone": "cream",
  "showFigCaptions": true
}/*EDITMODE-END*/;

const ACCENTS = {
  gold:      { name: "Or classique",  c1: "#c9a55c", c2: "#e2c98a", c3: "#a8854a" },
  champagne: { name: "Champagne",     c1: "#d6b98a", c2: "#ead9b8", c3: "#b69a6d" },
  rosegold:  { name: "Or rosé",       c1: "#d8a48a", c2: "#ecc9b8", c3: "#b8836a" },
};

// Wrap shared atoms with tweak-aware variants
function SectionLabel({ n, children }) {
  const t = window._tw || TWEAK_DEFAULTS;
  return <SectionLabelBase n={n} numbering={t.numbering}>{children}</SectionLabelBase>;
}
function FigCaption({ children }) {
  const t = window._tw || TWEAK_DEFAULTS;
  return <FigCaptionBase show={t.showFigCaptions}>{children}</FigCaptionBase>;
}

/* =========================================================================
   1. HERO
   ========================================================================= */
function Hero() {
  return (
    <section className="hero" data-screen-label="01 Accroche">
      <div className="hero__glow" aria-hidden="true"></div>
      <div className="hero__inner">
        <div className="hero__eyebrow">
          <span className="hero__eyebrow-line"></span>
          <span>Un service offert par votre agence funéraire</span>
          <span className="hero__eyebrow-line"></span>
        </div>

        <img src="assets/logo-mv.png" alt="Mémoire Vive" className="hero__logo" />

        <h1 className="hero__tagline">
          Pour que la mémoire<br/>soit toujours <em>vivante</em>.
        </h1>

        <p className="hero__sub">
          Un espace numérique d'hommage où famille, proches et connaissances
          rassemblent — avant, pendant et après la cérémonie — les mots, photos
          et souvenirs qui composent une vie.
        </p>

        <p className="hero__promise">
          Pour en composer un <em>site web</em> à partager,
          un <em>livre relié</em> à conserver,
          un <em>film d'hommage</em> à projeter.
        </p>

        <div className="hero__actions">
          <a href="#comment" className="btn btn--ghost">
            Découvrir le service
            <ArrowDown />
          </a>
          <a href="#demo" className="btn btn--gold">
            Voir une démonstration
            <ArrowRight />
          </a>
        </div>

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

/* =========================================================================
   1a. PRESENTATION VIDÉO — Clip de présentation YouTube
   ========================================================================= */
function PresentationVideo() {
  return (
    <section className="presentation-video" data-screen-label="01a Présentation vidéo">
      <div className="container">
        <div className="presentation-video__eyebrow">
          <span className="presentation-video__eyebrow-line"></span>
          <span>Mémoire Vive en une minute</span>
          <span className="presentation-video__eyebrow-line"></span>
        </div>
        <h2 className="display-heading presentation-video__title">
          Le service <em>expliqué en images.</em>
        </h2>
        <Ornament />
        <div className="presentation-video__player">
          <iframe
            src="https://www.youtube.com/embed/EQ0MJbvpje0?rel=0&modestbranding=1"
            title="Mémoire Vive — présentation en une minute"
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          ></iframe>
        </div>
      </div>
    </section>
  );
}
/* =========================================================================
   1bis. ORIGINE — Témoignage du fondateur
   ========================================================================= */
function Origine() {
  return (
    <section className="origine" data-screen-label="01b Origine">
      <div className="container">
        <article className="origine__card">
          <header className="origine__head">
            <span className="origine__eyebrow">Le témoignage du fondateur</span>
            <h2 className="origine__title">Comment est née Mémoire Vive</h2>
          </header>

          <div className="origine__body">
            <p>
              Lors des obsèques de mon cousin, l'église était pleine — et sa
              famille proche ne connaissait pas la moitié des personnes présentes.
            </p>
            <p>
              Tous, pourtant, avaient croisé sa vie. Certains avaient partagé un
              moment fort, une anecdote, peut-être même une photo oubliée dans
              un téléphone.
            </p>
            <p>
              Après la cérémonie, chacun est reparti avec ces fragments. Des
              souvenirs précieux que sa famille ne connaîtrait jamais.
            </p>
            <p>
              J'ai compris qu'un hommage ne devait pas seulement servir à
              déposer des condoléances. Il devait aussi aider à <em>retrouver
              tout ce que la vie d'une personne a semé chez les autres</em>.
            </p>
            <p className="origine__conclusion">
              C'est ainsi qu'est née Mémoire Vive.
            </p>
          </div>

          <footer className="origine__signature">
            <span className="origine__signature-rule" aria-hidden="true"></span>
            <p className="origine__signature-text">
              Thierry Espasa, <em>fondateur</em>
            </p>
          </footer>
        </article>
      </div>
    </section>
  );
}

/* =========================================================================
   2. EXPLICATION
   ========================================================================= */
function Explication() {
  return (
    <section className="explication" data-screen-label="02 Explication">
      <div className="container">
        <SectionLabel n={1}>Pourquoi Mémoire Vive</SectionLabel>

        <h2 className="display-heading">
          Le jour de la cérémonie,<br/>
          <em>tant de souvenirs</em> restent à recueillir.
        </h2>

        <Ornament />

        <div className="explication__cols">
          <div className="explication__col">
            <p className="lead">
              La famille ne connaît peut-être pas tous les participants aux obsèques.
              Et pourtant chacun a probablement eu une histoire avec le défunt — une
              anecdote à raconter, des photos enfouies dans la galerie d'un smartphone…
            </p>
          </div>
          <div className="explication__col">
            <p className="lead lead--muted">
              Il serait dommage de perdre tous ces témoignages, de ne jamais connaître
              les événements marquants ou plus anecdotiques que l'on ignore de la vie
              d'un proche.
            </p>
          </div>
        </div>

        <div className="manifesto">
          <p>
            Mémoire Vive permet aux <strong>proches, amis, collègues et connaissances</strong>
            {" "}de partager un message, une photo, un souvenir — et même de contribuer
            au <em>parcours de vie</em> du défunt.
          </p>
          <p className="manifesto__small">
            <span className="badge">Exclusivité Mémoire Vive</span>
            Avant, pendant, et même après la cérémonie.
          </p>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   3. COMMENT ÇA MARCHE
   ========================================================================= */
function CommentCaMarche() {
  return (
    <section className="comment" id="comment" data-screen-label="03 Comment ça marche">
      <div className="container">
        <SectionLabel n={2}>Comment ça marche</SectionLabel>
        <h2 className="display-heading">
          Huit étapes simples,<br/>
          <em>de la cérémonie au film d'hommage.</em>
        </h2>
        <Ornament />

        <article className="step step--qr">
          <div className="step__body">
            <div className="step__num">01</div>
            <h3 className="step__title">
              L'agence remet un lien et affiche un <em>QR code</em>
            </h3>
            <p className="step__text">
              L'agence funéraire transmet à la famille un lien vers leur
              « Espace Hommage » et affiche un QR code au salon funéraire,
              devant l'église ou sur le lieu d'inhumation. Les participants
              le scannent pour ouvrir l'application — <strong>aucun compte,
              aucun enregistrement</strong>.
            </p>
            <ul className="step__list">
              <li><Check/> Accès immédiat depuis n'importe quel smartphone</li>
              <li><Check/> Aucun téléchargement, aucun mot de passe</li>
              <li><Check/> Le QR code peut être imprimé en A4 par l'agence</li>
            </ul>
          </div>
          <figure className="step__media step__media--qr">
            <Zoomable src="assets/qr-code.jpg" alt="Affiche A4 — QR code Mémoire Vive" className="zoomable--qr">
              <div className="qr-frame">
                <img src="assets/qr-code.jpg" alt="Affiche QR code Mémoire Vive" />
              </div>
            </Zoomable>
            <FigCaption>Affiche A4 — imprimable depuis l'espace agence · cliquez pour agrandir</FigCaption>
          </figure>
        </article>

        <article className="step step--hommage">
          <figure className="step__media step__media--phone">
            <Zoomable src="assets/espace-hommage.jpg" alt="L'Espace Hommage — vue complète" className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/espace-hommage.jpg" alt="Espace Hommage — Juliette Armand" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>L'Espace Hommage — accessible à tous les proches · cliquez pour agrandir</FigCaption>
          </figure>
          <div className="step__body">
            <div className="step__num">02</div>
            <h3 className="step__title">
              Les proches accèdent à <em>l'Espace Hommage</em>
            </h3>
            <p className="step__text">
              Une fois sur l'espace, chaque participant peut choisir ce qu'il
              souhaite partager. Quatre actions sont possibles, séparément ou
              ensemble&nbsp;:
            </p>

            <ol className="action-list">
              <li>
                <span className="action-list__n">i</span>
                <div>
                  <h4>Se faire connaître</h4>
                  <p>Pour que la famille puisse identifier qui était présent
                  ce jour-là, en précisant à quel cercle on appartient
                  <em> (famille, amis, collègues de travail, du sport…)</em>.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">ii</span>
                <div>
                  <h4>Laisser un message</h4>
                  <p>Écrire librement, ou répondre à des <strong>questions
                  guidées</strong> lorsque l'inspiration manque.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">iii</span>
                <div>
                  <h4>Envoyer des photos</h4>
                  <p>Partager des images qui pourront ensuite être
                  <strong> légendées</strong> par leur auteur.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">iv</span>
                <div>
                  <h4>Enrichir le parcours de vie</h4>
                  <p>Contribuer à la <strong>timeline</strong> du défunt, de
                  sa naissance à son décès, à travers les événements marquants
                  vécus avec lui. <span className="exclu">Exclusivité Mémoire Vive.</span></p>
                </div>
              </li>
            </ol>
          </div>
        </article>
        
        <article className="step step--install">
          <div className="step__body">
            <div className="step__num">03</div>
            <h3 className="step__title">
              L'hommage <em>s'installe sur le téléphone</em>, sans rien télécharger
            </h3>
            <p className="step__text">
              Une fois sur leur Espace Hommage, les proches peuvent en quelques
              secondes <strong>ajouter une icône à l'écran d'accueil</strong> de
              leur téléphone. L'hommage devient alors aussi accessible qu'une
              application — sans passer par un magasin d'applications, sans
              téléchargement, sans création de compte. L'icône porte le
              <strong> prénom du défunt</strong> : un petit signe discret, à
              portée de main pendant les jours et les semaines qui suivent.
            </p>
            <ul className="step__list">
              <li><Check/> Aucune appli à télécharger, aucun store, aucun compte</li>
              <li><Check/> L'icône Mémoire Vive au prénom du défunt apparaît sur l'écran d'accueil</li>
              <li><Check/> Un accès direct, sans avoir à rechercher le lien dans ses messages</li>
            </ul>
            <p className="install-note">
              L'installation est proposée aux proches qui ouvrent leur lien
              personnel — les visiteurs qui scannent simplement le QR code à
              la cérémonie restent, eux, en navigation web classique.
            </p>
          </div>
          <figure className="step__media">
            <div className="install-modal">
              <img src="assets/installer-modale.jpg"
                   alt="Proposition d'installation par le navigateur — Hommage à Juliette ARMAND" />
            </div>
            <div className="install-arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24">
                <polyline points="6 9 12 15 18 9" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <Zoomable src="assets/app-sur-smartphone.jpg"
                      alt="L'hommage installé sur l'écran d'accueil du téléphone"
                      className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/app-sur-smartphone.jpg"
                     alt="Écran d'accueil avec icônes Juliette ARMAND et Marc ZOBEL" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>Une icône au prénom du défunt, sur l'écran d'accueil · cliquez pour agrandir</FigCaption>
          </figure>
        </article>
          
        <article className="step step--famille">
          <figure className="step__media step__media--phone">
            <Zoomable src="assets/espace-famille.jpg" alt="L'Espace Famille — vue complète" className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/espace-famille.jpg" alt="Espace Famille — tableau de bord" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>L'Espace Famille — accès réservé, protégé par code Pin · cliquez pour agrandir</FigCaption>
          </figure>
          <div className="step__body">
            <div className="step__num">04</div>
            <h3 className="step__title">
              La famille accède à <em>l'Espace Famille</em>
            </h3>
            <p className="step__text">
              Protégé par un code Pin, l'Espace Famille rassemble en un
              tableau de bord clair&nbsp;: tous les messages, toutes les photos,
              le parcours de vie, et la liste des contributeurs avec leur cercle.
            </p>
            <div className="famille-stats">
              <Stat label="Messages reçus" value="20" />
              <Stat label="Photos partagées" value="11" />
              <Stat label="Visiteurs identifiés" value="7" />
              <Stat label="Événements de vie" value="1" />
            </div>
            <p className="step__text step__text--muted">
              Chaque contribution peut être validée, mise en favori, ou filtrée
              par cercle d'appartenance.
            </p>
          </div>
        </article>

        <div className="mini-steps">
          <article className="mini-step">
            <div className="mini-step__icon"><IconWebsite/></div>
            <div className="mini-step__num">05</div>
            <h3>Un site web hommage,<br/><em>généré automatiquement</em></h3>
            <p>
              La famille peut activer un site web mémoriel public qui
              rassemble toutes les contributions mises en favoris. Un lien
              unique à partager avec tous les contributeurs.
            </p>
          </article>

          <article className="mini-step">
            <div className="mini-step__icon"><IconDownload/></div>
            <div className="mini-step__num">06</div>
            <h3>Tout télécharger,<br/><em>aussi souvent que voulu</em></h3>
            <p>
              Photos, messages, liste des visiteurs — la famille peut
              télécharger l'intégralité des contributions à tout moment,
              dans des formats simples à conserver.
            </p>
          </article>

          <article className="mini-step mini-step--featured">
            <div className="mini-step__icon"><IconBook/></div>
            <div className="mini-step__num">07</div>
            <div className="mini-step__exclu">Exclusivité Mémoire Vive</div>
            <h3>Le <em>Livre de Vie</em>,<br/>édité en PDF prêt à imprimer</h3>
            <p>
              Un véritable ouvrage joliment mis en page rassemble messages,
              photos favorites et parcours de vie. Le PDF peut être imprimé
              chez soi ou édité via une plateforme d'impression au choix.
            </p>
          </article>

          <article className="mini-step mini-step--featured">
            <div className="mini-step__icon"><IconFilm/></div>
            <div className="mini-step__num">08</div>
            <div className="mini-step__exclu">Exclusivité Mémoire Vive</div>
            <h3>Le <em>Film d'hommage</em>,<br/>composé automatiquement</h3>
            <p>
              À partir des photos et messages réunis, Mémoire Vive compose
              un court film d'hommage — avec musique, titres d'introduction
              et de conclusion. Un moment à projeter lors de la cérémonie,
              à diffuser au salon funéraire, ou à conserver et partager
              avec tous ceux qui n'ont pas pu être là.
            </p>
          </article>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   4. DEMO
   ========================================================================= */
function Demo() {
  return (
    <section className="demo" id="demo" data-screen-label="04 Démonstration">
      <div className="container">
        <SectionLabel n={3}>Démonstration</SectionLabel>
        <h2 className="display-heading">
          Découvrez Mémoire Vive<br/>
          <em>de vos propres yeux.</em>
        </h2>
        <Ornament />

        <p className="demo__intro">
          Pour vous faire une idée concrète, nous avons préparé deux
          démonstrations à partir de l'hommage <em>(fictif)</em> rendu à
          Juliette Armand.
        </p>

        <div className="demo__cards">
          <a className="demo-card demo-card--primary"
             href="/hommage/juliette-armand-zg07d"
             target="_blank" rel="noopener">
            <div className="demo-card__tag">Démo en ligne</div>
            <h3>Voir la page web <em>hommage</em></h3>
            <p>
              Explorez l'espace tel que le voient les proches — accueil,
              parcours de vie, messages et photos rassemblés.
            </p>
            <div className="demo-card__url">memoire-vive.eu/hommage/juliette-armand-zg07d</div>
            <div className="demo-card__cta">Ouvrir la démo<ArrowUpRight/></div>
          </a>

          <a className="demo-card demo-card--secondary"
             href="/livre-de-vie-juliette-armand.pdf"
             target="_blank" rel="noopener" download>
            <div className="demo-card__tag">Téléchargement · PDF</div>
            <h3>Télécharger un <em>Livre de Vie</em></h3>
            <p>
              Le document tel qu'il est généré pour la famille — couverture,
              dédicace, parcours de vie, messages favoris et photos.
            </p>
            <div className="demo-card__url">livre-de-vie-juliette-armand.pdf</div>
            <div className="demo-card__cta">Télécharger le PDF<IconDownloadSmall/></div>
          </a>

          <a className="demo-card demo-card--film"
             href="https://youtu.be/vCAqm6LL4Nw"
             target="_blank" rel="noopener">
            <div className="demo-card__tag">Démo · Film hommage</div>
            <h3>Visionner un <em>film d'hommage</em></h3>
            <p>
              Un exemple complet généré à partir des photos et messages
              de l'hommage à Juliette Armand. La famille peut également
              télécharger le fichier MP4 pour le conserver et le partager.
            </p>
            <div className="demo-card__url">youtu.be/0y5wLnhw_do</div>
            <div className="demo-card__cta">Voir le film<ArrowUpRight/></div>
          </a>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   5. CONCLUSION
   ========================================================================= */
function Conclusion() {
  const t = window._tw || TWEAK_DEFAULTS;
  const [submitted, setSubmitted] = useState(false);
  const empty = { nom: "", email: "", telephone: "", ville: "", agence: "", message: "", website: "" };
  const [form, setForm] = useState(empty);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const [submitting, setSubmitting] = useStateS(false);
  const [submitError, setSubmitError] = useStateS(null);

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setSubmitError(null);
    try {
      const res = await fetch("/api/contact-site/famille", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.success) {
        throw new Error(data.error || "Erreur lors de l'envoi.");
      }
      setSubmitted(true);
    } catch (err) {
      setSubmitError(err.message || "Erreur réseau. Réessayez dans un instant.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className={`conclusion conclusion--${t.conclusionTone}`}
             id="contact" data-screen-label="05 Conclusion">
      <div className="container">
        <SectionLabel n={4}>Pour aller plus loin</SectionLabel>
        <h2 className="display-heading">
          Vous souhaitez utiliser Mémoire Vive<br/>
          <em>pour un hommage&nbsp;?</em>
        </h2>
        <Ornament />

        <div className="conclusion__lead">
          <p>
            Parlez-en à notre équipe&nbsp;: nous contacterons l'agence
            funéraire de votre choix, ou nous vous proposerons une agence
            proche de chez vous qui propose notre service.
          </p>
          <p>
            À défaut, nous vous accompagnerons nous-mêmes pour activer
            l'Espace Hommage de votre proche, dans les plus brefs délais.
          </p>
        </div>

        <form className="famille-form" onSubmit={submit}>
          {submitted ? (
            <div className="famille-form__success">
              <div className="famille-form__success-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
              </div>
              <h3>Merci, <em>votre message est bien reçu.</em></h3>
              <p>
                Nous reviendrons vers vous très rapidement à l'adresse {form.email || "que vous avez indiquée"}
                {form.telephone ? ` ou au ${form.telephone}` : ""}.
              </p>
              <button type="button" className="btn btn--ghost-dark"
                      onClick={() => { setSubmitted(false); setForm(empty); }}>
                Envoyer un autre message
              </button>
            </div>
          ) : (
            <>
              {/* Honeypot anti-spam — caché aux humains, rempli par les bots */}
              <div
                aria-hidden="true"
                style={{
                  position: "absolute",
                  left: "-9999px",
                  width: "1px",
                  height: "1px",
                  overflow: "hidden",
                }}
              >
                <label>
                  Ne remplissez pas ce champ
                  <input
                    type="text"
                    tabIndex="-1"
                    autoComplete="off"
                    name="website"
                    value={form.website}
                    onChange={set("website")}
                  />
                </label>
              </div>
              <div className="famille-form__row">
                <label className="famille-form__field">
                  <span>Nom et prénom</span>
                  <input type="text" required value={form.nom} onChange={set("nom")}
                         placeholder="Marie Dupont" />
                </label>
                <label className="famille-form__field">
                  <span>Email</span>
                  <input type="email" required value={form.email} onChange={set("email")}
                         placeholder="marie.dupont@…" />
                </label>
              </div>
              <div className="famille-form__row">
                <label className="famille-form__field">
                  <span>Téléphone</span>
                  <input type="tel" value={form.telephone} onChange={set("telephone")}
                         placeholder="06 12 34 56 78" />
                </label>
                <label className="famille-form__field">
                  <span>Ville / département</span>
                  <input type="text" value={form.ville} onChange={set("ville")}
                         placeholder="Marseille — 13" />
                </label>
              </div>
              <label className="famille-form__field famille-form__field--full">
                <span>Votre agence funéraire <em>(si vous en avez une)</em></span>
                <input type="text" value={form.agence} onChange={set("agence")}
                       placeholder="Nom de l'agence funéraire" />
              </label>
              <label className="famille-form__field famille-form__field--full">
                <span>Message</span>
                <textarea rows="5" value={form.message} onChange={set("message")}
                          placeholder="Quelques mots sur la situation, votre besoin, vos questions…" />
              </label>
              <div className="famille-form__submit">
                <button
                  type="submit"
                  className="btn btn--gold btn--lg"
                  disabled={submitting}
                >
                  {submitting ? "Envoi en cours…" : "Envoyer"}
                  {!submitting && <ArrowRight />}
                </button>
                {submitError && (
                  <p className="famille-form__error" style={{
                    color: "#c0392b",
                    fontSize: "14px",
                    marginTop: "12px",
                    marginBottom: "0",
                  }}>
                    {submitError}
                  </p>
                )}
                <p className="famille-form__note">
                  Vos données ne sont utilisées que pour vous répondre. Aucune
                  inscription, aucun envoi commercial, aucune transmission à
                  des tiers sans votre accord.
                </p>
              </div>
            </>
          )}
        </form>

        <div className="conclusion__values">
          <div className="value">
            <div className="value__icon"><IconShield/></div>
            <h4>Respect & dignité</h4>
            <p>Un cadre sobre, sans publicité, conçu pour le recueillement.</p>
          </div>
          <div className="value">
            <div className="value__icon"><IconLock/></div>
            <h4>Confidentialité</h4>
            <p>L'Espace Famille est protégé par un code Pin ; les données restent en France.</p>
          </div>
          <div className="value">
            <div className="value__icon"><IconClock/></div>
            <h4>Durée libre</h4>
            <p>L'accès à l'espace pour une durée de 30 jours, peut être renouvelé autant que la famille le souhaite.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   TWEAKS PANEL
   ========================================================================= */
function Tweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { window._tw = t; }, [t]);

  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.gold;
    const r = document.documentElement;
    r.style.setProperty("--gold", a.c1);
    r.style.setProperty("--gold-light", a.c2);
    r.style.setProperty("--gold-dark", a.c3);
  }, [t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Apparence">
        <TweakRadio label="Accent" value={t.accent}
          options={[
            { value: "gold",      label: "Or" },
            { value: "champagne", label: "Champagne" },
            { value: "rosegold",  label: "Or rosé" },
          ]}
          onChange={v => setTweak("accent", v)} />
        <TweakRadio label="Numérotation" value={t.numbering}
          options={[
            { value: "arabic", label: "01, 02…" },
            { value: "roman",  label: "I, II…" },
          ]}
          onChange={v => setTweak("numbering", v)} />
        <TweakRadio label="Conclusion" value={t.conclusionTone}
          options={[
            { value: "cream", label: "Fond crème" },
            { value: "dark",  label: "Fond sombre" },
          ]}
          onChange={v => setTweak("conclusionTone", v)} />
        <TweakToggle label="Légendes des images" value={t.showFigCaptions}
          onChange={v => setTweak("showFigCaptions", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

/* =========================================================================
   APP
   ========================================================================= */
function App() {
  useEffect(() => {
    if (!window.location.hash) return;
    const id = window.location.hash.slice(1);
    const timer = setTimeout(() => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    }, 100);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="page page--famille">
      <Header variant="famille" />
      <Hero/>
      <PresentationVideo/>
      <Origine/>
      <Explication/>
      <CommentCaMarche/>
      <Demo/>
      <Conclusion/>
      <Footer/>
      <Lightbox/>
      <BackToTop/>
      <Tweaks/>
    </div>
  );
}

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