'use client';

import { useState } from 'react';
import { Menu, X } from 'lucide-react';

const navLinks = [
  { label: 'Home', href: '#hero' },
  { label: 'About', href: '#about' },
  { label: 'Listings', href: '#listings' },
  { label: 'Contact', href: '#contact' },
];

export default function SiteNav() {
  const [isOpen, setIsOpen] = useState(false);

  function handleMobileLinkClick() {
    setIsOpen(false);
  }

  return (
    <nav
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 50,
        backgroundColor: '#1B2B4B',
        color: '#FAF9F7',
      }}
    >
      <div
        style={{
          maxWidth: '1200px',
          margin: '0 auto',
          padding: '0 1.5rem',
          height: '72px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        {/* Wordmark */}
        <a
          href="#hero"
          style={{
            fontWeight: 'bold',
            fontSize: '1.125rem',
            color: '#FAF9F7',
            textDecoration: 'none',
            letterSpacing: '0.01em',
          }}
        >
          Teressa Copeland
        </a>

        {/* Desktop nav links — hidden on mobile */}
        <ul
          style={{
            display: 'flex',
            gap: '2rem',
            listStyle: 'none',
            margin: 0,
            padding: 0,
          }}
          className="hidden-mobile-nav"
        >
          {navLinks.map((link) => (
            <li key={link.href}>
              <a
                href={link.href}
                style={{
                  color: '#FAF9F7',
                  textDecoration: 'none',
                  fontSize: '0.95rem',
                  opacity: 0.9,
                  transition: 'opacity 0.2s',
                }}
                onMouseEnter={(e) =>
                  ((e.currentTarget as HTMLAnchorElement).style.opacity = '1')
                }
                onMouseLeave={(e) =>
                  ((e.currentTarget as HTMLAnchorElement).style.opacity = '0.9')
                }
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>

        {/* Mobile hamburger button */}
        <button
          onClick={() => setIsOpen((prev) => !prev)}
          aria-label={isOpen ? 'Close menu' : 'Open menu'}
          style={{
            background: 'none',
            border: 'none',
            color: '#FAF9F7',
            cursor: 'pointer',
            padding: '0.25rem',
            display: 'none',
          }}
          className="mobile-menu-btn"
        >
          {isOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* Mobile dropdown drawer */}
      {isOpen && (
        <div
          style={{
            backgroundColor: '#1B2B4B',
            borderTop: '1px solid rgba(250,249,247,0.15)',
            padding: '1rem 1.5rem',
          }}
          className="mobile-nav-drawer"
        >
          <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
            {navLinks.map((link) => (
              <li key={link.href} style={{ marginBottom: '0.75rem' }}>
                <a
                  href={link.href}
                  onClick={handleMobileLinkClick}
                  style={{
                    color: '#FAF9F7',
                    textDecoration: 'none',
                    fontSize: '1rem',
                    display: 'block',
                    padding: '0.25rem 0',
                  }}
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}

      <style>{`
        @media (min-width: 768px) {
          .hidden-mobile-nav { display: flex !important; }
          .mobile-menu-btn { display: none !important; }
          .mobile-nav-drawer { display: none !important; }
        }
        @media (max-width: 767px) {
          .hidden-mobile-nav { display: none !important; }
          .mobile-menu-btn { display: block !important; }
        }
      `}</style>
    </nav>
  );
}
