import React, { useState } from 'react'
import { Link, NavLink } from 'react-router-dom'
import { track, events } from '../utils/analytics'

const navItems = [
  { to: '/about', label: 'ABOUT US' },
  { to: '/services', label: 'SERVICES' },
  { to: '/resources', label: 'RESOURCES' },
  { to: '/events', label: 'EVENTS' },
  { to: '/calendar', label: 'CALENDAR' },
  { to: '/beliefs', label: 'OUR BELIEFS' },
]

export default function Header() {
  const [open, setOpen] = useState(false)
  return (
    <header role="banner" className="z-50 bg-white/90 backdrop-blur border-b border-subtle">
      <nav id="navigation" aria-label="Main navigation" className="container flex items-center justify-between h-20">
        <div className="flex items-center gap-4">
          <Link to="/" className="flex items-center gap-4 font-heading text-lg font-semibold tracking-tight text-ink leading-tight">
            <img
              src="/assets/favicon.ico.gif"
              alt="Annaville SDA Church Logo"
              className="w-20 h-20 rounded-lg"
            />
            <span>
              Annaville Seventh-day<br />Adventist Church
            </span>
          </Link>
        </div>
        <div className="hidden md:flex items-center gap-6">
          {navItems.map(item => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) => `text-sm font-medium transition-colors ${isActive ? 'text-primary font-semibold' : 'text-ink hover:text-primary'}`}
            >
              {item.label}
            </NavLink>
          ))}
          <Link
            to="/contact"
            className="btn text-sm px-4 py-2"
            onClick={() => track(events.CTA_CLICK, { label: 'contact' })}
          >
            Contact Us
          </Link>
        </div>
        <button
          aria-label="Open menu"
          className="md:hidden btn-ghost"
          onClick={() => setOpen(true)}
        >
          <span aria-hidden className="text-3xl">☰</span>
        </button>
      </nav>

      {open && (
        <div role="dialog" aria-modal="true" className="md:hidden fixed inset-0 z-[100] bg-white" onClick={() => setOpen(false)}>
          <div className="h-full w-full bg-white flex flex-col" onClick={e => e.stopPropagation()}>
            <div className="bg-white border-b border-gray-200 p-4 flex justify-between items-center flex-shrink-0">
              <span className="font-heading text-2xl font-bold text-gray-900">Menu</span>
              <button className="text-3xl text-gray-700 leading-none p-2 hover:bg-gray-100 rounded-lg transition-colors" onClick={() => setOpen(false)} aria-label="Close menu">✕</button>
            </div>
            <nav className="flex-1 flex flex-col justify-center px-8 py-8 bg-white">
              <ul className="space-y-4">
                {navItems.map(item => (
                  <li key={item.to}>
                    <NavLink
                      to={item.to}
                      onClick={() => setOpen(false)}
                      className={({ isActive }) => `block py-3 font-semibold text-lg text-center transition-colors ${isActive ? 'text-primary' : 'text-gray-900 hover:text-primary'}`}
                    >
                      {item.label}
                    </NavLink>
                  </li>
                ))}
                <li className="pt-4 border-t border-gray-200">
                  <Link
                    to="/contact"
                    className="block py-3 font-semibold text-lg text-center text-gray-900 hover:text-primary transition-colors"
                    onClick={() => { setOpen(false); track(events.CTA_CLICK, { label: 'contact' }) }}
                  >
                    Contact Us
                  </Link>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      )}
    </header>
  )
}