const { useState, useEffect } = React;

const {
  MV_Header: Header,
  MV_Footer: Footer,
  MV_BackToTop: BackToTop,
  MV_SectionLabel: SectionLabel,
  MV_Ornament: Ornament,
  MV_Lightbox: Lightbox,
  MV_Zoomable: Zoomable,
  MV_PhoneFrame: PhoneFrame,
  MV_FigCaption: FigCaption,
  MV_ArrowRight: ArrowRight,
  MV_ArrowUpRight: ArrowUpRight,
  MV_Check: Check,
  MV_IconHeart: IconHeart,
  MV_IconWebsite: IconWebsite,
  MV_IconConnect: IconConnect,
} = window;

const DEMO_URL = "https://afm-provencale.memoire-vive.eu/avis-de-deces/juliette-armand-zg07d";

/* =========================================================================
   1. HERO
   ========================================================================= */
function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__glow" aria-hidden="true"></div>
      <div className="hero__inner">
        <h1 className="hero__tagline">
          L'Avis de Décès,<br/>
          <em>simple à partager, complet pour vos proches.</em>
        </h1>

        <p className="hero__sub">
          Toutes les informations pratiques d'une cérémonie réunies sur une
          seule page — dates, lieux, plans, ajout à l'agenda — à partager
          en un lien.
        </p>

        <div className="hero__actions">
          <a href={DEMO_URL} target="_blank" rel="noopener" className="btn btn--gold">
            Voir un exemple
            <ArrowUpRight />
          </a>
        </div>

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

/* =========================================================================
   2. LE CONSTAT — respiration éditoriale, sur le modèle exact d'Origine
   (fond --ink, colonne unique centrée, pas de SectionLabel/Ornament).
   ========================================================================= */
function Constat() {
  return (
    <section className="origine" id="constat" data-screen-label="02 Le constat">
      <div className="container">
        <article className="origine__card">
          <header className="origine__head">
            <span className="origine__eyebrow">Le constat</span>
            <h2 className="origine__title">L'avis papier a fait son temps</h2>
          </header>

          <div className="origine__body">
            <p>
              Un avis dans le journal coûte cher, disparaît en quelques jours, et
              ne dit jamais tout : pas de plan, pas de rappel automatique, aucun
              moyen de le partager simplement à ceux qui vivent loin. Résultat,
              la famille passe des heures au téléphone à répéter les mêmes
              informations.
            </p>
          </div>
        </article>
      </div>
    </section>
  );
}

/* =========================================================================
   3. LA SOLUTION — bloc .step (texte en liste à gauche, visuel à droite)
   ========================================================================= */
function Solution() {
  return (
    <section className="content-section content-section--alt" id="solution" data-screen-label="03 La solution">
      <div className="container">
        <SectionLabel n={1}>La solution</SectionLabel>
        <h2 className="display-heading">
          Une page claire,<br/>
          <em>pensée pour être partagée.</em>
        </h2>
        <Ornament />

        <article className="step step--qr">
          <div className="step__body">
            <p className="lead">
              L'Avis de Décès Mémoire Vive rassemble en une seule page tout ce
              qu'un proche a besoin de savoir : qui, quand, où — et surtout,
              comment s'y rendre et ne pas oublier.
            </p>

            <ul className="step__list">
              <li><Check/> <strong>Le plan d'accès en un clic</strong> — pour chaque cérémonie (civile, religieuse, dispersion des cendres…)</li>
              <li><Check/> <strong>L'ajout automatique à l'agenda</strong> — Google, Apple, Outlook</li>
            </ul>

            <p className="lead lead--muted">
              Et si la famille le souhaite, l'avis se connecte à l'Espace
              Hommage&nbsp;: les proches peuvent y déposer un message, une
              photo, un souvenir.
            </p>

            <div className="hero__actions">
              <a href={DEMO_URL} target="_blank" rel="noopener" className="btn btn--ghost">
                Découvrir la fiche démo de Juliette Armand
                <ArrowUpRight />
              </a>
            </div>
          </div>

          <figure className="step__media step__media--phone">
            <Zoomable src="/assets/avis-fiche-demo-complete.jpg"
                      alt="La fiche de Juliette Armand — vue complète"
                      className="zoomable--phone">
              <PhoneFrame>
                <img src="/assets/avis-fiche-demo-complete.jpg" alt="La fiche de Juliette Armand" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>La fiche de Juliette Armand · cliquez pour agrandir</FigCaption>
          </figure>
        </article>
      </div>
    </section>
  );
}

/* =========================================================================
   4. POUR LA FAMILLE — liste légère à icônes (sur le modèle des .value
   de la Conclusion d'app.jsx), fond --cream
   ========================================================================= */
function PourLaFamille() {
  const items = [
    { title: "Un seul lien", text: "À partager par SMS, WhatsApp ou e-mail — plus besoin d'appeler chaque proche." },
    { title: "Le plan d'accès", text: "Intégré pour chaque lieu de cérémonie." },
    { title: "L'ajout à l'agenda", text: "En un clic, pour que personne n'oublie la date." },
    { title: "Une page qui reste en ligne", text: "Bien après la cérémonie — contrairement au journal qui disparaît en trois jours." },
    { title: "Une passerelle vers l'Espace Hommage", text: "Pour recueillir messages et photos si la famille le souhaite." },
  ];

  return (
    <section className="conclusion conclusion--cream" id="famille" data-screen-label="04 Pour la famille">
      <div className="container">
        <SectionLabel n={2}>Pour la famille</SectionLabel>
        <h2 className="display-heading">
          Une charge<br/>
          <em>en moins.</em>
        </h2>
        <Ornament />

        <div className="conclusion__values conclusion__values--2col">
          {items.map((it, i) => (
            <div className="value" key={i}>
              <div className="value__icon"><IconHeart /></div>
              <h4>{it.title}</h4>
              <p>{it.text}</p>
            </div>
          ))}
        </div>

        <p className="step__text step__text--muted">
          L'agence ne publie un avis qu'avec l'accord de la famille.
        </p>
      </div>
    </section>
  );
}

/* =========================================================================
   5. POUR VOTRE AGENCE — grille .mini-step à gauche, mockup navigateur
   du dashboard Espace Pro à droite, fond --ink-2
   ========================================================================= */
function PourVotreAgence() {
  const items = [
    { title: "Une seule communication", text: "Le lien de l'avis contient tout, plus besoin de rappeler chaque famille pour les horaires." },
    { title: "Une image d'agence actuelle", text: "Qui répond aux attentes numériques des familles." },
    { title: "Un vrai levier SEO local", text: "Vos avis sont trouvés par les moteurs de recherche et amènent du trafic vers votre propre site." },
    { title: "Une marque blanche totale", text: "Vos visiteurs restent chez vous, sans jamais voir Mémoire Vive." },
    { title: "Une complémentarité naturelle avec l'Espace Hommage", text: "Pour une offre funéraire numérique complète." },
  ];

  return (
    <section className="content-section content-section--alt" id="agence" data-screen-label="05 Pour votre agence">
      <div className="container">
        <SectionLabel n={3}>Pour votre agence</SectionLabel>
        <h2 className="display-heading">
          Un service moderne<br/>
          <em>et complémentaire.</em>
        </h2>
        <Ornament />

        <article className="step step--qr">
          <div className="step__body">
            <div className="mini-steps">
              {items.map((it, i) => (
                <article key={i} className="mini-step">
                  <div className="mini-step__num">{String(i + 1).padStart(2, "0")}</div>
                  <h3>{it.title}</h3>
                  <p>{it.text}</p>
                </article>
              ))}
            </div>
          </div>

          <figure className="step__media">
            <Zoomable src="/assets/avis-dashboard-espace-pro.jpg"
                      alt="Tableau de bord Espace Pro — création d'un avis de décès">
              <div className="browser-mockup">
                <div className="browser-mockup__chrome">
                  <span className="browser-mockup__dot browser-mockup__dot--r"></span>
                  <span className="browser-mockup__dot browser-mockup__dot--y"></span>
                  <span className="browser-mockup__dot browser-mockup__dot--g"></span>
                  <span className="browser-mockup__url">pro.memoire-vive.eu</span>
                </div>
                <img src="/assets/avis-dashboard-espace-pro.jpg" alt="Tableau de bord Espace Pro" />
              </div>
            </Zoomable>
            <FigCaption>Le tableau de bord de votre Espace Pro · cliquez pour agrandir</FigCaption>
          </figure>
        </article>

        <p className="step__text step__text--muted">
          Un processus de consentement encadré, à chaque étape, pour la
          tranquillité de vos équipes comme de la famille.
        </p>
      </div>
    </section>
  );
}

/* =========================================================================
   6. UNE OFFRE FLEXIBLE — grille .mini-step 3 colonnes avec icônes,
   fond --cream
   ========================================================================= */
function OffreFlexible() {
  const items = [
    { title: "Avis seul", text: "Vous diffusez vos avis de décès en ligne, sans les espaces hommage.", icon: <IconWebsite /> },
    { title: "Hommage seul", text: "Vous gardez votre solution actuelle pour les avis ; vos espaces hommage sont chez nous, et nous pouvons les connecter à vos avis existants.", icon: <IconHeart /> },
    { title: "Avis + Hommage", text: "L'offre complète : les deux se connectent automatiquement pour chaque famille.", icon: <IconConnect /> },
  ];

  return (
    <section className="conclusion conclusion--cream" id="offre" data-screen-label="06 Une offre flexible">
      <div className="container">
        <SectionLabel n={4}>Une offre flexible</SectionLabel>
        <h2 className="display-heading">
          Avis, Hommage, ou les deux<br/>
          <em>— à vous de choisir.</em>
        </h2>
        <Ornament />

        <div className="mini-steps mini-steps--3col">
          {items.map((it, i) => (
            <article key={i} className="mini-step">
              <div className="mini-step__icon">{it.icon}</div>
              <div className="mini-step__num">{String(i + 1).padStart(2, "0")}</div>
              <h3>{it.title}</h3>
              <p>{it.text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   7. CTA FINAL / CONTACT — fond --ink (dark), pour clore le parcours en
   symétrie avec le Hero et éviter deux sections claires consécutives
   après la section 6 (--cream)
   ========================================================================= */
function Contact() {
  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] = useState(false);
  const [submitError, setSubmitError] = useState(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, source: "avis-de-deces" }),
      });
      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--dark" id="contact" data-screen-label="07 Contact">
      <div className="container">
        <SectionLabel n={5}>Contact</SectionLabel>
        <h2 className="display-heading">
          Parlons de<br/>
          <em>votre projet.</em>
        </h2>
        <Ornament />

        <div className="conclusion__lead">
          <p>
            Chaque agence a ses habitudes et ses outils. Contactez-nous pour
            voir ensemble comment l'Avis de Décès peut s'intégrer à votre
            activité.
          </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 votre projet, vos questions…" />
              </label>
              <div className="famille-form__submit">
                <button
                  type="submit"
                  className="btn btn--gold btn--lg"
                  disabled={submitting}
                >
                  {submitting ? "Envoi en cours…" : "Nous contacter"}
                  {!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>
    </section>
  );
}

/* =========================================================================
   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--avis">
      <Header variant="avis" />
      <Hero/>
      <Constat/>
      <Solution/>
      <PourLaFamille/>
      <PourVotreAgence/>
      <OffreFlexible/>
      <Contact/>
      <Footer/>
      <Lightbox/>
      <BackToTop/>
    </div>
  );
}

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