import { useState } from 'react'
import Link from 'next/link'

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

  return (
    <nav className="bg-kisan-green shadow-lg sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-3xl">🌾</span>
            <div>
              <h1 className="text-white font-bold text-lg">किसान बीज सेवा</h1>
              <p className="text-kisan-light text-xs">Kisan Beej Seva</p>
            </div>
          </Link>
          
          <div className="hidden md:flex items-center space-x-8">
            <Link href="#home" className="text-white hover:text-kisan-gold transition">Home</Link>
            <Link href="#seeds" className="text-white hover:text-kisan-gold transition">Seeds</Link>
            <Link href="#about" className="text-white hover:text-kisan-gold transition">About</Link>
            <Link href="#contact" className="text-white hover:text-kisan-gold transition">Contact</Link>
            <button className="bg-kisan-gold text-kisan-soil px-4 py-2 rounded-lg font-semibold hover:bg-yellow-400 transition">
              📞 हेल्पलाइन
            </button>
          </div>

          <button 
            className="md:hidden text-white"
            onClick={() => setIsOpen(!isOpen)}
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              {isOpen ? (
                <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>

        {isOpen && (
          <div className="md:hidden pb-4">
            <Link href="#home" className="block text-white py-2 hover:text-kisan-gold" onClick={() => setIsOpen(false)}>Home</Link>
            <Link href="#seeds" className="block text-white py-2 hover:text-kisan-gold" onClick={() => setIsOpen(false)}>Seeds</Link>
            <Link href="#about" className="block text-white py-2 hover:text-kisan-gold" onClick={() => setIsOpen(false)}>About</Link>
            <Link href="#contact" className="block text-white py-2 hover:text-kisan-gold" onClick={() => setIsOpen(false)}>Contact</Link>
          </div>
        )}
      </div>
    </nav>
  )
}