import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import Nova40Icon from './Nova40Icon'

export default function Navbar() {
  const [open, setOpen] = useState(false)

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-nova-bg/80 backdrop-blur-xl border-b border-nova-border">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link to="/" className="flex items-center gap-2">
            <Nova40Icon size={36} rounded />
            <span className="text-lg font-bold text-white">Nova40</span>
          </Link>

          {/* Desktop Nav */}
          <div className="hidden md:flex items-center gap-8">
            <a href="#features" className="text-nova-textSecondary hover:text-white transition-colors text-sm">Features</a>
            <a href="#how-it-works" className="text-nova-textSecondary hover:text-white transition-colors text-sm">How It Works</a>
            <a href="#download" className="text-nova-textSecondary hover:text-white transition-colors text-sm">Download</a>
            <a
              href="#download"
              className="px-4 py-2 bg-nova-primary hover:bg-nova-primaryLight rounded-full text-white text-sm font-medium transition-colors"
            >
              Get the App
            </a>
          </div>

          {/* Mobile Toggle */}
          <button
            onClick={() => setOpen(!open)}
            className="md:hidden text-white p-2"
            aria-label="Toggle menu"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              {open ? (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
          </button>
        </div>

        {/* Mobile Menu */}
        {open && (
          <div className="md:hidden pb-4 border-t border-nova-border mt-2 pt-4">
            <div className="flex flex-col gap-3">
              <a href="#features" onClick={() => setOpen(false)} className="text-nova-textSecondary hover:text-white transition-colors text-sm px-2 py-1">Features</a>
              <a href="#how-it-works" onClick={() => setOpen(false)} className="text-nova-textSecondary hover:text-white transition-colors text-sm px-2 py-1">How It Works</a>
              <a href="#download" onClick={() => setOpen(false)} className="text-nova-textSecondary hover:text-white transition-colors text-sm px-2 py-1">Download</a>
              <a
                href="#download"
                onClick={() => setOpen(false)}
                className="mt-2 px-4 py-2 bg-nova-primary hover:bg-nova-primaryLight rounded-full text-white text-sm font-medium transition-colors text-center"
              >
                Get the App
              </a>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
