// ui.jsx — shared UI primitives for NOVA Résidence
// Loaded BEFORE app.jsx so its components and styles are available.

// ──────────────────────────────────────────────────────────────────────────
// PLACEHOLDER (striped image stand-in)
// ──────────────────────────────────────────────────────────────────────────

function Placeholder({ label, ratio = "16/9", tone = "warm", radius = 0, style = {}, children, src }) {
  const theme = window.useTheme ? window.useTheme() : null;
  const showLabel = theme ? theme.t.showPlaceholderLabels : true;
  const accent = theme ? theme.palette.accent : "#C5A572";
  const ink = theme ? theme.palette.ink : "#1F2A33";
  const bg = tone === "dark" ?
  theme ? theme.palette.deep : "#1F2A33" :
  tone === "ink" ?
  ink :
  theme ? theme.palette.bg2 : "#EBE6DA";

  const stripeColor = tone === "dark" || tone === "ink" ?
  "rgba(255,255,255,0.06)" :
  "rgba(31,42,51,0.06)";

  // If a real image src is provided, render it; placeholder label only shown if no src OR theme.showPlaceholderLabels is true AND we want overlay.
  return (
    <div
      className="nv-placeholder"
      style={{
        position: "relative",
        aspectRatio: ratio,
        background: bg,
        borderRadius: radius,
        overflow: "hidden",
        backgroundImage: src ? undefined : `repeating-linear-gradient(135deg, ${stripeColor} 0 1px, transparent 1px 14px)`,
        color: tone === "dark" || tone === "ink" ? "#F5F2EC" : ink,
        ...style
      }}>
      
      {src &&
      <img src={src} alt={label || ""} style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        objectFit: "cover", display: "block"
      }} />
      }
      {!src && showLabel &&
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
        flexDirection: "column", gap: 6,
        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
        fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
        opacity: 0.65, textAlign: "center", padding: 24
      }}>
          <span style={{
          width: 28, height: 28, borderRadius: "50%",
          border: `1px solid currentColor`, opacity: 0.5,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 14
        }}>◇</span>
          <span>{label || "image"}</span>
        </div>
      }
      {children}
    </div>);

}

// ──────────────────────────────────────────────────────────────────────────
// LOGO — wordmark + monogram (text-based since no logo file provided yet)
// ──────────────────────────────────────────────────────────────────────────

function Logo({ size = 32, variant = "full", dark = false, onClick }) {
  // Use the horizontal brand mark when full, the round monogram when compact
  const src = variant === "mark" ?
  dark ? "assets/logo-mono-dore.png" : "assets/logo-rond.png" :
  dark ? "assets/logo-fond-sombre.png" : "assets/logo-horizontal.png";
  const h = variant === "mark" ? size : Math.round(size * 1.05);
  return (
    <a href="#/accueil" onClick={(e) => {if (onClick) {e.preventDefault();onClick();}}}
    style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}>
      <img src={src} alt="NOVA Résidence" style={{ height: h, width: "auto", display: "block" }} />
    </a>);

}

// ──────────────────────────────────────────────────────────────────────────
// BUTTONS
// ──────────────────────────────────────────────────────────────────────────

function Button({ children, variant = "primary", onClick, href, size = "md", icon, style = {} }) {
  const sizing = size === "lg" ?
  { padding: "16px 28px", fontSize: 14 } :
  size === "sm" ?
  { padding: "8px 14px", fontSize: 12 } :
  { padding: "12px 22px", fontSize: 13 };

  const variantStyle = variant === "primary" ?
  { background: "var(--accent)", color: "#FAF6EC", border: "1px solid var(--accent)" } :
  variant === "dark" ?
  { background: "var(--ink)", color: "var(--bg)", border: "1px solid var(--ink)" } :
  variant === "ghost" ?
  { background: "transparent", color: "var(--ink)", border: "1px solid var(--line)" } :
  variant === "link" ?
  { background: "transparent", color: "var(--ink)", border: 0, padding: 0, textDecoration: "underline", textUnderlineOffset: 4 } :
  {};

  const Tag = href ? "a" : "button";
  return (
    <Tag
      href={href}
      onClick={onClick}
      style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        fontFamily: "var(--font-b)", fontWeight: 500,
        letterSpacing: "0.04em", textTransform: "uppercase",
        cursor: "pointer", textDecoration: "none",
        borderRadius: 0, transition: "all .2s ease",
        ...sizing, ...variantStyle, ...style
      }}
      onMouseEnter={(e) => {if (variant === "primary") e.currentTarget.style.background = "var(--accent-dark)";}}
      onMouseLeave={(e) => {if (variant === "primary") e.currentTarget.style.background = "var(--accent)";}}>
      
      <span>{children}</span>
      {icon && <span style={{ fontSize: "1.1em" }}>{icon}</span>}
    </Tag>);

}

// ──────────────────────────────────────────────────────────────────────────
// SECTION SHELL
// ──────────────────────────────────────────────────────────────────────────

function Section({ children, bg = "bg", id, style = {}, fullBleed = false, label }) {
  return (
    <section id={id} style={{
      background: bg === "bg2" ? "var(--bg2)" : bg === "surface" ? "var(--surface)" : bg === "deep" ? "var(--deep)" : bg === "ink" ? "var(--ink)" : "var(--bg)",
      color: bg === "deep" || bg === "ink" ? "var(--bg)" : "var(--ink)",
      paddingTop: "var(--section-py)", paddingBottom: "var(--section-py)",
      ...style
    }}>
      <div style={{
        maxWidth: fullBleed ? "100%" : 1280,
        margin: "0 auto", padding: fullBleed ? 0 : "0 48px"
      }}>
        {label && <Eyebrow>{label}</Eyebrow>}
        {children}
      </div>
    </section>);

}

function Eyebrow({ children, style = {} }) {
  return (
    <div style={{
      fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 500,
      letterSpacing: "0.24em", textTransform: "uppercase",
      color: "var(--accent)", marginBottom: 24,
      display: "flex", alignItems: "center", gap: 12,
      ...style
    }}>
      <span style={{ width: 24, height: 1, background: "var(--accent)" }}></span>
      {children}
    </div>);

}

// ──────────────────────────────────────────────────────────────────────────
// TOP BAR
// ──────────────────────────────────────────────────────────────────────────

function TopBar({ route, navigate }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Close the mobile menu whenever the route changes.
  useEffect(() => {setMenuOpen(false);}, [route]);

  const links = [
  { id: "residence", label: "La Résidence" },
  { id: "appartements", label: "Appartements" },
  { id: "orange", label: "Orange" },
  { id: "habiter", label: "Habiter" },
  { id: "investir", label: "Investir" },
  { id: "contact", label: "Contact" }];


  const go = (id) => {navigate(id);setMenuOpen(false);};

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled || menuOpen ? "color-mix(in srgb, var(--bg) 92%, transparent)" : "transparent",
      backdropFilter: scrolled || menuOpen ? "blur(14px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled || menuOpen ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled || menuOpen ? "1px solid var(--line)" : "1px solid transparent",
      transition: "background .25s ease, border-color .25s ease"
    }}>
      <div className="nv-topbar" style={{
        maxWidth: 1280, margin: "0 auto",
        padding: "16px 48px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <Logo size={44} onClick={() => navigate("accueil")} />
        <nav className="nv-topnav" style={{ display: "flex", alignItems: "center", gap: 32 }}>
          {links.map((l) =>
          <a key={l.id}
          href={`#/${l.id}`}
          onClick={(e) => {e.preventDefault();navigate(l.id);}}
          style={{
            fontFamily: "var(--font-b)", fontSize: 13,
            color: route === l.id ? "var(--accent)" : "var(--ink)",
            textDecoration: "none", fontWeight: 500,
            letterSpacing: "0.02em",
            paddingBottom: 3,
            borderBottom: route === l.id ? "1px solid var(--accent)" : "1px solid transparent"
          }}>
              {l.label}
            </a>
          )}
        </nav>
        <div className="nv-topright" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="tel:+33766461865" className="nv-topphone" style={{ fontFamily: "var(--font-b)", fontSize: 13, color: "var(--ink2)", textDecoration: "none" }}>07 66 46 18 65</a>
          <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" aria-label="Contacter sur WhatsApp"
             onClick={() => { if (window.plausible) { plausible('Clic WhatsApp'); } }}
             style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: "50%", background: "#25D366", textDecoration: "none", flexShrink: 0 }}>
            <svg width="22" height="22" viewBox="0 0 32 32" fill="#fff" aria-hidden="true"><path d="M16.04 4C9.93 4 4.98 8.95 4.98 15.06c0 2.13.6 4.12 1.64 5.81L5 28l7.32-1.59a11 11 0 0 0 3.72.65h.01c6.11 0 11.06-4.95 11.06-11.06C27.11 8.95 22.15 4 16.04 4Zm6.45 15.66c-.27.76-1.58 1.46-2.18 1.51-.56.05-1.26.07-2.04-.13-.47-.12-1.07-.34-1.85-.67-3.25-1.4-5.37-4.66-5.53-4.88-.16-.22-1.33-1.76-1.33-3.36s.84-2.39 1.14-2.71c.3-.32.65-.4.86-.4.21 0 .43 0 .61.01.2.01.46-.07.72.55.27.64.91 2.21.99 2.37.08.16.13.35.03.56-.1.21-.16.35-.31.54-.16.19-.33.42-.47.56-.16.16-.32.33-.14.64.18.32.81 1.33 1.74 2.15 1.19 1.06 2.2 1.4 2.51 1.56.31.16.49.13.67-.08.18-.21.77-.9.98-1.21.21-.32.41-.27.69-.16.27.11 1.74.82 2.04.97.3.16.5.23.57.36.07.13.07.74-.2 1.5Z"/></svg>
          </a>
          <Button variant="dark" size="sm" onClick={() => navigate("contact")}>Contactez nous</Button>
        </div>
        <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" aria-label="Contacter sur WhatsApp"
           className="nv-wa-mobile"
           onClick={() => { if (window.plausible) { plausible('Clic WhatsApp'); } }}
           style={{ display: "none", alignItems: "center", justifyContent: "center", width: 40, height: 40, borderRadius: "50%", background: "#25D366", textDecoration: "none", flexShrink: 0, marginLeft: "auto", marginRight: 8 }}>
          <svg width="23" height="23" viewBox="0 0 32 32" fill="#fff" aria-hidden="true"><path d="M16.04 4C9.93 4 4.98 8.95 4.98 15.06c0 2.13.6 4.12 1.64 5.81L5 28l7.32-1.59a11 11 0 0 0 3.72.65h.01c6.11 0 11.06-4.95 11.06-11.06C27.11 8.95 22.15 4 16.04 4Zm6.45 15.66c-.27.76-1.58 1.46-2.18 1.51-.56.05-1.26.07-2.04-.13-.47-.12-1.07-.34-1.85-.67-3.25-1.4-5.37-4.66-5.53-4.88-.16-.22-1.33-1.76-1.33-3.36s.84-2.39 1.14-2.71c.3-.32.65-.4.86-.4.21 0 .43 0 .61.01.2.01.46-.07.72.55.27.64.91 2.21.99 2.37.08.16.13.35.03.56-.1.21-.16.35-.31.54-.16.19-.33.42-.47.56-.16.16-.32.33-.14.64.18.32.81 1.33 1.74 2.15 1.19 1.06 2.2 1.4 2.51 1.56.31.16.49.13.67-.08.18-.21.77-.9.98-1.21.21-.32.41-.27.69-.16.27.11 1.74.82 2.04.97.3.16.5.23.57.36.07.13.07.74-.2 1.5Z"/></svg>
        </a>
        <button
          className="nv-burger"
          aria-label="Menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((v) => !v)}
          style={{
            display: "none", background: "transparent", border: 0,
            width: 40, height: 40, cursor: "pointer", padding: 8,
            color: "var(--ink)", alignItems: "center", justifyContent: "center"
          }}>
          <span style={{ position: "relative", display: "block", width: 22, height: 14 }}>
            <span style={{ position: "absolute", left: 0, right: 0, top: menuOpen ? 6 : 0, height: 2, background: "currentColor", transition: "transform .25s ease, top .25s ease, opacity .2s", transform: menuOpen ? "rotate(45deg)" : "none" }}></span>
            <span style={{ position: "absolute", left: 0, right: 0, top: 6, height: 2, background: "currentColor", opacity: menuOpen ? 0 : 1, transition: "opacity .2s" }}></span>
            <span style={{ position: "absolute", left: 0, right: 0, top: menuOpen ? 6 : 12, height: 2, background: "currentColor", transition: "transform .25s ease, top .25s ease", transform: menuOpen ? "rotate(-45deg)" : "none" }}></span>
          </span>
        </button>
      </div>

      {/* Mobile dropdown menu */}
      <div className="nv-mobilemenu" data-open={menuOpen ? "1" : "0"} style={{
        display: "none", flexDirection: "column",
        maxWidth: 1280, margin: "0 auto", padding: "8px 20px 24px"
      }}>
        {links.map((l) =>
        <a key={l.id}
        href={`#/${l.id}`}
        onClick={(e) => {e.preventDefault();go(l.id);}}
        style={{
          fontFamily: "var(--font-b)", fontSize: 17, fontWeight: 500,
          color: route === l.id ? "var(--accent)" : "var(--ink)",
          textDecoration: "none", padding: "14px 4px",
          borderBottom: "1px solid var(--line)"
        }}>
            {l.label}
          </a>
        )}
        <a href="tel:+33766461865" style={{
          fontFamily: "var(--font-b)", fontSize: 15, color: "var(--ink2)",
          textDecoration: "none", padding: "16px 4px 4px"
        }}>📞 07 66 46 18 65</a>
      </div>
    </header>);

}

// ──────────────────────────────────────────────────────────────────────────
// FOOTER
// ──────────────────────────────────────────────────────────────────────────

function Footer({ navigate }) {
  const [plaquetteOpen, setPlaquetteOpen] = React.useState(false);
  return (
    <footer style={{ background: "var(--ink)", color: "var(--bg)", paddingTop: 80, paddingBottom: 32 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 48, paddingBottom: 64, borderBottom: "1px solid rgba(255,255,255,.12)"
        }}>
          <div>
            <Logo size={56} dark />
            <p style={{ marginTop: 24, fontFamily: "var(--font-b)", fontSize: 14, lineHeight: 1.7, color: "rgba(242,235,221,.7)", maxWidth: 320 }}>
              Une petite résidence de huit T2 au cœur d'Orange, pensée pour vivre ou investir au soleil du Vaucluse.
            </p>
          </div>
          <FooterCol title="Le programme" links={[
          ["La Résidence", "residence"],
          ["Les Appartements", "appartements"]]
          } navigate={navigate} />
          <FooterCol title="Acheter" links={[
          ["Investir", "investir"],
          ["Habiter", "habiter"],
          ["Orange & le quartier", "orange"]]
          } navigate={navigate} />
          <div>
            <h4 style={{ fontFamily: "var(--font-b)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(242,235,221,.5)", fontWeight: 500, marginBottom: 20 }}>Contact</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              <li style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--bg)" }}>Anne Magnoni</li>
              <li style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--bg)" }}><a href="tel:+33766461865" style={{ color: "inherit", textDecoration: "none" }}>07 66 46 18 65</a></li>
              <li style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--bg)" }}><a href="mailto:a.magnoni@myamo.com" style={{ color: "inherit", textDecoration: "none" }}>a.magnoni@myamo.com</a></li>
              <li style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "rgba(242,235,221,.7)", lineHeight: 1.6 }}>Myamo Développement<br />4-6 Place de la République<br />13200 Arles</li>
            </ul>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32, fontFamily: "var(--font-b)", fontSize: 12, color: "rgba(242,235,221,.5)" }}>
          <span>© {new Date().getFullYear()} NOVA Résidence — Myamo Développement — Tous droits réservés</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#/mentions-legales" onClick={(e) => {e.preventDefault();navigate("mentions-legales");}} style={{ color: "inherit", textDecoration: "none" }}>Mentions légales</a>
            <a href="#/politique-confidentialite" onClick={(e) => {e.preventDefault();navigate("politique-confidentialite");}} style={{ color: "inherit", textDecoration: "none" }}>Confidentialité</a>
            <a href="#" onClick={(e) => {e.preventDefault();window.dispatchEvent(new CustomEvent("nova:open-cookie-settings"));}} style={{ color: "inherit", textDecoration: "none" }}>Gérer mes cookies</a>
            <a href="assets/Plaquette-Nova-Residence.pdf" onClick={(e) => {e.preventDefault();setPlaquetteOpen(true);}} style={{ color: "inherit", textDecoration: "none" }}>Recevoir la plaquette</a>
          </div>
        </div>
      </div>
      {plaquetteOpen && window.PlaquetteModal && <window.PlaquetteModal onClose={() => setPlaquetteOpen(false)} />}
    </footer>);

}

// ──────────────────────────────────────────────────────────────────────────
// COOKIE CONSENT — bandeau RGPD + chargement conditionnel du pixel Meta
// ──────────────────────────────────────────────────────────────────────────

const CONSENT_KEY = "nova_cookie_consent";

function loadMetaPixel() {
  if (window.__novaMetaPixelLoaded) return;
  window.__novaMetaPixelLoaded = true;
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  document,'script','https://connect.facebook.net/en_US/fbevents.js');
  window.fbq('init', '860717183426332');
  window.fbq('track', 'PageView');
}

function loadGoogleAds() {
  if (window.__novaGoogleAdsLoaded) return;
  window.__novaGoogleAdsLoaded = true;
  var gs = document.createElement('script');
  gs.async = true;
  gs.src = 'https://www.googletagmanager.com/gtag/js?id=AW-18202499337';
  document.head.appendChild(gs);
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  window.gtag = gtag;
  gtag('js', new Date());
  gtag('config', 'AW-18202499337');
}

function loadConsentedTags() {
  loadMetaPixel();
  loadGoogleAds();
}

function CookieBanner({ navigate }) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    let choice = null;
    try { choice = localStorage.getItem(CONSENT_KEY); } catch (e) {}
    if (choice === "accepted") loadConsentedTags();
    else if (choice !== "refused") setVisible(true);
    const reopen = () => setVisible(true);
    window.addEventListener("nova:open-cookie-settings", reopen);
    return () => window.removeEventListener("nova:open-cookie-settings", reopen);
  }, []);

  const choose = (value) => {
    try { localStorage.setItem(CONSENT_KEY, value); } catch (e) {}
    setVisible(false);
    if (value === "accepted") loadConsentedTags();
  };

  if (!visible) return null;

  return (
    <div role="dialog" aria-label="Consentement aux cookies" style={{
      position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 300,
      background: "var(--ink)", color: "var(--bg)",
      borderTop: "1px solid rgba(255,255,255,.14)",
      boxShadow: "0 -12px 40px -16px rgba(0,0,0,.5)",
    }}>
      <div className="nv-cookie-inner" style={{
        maxWidth: 1280, margin: "0 auto", padding: "20px 48px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap",
      }}>
        <p style={{ fontFamily: "var(--font-b)", fontSize: 13.5, lineHeight: 1.6, color: "rgba(242,235,221,.85)", margin: 0, flex: "1 1 420px", minWidth: 0 }}>
          Nous utilisons des cookies de mesure publicitaire (Meta et Google) pour améliorer nos campagnes. Vous pouvez les accepter ou les refuser. En savoir plus dans notre{" "}
          <a href="#/politique-confidentialite"
             onClick={(e) => { e.preventDefault(); navigate("politique-confidentialite"); }}
             style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>Politique de confidentialité</a>.
        </p>
        <div style={{ display: "flex", gap: 12, flexShrink: 0 }}>
          <button onClick={() => choose("refused")} style={cookieBtn(false)}>Refuser</button>
          <button onClick={() => choose("accepted")} style={cookieBtn(true)}>Accepter</button>
        </div>
      </div>
    </div>);
}

function cookieBtn(primary) {
  return {
    fontFamily: "var(--font-b)", fontWeight: 500, fontSize: 13,
    letterSpacing: "0.04em", textTransform: "uppercase",
    padding: "12px 26px", cursor: "pointer", borderRadius: 0,
    border: primary ? "1px solid var(--accent)" : "1px solid rgba(242,235,221,.4)",
    background: primary ? "var(--accent)" : "transparent",
    color: primary ? "#1F2A33" : "var(--bg)",
  };
}

function FooterCol({ title, links, navigate }) {
  return (
    <div>
      <h4 style={{ fontFamily: "var(--font-b)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(242,235,221,.5)", fontWeight: 500, marginBottom: 20 }}>{title}</h4>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
        {links.map(([label, route]) =>
        <li key={label}>
            <a href={`#/${route}`} onClick={(e) => {e.preventDefault();navigate(route);}}
          style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "rgba(242,235,221,.85)", textDecoration: "none" }}>
              {label}
            </a>
          </li>
        )}
      </ul>
    </div>);

}

// ──────────────────────────────────────────────────────────────────────────
// FORMAT HELPERS
// ──────────────────────────────────────────────────────────────────────────

const fmtPrice = (n) => new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(n);
const fmtN = (n) => new Intl.NumberFormat("fr-FR").format(Math.round(n));

// expose
const WHATSAPP_URL = "https://wa.me/33766461865?text=Bonjour%2C%20je%20suis%20int%C3%A9ress%C3%A9(e)%20par%20la%20R%C3%A9sidence%20NOVA%20%C3%A0%20Orange.";

function WhatsAppFab() {
  const onClick = () => { if (window.plausible) { plausible('Clic WhatsApp'); } };
  return (
    <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer"
       aria-label="Contacter sur WhatsApp" onClick={onClick}
       style={{
         position: "fixed", right: 20, bottom: 20, zIndex: 250,
         width: 56, height: 56, borderRadius: "50%",
         background: "#25D366", display: "flex", alignItems: "center", justifyContent: "center",
         boxShadow: "0 6px 20px -4px rgba(0,0,0,.35)", textDecoration: "none",
       }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="#fff" aria-hidden="true">
        <path d="M16.04 4C9.93 4 4.98 8.95 4.98 15.06c0 2.13.6 4.12 1.64 5.81L5 28l7.32-1.59a11 11 0 0 0 3.72.65h.01c6.11 0 11.06-4.95 11.06-11.06C27.11 8.95 22.15 4 16.04 4Zm6.45 15.66c-.27.76-1.58 1.46-2.18 1.51-.56.05-1.26.07-2.04-.13-.47-.12-1.07-.34-1.85-.67-3.25-1.4-5.37-4.66-5.53-4.88-.16-.22-1.33-1.76-1.33-3.36s.84-2.39 1.14-2.71c.3-.32.65-.4.86-.4.21 0 .43 0 .61.01.2.01.46-.07.72.55.27.64.91 2.21.99 2.37.08.16.13.35.03.56-.1.21-.16.35-.31.54-.16.19-.33.42-.47.56-.16.16-.32.33-.14.64.18.32.81 1.33 1.74 2.15 1.19 1.06 2.2 1.4 2.51 1.56.31.16.49.13.67-.08.18-.21.77-.9.98-1.21.21-.32.41-.27.69-.16.27.11 1.74.82 2.04.97.3.16.5.23.57.36.07.13.07.74-.2 1.5Z"/>
      </svg>
    </a>);
}

Object.assign(window, {
  Placeholder, Logo, Button, Section, Eyebrow,
  TopBar, Footer, FooterCol, CookieBanner, WhatsAppFab, WHATSAPP_URL, fmtPrice, fmtN
});