/* =========================================================================
   SHARED — Header, Footer, Lightbox, Icons, atoms
   Exposed via window.MV at the bottom so both pages can use them.
   ========================================================================= */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* ---------- HEADER (contextual) ---------- */
function Header({ variant = "famille" }) {
  const familleLinks = [
    { href: "#comment",       label: "Comment ça marche" },
    { href: "#demo",          label: "Démonstration" },
  ];
  const familleCTA = { href: "pro.html", label: "Espace Pro" };

  const proLinks = [
    { href: "#avantages",     label: "Avantages pour l'agence" },
    { href: "#espace-pro",    label: "Votre Espace Pro" },
  ];
  const proCTA = { href: "index.html", label: "Espace Famille" };

  const links = variant === "pro" ? proLinks : familleLinks;
  const cta = variant === "pro" ? proCTA : familleCTA;

  return (
    <header className={`page-header page-header--${variant}`} data-screen-label="00 Header">
      <div className="page-header__inner">
        <a href={variant === "pro" ? "index.html" : "index.html"} className="page-header__brand" aria-label="Mémoire Vive — accueil">
          <img src="assets/logo-mv.png" alt="Mémoire Vive" className="page-header__logo" />
        </a>
        <nav className="page-header__nav">
          {links.map((l) => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
          <a href={cta.href} className="page-header__cta">{cta.label}</a>
        </nav>
      </div>
    </header>
  );
}

/* ---------- FOOTER (shared) ---------- */
function Footer() {
  return (
    <footer className="page-footer" data-screen-label="99 Footer">
      <div className="container page-footer__inner">
        <img src="assets/logo-mv.png" alt="Mémoire Vive" className="page-footer__logo" />
        <p className="page-footer__tagline">
          <em>Pour que la mémoire soit toujours vivante.</em>
        </p>
        <div className="page-footer__links">
          <a href="index.html">Espace Famille</a>
          <span>·</span>
          <a href="pro.html">Espace Pro</a>
          <span>·</span>
          <a href="mentions-legales.html">Mentions légales</a>
          <span>·</span>
          <a href="cgu.html">CGU</a>
          <span>·</span>
          <a href="confidentialite.html">Confidentialité</a>
        </div>
        <div className="page-footer__copy">
          © Mémoire Vive — Service proposé par votre agence funéraire partenaire
        </div>
      </div>
    </footer>
  );
}

/* ---------- ATOMS ---------- */
function SectionLabel({ n, children, numbering = "arabic" }) {
  const numStr = numbering === "roman" ? toRoman(n) : String(n).padStart(2, "0");
  return (
    <div className="section-label">
      <span>Section {numStr}</span>
      <span className="section-label__dash">—</span>
      <span>{children}</span>
    </div>
  );
}

function toRoman(num) {
  const map = [[10,"X"],[9,"IX"],[5,"V"],[4,"IV"],[1,"I"]];
  let s = "";
  for (const [v, r] of map) { while (num >= v) { s += r; num -= v; } }
  return s;
}

function Ornament() {
  return (
    <div className="ornament">
      <span className="ornament__rule"></span>
      <svg viewBox="0 0 24 24" className="ornament__diamond" aria-hidden="true">
        <path d="M12 2 L14 12 L12 22 L10 12 Z" fill="currentColor"/>
        <path d="M2 12 L12 10 L22 12 L12 14 Z" fill="currentColor"/>
      </svg>
      <span className="ornament__rule"></span>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div className="stat">
      <div className="stat__value">{value}</div>
      <div className="stat__label">{label}</div>
    </div>
  );
}

function PhoneFrame({ children }) {
  return (
    <div className="phone-frame">
      <div className="phone-frame__notch" aria-hidden="true"></div>
      <div className="phone-frame__screen">{children}</div>
    </div>
  );
}

function FigCaption({ children, show = true }) {
  if (!show) return null;
  return <figcaption>{children}</figcaption>;
}

/* ---------- LIGHTBOX ---------- */
function openLightbox(src, alt) {
  window.dispatchEvent(new CustomEvent("open-lightbox", { detail: { src, alt } }));
}

function Lightbox() {
  const [item, setItem] = useStateS(null);

  useEffectS(() => {
    const onOpen = (e) => setItem(e.detail);
    const onKey = (e) => { if (e.key === "Escape") setItem(null); };
    window.addEventListener("open-lightbox", onOpen);
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("open-lightbox", onOpen);
      window.removeEventListener("keydown", onKey);
    };
  }, []);

  useEffectS(() => {
    document.body.style.overflow = item ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [item]);

  if (!item) return null;

  return (
    <div className="lightbox" role="dialog" aria-modal="true" aria-label={item.alt || "Aperçu"} onClick={() => setItem(null)}>
      <button className="lightbox__close" aria-label="Fermer" onClick={() => setItem(null)}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
          <line x1="6" y1="6" x2="18" y2="18"/>
          <line x1="18" y1="6" x2="6" y2="18"/>
        </svg>
      </button>
      <figure className="lightbox__figure" onClick={(e) => e.stopPropagation()}>
        <img src={item.src} alt={item.alt || ""} className="lightbox__img" />
        {item.alt && <figcaption className="lightbox__caption">{item.alt}</figcaption>}
      </figure>
    </div>
  );
}

function Zoomable({ src, alt, children, className = "" }) {
  return (
    <button type="button"
            className={`zoomable ${className}`}
            onClick={() => openLightbox(src, alt)}
            aria-label={`Agrandir : ${alt}`}>
      {children}
      <span className="zoomable__hint" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7"/>
          <line x1="21" y1="21" x2="16.65" y2="16.65"/>
          <line x1="11" y1="8" x2="11" y2="14"/>
          <line x1="8" y1="11" x2="14" y2="11"/>
        </svg>
        Agrandir
      </span>
    </button>
  );
}

/* ---------- ICONS ---------- */
function ArrowRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
    </svg>
  );
}
function ArrowDown() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"/>
      <polyline points="5 12 12 19 19 12"/>
    </svg>
  );
}
function ArrowUpRight() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="7" y1="17" x2="17" y2="7"/>
      <polyline points="7 7 17 7 17 17"/>
    </svg>
  );
}
function IconDownloadSmall() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
      <polyline points="7 10 12 15 17 10"/>
      <line x1="12" y1="15" x2="12" y2="3"/>
    </svg>
  );
}
function Check() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  );
}
function IconWebsite() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <line x1="3" y1="12" x2="21" y2="12"/>
      <path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/>
    </svg>
  );
}
function IconDownload() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
      <polyline points="7 10 12 15 17 10"/>
      <line x1="12" y1="15" x2="12" y2="3"/>
    </svg>
  );
}
function IconBook() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
    </svg>
  );
}
function IconFilm() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="6" width="14" height="12" rx="1.5"/>
      <path d="M22 8l-6 4 6 4V8z"/>
    </svg>
  );
}
function IconShield() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    </svg>
  );
}
function IconLock() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="11" width="16" height="10" rx="1.5"/>
      <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
    </svg>
  );
}
function IconClock() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <polyline points="12 7 12 12 15 14"/>
    </svg>
  );
}

/* Pro page icons */
function IconHeart() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/>
    </svg>
  );
}
function IconSparkle() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/>
    </svg>
  );
}
function IconPalette() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <circle cx="7.5" cy="10" r="1.2" fill="currentColor"/>
      <circle cx="12" cy="7" r="1.2" fill="currentColor"/>
      <circle cx="16.5" cy="10" r="1.2" fill="currentColor"/>
      <path d="M12 21a9 9 0 0 1-2.5-17.6c1.6.7 1.6 3.4 0 4.2-2 1-1 4 1.5 4 1.5 0 2.5 1 2 2.5-.5 1.5.5 4.5 1.5 4.5"/>
    </svg>
  );
}
function IconConnect() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="6" cy="12" r="3"/>
      <circle cx="18" cy="6" r="3"/>
      <circle cx="18" cy="18" r="3"/>
      <line x1="8.6" y1="10.6" x2="15.4" y2="7.4"/>
      <line x1="8.6" y1="13.4" x2="15.4" y2="16.6"/>
    </svg>
  );
}
function IconQR() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="7" height="7"/>
      <rect x="14" y="3" width="7" height="7"/>
      <rect x="3" y="14" width="7" height="7"/>
      <line x1="14" y1="14" x2="14" y2="17"/>
      <line x1="17" y1="14" x2="21" y2="14"/>
      <line x1="14" y1="20" x2="21" y2="20"/>
      <line x1="20" y1="17" x2="20" y2="21"/>
      <line x1="17" y1="17" x2="17" y2="17"/>
    </svg>
  );
}
function IconHands() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s-7-3-7-10V6l7-3 7 3v6c0 7-7 10-7 10z"/>
      <path d="M9 12l2 2 4-4"/>
    </svg>
  );
}
function IconSeed() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22V12"/>
      <path d="M5 8c0 4 3 7 7 7s7-3 7-7-3-6-7-6-7 2-7 6z"/>
      <path d="M9 17c-2 0-4 2-4 4M15 17c2 0 4 2 4 4"/>
    </svg>
  );
}
function IconMail() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <polyline points="3 7 12 13 21 7"/>
    </svg>
  );
}
function IconPhone() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  );
}

/* ---------- BACK TO TOP ---------- */
function BackToTop() {
  const [visible, setVisible] = useStateS(false);

  useEffectS(() => {
    const onScroll = () => {
      setVisible(window.scrollY > 600);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const toTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <button type="button"
            className={`back-to-top ${visible ? "is-visible" : ""}`}
            onClick={toTop}
            aria-label="Revenir en haut de la page"
            tabIndex={visible ? 0 : -1}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <line x1="12" y1="19" x2="12" y2="5"/>
        <polyline points="5 12 12 5 19 12"/>
      </svg>
    </button>
  );
}

/* ---------- EXPOSE ---------- */
Object.assign(window, {
  MV_Header: Header,
  MV_Footer: Footer,
  MV_BackToTop: BackToTop,
  MV_SectionLabel: SectionLabel,
  MV_Ornament: Ornament,
  MV_Stat: Stat,
  MV_PhoneFrame: PhoneFrame,
  MV_FigCaption: FigCaption,
  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_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,
});
