// Header.jsx — fixed transparent nav, becomes opaque on scroll
// Includes a discreet logo-variant switcher (3 versions) persisted to localStorage
function Header() {
  const { lang, t, setLang } = useLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [variant, setVariant] = React.useState(() => {
    try { return localStorage.getItem("fi-logo-variant") || "monogram"; }
    catch (e) { return "monogram"; }
  });
  const [switcherOpen, setSwitcherOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  function setVar(v) {
    setVariant(v);
    try { localStorage.setItem("fi-logo-variant", v); } catch (e) {}
  }

  const links = [
    { label: t("nav.studio"),   href: "index.html#studio" },
    { label: t("nav.projects"), href: "index.html#projekte" },
    { label: t("nav.approach"), href: "index.html#approach" },
    { label: t("nav.about"),    href: "about.html" },
    { label: t("nav.journal"),  href: "index.html#journal" },
    { label: t("nav.contact"),  href: "kontakt.html" },
  ];

  const LangToggle = ({ onDark }) => (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      fontFamily: "var(--font-sans)", fontSize: 10,
      letterSpacing: "0.32em", textTransform: "uppercase",
    }}>
      <button
        onClick={() => setLang("de")}
        aria-pressed={lang === "de"}
        style={{
          background: "transparent", border: 0, padding: 0, cursor: "pointer",
          color: "inherit", fontFamily: "inherit", fontSize: "inherit",
          letterSpacing: "inherit", textTransform: "inherit",
          opacity: lang === "de" ? 1 : 0.45,
          borderBottom: lang === "de" ? "1px solid currentColor" : "1px solid transparent",
          paddingBottom: 2,
        }}
      >DE</button>
      <span style={{ opacity: 0.5 }}>/</span>
      <button
        onClick={() => setLang("en")}
        aria-pressed={lang === "en"}
        style={{
          background: "transparent", border: 0, padding: 0, cursor: "pointer",
          color: "inherit", fontFamily: "inherit", fontSize: "inherit",
          letterSpacing: "inherit", textTransform: "inherit",
          opacity: lang === "en" ? 1 : 0.45,
          borderBottom: lang === "en" ? "1px solid currentColor" : "1px solid transparent",
          paddingBottom: 2,
        }}
      >EN</button>
    </div>
  );

  // ---------- Logo variants ----------
  const LogoMonogramLockup = () => (
    <a href="index.html" style={{
      display: "inline-flex", flexDirection: "column", alignItems: "flex-start",
      gap: 8, color: "inherit", border: 0, textDecoration: "none",
      justifySelf: "start",
    }}>
      <div style={{
        width: 56, height: 56,
        border: "1px solid currentColor",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-serif)", fontWeight: 400,
        fontSize: 28, letterSpacing: "0.04em",
        lineHeight: 1, color: "inherit",
      }}>FI</div>
      <div style={{
        fontFamily: "var(--font-serif)", fontWeight: 400,
        fontSize: 11, letterSpacing: "0.34em",
        textTransform: "uppercase", lineHeight: 1.4,
        textAlign: "center", width: 56,
      }}>
        Ferella<br />Interiors
      </div>
    </a>
  );

  const LogoLargeWordmark = () => (
    <a href="index.html" style={{
      display: "inline-flex", alignItems: "center", gap: 18,
      color: "inherit", border: 0, textDecoration: "none",
      justifySelf: "start",
    }}>
      <span style={{
        fontFamily: "var(--font-serif)", fontWeight: 400,
        fontSize: 38, letterSpacing: "0.02em",
        lineHeight: 1, fontStyle: "italic",
      }}>F<span style={{ opacity: 0.7 }}>·</span>I</span>
      <span style={{
        fontFamily: "var(--font-serif)", fontWeight: 400,
        fontSize: 22, letterSpacing: "0.36em",
        textTransform: "uppercase", lineHeight: 1,
        paddingTop: 2,
      }}>Ferella&nbsp;Interiors</span>
    </a>
  );

  const LogoStackedMark = () => (
    <a href="index.html" style={{
      display: "inline-flex", flexDirection: "column", alignItems: "center",
      color: "inherit", border: 0, textDecoration: "none",
      justifySelf: "center",
    }}>
      <img
        src={scrolled ? "assets/logo-ferella-dark.png" : "assets/logo-ferella-light.png"}
        alt="Ferella Interiors"
        style={{
          width: 96, height: 96, display: "block",
          objectFit: "contain",
        }}
      />
    </a>
  );

  const LogoSmallInline = () => (
    <a href="index.html" style={{
      display: "inline-flex", alignItems: "center", gap: 14,
      color: "inherit", border: 0, textDecoration: "none",
      justifySelf: "start",
    }}>
      <span style={{
        fontFamily: "var(--font-serif)", fontWeight: 400,
        fontSize: 22, letterSpacing: "0.02em",
        lineHeight: 1, fontStyle: "italic",
      }}>F<span style={{ opacity: 0.7 }}>·</span>I</span>
      <span style={{
        fontFamily: "var(--font-serif)", fontWeight: 400,
        fontSize: 12, letterSpacing: "0.34em",
        textTransform: "uppercase",
      }}>Ferella Interiors</span>
    </a>
  );

  const renderLogo = () => {
    if (variant === "wordmark") return <LogoLargeWordmark />;
    if (variant === "inline")   return <LogoSmallInline />;
    if (variant === "stacked")  return <LogoStackedMark />;
    return <LogoMonogramLockup />;
  };

  const variants = [
    { id: "monogram", label: "Monogramm-Lockup" },
    { id: "wordmark", label: "Großer Wordmark" },
    { id: "inline",   label: "Kompakt inline" },
    { id: "stacked",  label: "Original Brand-Mark (zentriert)" },
  ];

  const isStacked = variant === "stacked";

  return (
    <React.Fragment>
    <LogoSwitcher
      variant={variant}
      setVar={setVar}
      variants={variants}
      open={switcherOpen}
      setOpen={setSwitcherOpen}
    />
    <header
      data-screen-label="Header"
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        background: scrolled ? "rgba(245, 241, 234, 0.82)" : "transparent",
        backdropFilter: scrolled ? "blur(18px) saturate(120%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(18px) saturate(120%)" : "none",
        borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
        transition: "background 480ms var(--ease-quiet), border-color 480ms var(--ease-quiet), backdrop-filter 480ms var(--ease-quiet)",
        color: scrolled ? "var(--fg)" : "var(--fg-on-dark)",
      }}
    >
      {isStacked ? (
        <div style={{
          maxWidth: 1600, margin: "0 auto",
          padding: "16px 56px",
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr",
          alignItems: "center", gap: 32,
        }}>
          {/* Left nav */}
          <nav style={{ display: "flex", gap: 32, justifySelf: "start" }}>
            {links.slice(0, 3).map(l => (
              <a key={l.label} href={l.href} style={{
                fontFamily: "var(--font-sans)", fontSize: 11,
                letterSpacing: "0.28em", textTransform: "uppercase",
                color: "inherit", border: 0, textDecoration: "none",
                opacity: 0.86,
              }}>{l.label}</a>
            ))}
          </nav>

          {/* Centered stacked logo */}
          {renderLogo()}

          {/* Right nav + CTA */}
          <div style={{
            display: "flex", alignItems: "center", gap: 28,
            justifySelf: "end",
          }}>
            {links.slice(3, 5).map(l => (
              <a key={l.label} href={l.href} style={{
                fontFamily: "var(--font-sans)", fontSize: 11,
                letterSpacing: "0.28em", textTransform: "uppercase",
                color: "inherit", border: 0, textDecoration: "none",
                opacity: 0.86,
              }}>{l.label}</a>
            ))}
            <span style={{
              fontFamily: "var(--font-sans)", fontSize: 10,
              letterSpacing: "0.32em", textTransform: "uppercase",
              opacity: 0.7,
            }}>{/* lang */}<LangToggle /></span>
            <a href="kontakt.html" style={{
              fontFamily: "var(--font-sans)", fontSize: 11,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "inherit", borderBottom: "1px solid currentColor",
              paddingBottom: 3, textDecoration: "none",
            }}>{t("header.cta")}</a>
          </div>
        </div>
      ) : (
        <div style={{
          maxWidth: 1600, margin: "0 auto",
          padding: "20px 56px",
          display: "grid", gridTemplateColumns: "1.1fr auto 1.1fr", alignItems: "center",
          gap: 32,
        }}>
          {renderLogo()}

          <nav style={{
            display: "flex", gap: 36, justifySelf: "center",
          }}>
            {links.slice(0, 5).map(l => (
              <a key={l.label} href={l.href} style={{
                fontFamily: "var(--font-sans)", fontSize: 11,
                letterSpacing: "0.28em", textTransform: "uppercase",
                color: "inherit", border: 0, textDecoration: "none",
                opacity: 0.86,
              }}
              onMouseEnter={e => e.currentTarget.style.opacity = "1"}
              onMouseLeave={e => e.currentTarget.style.opacity = "0.86"}
              >{l.label}</a>
            ))}
          </nav>

          <div style={{
            display: "flex", alignItems: "center", gap: 28,
            justifySelf: "end",
          }}>
            <LangToggle />
            <a href="kontakt.html" style={{
              fontFamily: "var(--font-sans)", fontSize: 11,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "inherit", borderBottom: "1px solid currentColor",
              paddingBottom: 3, textDecoration: "none",
            }}>{t("header.cta")}</a>
          </div>
        </div>
      )}

    </header>
    </React.Fragment>
  );
}

function LogoSwitcher({ variant, setVar, variants, open, setOpen }) {
  return ReactDOM.createPortal(
    <div style={{
      position: "fixed", bottom: 20, right: 20, zIndex: 9999,
      fontFamily: "var(--font-sans)",
      pointerEvents: "auto",
    }}>
      {open && (
        <div style={{
          position: "absolute", bottom: 40, right: 0,
          background: "var(--bg-raised)",
          border: "1px solid var(--border)",
          boxShadow: "var(--shadow-card)",
          padding: "14px 14px",
          minWidth: 220,
        }}>
          <div style={{
            fontSize: 9, letterSpacing: "0.32em",
            textTransform: "uppercase", color: "var(--fg-muted)",
            marginBottom: 10,
          }}>Logo-Variante</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {variants.map(v => (
              <button key={v.id} onClick={() => setVar(v.id)} style={{
                textAlign: "left", padding: "8px 10px",
                border: 0, background: variant === v.id ? "var(--hover-overlay)" : "transparent",
                fontFamily: "var(--font-sans)", fontSize: 12,
                color: "var(--fg)", cursor: "pointer",
                display: "flex", alignItems: "center", gap: 10,
              }}>
                <span style={{
                  width: 7, height: 7, borderRadius: "50%",
                  background: variant === v.id ? "var(--fg)" : "transparent",
                  border: "1px solid var(--fg)",
                  flexShrink: 0,
                }} />
                {v.label}
              </button>
            ))}
          </div>
        </div>
      )}
      <button
        onClick={() => setOpen(!open)}
        aria-label="Logo-Variante wechseln"
        style={{
          width: 30, height: 30,
          border: "1px solid var(--border)",
          background: "rgba(246, 244, 239, 0.92)",
          backdropFilter: "blur(8px)",
          color: "var(--fg)", cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-serif)", fontSize: 13,
          letterSpacing: "0.04em",
          opacity: 0.65,
          transition: "opacity 200ms ease",
        }}
        onMouseEnter={e => e.currentTarget.style.opacity = "1"}
        onMouseLeave={e => e.currentTarget.style.opacity = "0.65"}
        title="Logo-Variante wechseln"
      >FI</button>
    </div>,
    document.body
  );
}
window.Header = Header;