/* Header — sticky, translucent on scroll */

function Header({ showPortfolio = true, showFAQ = true }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

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

  const navItems = [
    { label: "Services",  href: "#services"  },
    { label: "Pricing",   href: "#pricing"   },
    showPortfolio && { label: "Work",      href: "#portfolio" },
    { label: "About",     href: "#about"     },
    showFAQ      && { label: "FAQ",       href: "#faq"       },
  ].filter(Boolean);

  return (
    <header className={"site-header" + (scrolled ? " is-scrolled" : "")}>
      <div className="container site-header-inner">
        <a href="#top" className="brand" aria-label="Sonal Studio home">
          <Wordmark size={36} />
        </a>
        <nav className="site-nav" aria-label="Primary">
          {navItems.map(item => (
            <a key={item.href} href={item.href}>{item.label}</a>
          ))}
        </nav>
        <a href="#contact" className="btn btn-primary btn-sm header-cta">Get a quote</a>
        <button
          className="hamburger"
          aria-label="Open menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(o => !o)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      {mobileOpen && (
        <div className="mobile-nav">
          {navItems.map(item => (
            <a key={item.href} href={item.href} onClick={() => setMobileOpen(false)}>{item.label}</a>
          ))}
          <a href="#contact" className="btn btn-primary" onClick={() => setMobileOpen(false)}>Get a quote</a>
        </div>
      )}
      <style>{`
        .site-header {
          position: sticky; top: 0; z-index: 50;
          background: transparent;
          transition: background var(--dur-base) var(--ease-out-soft),
                      box-shadow var(--dur-base) var(--ease-out-soft),
                      backdrop-filter var(--dur-base) var(--ease-out-soft);
        }
        .site-header.is-scrolled {
          background: rgba(251, 247, 238, 0.82);
          backdrop-filter: saturate(180%) blur(14px);
          -webkit-backdrop-filter: saturate(180%) blur(14px);
          box-shadow: 0 1px 0 rgba(20, 20, 20, 0.06), 0 4px 24px rgba(20, 20, 20, 0.05);
        }
        .site-header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
        .brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; transition: opacity var(--dur-fast); }
        .brand:hover { opacity: 0.78; }
        .site-nav { display: flex; align-items: center; gap: 4px; }
        .site-nav a {
          font-family: var(--font-body); font-weight: 500; font-size: 14.5px;
          color: var(--ink-soft); text-decoration: none;
          padding: 8px 14px;
          border-radius: 999px;
          position: relative;
          transition: color var(--dur-fast), background var(--dur-fast);
        }
        .site-nav a::after {
          content: "";
          position: absolute;
          left: 14px;
          right: 14px;
          bottom: 4px;
          height: 1.5px;
          background: var(--primary);
          transform: scaleX(0);
          transform-origin: center;
          transition: transform 260ms var(--ease-out-soft);
        }
        .site-nav a:hover { color: var(--ink); background: rgba(20, 20, 20, 0.04); }
        .site-nav a:hover::after { transform: scaleX(0.9); }
        .header-cta { flex-shrink: 0; }
        .hamburger { display: none; background: transparent; border: 0; width: 36px; height: 36px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; }
        .hamburger span {
          width: 22px; height: 1.5px;
          background: var(--ink);
          border-radius: 1px;
          transition: transform var(--dur-base) var(--ease-out-soft),
                      opacity var(--dur-fast);
        }
        .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
        .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
        .mobile-nav { display: none; }
        @media (max-width: 920px) {
          .site-nav { display: none; }
          .header-cta { display: none; }
          .hamburger { display: flex; }
          .mobile-nav {
            display: flex; flex-direction: column; gap: 4px;
            background: rgba(251, 247, 238, 0.96);
            backdrop-filter: saturate(180%) blur(14px);
            -webkit-backdrop-filter: saturate(180%) blur(14px);
            border-top: 1px solid rgba(20, 20, 20, 0.06);
            padding: 16px 24px 24px;
            animation: mobileNavIn 240ms var(--ease-out-soft);
          }
          @keyframes mobileNavIn {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
          }
          .mobile-nav a {
            font-family: var(--font-body); color: var(--ink-soft); text-decoration: none; font-size: 17px;
            padding: 12px 4px;
            border-bottom: 1px solid rgba(20, 20, 20, 0.06);
          }
          .mobile-nav a:last-of-type { border-bottom: 0; }
          .mobile-nav a.btn { margin-top: 12px; border-bottom: 0; padding: 14px 20px; justify-content: center; }
        }
      `}</style>
    </header>
  );
}

window.Header = Header;