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

        <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>
  );
}

/* =========================================================================
   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">
          Six étapes simples,<br/>
          <em>de la cérémonie au livre.</em>
        </h2>
        <Ornament />

        <article className="step step--qr">
          <div className="step__num">01</div>
          <div className="step__body">
            <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/> Aucune installation, 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--famille">
          <div className="step__body">
            <div className="step__num">03</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>
          <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>
        </article>

        <div className="mini-steps">
          <article className="mini-step">
            <div className="mini-step__icon"><IconWebsite/></div>
            <div className="mini-step__num">04</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">05</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">06</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>
        </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="https://memoire-vive.eu/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="https://memoire-vive.eu/presentation/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>
        </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: "" };
  const [form, setForm] = useState(empty);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  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>
          ) : (
            <>
              <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">
                  Envoyer
                  <ArrowRight />
                </button>
                <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'espace reste accessible aussi longtemps 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() {
  return (
    <div className="page page--famille">
      <Header variant="famille" />
      <Hero/>
      <Explication/>
      <CommentCaMarche/>
      <Demo/>
      <Conclusion/>
      <Footer/>
      <Lightbox/>
      <BackToTop/>
      <Tweaks/>
    </div>
  );
}

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