import { useState, useEffect } from 'react';

interface HeaderProps {
  scrolled: boolean;
}

const NAV_LINKS = [
  { label: 'Why Gadget Code', href: '#why' },
  { label: 'Gadget Code', href: '#gadget-code' },
  { label: 'Gadget', href: '#gadget' },
  { label: 'Get Started', href: '#get-started' },
];

export default function Header({ scrolled }: HeaderProps) {
  const [mobileOpen, setMobileOpen] = useState(false);

  // Close mobile menu on resize
  useEffect(() => {
    const onResize = () => {
      if (window.innerWidth >= 768) setMobileOpen(false);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 h-header flex items-center border-b transition-all duration-300 ${
        scrolled
          ? 'bg-bg-secondary/90 backdrop-blur-md border-border-default'
          : 'bg-transparent border-transparent'
      }`}
    >
      <div className="w-full max-w-7xl mx-auto px-6 flex items-center justify-between">
        {/* Logo / Brand */}
        <a href="#" className="flex items-center gap-3 group">
          <img
            src="/favicon.png"
            alt="Gadget Code"
            className="w-6 h-6"
          />
          <span className="font-mono text-sm font-bold tracking-wider text-text-primary group-hover:text-brand transition-colors">
            GADGET CODE
          </span>
        </a>

        {/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-6">
          {NAV_LINKS.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="text-xs font-mono tracking-wide text-text-secondary hover:text-text-primary transition-colors"
            >
              {link.label.toUpperCase()}
            </a>
          ))}
        </nav>

        {/* Desktop CTAs */}
        <div className="hidden md:flex items-center gap-3">
          <a
            href="https://git.g4dge7.com"
            target="_blank"
            rel="noopener noreferrer"
            className="px-3 py-1.5 text-xs font-mono tracking-wide border border-border-default rounded hover:border-border-highlight hover:text-text-primary text-text-secondary transition-all"
          >
            GET SOURCE
          </a>
          <a
            href="#get-started"
            className="px-3 py-1.5 text-xs font-mono tracking-wide bg-brand hover:bg-brand-light text-white rounded transition-colors"
          >
            SUBSCRIBE
          </a>
        </div>

        {/* Mobile menu toggle */}
        <button
          className="md:hidden p-2 text-text-secondary hover:text-text-primary"
          onClick={() => setMobileOpen(!mobileOpen)}
          aria-label="Toggle menu"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            {mobileOpen ? (
              <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.5" />
            ) : (
              <>
                <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" strokeWidth="1.5" />
              </>
            )}
          </svg>
        </button>
      </div>

      {/* Mobile Navigation */}
      {mobileOpen && (
        <div className="md:hidden absolute top-header left-0 right-0 bg-bg-secondary/95 backdrop-blur-md border-b border-border-default">
          <nav className="flex flex-col p-4 gap-3">
            {NAV_LINKS.map((link) => (
              <a
                key={link.href}
                href={link.href}
                onClick={() => setMobileOpen(false)}
                className="text-xs font-mono tracking-wide text-text-secondary hover:text-text-primary transition-colors py-1"
              >
                {link.label.toUpperCase()}
              </a>
            ))}
            <div className="flex gap-3 pt-2 border-t border-border-default">
              <a
                href="https://git.g4dge7.com"
                target="_blank"
                rel="noopener noreferrer"
                className="px-3 py-1.5 text-xs font-mono tracking-wide border border-border-default rounded text-text-secondary hover:text-text-primary"
              >
                GET SOURCE
              </a>
              <a
                href="#get-started"
                onClick={() => setMobileOpen(false)}
                className="px-3 py-1.5 text-xs font-mono tracking-wide bg-brand text-white rounded"
              >
                SUBSCRIBE
              </a>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}
