"use client";

import Link from "next/link";
import { useState, useEffect } from "react";
import { siteConfig } from "@/data/site-content";
import { BrandLogo } from "@/components/brand-logo";

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

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

  return (
    <>
      <div className="site-utility-bar">
        <div className="container utility-inner">
          <div className="utility-list">
            <a href={siteConfig.phoneHref} className="utility-link">
              <span className="utility-label">PHONE:</span> {siteConfig.phoneDisplay}
            </a>
            <span className="utility-text">LOCATION: {siteConfig.address.cityStateZip}</span>
            <span className="utility-text">HOURS: Mon - Fri 8 AM - 5 PM</span>
          </div>
          <div className="utility-list">
            <span className="utility-text">DELIVERY QUOTED AT PURCHASE</span>
            <Link href={siteConfig.mapUrl} target="_blank" rel="noreferrer" className="utility-link">
              OPEN MAP
            </Link>
          </div>
        </div>
      </div>

      <header className={`site-header${scrolled ? " site-header--scrolled" : ""}`}>
        <div className="container site-header-inner">
          <Link href="/" className="brand" aria-label={siteConfig.name} onClick={close}>
            <span className="brand-mark brand-mark-logo" aria-hidden="true">
              <BrandLogo />
            </span>
          </Link>

          <nav className="main-nav" aria-label="Primary">
            {siteConfig.nav.map((item) => (
              <Link key={item.href} href={item.href} className="nav-link">
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="header-actions">
            <Link href="/contact" className="button button-primary">
              REQUEST A QUOTE
            </Link>
          </div>

          <button
            className="mobile-menu-toggle"
            aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span className={`hamburger${menuOpen ? " hamburger--open" : ""}`}>
              <span />
              <span />
              <span />
            </span>
          </button>
        </div>
      </header>

      {/* Mobile drawer */}
      <div
        className={`mobile-nav${menuOpen ? " mobile-nav--open" : ""}`}
        aria-hidden={!menuOpen}
        aria-label="Mobile Navigation"
      >
        <nav className="mobile-nav-links">
          {siteConfig.nav.map((item) => (
            <Link key={item.href} href={item.href} className="mobile-nav-link" onClick={close}>
              {item.label}
            </Link>
          ))}
          <Link href="/contact" className="button button-primary mobile-nav-cta" onClick={close}>
            REQUEST A QUOTE
          </Link>
        </nav>
      </div>

      {/* Backdrop */}
      {menuOpen && (
        <div className="mobile-nav-overlay" onClick={close} aria-hidden="true" />
      )}
    </>
  );
}