function Header({ onSearch, onToggleDark, dark, favCount }) {
  const [scrolled, setScrolled] = useState(false);
  const [hover, setHover]       = useState(null);
  const [searchOpen, setSearchOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const mobile = useMobile();

  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", on);
    return () => window.removeEventListener("scroll", on);
  }, []);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: scrolled ? "color-mix(in oklab, var(--paper) 92%, transparent)" : "var(--paper)",
      backdropFilter: scrolled ? "blur(10px)" : "none",
      borderBottom: "1px solid " + (scrolled ? "var(--line)" : "transparent"),
      transition: "all .3s ease",
    }}>
      {/* Top strip — hidden on mobile */}
      {!mobile && (
        <>
          <div className="container" style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            paddingTop: 14, paddingBottom: 14,
            fontSize: 12, color: "var(--muted)", fontFamily: "var(--font-mono)",
            letterSpacing: "0.1em", textTransform: "uppercase",
          }}>
            <span>Lunedì 19 aprile 2026 · Numero CDVII</span>
            <div style={{ display: "flex", gap: 20 }}>
              <span>Reggio 21°</span>
              <span>Cosenza 18°</span>
              <span>Catanzaro 20°</span>
            </div>
          </div>
          <div className="rule" />
        </>
      )}

      {/* Masthead */}
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: mobile ? "auto 1fr auto" : "1fr auto 1fr",
        alignItems: "center",
        padding: scrolled ? "12px 0" : (mobile ? "16px 0" : "30px 0"),
        transition: "padding .3s ease",
        gap: mobile ? 12 : 0,
      }}>
        {/* Left */}
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <button onClick={() => setSearchOpen(true)} aria-label="Cerca" style={{
            border: "1px solid var(--line)", background: "transparent", color: "var(--ink)",
            width: 38, height: 38, borderRadius: 999, display: "grid", placeItems: "center",
          }}>
            <IconSearch />
          </button>
          {!mobile && <a href="#" style={{ fontSize: 13, letterSpacing: "0.05em" }}>Accedi</a>}
        </div>

        {/* Logo */}
        <a href="#" style={{
          display: "flex", alignItems: "center", justifyContent: "center",
          gap: mobile ? 10 : 16,
        }}>
          <svg
            viewBox="-20 0 140 140"
            height={mobile ? (scrolled ? 28 : 38) : (scrolled ? 36 : 56)}
            fill="currentColor"
            style={{ flexShrink: 0, color: "var(--ocra)", transition: "height .3s ease" }}
          >
            <path d="M21.77,42.66 L15.55,37.4 L11.86,29.54 L8.8,19.65 L10.25,18.1 L7.97,14.15 L9.09,11.8 L12.03,9.26 L16.95,10.52 L18.86,9.31 L22.1,10.47 L24.9,9.63 L23.85,12.07 L26.52,15.95 L33.48,14.41 L37.01,15.88 L36.98,13.96 L40.44,13.38 L43.01,13.5 L45.61,15.7 L46.18,14.4 L44.8,13.36 L48.63,8.32 L50.07,0.38 L56.96,1.99 L63.09,1.25 L64.25,2 L61.31,6.82 L63.1,12.07 L54.39,21.99 L54.65,25.04 L56.92,26.6 L56.2,30.1 L62.57,33 L72.18,33.08 L78.27,38.21 L88.26,41.63 L90.01,44.41 L96.63,46.8 L93.62,52.65 L93.44,56.05 L96.1,58.99 L93.55,65.17 L96,68.97 L99.77,70.26 L97.09,72.21 L97.48,74.57 L92.67,78.59 L91.94,77.31 L88.1,77.76 L83.78,75.75 L73.72,77.97 L62.29,83.18 L57.27,89.88 L58.77,91.84 L60.13,103.29 L59.18,108.11 L52.95,113.12 L44.59,115.62 L41.68,118.15 L33.79,126 L32.54,132.42 L27.5,139.02 L8.47,139.62 L3.04,137.25 L0.39,133.9 L1.71,131.9 L0.01,128.55 L1.6,126.01 L0.21,120.42 L11.35,116.05 L17.5,105.11 L19.01,100.18 L12.54,95.75 L13.05,94.06 L22.53,89.19 L32.09,89.45 L35.33,87.12 L37.31,82.13 L37.14,76.63 L33.3,74.91 L29.64,69.85 L26.63,53.18 L21.77,42.66 Z"/>
          </svg>
          <div style={{ lineHeight: 1.1 }}>
            <div style={{
              fontFamily: "var(--font-display)",
              fontSize: mobile ? (scrolled ? 16 : 20) : (scrolled ? 18 : 28),
              fontWeight: 300, fontStyle: "italic",
              letterSpacing: "-0.01em",
              transition: "font-size .3s ease",
            }}>Calabria</div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontSize: mobile ? (scrolled ? 16 : 20) : (scrolled ? 18 : 28),
              fontWeight: 700, letterSpacing: "-0.04em",
              transition: "font-size .3s ease",
            }}>Svelata</div>
          </div>
        </a>

        {/* Right */}
        <div style={{ display: "flex", gap: 10, alignItems: "center", justifyContent: "flex-end" }}>
          <button onClick={onToggleDark} aria-label="Tema" style={{
            border: "1px solid var(--line)", background: "transparent", color: "var(--ink)",
            width: 38, height: 38, borderRadius: 999, display: "grid", placeItems: "center",
          }}>
            {dark ? <IconSun /> : <IconMoon />}
          </button>
          {mobile ? (
            <button onClick={() => setMenuOpen(v => !v)} style={{
              border: "1px solid var(--line)", background: "transparent", color: "var(--ink)",
              width: 38, height: 38, borderRadius: 999, display: "grid", placeItems: "center",
            }}>
              {menuOpen ? <IconClose /> : (
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <path d="M3 6h18M3 12h18M3 18h18"/>
                </svg>
              )}
            </button>
          ) : (
            <>
              <button style={{
                border: "1px solid var(--line)", background: "transparent", color: "var(--ink)",
                height: 38, padding: "0 14px", borderRadius: 999, display: "inline-flex", alignItems: "center", gap: 8,
                fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase",
              }}>
                <IconHeart filled={favCount > 0} /> Preferiti {favCount > 0 && <span style={{ color: "var(--ocra)" }}>{favCount}</span>}
              </button>
              <a href="#newsletter" style={{
                background: "var(--ink)", color: "var(--paper)",
                height: 38, padding: "0 18px", borderRadius: 999, display: "inline-flex", alignItems: "center",
                fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase",
              }}>Abbonati</a>
            </>
          )}
        </div>
      </div>

      <div className="rule" />

      {/* Nav — desktop: centrata, mobile: menu a tendina */}
      {mobile ? (
        menuOpen && (
          <nav style={{
            background: "var(--paper)", borderTop: "1px solid var(--line)",
            padding: "8px 0", animation: "rise .2s ease",
          }}>
            {NAV.map(n => (
              <a key={n.key} href={"#" + n.key} onClick={() => setMenuOpen(false)} style={{
                display: "block", padding: "14px 24px",
                fontSize: 16, fontWeight: 500, letterSpacing: "0.01em",
                borderBottom: "1px solid var(--line)",
                color: "var(--ink)",
              }}>{n.label}</a>
            ))}
            <div style={{ display: "flex", gap: 0, padding: "8px 16px" }}>
              {PROVINCES.map(p => (
                <a key={p.code} href={"#" + p.code} onClick={() => setMenuOpen(false)} style={{
                  flex: 1, padding: "10px 0", textAlign: "center",
                  fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.08em",
                  color: "var(--muted)",
                }}>{p.code}</a>
              ))}
            </div>
            <div style={{ padding: "12px 16px 8px" }}>
              <a href="#newsletter" style={{
                display: "block", textAlign: "center",
                background: "var(--ink)", color: "var(--paper)",
                padding: "14px", fontFamily: "var(--font-mono)",
                fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase",
              }}>Abbonati alla newsletter</a>
            </div>
          </nav>
        )
      ) : (
        <nav className="container" style={{
          display: "flex", justifyContent: "center", gap: 4, padding: "14px 0",
        }}>
          {NAV.map(n => (
            <a key={n.key} href={"#" + n.key}
              onMouseEnter={() => setHover(n.key)}
              onMouseLeave={() => setHover(null)}
              style={{
                padding: "8px 18px", fontSize: 14, fontWeight: 500, letterSpacing: "0.02em",
                position: "relative", color: hover === n.key ? "var(--ocra)" : "var(--ink)", transition: "color .2s",
              }}>
              {n.label}
              <span style={{
                position: "absolute", bottom: -2, left: "50%",
                transform: `translateX(-50%) scaleX(${hover === n.key ? 1 : 0})`,
                width: "60%", height: 1, background: "var(--ocra)",
                transition: "transform .3s ease", transformOrigin: "center",
              }} />
            </a>
          ))}
          <div style={{ width: 1, height: 16, background: "var(--line)", margin: "0 12px", alignSelf: "center" }} />
          {PROVINCES.map(p => (
            <a key={p.code} href={"#" + p.code}
              onMouseEnter={() => setHover(p.code)}
              onMouseLeave={() => setHover(null)}
              style={{
                padding: "8px 12px", fontSize: 12, fontFamily: "var(--font-mono)",
                letterSpacing: "0.08em", color: hover === p.code ? "var(--ocra)" : "var(--muted)", transition: "color .2s",
              }}>{p.code}</a>
          ))}
        </nav>
      )}

      {searchOpen && <SearchOverlay onClose={() => setSearchOpen(false)} />}
    </header>
  );
}

function SearchOverlay({ onClose }) {
  const [q, setQ] = useState("");
  const inputRef  = useRef();
  useEffect(() => { inputRef.current?.focus(); }, []);

  const all = useMemo(() => [
    ...STORIES.map(s => ({ type: s.cat, title: s.title, dek: s.dek })),
    ...EVENTS.map(e  => ({ type: "Evento", title: e.title, dek: `${e.place} · ${e.day} ${e.month}` })),
    ...MAP_POINTS.map(p => ({ type: "Luogo", title: p.name, dek: p.province })),
  ], []);

  const results = q.length > 1
    ? all.filter(x => (x.title + x.dek).toLowerCase().includes(q.toLowerCase())).slice(0, 8)
    : [];

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "color-mix(in oklab, var(--paper) 96%, transparent)",
      backdropFilter: "blur(14px)", animation: "rise .3s ease both",
    }}>
      <div className="container" style={{ paddingTop: 40 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Eyebrow>Cerca in Calabria Svelata</Eyebrow>
          <button onClick={onClose} style={{
            border: "1px solid var(--line)", background: "transparent", color: "var(--ink)",
            width: 36, height: 36, borderRadius: 999, display: "grid", placeItems: "center",
          }}><IconClose /></button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, borderBottom: "1px solid var(--line)", padding: "32px 0 20px" }}>
          <IconSearch />
          <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)}
            placeholder="Cerca luoghi, eventi, storie..."
            style={{
              flex: 1, border: "none", background: "transparent", outline: "none",
              fontFamily: "'Fraunces', Georgia, serif", fontSize: "clamp(22px, 4vw, 48px)", color: "var(--ink)",
            }} />
        </div>
        {q.length > 1 ? (
          <div style={{ marginTop: 24, display: "grid", gap: 2 }}>
            {results.length === 0 && <div style={{ padding: 20, color: "var(--muted)" }}>Nessun risultato</div>}
            {results.map((r, i) => (
              <a key={i} href="#" style={{
                display: "grid", gridTemplateColumns: "100px 1fr auto", gap: 16, alignItems: "center",
                padding: "14px 0", borderBottom: "1px solid var(--line)",
              }}>
                <Eyebrow>{r.type}</Eyebrow>
                <div>
                  <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 20, fontWeight: 500 }}>{r.title}</div>
                  <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 2 }}>{r.dek}</div>
                </div>
                <IconArrow />
              </a>
            ))}
          </div>
        ) : (
          <div style={{ marginTop: 32 }}>
            <Eyebrow style={{ marginBottom: 16 }}>Ricerche suggerite</Eyebrow>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
              {["Tropea", "Sila", "Bronzi di Riace", "Bergamotto", "Aspromonte", "Borghi arbëresh"].map(s => (
                <button key={s} onClick={() => setQ(s)} style={{
                  padding: "8px 16px", borderRadius: 999, border: "1px solid var(--line)",
                  background: "transparent", color: "var(--ink)", fontSize: 13,
                }}>{s}</button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
window.Header = Header;
