"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Logo } from "./logo";

export function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);

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

  return (
    <header
      className={`fixed left-0 right-0 top-0 z-50 transition-all duration-300 ${scrolled ? "bg-background/80 backdrop-blur-md shadow-sm py-3" : "bg-transparent py-5"
        }`}
    >
      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
        <Logo />

        <nav className="hidden items-center gap-8 md:flex">
          {/* Disable Next.js prefetch to avoid stale chunk loads after deployments. */}
          <Link href="/" prefetch={false} className="nav-link">Home</Link>
          <Link href="/about" prefetch={false} className="nav-link">About</Link>
          <Link href="/features/cash-flow" prefetch={false} className="nav-link">Cash Flow</Link>
          <Link href="/features/reports" prefetch={false} className="nav-link">Reports</Link>
          <Link href="/compare/vs-spreadsheets" prefetch={false} className="nav-link">Compare</Link>
          <Link href="/pricing" prefetch={false} className="nav-link">Pricing</Link>
        </nav>

        <div className="flex items-center gap-4">
          <div className="hidden md:flex items-center gap-4 border-l border-border pl-4">
            <Link href="/login" prefetch={false} className="nav-link">
              Sign in
            </Link>
            <Link href="/register" prefetch={false} className="btn-primary-sm">
              Get Started
            </Link>
          </div>
          <button className="md:hidden text-foreground">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
          </button>
        </div>
      </div>
    </header>
  );
}