'use client';
import { track } from '@/lib/analytics';

export default function Header() {
  return (
    <header className="bg-white sticky top-0 z-50 shadow-lg border-b border-gray-200">
      <nav aria-label="primary" className="container-custom py-4 flex items-center justify-between">
        {/* Left: Logo */}
        <a href="/" className="flex items-center gap-3 group">
          <div className="w-12 h-12 bg-brand-green rounded-full flex items-center justify-center shadow-md group-hover:shadow-lg transition-shadow">
            <img src="/images/favicon.png" alt="C & I Electrical Contractors" className="w-6 h-6" />
          </div>
          <div>
            <div className="font-heading font-semibold text-lg text-brand-dark">C & I Electrical Contractors</div>
            <div className="text-xs text-brand-green font-medium">Licensed & Insured</div>
          </div>
        </a>
        
                        {/* Middle: Navigation */}
                <div className="hidden md:flex items-center gap-8">
                  <a href="/residential" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
                    Residential
                  </a>
                  <a href="/commercial" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
                    Commercial
                  </a>
                  <a href="/reviews" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
                    Reviews
                  </a>
                  <a href="/about" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
                    About
                  </a>
                  <a href="/contact" className="font-body text-gray-700 hover:text-brand-green font-medium transition-colors">
                    Contact
                  </a>
                </div>
        
        {/* Right: CTAs */}
        <div className="flex items-center gap-3">
          <a
            href="tel:+13618850315"
            onClick={() => track('phone_click', { placement: 'header' })}
            className="btn-primary"
            aria-label="Call Now, 24/7"
          >
            Call Now (24/7)
          </a>
          <a 
            href="#quote-form" 
            className="hidden md:inline-flex btn-secondary"
          >
            Free Quote
          </a>
        </div>
      </nav>
    </header>
  );
}