'use client';
import Link from 'next/link';
import Image from 'next/image';
import site from '@/content/site.json';
import Button from './ui/Button';
import { useState } from 'react';

export default function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-40 bg-white/90 backdrop-blur">
      <nav className="mx-auto max-w-7xl px-4 h-16 flex items-center justify-between" aria-label="Main">
        <Link href="/" className="flex items-center gap-2" aria-label="Go to home">
          <div className="flex items-center gap-2">
            <Image 
              src="/images/favicon.png" 
              alt="C & I Electrical Contractors" 
              width={32} 
              height={32} 
            />
            <div>
              <div className="font-semibold text-gray-800">C & I Electrical Contractors</div>
              <div className="text-xs text-green-600">Licensed & Insured</div>
            </div>
          </div>
        </Link>
        <button className="md:hidden p-2" aria-expanded={open} aria-controls="menu" onClick={()=>setOpen(!open)}>☰</button>
        <ul id="menu" className={`md:flex gap-6 items-center ${open ? 'block' : 'hidden'} md:block`}>
          <li><Link href="/residential">Residential</Link></li>
          <li><Link href="/commercial">Commercial</Link></li>
          <li><Link href="/reviews">Reviews</Link></li>
          <li><Link href="/about">About</Link></li>
          <li><Link href="/contact">Contact</Link></li>
          <li className="md:ml-4"><Button variant="success" href={`tel:${site.business.phoneRaw}`}>Call Now — 24/7</Button></li>
          <li><Button href="/contact">Get My Free Quote</Button></li>
        </ul>
      </nav>
      <div className="bg-brand-red text-white text-center text-sm py-1" role="status">
        <div className="flex items-center justify-center gap-2">
          <Image 
            src="/images/favicon.png" 
            alt="C & I Electrical Contractors" 
            width={16} 
            height={16} 
          />
          24/7 Emergency Electrician • Average response under 60 minutes in Corpus Christi
        </div>
      </div>
    </header>
  );
}