// ============================================================================
// MOVA RELOCATION — Header sticky + Menu mobile
// ============================================================================

function Header({ scrolled, onOpenMenu }) {
  const t = useT();
  return (
    <header
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 60,
        padding: scrolled ? "18px 48px" : "28px 48px",
        background: scrolled ? "rgba(10,10,10,0.92)" : "transparent",
        backdropFilter: scrolled ? "blur(14px) saturate(1.2)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(14px) saturate(1.2)" : "none",
        borderBottom: scrolled ? "0.5px solid rgba(184,148,76,0.18)" : "0.5px solid transparent",
        transition:
          "background 400ms ease, padding 400ms ease, border-color 400ms ease, backdrop-filter 400ms ease",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          maxWidth: 1480,
          margin: "0 auto",
        }}
      >
        <a href="#top" style={{ textDecoration: "none" }} aria-label="MOVA Relocation, retour en haut">
          <MovaWordmark size={22} />
        </a>

        {/* Nav desktop */}
        <nav className="mova-nav-desktop" aria-label="Navigation principale">
          <ul
            style={{
              display: "flex",
              gap: 44,
              listStyle: "none",
              margin: 0,
              padding: 0,
            }}
          >
            {NAV_LINKS.map((link) => (
              <li key={link.href}>
                <a
                  href={link.href}
                  className="mova-nav-link"
                  style={{
                    fontFamily: "var(--font-sans)",
                    fontWeight: 300,
                    fontSize: 11,
                    letterSpacing: "0.32em",
                    color: "var(--mova-cream)",
                    textTransform: "uppercase",
                    textDecoration: "none",
                    transition: "color 320ms ease",
                  }}
                >
                  {t(link.key)}
                </a>
              </li>
            ))}
          </ul>
        </nav>

        {/* Burger mobile */}
        <button
          className="mova-burger"
          onClick={onOpenMenu}
          aria-label="Ouvrir le menu"
          style={{
            background: "transparent",
            border: "none",
            cursor: "pointer",
            padding: 8,
            display: "none",
          }}
        >
          <svg width="24" height="14" viewBox="0 0 24 14" fill="none">
            <line x1="0" y1="2" x2="24" y2="2" stroke="var(--mova-cream)" strokeWidth="0.8" />
            <line x1="0" y1="12" x2="18" y2="12" stroke="var(--mova-cream)" strokeWidth="0.8" />
          </svg>
        </button>
      </div>
    </header>
  );
}

function MobileMenu({ open, onClose }) {
  const t = useT();
  useEffect(() => {
    if (!open) return;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);
  return (
    <div
      aria-hidden={!open}
      style={{
        position: "fixed",
        inset: 0,
        background: "var(--mova-black)",
        zIndex: 80,
        opacity: open ? 1 : 0,
        pointerEvents: open ? "auto" : "none",
        transition: "opacity 420ms cubic-bezier(0.22,0.61,0.36,1)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "28px 32px",
        }}
      >
        <MovaWordmark size={20} />
        <button
          onClick={onClose}
          aria-label="Fermer le menu"
          style={{
            background: "transparent",
            border: "none",
            cursor: "pointer",
            color: "var(--mova-cream)",
            padding: 8,
          }}
        >
          <svg width="22" height="22" viewBox="0 0 22 22">
            <line x1="2" y1="2" x2="20" y2="20" stroke="currentColor" strokeWidth="0.8" />
            <line x1="20" y1="2" x2="2" y2="20" stroke="currentColor" strokeWidth="0.8" />
          </svg>
        </button>
      </div>
      <nav
        style={{
          flex: 1,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <ul
          style={{
            listStyle: "none",
            margin: 0,
            padding: 0,
            display: "flex",
            flexDirection: "column",
            gap: 32,
            textAlign: "center",
          }}
        >
          {NAV_LINKS.map((link, i) => (
            <li
              key={link.href}
              style={{
                opacity: open ? 1 : 0,
                transform: `translateY(${open ? 0 : 20}px)`,
                transition: `opacity 600ms ease ${200 + i * 80}ms, transform 600ms ease ${200 + i * 80}ms`,
              }}
            >
              <a
                href={link.href}
                onClick={onClose}
                style={{
                  fontFamily: "var(--font-serif)",
                  fontSize: 32,
                  fontWeight: 300,
                  letterSpacing: "0.04em",
                  color: "var(--mova-cream)",
                  textDecoration: "none",
                }}
              >
                {t(link.key)}
              </a>
            </li>
          ))}
        </ul>
      </nav>
      <div style={{ padding: "28px 32px", textAlign: "center" }}>
        <a
          href={WHATSAPP_URL}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: 11,
            letterSpacing: "0.4em",
            color: "var(--mova-gold)",
            textDecoration: "none",
            textTransform: "uppercase",
          }}
        >
          WhatsApp
        </a>
      </div>
    </div>
  );
}

// ----------------------------------------------------------------------------
// Bouton WhatsApp flottant
// ----------------------------------------------------------------------------
function FloatingWhatsapp({ visible }) {
  return (
    <a
      href={WHATSAPP_URL}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Nous contacter sur WhatsApp"
      style={{
        position: "fixed",
        right: 28,
        bottom: 28,
        width: 56,
        height: 56,
        borderRadius: "50%",
        background: "var(--mova-black)",
        border: "0.5px solid var(--mova-gold)",
        color: "var(--mova-cream)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 50,
        boxShadow: "0 18px 40px -16px rgba(0,0,0,0.6)",
        opacity: visible ? 1 : 0,
        transform: `translateY(${visible ? 0 : 24}px)`,
        pointerEvents: visible ? "auto" : "none",
        transition:
          "opacity 480ms cubic-bezier(0.22,0.61,0.36,1), transform 480ms cubic-bezier(0.22,0.61,0.36,1), background 320ms",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = "var(--mova-gold)";
        e.currentTarget.style.color = "var(--mova-black)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = "var(--mova-black)";
        e.currentTarget.style.color = "var(--mova-cream)";
      }}
    >
      <Icon name="whatsapp" size={24} />
    </a>
  );
}

Object.assign(window, { Header, MobileMenu, FloatingWhatsapp });
