'use client';

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

export default function Navigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const navItems = [
    { name: 'Home', href: '#home' },
    { name: 'Services', href: '#services' },
    { name: 'About', href: '#about' },
  ];

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 md:h-20">
          {/* Logo */}
          <Link href="#home" style={{ color: '#00171F' }} className="text-2xl md:text-3xl font-bold hover:opacity-80 transition-colors">
            Multilingual Family Space
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {navItems.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                style={{ color: '#00171F' }}
                className="hover:opacity-70 transition-colors font-medium"
              >
                {item.name}
              </Link>
            ))}
            <Link
              href="#contact"
              style={{ backgroundColor: '#00171F' }}
              className="text-white px-6 py-2 rounded-full hover:opacity-90 transition-colors font-medium"
            >
              Contact Now
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            style={{ color: '#00171F' }}
            className="md:hidden p-2 hover:opacity-70"
            aria-label="Toggle menu"
          >
            <svg
              className="w-6 h-6"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              {isMenuOpen ? (
                <path d="M6 18L18 6M6 6l12 12" />
              ) : (
                <path d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
          </button>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden pb-4 space-y-3">
            {navItems.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                onClick={() => setIsMenuOpen(false)}
                style={{ color: '#00171F' }}
                className="block hover:opacity-70 transition-colors font-medium py-2"
              >
                {item.name}
              </Link>
            ))}
            <Link
              href="#contact"
              onClick={() => setIsMenuOpen(false)}
              style={{ backgroundColor: '#00171F' }}
              className="block text-white px-6 py-2 rounded-full hover:opacity-90 transition-colors font-medium text-center mt-4"
            >
              Contact Now
            </Link>
          </div>
        )}
      </div>
    </nav>
  );
}