const { useState, useEffect, useRef } = React;

const {
  MV_Header: Header,
  MV_Footer: Footer,
  MV_BackToTop: BackToTop,
  MV_SectionLabel: SectionLabelBase,
  MV_Ornament: Ornament,
  MV_PhoneFrame: PhoneFrame,
  MV_FigCaption: FigCaptionBase,
  MV_Lightbox: Lightbox,
  MV_Zoomable: Zoomable,
  MV_ArrowRight: ArrowRight,
  MV_ArrowDown: ArrowDown,
  MV_ArrowUpRight: ArrowUpRight,
  MV_Check: Check,
  MV_IconHeart: IconHeart,
  MV_IconSparkle: IconSparkle,
  MV_IconPalette: IconPalette,
  MV_IconConnect: IconConnect,
  MV_IconQR: IconQR,
  MV_IconHands: IconHands,
  MV_IconSeed: IconSeed,
  MV_IconMail: IconMail,
  MV_IconPhone: IconPhone,
  MV_IconBook: IconBook,
  MV_IconWebsite: IconWebsite,
  MV_IconDownload: IconDownload,
  MV_IconShield: IconShield,
  MV_IconLock: IconLock,
  MV_IconClock: IconClock
} = window;

function SectionLabel({ n, children }) {
  return <SectionLabelBase n={n} numbering="arabic">{children}</SectionLabelBase>;
}
function FigCaption({ children }) {
  return <FigCaptionBase show={true}>{children}</FigCaptionBase>;
}

/* =========================================================================
   1. HERO PRO
   ========================================================================= */
function HeroPro() {
  return (
    <section className="pro-hero" data-screen-label="01 Hero Pro">
      <div className="pro-hero__bg" aria-hidden="true">
        <div className="pro-hero__bg-veil"></div>
        <div className="pro-hero__bg-grid"></div>
      </div>
      <div className="pro-hero__inner">
        <div className="pro-hero__eyebrow">
          <span className="pro-hero__eyebrow-line"></span>
          <span>Espace Pro · Agences funéraires</span>
          <span className="pro-hero__eyebrow-line"></span>
        </div>

        <h1 className="pro-hero__title">
          Offrez aux familles<br />
          un hommage plus <em>vivant</em>,<br />
          tout en valorisant durablement<br />
          votre <em>agence</em>.
        </h1>

        <p className="pro-hero__sub">
          Mémoire Vive est une solution d'hommage numérique conçue pour les
          agences funéraires qui souhaitent proposer un service moderne,
          humain et différenciant, <strong>directement associé à leur propre
          image</strong>.
        </p>

        <div className="pro-hero__actions">
          <a href="#avantages" className="btn btn--ghost">
            Découvrir les avantages
            <ArrowDown />
          </a>
          <a href="#contact" className="btn btn--gold">
            Demander une démonstration
            <ArrowRight />
          </a>
        </div>

        <Ornament />

        <div className="pro-hero__pillars">
          <div className="pillar">
            <span className="pillar__dot"></span>
            Marque blanche
          </div>
          <div className="pillar">
            <span className="pillar__dot"></span>
            Aucune installation famille
          </div>
          <div className="pillar">
            <span className="pillar__dot"></span>
            Prise en main en minutes
          </div>
          <div className="pillar">
            <span className="pillar__dot"></span>
            Accompagnement humain
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================================
   2. AVANTAGES
   ========================================================================= */
function Avantages() {
  const items = [
  {
    icon: <IconSparkle />,
    title: "Une image moderne, accessible à tous",
    text: "Mémoire Vive s'appuie sur l'usage le plus universel — le smartphone — pour rendre votre service immédiatement compréhensible et utilisable par chacun, quelle que soit sa génération."
  },
  {
    icon: <IconHeart />,
    title: "Un geste fort pour les familles",
    text: "Vous offrez aux proches un espace pour partager messages, photos et souvenirs. Un service à forte valeur émotionnelle, qui fait la différence dans des moments où chaque attention compte."
  },
  {
    icon: <IconHands />,
    title: "Un accompagnement qui se prolonge",
    text: "Là où la cérémonie marque une fin, Mémoire Vive ouvre un espace qui se poursuit dans les jours et semaines qui suivent. Votre attention aux familles ne s'arrête pas à la porte du salon."
  },
  {
    icon: <IconSeed />,
    title: "Une trace durable, qui se transmet",
    text: "Le Livre de Vie en PDF, les photos téléchargeables, le site mémoriel — autant de souvenirs précieux que la famille conservera et associera longtemps à votre accompagnement."
  },
  {
    icon: <IconQR />,
    title: "Simple à présenter, simple à activer",
    text: "Un lien web ou un QR code suffisent à introduire le service. Aucune installation, aucun compte à créer pour les participants : la simplicité au service de la dignité."
  },
  {
    icon: <IconConnect />,
    title: "Innovation, attention, proximité",
    text: "Trois qualités que les familles retiennent. Vous prenez une avance discrète mais réelle sur les agences qui n'ont pas encore intégré ce type de service."
  }];

  return (
    <section className="avantages" id="avantages" data-screen-label="02 Avantages">
      <div className="container">
        <SectionLabel n={1}>Pourquoi Mémoire Vive dans votre agence</SectionLabel>
        <h2 className="display-heading display-heading--ink">
          Un service numérique discret,<br />
          <em>humain</em> et valorisant.
        </h2>
        <Ornament />

        <p className="avantages__lead">
          Mémoire Vive ne remplace pas l'accompagnement humain de votre agence —
          il le prolonge. Une attention supplémentaire portée aux familles, après
          la cérémonie, lorsqu'elles cherchent à rassembler la mémoire d'un proche.
        </p>

        <div className="avantage-grid">
          {items.map((it, i) =>
          <article key={i} className="avantage-card">
              <div className="avantage-card__num">{String(i + 1).padStart(2, "0")}</div>
              <div className="avantage-card__icon">{it.icon}</div>
              <h3>{it.title}</h3>
              <p>{it.text}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* =========================================================================
   3. MARQUE BLANCHE — Aux couleurs de votre agence
   ========================================================================= */
function MarqueBlanche() {
  const items = [
  "Page de présentation intégrée à votre site officiel",
  "URL de l'Espace Hommage propre au nom de votre agence",
  "Logo de votre agence affiché en signature",
  "Couleurs et identité visuelle adaptées",
  "Footer avec votre logo, nom et lien vers votre site"];

  return (
    <section className="marque-blanche" data-screen-label="03 Aux couleurs">
      <div className="container">
        <SectionLabel n={2}>Aux couleurs de votre agence</SectionLabel>
        <h2 className="display-heading display-heading--ink">
          Les familles restent dans<br />
          <em>votre univers</em>, jamais redirigées<br />
          vers un prestataire extérieur.
        </h2>
        <Ornament />

        <div className="mb-grid">
          <div className="mb-grid__left">
            <p className="lead lead--ink">
              Mémoire Vive s'intègre discrètement dans l'identité de votre
              agence. Du site web jusqu'à l'écran de l'Espace Hommage, les
              familles continuent de reconnaître <strong>votre maison</strong>,
              vos couleurs, votre nom.
            </p>
            <ul className="mb-list">
              {items.map((t, i) =>
              <li key={i}><Check /> {t}</li>
              )}
            </ul>
            <div className="mb-quote">
              <p>
                Chaque consultation de l'espace hommage renforce naturellement
                votre <em>présence digitale</em> et prolonge le lien avec les
                familles, sans démarche commerciale apparente.
              </p>
            </div>
          </div>

          <div className="mb-grid__right">
            <BrandingMockup />
          </div>
        </div>
      </div>
    </section>);

}

/* Schematic mockup: a browser bar with the agency URL + agency logo banner */
function BrandingMockup() {
  return (
    <div className="branding-mockup" aria-hidden="true">
      <div className="branding-mockup__browser">
        <div className="branding-mockup__chrome">
          <span className="dot dot--r"></span>
          <span className="dot dot--y"></span>
          <span className="dot dot--g"></span>
          <div className="branding-mockup__url">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <rect x="4" y="11" width="16" height="10" rx="1.5" />
              <path d="M8 11V7a4 4 0 0 1 8 0v4" />
            </svg>
            pf-votre-agence.fr<span className="branding-mockup__url-path">/hommage/famille-martin</span>
          </div>
        </div>
        <div className="branding-mockup__page">
          <div className="branding-mockup__agency">
            <div className="agency-mark">VA</div>
            <div className="agency-name">
              <div className="agency-name__main">Pompes Funèbres Votre Agence</div>
              <div className="agency-name__sub">depuis 1962 · ville</div>
            </div>
          </div>
          <div className="branding-mockup__divider"></div>
          <div className="branding-mockup__hero">
            <div className="branding-mockup__hero-img branding-mockup__hero-img--photo">
              <img src="assets/jean-martin.jpg" alt="Jean Martin" />
            </div>
            <div className="branding-mockup__hero-text">
              <div className="branding-mockup__name">Famille Martin</div>
              <div className="branding-mockup__dates">1963 — 2026</div>
              <div className="branding-mockup__pill">Hommage à Jean Martin</div>
            </div>
          </div>
          <div className="branding-mockup__powered">
            <span>Espace hommage proposé par</span>
            <img src="assets/logo-mv.png" alt="Mémoire Vive" />
          </div>
        </div>
      </div>
      <div className="branding-mockup__caption">
        <em>Exemple :</em> la page hommage intégrée au site de l'agence,
        sans rupture d'univers.
      </div>
    </div>);

}

/* =========================================================================
   4. ESPACE HOMMAGE COMPLET (avec avis Google)
   ========================================================================= */
function EspaceHommageComplet() {
  const features = [
  { icon: <IconWebsite />, label: "Page hommage publique" },
  { icon: <IconQR />, label: "QR code imprimable" },
  { icon: <IconConnect />, label: "Lien web partageable" },
  { icon: <IconBook />, label: "Livre de Vie · PDF imprimable" },
  { icon: <IconHeart />, label: "Messages, photos, souvenirs" },
  { icon: <IconHands />, label: "Avant, pendant, après la cérémonie" }];

  return (
    <section className="hommage-complet" data-screen-label="04 Espace hommage complet">
      <div className="container">
        <SectionLabel n={3}>Côté familles</SectionLabel>
        <h2 className="display-heading display-heading--ink">
          Un véritable <em>espace d'hommage</em>,<br />
          pas une simple page souvenir.
        </h2>
        <Ornament />

        <p className="hommage-complet__lead">
          Mémoire Vive est pensé pour <strong>recueillir, organiser et transmettre</strong>
          {" "}les souvenirs autour d'une personne disparue. L'expérience est fluide,
          accessible depuis n'importe quel smartphone, et conçue pour rester sobre
          dans un contexte sensible.
        </p>

        <div className="hc-grid">
          <div className="hc-features">
            {features.map((f, i) =>
            <div key={i} className="hc-feature">
                <div className="hc-feature__icon">{f.icon}</div>
                <div className="hc-feature__label">{f.label}</div>
              </div>
            )}
          </div>

          <figure className="hc-phone">
            <Zoomable src="assets/espace-hommage-avis-google.jpg"
            alt="L'Espace Hommage — vue complète, avec bouton d'avis Google intégré"
            className="zoomable--phone">
              <PhoneFrame>
                <img src="assets/espace-hommage-avis-google.jpg"
                alt="Espace Hommage Mémoire Vive avec avis Google" />
              </PhoneFrame>
            </Zoomable>
            <FigCaption>
              L'Espace Hommage côté famille — cliquez pour agrandir
            </FigCaption>
          </figure>
        </div>

        <div className="avis-note">
          <div className="avis-note__icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
              <polygon points="12 2 15 9 22 9.3 16.5 14 18.2 21 12 17.5 5.8 21 7.5 14 2 9.3 9 9 12 2" />
            </svg>
          </div>
          <div className="avis-note__body">
            <h4 style={{ fontWeight: "500", fontSize: "30px" }}>Un accès discret à vos avis Google, intégré par défaut</h4>
            <p>
              Au sein de l'Espace Hommage, un bouton sobre invite — sans
              insistance — les familles satisfaites à partager leur retour
              d'expérience. Aucune mécanique forcée : un geste naturel, à
              leur initiative, prolongeant un accompagnement réussi.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================================
   5. VOTRE ESPACE PRO
   ========================================================================= */
function VotreEspacePro() {
  const steps = [
  { n: 1, title: "Connectez-vous à votre Espace Pro",
    text: "Une interface dédiée à votre agence, accessible sur ordinateur, tablette ou mobile." },
  { n: 2, title: "Créez un hommage en quelques minutes",
    text: "Quelques informations suffisent — pas de menus complexes, pas de formation requise." },
  { n: 3, title: "Renseignez l'essentiel",
    text: "Prénom, nom, dates, photo, et coordonnées du référent familial." },
  { n: 4, title: "Générez le lien à transmettre",
    text: "Une URL unique, propre à votre agence, à remettre à la famille." },
  { n: 5, title: "Imprimez le QR code d'affichage",
    text: "Un kit prêt à imprimer en A4 pour le salon, l'église ou le lieu d'inhumation." },
  { n: 6, title: "Suivez les compteurs principaux",
    text: "Scans, visiteurs totaux, visiteurs identifiés, souvenirs partagés — d'un coup d'œil." }];

  return (
    <section className="espace-pro" id="espace-pro" data-screen-label="05 Votre Espace Pro">
      <div className="container">
        <SectionLabel n={4}>Votre Espace Pro</SectionLabel>
        <h2 className="display-heading display-heading--ink">
          Pas d'interface complexe.<br />
          <em>Quelques informations suffisent.</em>
        </h2>
        <Ornament />

        <p className="ep-lead">
          L'Espace Pro est conçu pour les équipes d'agence funéraire — pas pour
          des techniciens. La création d'un hommage prend quelques minutes ;
          le suivi se fait en un coup d'œil.
        </p>

        <figure className="ep-screen">
          <Zoomable src="assets/espace-admin-pro.jpg"
          alt="Espace Pro Mémoire Vive — tableau de bord agence"
          className="zoomable--wide">
            <div className="ep-screen__frame">
              <div className="ep-screen__chrome">
                <span className="dot dot--r"></span>
                <span className="dot dot--y"></span>
                <span className="dot dot--g"></span>
                <span className="ep-screen__url">pro.memoire-vive.eu</span>
              </div>
              <img src="assets/espace-admin-pro.jpg" alt="Tableau de bord Espace Pro" />
            </div>
          </Zoomable>
          <FigCaption>Le tableau de bord de votre Espace Pro — cliquez pour agrandir</FigCaption>
        </figure>

        <div className="ep-steps">
          {steps.map((s) =>
          <article key={s.n} className="ep-step">
              <div className="ep-step__num">{String(s.n).padStart(2, "0")}</div>
              <h3>{s.title}</h3>
              <p>{s.text}</p>
            </article>
          )}
        </div>

        <div className="ep-counters">
          <div className="ep-counter">
            <div className="ep-counter__icon"><IconQR /></div>
            <div className="ep-counter__label">Scans QR</div>
          </div>
          <div className="ep-counter">
            <div className="ep-counter__icon"><IconWebsite /></div>
            <div className="ep-counter__label">Visiteurs totaux</div>
          </div>
          <div className="ep-counter">
            <div className="ep-counter__icon"><IconHands /></div>
            <div className="ep-counter__label">Visiteurs identifiés</div>
          </div>
          <div className="ep-counter">
            <div className="ep-counter__icon"><IconHeart /></div>
            <div className="ep-counter__label">Souvenirs partagés</div>
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================================
   6. MISE EN PLACE
   ========================================================================= */
function MiseEnPlace() {
  const steps = [
  { num: "01", title: "Présentation à votre équipe",
    text: "Nous prenons le temps d'expliquer Mémoire Vive à vos conseillers, en visio ou en présentiel lorsque cela est possible." },
  { num: "02", title: "Page de présentation personnalisée",
    text: "Nous adaptons une page de présentation à l'identité de votre agence, prête à être intégrée à votre site." },
  { num: "03", title: "Accompagnement à la première mise en place",
    text: "Nous restons à vos côtés pour les premiers hommages créés, jusqu'à ce que vous soyez parfaitement à l'aise." },
  { num: "04", title: "Démonstration personnalisée",
    text: "Visioconférence ou rendez-vous sur place selon votre préférence et notre disponibilité géographique." }];

  return (
    <section className="mise-en-place" data-screen-label="06 Mise en place">
      <div className="container">
        <SectionLabel n={5}>Mise en place</SectionLabel>
        <h2 className="display-heading display-heading--cream">
          Une intégration progressive,<br />
          <em>à votre rythme.</em>
        </h2>
        <Ornament />

        <p className="mep-lead">
          Vous restez maîtres du calendrier. Mémoire Vive peut être présenté
          aux familles dès la signature, ou progressivement à mesure que votre
          équipe se familiarise avec l'outil.
        </p>

        <div className="mep-steps">
          {steps.map((s) =>
          <article key={s.num} className="mep-step">
              <div className="mep-step__num">{s.num}</div>
              <div className="mep-step__body">
                <h3>{s.title}</h3>
                <p>{s.text}</p>
              </div>
            </article>
          )}
        </div>

        <div className="mep-cta">
          <p>
            <em>Nous pouvons vous présenter Mémoire Vive lors d'une démonstration
            personnalisée, en visioconférence ou en présentiel lorsque cela est possible.</em>
          </p>
          <a href="#contact" className="btn btn--gold">
            Planifier une démonstration
            <ArrowRight />
          </a>
        </div>
      </div>
    </section>);

}

/* =========================================================================
   7. CONDITIONS
   ========================================================================= */
function Conditions() {
  return (
    <section className="conditions" data-screen-label="07 Conditions">
      <div className="container conditions__inner">
        <SectionLabel n={6}>Conditions professionnelles</SectionLabel>
        <h2 className="display-heading display-heading--ink">
          Une proposition <em>adaptée</em><br />
          à votre agence.
        </h2>
        <Ornament />

        <p className="conditions__text">
          Les conditions professionnelles dépendent de vos besoins, du niveau
          de personnalisation souhaité et du volume d'utilisation. Nous étudions
          chaque demande individuellement afin de vous proposer une offre
          cohérente avec votre activité.
        </p>

        <div className="conditions__actions">
          <a href="#contact" className="btn btn--ink btn--lg">
            Demander les conditions professionnelles
            <ArrowRight />
          </a>
          <a href="#contact" className="btn btn--ghost-ink btn--lg">
            Planifier une démonstration
          </a>
        </div>
      </div>
    </section>);

}

/* =========================================================================
   8. CONTACT FORM
   ========================================================================= */
function ContactPro() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    agence: "", nom: "", email: "", telephone: "",
    ville: "", site: "", message: ""
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  return (
    <section className="contact-pro" id="contact" data-screen-label="08 Contact">
      <div className="container">
        <SectionLabel n={7}>Contact</SectionLabel>
        <h2 className="display-heading display-heading--cream">
          Échangeons sur votre agence<br />
          <em>et ses besoins.</em>
        </h2>
        <Ornament />

        <p className="contact-pro__lead">
          Renseignez ce formulaire — nous reviendrons vers vous sous 48 heures
          ouvrées, pour une démonstration ou pour répondre à vos questions.
        </p>

        <div className="contact-pro__grid">
          <form className="contact-form" onSubmit={submit}>
            {submitted ?
            <div className="contact-form__success">
                <div className="contact-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 demande est bien reçue.</em></h3>
                <p>Nous reviendrons vers vous très prochainement à l'adresse {form.email || "que vous avez indiquée"}.</p>
                <button type="button" className="btn btn--ghost-cream" onClick={() => {setSubmitted(false);setForm({ agence: "", nom: "", email: "", telephone: "", ville: "", site: "", message: "" });}}>
                  Envoyer une autre demande
                </button>
              </div> :

            <>
                <div className="contact-form__row">
                  <label className="contact-form__field">
                    <span>Nom de l'agence</span>
                    <input type="text" required value={form.agence} onChange={set("agence")} placeholder="Pompes funèbres…" />
                  </label>
                  <label className="contact-form__field">
                    <span>Nom et prénom du contact</span>
                    <input type="text" required value={form.nom} onChange={set("nom")} placeholder="Marie Durand" />
                  </label>
                </div>
                <div className="contact-form__row">
                  <label className="contact-form__field">
                    <span>Email</span>
                    <input type="email" required value={form.email} onChange={set("email")} placeholder="marie.durand@…" />
                  </label>
                  <label className="contact-form__field">
                    <span>Téléphone</span>
                    <input type="tel" value={form.telephone} onChange={set("telephone")} placeholder="06 12 34 56 78" />
                  </label>
                </div>
                <div className="contact-form__row">
                  <label className="contact-form__field">
                    <span>Ville / département</span>
                    <input type="text" value={form.ville} onChange={set("ville")} placeholder="Marseille — 13" />
                  </label>
                  <label className="contact-form__field">
                    <span>Site web de l'agence</span>
                    <input type="url" value={form.site} onChange={set("site")} placeholder="https://…" />
                  </label>
                </div>
                <label className="contact-form__field contact-form__field--full">
                  <span>Message <em>(optionnel)</em></span>
                  <textarea rows="5" value={form.message} onChange={set("message")}
                placeholder="Quelques mots sur votre agence, vos attentes, vos questions…" />
                </label>
                <div className="contact-form__submit">
                  <button type="submit" className="btn btn--gold btn--lg">
                    Être recontacté
                    <ArrowRight />
                  </button>
                  <p className="contact-form__note">
                    Vos données ne sont utilisées que pour vous répondre. Aucune
                    inscription, aucun envoi commercial.
                  </p>
                </div>
              </>
            }
          </form>

          <aside className="contact-side">
            <h4>Vous préférez échanger directement&nbsp;?</h4>
            <p>Contactez-nous par email ou par téléphone — nous reviendrons vers vous dans la journée.</p>
            <a href="mailto:pro@memoire-vive.eu" className="contact-side__item">
              <IconMail />
              <div>
                <div className="contact-side__label">Email</div>
                <div className="contact-side__value">contact@memoire-vive.eu</div>
              </div>
            </a>
            <a href="tel:+33000000000" className="contact-side__item">
              <IconPhone />
              <div>
                <div className="contact-side__label">Téléphone</div>
                <div className="contact-side__value">06 08 57 20 06</div>
              </div>
            </a>

            <div className="contact-side__hours">
              <div className="contact-side__hours-title">Disponibilité</div>
              <div>Lundi → Vendredi · 8h — 19h</div>
            </div>

            <div className="contact-side__values">
              <div className="contact-side__value-item">
                <IconShield /> <span>Hébergement en France</span>
              </div>
              <div className="contact-side__value-item">
                <IconLock /> <span>Données protégées</span>
              </div>
              <div className="contact-side__value-item">
                <IconClock /> <span>Réponse sous 48h</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>);

}

/* =========================================================================
   APP
   ========================================================================= */
function App() {
  return (
    <div className="page page--pro">
      <Header variant="pro" />
      <HeroPro />
      <Avantages />
      <MarqueBlanche />
      <EspaceHommageComplet />
      <VotreEspacePro />
      <MiseEnPlace />
      <Conditions />
      <ContactPro />
      <Footer />
      <Lightbox />
      <BackToTop />
    </div>);

}

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