// Header — issue meta strip + brand wordmark + horizontal nav
function MagazineHeader() {
  const sectionLinks = [
    { label: "Work", id: "recent-builds" },
    { label: "About", id: "manifesto" },
    { label: "Services", id: "who-i-work-with" },
  ];
  return (
    <header style={{ background: "#FBF6EF", borderBottom: "1px solid #1A1714" }}>
      {/* Issue meta strip */}
      <div className="pov-shell" style={{
        maxWidth: 1240, margin: "0 auto", padding: "10px 32px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em",
        textTransform: "uppercase", color: "#1A1714",
        borderBottom: "1px solid #1A1714",
      }}>
        <span>The AI-Native Business Studio.</span>
        <span style={{ display: "flex", gap: 16 }}>
          <span>EST. 2025</span>
        </span>
      </div>

      {/* Wordmark + nav */}
      <div className="pov-shell pov-header-row" style={{
        maxWidth: 1240, margin: "0 auto", padding: "18px 32px",
        display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 32,
      }}>
        <nav className="pov-header-nav" style={{ display: "flex", gap: 22, fontFamily: "var(--font-label)", fontWeight: 700, fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase" }}>
          {sectionLinks.map(l => <a key={l.label} onClick={()=>scrollToId(l.id)} style={{ color: "#1A1714", cursor: "pointer", textDecoration: "none" }}>{l.label}</a>)}
        </nav>
        <div className="pov-header-wordmark" style={{ display: "flex", alignItems: "baseline", justifyContent: "center", gap: 8 }}>
          <span className="pov-header-wordmark-tag" style={{ fontFamily: "var(--font-label)", fontWeight: 700, fontSize: 20, letterSpacing: "0.14em", color: "#B85327" }}>POV</span>
          <span className="pov-header-wordmark-name" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 36, lineHeight: 1, letterSpacing: "-0.025em", color: "#1A1714" }}>
            Swathy<span style={{ color: "#DD6B3A" }}>.</span>
          </span>
        </div>
        <nav className="pov-header-nav" style={{ display: "flex", gap: 22, justifyContent: "flex-end", fontFamily: "var(--font-label)", fontWeight: 700, fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase" }}>
          <a href="https://www.linkedin.com/in/swathysreekumar/" target="_blank" rel="noopener noreferrer" style={{ color: "#DD6B3A", cursor: "pointer", textDecoration: "none" }}>Find me on LinkedIn</a>
          <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" style={{ color: "#1A1714", cursor: "pointer", textDecoration: "none" }}>Book a Call</a>
        </nav>
      </div>
    </header>
  );
}

// Scrolling marquee — used between sections as a typographic ribbon
function Marquee({ items, bg = "#1A1714", fg = "#FBF6EF" }) {
  const text = items.join("   ✱   ");
  return (
    <div style={{ background: bg, color: fg, overflow: "hidden", padding: "14px 0", borderTop: "1px solid currentColor", borderBottom: "1px solid currentColor" }}>
      <div style={{
        display: "flex", whiteSpace: "nowrap", animation: "pov-marquee 18s linear infinite",
        fontFamily: "var(--font-label)", fontWeight: 700, fontSize: 16, letterSpacing: "0.24em", textTransform: "uppercase",
      }}>
        {[0,1,2].map(i => (
          <span key={i} style={{ paddingRight: 60 }}>{text}   ✱   </span>
        ))}
      </div>
      <style>{`@keyframes pov-marquee { from { transform: translateX(0); } to { transform: translateX(-33.34%); } }`}</style>
    </div>
  );
}

Object.assign(window, { MagazineHeader, Marquee });