/* global React */
// Espalhe Gardênias — institutional site · UI primitives
const { useState, useEffect, useRef } = React;

// ---------------------------------------------------------------- Icon (Lucide)
function Icon({ name, size = 20, stroke = 1.6, color = "currentColor", style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, "stroke-width": stroke, stroke: color },
        nameAttr: "data-lucide",
      });
    }
  }, [name, size, stroke, color]);
  return <span ref={ref} style={{ display: "inline-flex", lineHeight: 0, ...style }} />;
}

// ---------------------------------------------------------------- Gardenia ornament
function Flower({ which = 1, simple = true, size = 80, opacity = 1, style }) {
  const src = assetURL(`assets/flor-${which}-${simple ? "simples" : "detalhada"}.png`);
  return <img src={src} alt="" aria-hidden="true" style={{ width: size, height: "auto", opacity, ...style }} />;
}

// ---------------------------------------------------------------- Espalhe Gardênias movement wordmark
function Logo({ variant = "vinho", height = 40, style, onClick }) {
  return (
    <img src={assetURL(`assets/logo-${variant}.png`)} alt="Espalhe Gardênias" onClick={onClick}
      style={{ height, width: "auto", cursor: onClick ? "pointer" : "default", display: "block", ...style }} />
  );
}

// ---------------------------------------------------------------- Gardênia Cavalcanti monogram / lockup
function GCMark({ tone = "vinho", size = 42, style }) {
  return <img src={assetURL(`assets/mark-gc-${tone}.png`)} alt="" aria-hidden="true"
    style={{ height: size, width: "auto", display: "block", ...style }} />;
}
function GCLockup({ tone = "vinho", height = 120, style, onClick }) {
  return <img src={assetURL(`assets/logo-gc-${tone}.png`)} alt="Gardênia Cavalcanti" onClick={onClick}
    style={{ height, width: "auto", display: "block", cursor: onClick ? "pointer" : "default", ...style }} />;
}

// ---------------------------------------------------------------- Eyebrow / kicker
function Eyebrow({ children, color = "var(--terracota)", style }) {
  return (
    <div style={{ fontFamily: "var(--font-serif)", fontSize: 12, letterSpacing: ".26em",
      textTransform: "uppercase", color, ...style }}>{children}</div>
  );
}

// ---------------------------------------------------------------- Button
function Button({ children, variant = "primary", onClick, full, size = "md", style }) {
  const pad = size === "sm" ? "11px 22px" : size === "lg" ? "18px 40px" : "15px 32px";
  const base = {
    fontFamily: "var(--font-display)", fontWeight: 500, fontSize: size === "sm" ? 12 : 13,
    letterSpacing: ".14em", textTransform: "uppercase", padding: pad,
    border: "none", cursor: "pointer", borderRadius: 0, transition: "background .25s, color .25s, border-color .25s",
    width: full ? "100%" : "auto", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
    whiteSpace: "nowrap",
  };
  const variants = {
    primary: { background: "var(--terracota)", color: "#fff" },
    dark: { background: "var(--vinho)", color: "var(--pessego)" },
    outline: { background: "transparent", color: "var(--fg1)", border: "1px solid var(--fg1)" },
    outlineLight: { background: "transparent", color: "var(--pessego)", border: "1px solid var(--pessego)" },
    ghost: { background: "transparent", color: "var(--terracota)", border: "1px solid var(--border)" },
  };
  const hover = {
    primary: { background: "var(--terracota-hover)" },
    dark: { background: "var(--vinho-hover)" },
    outline: { background: "var(--fg1)", color: "var(--cream)" },
    outlineLight: { background: "var(--pessego)", color: "var(--vinho)" },
    ghost: { background: "var(--terracota)", color: "#fff", borderColor: "var(--terracota)" },
  };
  const [h, setH] = useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ ...base, ...variants[variant], ...(h ? hover[variant] : {}), ...style }}>
      {children}
    </button>
  );
}

// ---------------------------------------------------------------- Navigation map (brief sitemap)
const NAV = [
  { id: "home", label: "Início" },
  { id: "movimento", label: "O Movimento" },
  { id: "gardenia", label: "Gardênia" },
  { id: "livro", label: "O Livro" },
  { id: "loja", label: "Loja" },
  { id: "imprensa", label: "Imprensa" },
  { id: "contato", label: "Contato" },
];

// ---------------------------------------------------------------- Header
function Header({ onNav, current = "home", dark = false }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const el = document.getElementById("eg-scroll");
    const sc = () => setScrolled((el?.scrollTop || 0) > 20);
    el && el.addEventListener("scroll", sc);
    return () => el && el.removeEventListener("scroll", sc);
  }, []);
  useEffect(() => { setOpen(false); }, [current]);

  const onDark = dark && !scrolled;
  const ink = onDark ? "var(--pessego)" : "var(--fg1)";

  return (
    <React.Fragment>
    <header style={{

      position: "sticky", top: 0, zIndex: 60,
      background: onDark ? "transparent" : "rgba(250,246,241,.93)",
      backdropFilter: onDark ? "none" : "saturate(140%) blur(10px)",
      borderBottom: onDark ? "1px solid rgba(243,231,218,.16)" : "1px solid var(--border-faint)",
      transition: "background .3s, border-color .3s",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 clamp(20px,4vw,40px)", height: 82,
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <Logo variant={onDark ? "pessego" : "vinho"} height={54} onClick={() => onNav("home")} style={{ maxHeight: "clamp(38px, 9vw, 54px)" }} />

        {/* desktop nav */}
        <nav className="eg-desk-nav" style={{ display: "flex", gap: "clamp(14px,1.5vw,22px)", alignItems: "center" }}>
          {NAV.slice(1).map((l) => (
            <button key={l.id} onClick={() => onNav(l.id)} className="eg-navlink"
              style={{ background: "none", border: "none", cursor: "pointer", padding: "4px 0",
                fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13.5, letterSpacing: ".14em",
                textTransform: "uppercase", color: ink, whiteSpace: "nowrap",
                borderBottom: current === l.id ? `1px solid ${ink}` : "1px solid transparent" }}>
              {l.label}
            </button>
          ))}
          <Button variant={onDark ? "outlineLight" : "primary"} size="sm" onClick={() => onNav("contato")}
            style={{ marginLeft: 6 }}>Quero convidar</Button>
        </nav>

        {/* mobile trigger */}
        <button className="eg-burger" onClick={() => setOpen(true)} aria-label="Abrir menu"
          style={{ display: "none", background: "none", border: "none", cursor: "pointer", color: ink, padding: 4 }}>
          <Icon name="menu" size={26} color={ink} />
        </button>
      </div>
    </header>

      {/* mobile overlay — rendered outside header so backdrop-filter doesn't contain the fixed positioning */}
      {open && (
        <div style={{ position: "fixed", inset: 0, zIndex: 200, background: "#4c1d1d",
          display: "flex", flexDirection: "column", padding: "26px clamp(20px,6vw,40px)", overflowY: "auto" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <Logo variant="pessego" height={34} onClick={() => onNav("home")} />
            <button onClick={() => setOpen(false)} aria-label="Fechar menu"
              style={{ background: "none", border: "none", cursor: "pointer", padding: 4 }}>
              <Icon name="x" size={28} color="var(--pessego)" />
            </button>
          </div>
          <nav style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 48 }}>
            {NAV.map((l, i) => (
              <button key={l.id} onClick={() => onNav(l.id)}
                style={{ background: "none", border: "none", textAlign: "left", cursor: "pointer",
                  padding: "16px 0", borderBottom: "1px solid rgba(243,231,218,.14)",
                  fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 26, letterSpacing: ".02em",
                  color: current === l.id ? "var(--terracota)" : "var(--pessego)", display: "flex",
                  alignItems: "baseline", gap: 16 }}>
                <span style={{ fontFamily: "var(--font-serif)", fontSize: 12, color: "var(--canela)",
                  letterSpacing: ".1em" }}>{String(i + 1).padStart(2, "0")}</span>
                {l.label}
              </button>
            ))}
          </nav>
          <div style={{ marginTop: "auto", paddingTop: 28 }}>
            <Button variant="primary" full onClick={() => onNav("contato")}>Quero convidar</Button>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}


// ---------------------------------------------------------------- Mega footer
function Footer({ onNav }) {
  const cols = [
    { h: "Navegar", items: [["O Movimento","movimento"],["Gardênia","gardenia"],["O Livro","livro"]] },
    { h: "Institucional", items: [["Imprensa","imprensa"],["Contato","contato"]] },
  ];
  const link = (label, id) => (
    <li key={label}><a href="#" onClick={(e) => { e.preventDefault(); onNav && onNav(id); }} className="eg-footlink"
      style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--fg-on-dark-soft)", textDecoration: "none" }}>{label}</a></li>
  );
  return (
    <footer style={{ background: "var(--vinho)", color: "var(--fg-on-dark)", padding: "82px clamp(24px,5vw,40px) 38px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="eg-foot-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1.1fr", gap: 44, paddingBottom: 54 }}>
          <div>
            <Logo variant="pessego" height={44} />
            <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.75,
              color: "var(--fg-on-dark-soft)", maxWidth: 320, marginTop: 24 }}>
              Um movimento de mulheres que florescem através da própria história. Do solo árido nasceu a flor; da coragem, um movimento.
            </p>
            <div style={{ display: "flex", gap: 18, marginTop: 26 }}>
              <a href="#" onClick={(e)=>e.preventDefault()} className="eg-soc" aria-label="Instagram"><Icon name="instagram" size={19} color="var(--pessego)" /></a>
              <a href="#" onClick={(e)=>e.preventDefault()} className="eg-soc" aria-label="YouTube"><Icon name="youtube" size={19} color="var(--pessego)" /></a>
              <a href="#" onClick={(e)=>e.preventDefault()} className="eg-soc" aria-label="LinkedIn"><Icon name="linkedin" size={19} color="var(--pessego)" /></a>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 12, letterSpacing: ".14em",
                textTransform: "uppercase", color: "var(--pessego)", marginBottom: 18 }}>{c.h}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {c.items.map(([label, id]) => link(label, id))}
              </ul>
            </div>
          ))}
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 12, letterSpacing: ".14em",
              textTransform: "uppercase", color: "var(--pessego)", marginBottom: 18 }}>Parte do ecossistema</div>
            <GCLockup tone="pessego" height={118} onClick={() => onNav && onNav("gardenia")} />
          </div>
        </div>
        <div className="eg-foot-base" style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
          borderTop: "1px solid rgba(243,231,218,.16)", paddingTop: 26, gap: 16, flexWrap: "wrap",
          fontFamily: "var(--font-body)", fontSize: 12, color: "var(--fg-on-dark-soft)" }}>
          <span>© 2026 Espalhe Gardênias · Gardênia Cavalcanti</span>
          <span style={{ letterSpacing: ".04em" }}>Estratégia & identidade por Improvement</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Flower, Logo, GCMark, GCLockup, Button, Eyebrow, Header, Footer, NAV });