// Header.jsx — ReelFlow marketing site navigation.
// Full-bleed transparent bar with a gradient accent strip across the top edge.
// Lifted from the production Webflow source (reel-flow.webflow.css).
// Links use Rules Extended Bold 11px uppercase; underline is a gradient bar
// that grows from 0% width on hover. The frosted-white background fades in
// when the page is scrolled past the hero.

const NAV_LINKS = [
  { label: "Visit reelflow.com home", href: "https://www.reelflow.com/", arrow: true },
];

const Chevron = () => (
  <span className="rf-nav__chevron">
    <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="m5.376,9.064l-3.099-4.648c-.332-.498.025-1.166.624-1.166h6.197c.599,0,.956.668.624,1.166l-3.099,4.648c-.297.445-.951.445-1.248,0Z"/>
    </svg>
  </span>
);

function Header() {
  const [open, setOpen] = React.useState(null);
  const [scrolled, setScrolled] = React.useState(false);
  const [pastHero, setPastHero] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 80);
      // Flip from dark-mode to light-mode once we've scrolled past the
      // dark hero band. The band's height is roughly the viewport-top
      // through the end of the hero subhead — we measure it live so it
      // reacts to responsive layout changes.
      const band = document.querySelector(".tb-hero-band");
      const threshold = band ? band.getBoundingClientRect().bottom + window.scrollY - 64 : 320;
      setPastHero(y > threshold);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const logoSrc = pastHero
    ? ((typeof window !== "undefined" && window.__resources && window.__resources.logoColor) || "assets/logos/reelflow_logo_color.svg")
    : ((typeof window !== "undefined" && window.__resources && window.__resources.logoInverse) || "assets/logos/reelflow_inverse_logo.svg");

  return (
    <header className={"rf-nav" + (scrolled ? " is-scrolled" : "") + (pastHero ? " is-light-mode" : " is-dark-mode")}>
      <div className="rf-nav__accent" aria-hidden="true"></div>
      <div className="rf-nav__bg" aria-hidden="true"></div>
      <div className="rf-nav__container">
        <a href="https://www.reelflow.com/" className="rf-nav__logo-link">
          <img src={logoSrc} alt="ReelFlow" className="rf-nav__logo" />
        </a>
        <nav className="rf-nav__menu">
          {NAV_LINKS.map((l) => (
            <div
              key={l.label}
              className="rf-nav__item"
              onMouseEnter={() => l.dropdown && setOpen(l.label)}
              onMouseLeave={() => setOpen(null)}
            >
              {l.dropdown ? (
                <div className={"rf-nav__toggle" + (open === l.label ? " is-open" : "")}>
                  <span className="rf-nav__label">{l.label}</span>
                  <Chevron />
                  <span className="rf-nav__border"></span>
                </div>
              ) : (
                <a className="rf-nav__link" href={l.href}>
                  <span className="rf-nav__label">{l.label}</span>
                  {l.arrow && (
                    <span className="rf-nav__arrow" aria-hidden="true">
                      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                        <line x1="3" y1="8" x2="13" y2="8" />
                        <polyline points="9 4 13 8 9 12" />
                      </svg>
                    </span>
                  )}
                  <span className="rf-nav__border"></span>
                </a>
              )}
              {l.dropdown && open === l.label && (
                <div className="rf-nav__dropdown">
                  {l.dropdown.map((d) => (
                    <a key={d} className="rf-nav__dropdown-item" href="#">{d}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
        <div className="rf-nav__actions">
          <a className="rf-nav__btn rf-nav__btn--login" href="https://app.reelflow.com/dashboard">Log in</a>
          <a className="rf-nav__btn rf-nav__btn--cta" href="https://app.reelflow.com/signup?utm_medium=MainButton&utm_source=NavBar">Get Started</a>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;