'use client'

import Link from 'next/link'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Rocket, Menu, X } from 'lucide-react'

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

  return (
    <header className="fixed top-0 left-0 right-0 z-50 glass-nav border-b border-border">
      <div className="flex justify-center w-full">
        <div className="w-full max-w-[1280px] px-4 md:px-10 py-3 flex items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3">
            <div className="size-8 flex items-center justify-center rounded bg-gradient-to-br from-primary to-primary-glow text-white">
              <Rocket className="w-5 h-5" />
            </div>
            <h2 className="text-foreground text-lg font-bold leading-tight tracking-tight">
              ScaleSite
            </h2>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center gap-8">
            <Link
              href="/#services"
              className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
            >
              Services
            </Link>
            <Link
              href="/services"
              className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
            >
              Pricing
            </Link>
            <Link
              href="/#about"
              className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
            >
              About
            </Link>
          </nav>

          {/* Right side */}
          <div className="flex items-center gap-4">
            <Button
              asChild
              className="hidden sm:flex glow-button bg-primary hover:bg-primary-glow text-white text-sm font-bold h-9 px-5 rounded-lg"
            >
              <Link href="/login">Client Login</Link>
            </Button>

            {/* Mobile menu button */}
            <button
              className="md:hidden text-foreground"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-card border-b border-border">
          <nav className="flex flex-col px-4 py-4 gap-4">
            <Link
              href="/#services"
              className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
              onClick={() => setMobileMenuOpen(false)}
            >
              Services
            </Link>
            <Link
              href="/services"
              className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
              onClick={() => setMobileMenuOpen(false)}
            >
              Pricing
            </Link>
            <Link
              href="/#about"
              className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
              onClick={() => setMobileMenuOpen(false)}
            >
              About
            </Link>
            <Button
              asChild
              className="glow-button bg-primary hover:bg-primary-glow text-white text-sm font-bold h-9 px-5 rounded-lg w-full"
            >
              <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
                Client Login
              </Link>
            </Button>
          </nav>
        </div>
      )}
    </header>
  )
}