high-performance-structures/components/site-header.tsx

"use client"

import Link from "next/link"
import { useState, useEffect } from "react"
import { Menu, X, Phone, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { HpsLogo } from "@/components/hps-logo"
import { cn } from "@/lib/utils"

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

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

  const navigation = [
    { name: "Home", href: "/" },
    { name: "Services", href: "/services" },
    { name: "Resources", href: "/resources" },
    { name: "Blog", href: "/blog" },
    { name: "Contact", href: "/contact" },
  ]

  return (
    <header
      className={cn(
        "fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out",
        scrolled ? "bg-white/90 backdrop-blur-xl py-3 shadow-sm" : "bg-transparent py-6",
      )}
    >
      <div className="container mx-auto px-6 md:px-12">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <div className="flex-shrink-0 relative z-50">
            <div className="block group">
              <HpsLogo size={scrolled ? "sm" : "md"} className="transition-all duration-500" />
            </div>
          </div>

          {/* Desktop Navigation - Minimalist Centered */}
          <div className="hidden md:flex items-center justify-center absolute left-1/2 transform -translate-x-1/2">
            <nav className="flex items-center gap-1 bg-white/80 backdrop-blur-md px-2 py-1.5 rounded-full border border-gray-100 shadow-sm">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="px-5 py-2 text-sm font-medium text-gray-600 hover:text-deep-navy hover:bg-gray-50 rounded-full transition-all duration-300"
                >
                  {item.name}
                </Link>
              ))}
            </nav>
          </div>

          {/* Right Side Actions */}
          <div className="hidden md:flex items-center gap-6">
            <a
              href="tel:7199008850"
              className={cn(
                "group flex items-center gap-2 text-sm font-semibold transition-colors",
                scrolled ? "text-gray-600 hover:text-deep-navy" : "text-white/90 hover:text-white",
              )}
            >
              <span
                className={cn(
                  "w-8 h-8 rounded-full flex items-center justify-center transition-colors",
                  scrolled
                    ? "bg-gray-100 group-hover:bg-hps-blue/10 group-hover:text-hps-blue"
                    : "bg-white/10 backdrop-blur-sm text-white group-hover:bg-white/20",
                )}
              >
                <Phone className="h-3.5 w-3.5" />
              </span>
              <span className="hidden lg:inline">719.900.8850</span>
            </a>
            <Button className="rounded-full bg-deep-navy hover:bg-hps-blue text-white px-6 font-medium transition-all duration-300 shadow-lg shadow-deep-navy/20 hover:shadow-hps-blue/30">
              Get a Quote
            </Button>
          </div>

          {/* Mobile Navigation Toggle */}
          <div className="md:hidden flex items-center gap-4 z-50">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className={cn(
                "relative z-50 rounded-full w-12 h-12 transition-colors",
                scrolled || mobileMenuOpen ? "text-deep-navy hover:bg-gray-100" : "text-white hover:bg-white/10",
              )}
            >
              {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </Button>
          </div>
        </div>
      </div>

      {/* Mobile Navigation Overlay */}
      <div
        className={cn(
          "fixed inset-0 bg-white z-[60] transition-all duration-500 ease-in-out md:hidden flex flex-col justify-center",
          mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none",
        )}
      >
        {/* Close Button in Mobile Menu */}
        <div className="absolute top-6 right-6 z-[70]">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setMobileMenuOpen(false)}
            className="rounded-full w-12 h-12 text-deep-navy hover:bg-gray-100"
          >
            <X className="h-6 w-6" />
          </Button>
        </div>
        
        <div className="container mx-auto px-6 py-12 flex flex-col gap-8">
          <nav className="flex flex-col gap-6">
            {navigation.map((item, index) => (
              <Link
                key={item.name}
                href={item.href}
                className="text-4xl font-bold text-deep-navy hover:text-hps-blue transition-colors flex items-center justify-between group border-b border-gray-100 pb-4"
                onClick={() => setMobileMenuOpen(false)}
                style={{ transitionDelay: `${index * 50}ms` }}
              >
                {item.name}
                <ArrowRight className="h-6 w-6 opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 text-hps-cyan" />
              </Link>
            ))}
          </nav>

          <div className="mt-8 flex flex-col gap-6">
            <a href="tel:7199008850" className="text-xl font-medium text-gray-600 flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-deep-navy">
                <Phone className="h-5 w-5" />
              </div>
              719.900.8850
            </a>
            <Button className="w-full bg-deep-navy text-white py-6 text-lg rounded-full mt-4">Get a Quote</Button>
          </div>
        </div>
      </div>
    </header>
  )
}