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,
  MV_IconPhone: IconPhone,
} = 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>
  );
}

/* =========================================================================
   VIDEO BOUCLE — Cadre vidéo autoplay silencieux + clic ouvre lightbox son.
   Après fermeture du lightbox : poster statique + bouton lecture central.
   ========================================================================= */
function VideoBoucle({ src, poster, onOpenLightbox, hasBeenOpened }) {
  const videoRef = useRef(null);
  const wrapperRef = useRef(null);

  // Autoplay + Intersection Observer (pause hors viewport) — tant que
  // hasBeenOpened est false. Une fois le lightbox ouvert, on stoppe
  // définitivement l'autoplay boucle.
  useEffect(() => {
    if (hasBeenOpened) {
      const v = videoRef.current;
      if (v) {
        v.pause();
        v.currentTime = 0;
      }
      return;
    }

    const video = videoRef.current;
    const wrapper = wrapperRef.current;
    if (!video || !wrapper) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            video.play().catch(() => {});
          } else {
            video.pause();
          }
        });
      },
      { threshold: 0.25 }
    );
    observer.observe(wrapper);

    return () => observer.disconnect();
  }, [hasBeenOpened]);

  const handleClick = () => {
    onOpenLightbox();
  };

  return (
    <div className="video-boucle" ref={wrapperRef} onClick={handleClick}
         role="button" tabIndex={0}
         aria-label="Voir la vidéo en grand avec le son"
         onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleClick(); } }}>
      <video
        ref={videoRef}
        src={src}
        poster={poster}
        muted
        loop
        playsInline
        preload="metadata"
        aria-hidden="true">
      </video>

      {hasBeenOpened && (
        <div className="video-boucle__play-overlay" aria-hidden="true">
          <div className="video-boucle__play-btn">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </div>
        </div>
      )}

      {!hasBeenOpened && (
        <div className="video-boucle__expand-hint" aria-hidden="true">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 3 21 3 21 9"/>
            <polyline points="9 21 3 21 3 15"/>
            <line x1="21" y1="3" x2="14" y2="10"/>
            <line x1="3" y1="21" x2="10" y2="14"/>
          </svg>
        </div>
      )}
    </div>
  );
}

/* =========================================================================
   VIDEO LIGHTBOX — Overlay plein écran avec vidéo son + contrôles natifs
   ========================================================================= */
function VideoLightbox({ src, onClose }) {
  const videoRef = useRef(null);

  // Fermeture au clavier (Échap) + focus management
  useEffect(() => {
    const handleKey = (e) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handleKey);

    // Bloquer le scroll de la page derrière le lightbox
    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    // Lancer la vidéo dès l'ouverture
    const v = videoRef.current;
    if (v) {
      v.currentTime = 0;
      v.play().catch(() => {});
    }

    return () => {
      window.removeEventListener("keydown", handleKey);
      document.body.style.overflow = originalOverflow;
    };
  }, [onClose]);

  // Clic sur l'overlay (hors vidéo) ferme le lightbox
  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  return (
    <div className="video-lightbox" onClick={handleOverlayClick} role="dialog"
         aria-modal="true" aria-label="Vidéo en plein écran">
      <button type="button"
              className="video-lightbox__close"
              onClick={onClose}
              aria-label="Fermer la vidéo">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
      <div className="video-lightbox__inner">
        <video
          ref={videoRef}
          src={src}
          controls
          playsInline
          preload="auto">
        </video>
      </div>
    </div>
  );
}

/* =========================================================================
   2. EXPLICATION
   ========================================================================= */
function Explication() {
  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
  const [hasBeenOpened, setHasBeenOpened] = useState(false);

  const openLightbox = () => {
    setIsLightboxOpen(true);
    setHasBeenOpened(true);
  };
  const closeLightbox = () => setIsLightboxOpen(false);

  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>

        <VideoBoucle
          src="assets/scan-qr-code-mv.mp4"
          poster="assets/vignette-video-qr.jpg"
          onOpenLightbox={openLightbox}
          hasBeenOpened={hasBeenOpened}
        />

        <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>

      {isLightboxOpen && (
        <VideoLightbox
          src="assets/scan-qr-code-mv.mp4"
          onClose={closeLightbox}
        />
      )}
    </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>
        <div className="comment__eyebrow">
          <span className="comment__eyebrow-line"></span>
          <span>Un parcours pensé pour être simple, même sans aisance numérique.</span>
          <span className="comment__eyebrow-line"></span>
        </div>
        <h2 className="display-heading">
          Six étapes simples,<br/>
          <em>de la cérémonie à ses souvenirs conservés.</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/contribution-guidee-checklist.jpg" alt="Suivi des contributions déjà faites — vue complète" className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/contribution-guidee-checklist.jpg" alt="Checklist des contributions — Juliette Armand" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>Un contributeur voit d'un coup d'œil ce qu'il a déjà partagé · 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/film-stepper-3-etapes.jpg" alt="Créer le film d'hommage en 3 étapes — vue complète" className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/film-stepper-3-etapes.jpg" alt="Parcours de création du film — Réunir, Personnaliser, Générer" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>Créer le film d'hommage en 3 étapes, sans compétence technique · cliquez pour agrandir</FigCaption>
          </figure>
          <div className="step__body">
            <div className="step__num">04</div>
            <h3 className="step__title">
              Le film, prêt <em>en 3 étapes</em>
            </h3>
            <p className="step__text">
              Le film est la première chose à créer&nbsp;: il sera diffusé dès
              la cérémonie ou au salon funéraire. Pas besoin d'attendre les
              contributions des proches pour le générer.
            </p>

            <ol className="action-list">
              <li>
                <span className="action-list__n">i</span>
                <div>
                  <h4>Réunissez vos photos</h4>
                  <p>Une dizaine suffit, jusqu'à <strong>70 photos</strong> possibles.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">ii</span>
                <div>
                  <h4>Personnalisez si vous le souhaitez</h4>
                  <p>Musique, textes d'intro et de clôture, <strong>entièrement
                  facultatif</strong>.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">iii</span>
                <div>
                  <h4>Générez le film en un clic</h4>
                  <p>Prêt à <strong>télécharger et diffuser</strong> lors de
                  la cérémonie.</p>
                </div>
              </li>
            </ol>
          </div>
        </article>

        <article className="step step--livre">
          <div className="step__body">
            <div className="step__num">05</div>
            <h3 className="step__title">
              Le Livre de Vie, <em>en 3 étapes aussi</em>
            </h3>
            <p className="step__text">
              Un ouvrage souvenir en PDF qui rassemble photos, messages et parcours de vie, à conserver tel quel ou à imprimer soi-même (ou à faire brocher par une imprimerie en ligne).
            </p>

            <ol className="action-list">
              <li>
                <span className="action-list__n">i</span>
                <div>
                  <h4>Réunissez vos photos favorites</h4>
                  <p>Les mêmes que pour le film.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">ii</span>
                <div>
                  <h4>Personnalisez le contenu</h4>
                  <p>Dédicace, mot de la famille, remerciements
                  <strong> (facultatif)</strong>.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">iii</span>
                <div>
                  <h4>Générez le PDF</h4>
                  <p>Prêt à imprimer chez vous ou via une plateforme
                  d'impression. <span className="exclu">Exclusivité Mémoire Vive.</span></p>
                </div>
              </li>
            </ol>
          </div>
          <figure className="step__media step__media--phone">
            <Zoomable src="assets/livre-de-vie-stepper-3-etapes.jpg" alt="Créer le Livre de Vie en 3 étapes — vue complète" className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/livre-de-vie-stepper-3-etapes.jpg" alt="Parcours de création du Livre de Vie" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>Le parcours de création du Livre de Vie · cliquez pour agrandir</FigCaption>
          </figure>
        </article>

        <article className="step step--site">
          <figure className="step__media step__media--phone">
            <Zoomable src="assets/site-hommage-stepper-3-etapes.jpg" alt="Activer le site hommage en 3 étapes — vue complète" className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/site-hommage-stepper-3-etapes.jpg" alt="Parcours d'activation du site hommage" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>Le parcours d'activation du site hommage · cliquez pour agrandir</FigCaption>
          </figure>
          <div className="step__body">
            <div className="step__num">06</div>
            <h3 className="step__title">
              Le site hommage, <em>activé en un instant</em>
            </h3>
            <p className="step__text">
              Une page web dédiée à la mémoire de votre proche, comportant le film et les éléments du livre, à partager avec tous ceux qui l'ont connu.
            </p>

            <ol className="action-list">
              <li>
                <span className="action-list__n">i</span>
                <div>
                  <h4>Enrichissez la page</h4>
                  <p>Photos et texte d'introduction.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">ii</span>
                <div>
                  <h4>Publiez la page hommage</h4>
                  <p>La page devient accessible publiquement.</p>
                </div>
              </li>
              <li>
                <span className="action-list__n">iii</span>
                <div>
                  <h4>Partagez le lien</h4>
                  <p>Avec tous les proches.</p>
                </div>
              </li>
            </ol>
          </div>
        </article>

        <div className="comment__closing">
          <div className="comment__closing-icon"><IconDownload/></div>
          <div className="comment__closing-body">
            <h3>Tout récupérer, à tout moment</h3>
            <p>
              Une fois la cérémonie passée et les contributions reçues, la
              famille peut télécharger l'intégralité des souvenirs — photos,
              messages, liste des visiteurs — dans des formats simples à
              conserver, aussi souvent qu'elle le souhaite.
            </p>
          </div>
        </div>

        <div className="comment__closing">
          <div className="comment__closing-icon"><IconPhone/></div>
          <div className="comment__closing-body">
            <h3>Vous n'êtes jamais seuls face à la technique</h3>
            <p>
              Une question, un souci&nbsp;? Le service client Mémoire Vive
              vous répond directement — guide d'aide, chat en direct, ou par
              téléphone. Votre conseiller funéraire n'a pas à s'en occuper&nbsp;:
              nous sommes là pour ça.
            </p>
          </div>
        </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>

          <a className="demo-card demo-card--secondary"
             href="avis-de-deces.html">
            <div className="demo-card__tag">Nouveau service</div>
            <h3>L'<em>Avis de Décès</em></h3>
            <p>
              Partagez en un lien toutes les informations pratiques de la
              cérémonie, avec plan et ajout à l'agenda.
            </p>
            <div className="demo-card__url">memoire-vive.eu/avis-de-deces</div>
            <div className="demo-card__cta">En savoir plus<ArrowRight/></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/>);