'use client';

import { useState } from 'react';
import { Menu, Mountain, X } from 'lucide-react';
import Link from 'next/link';

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

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <style>{`html { scroll-behavior: smooth; }`}</style>
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground flex-shrink-0">
              <Mountain className="h-4 w-4" />
            </div>
            <span className="font-serif text-xl font-bold text-foreground">Molten Rock Private Reserve</span>
          </Link>

          {/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-6">
            <Link href="/" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Home</Link>
            <a href="#safari-experiences" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Bespoke Safari Experiences</a>
            <a href="#luxury-suites" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Six Sanctuary Suites</a>
            <a href="#our-story" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Molten Rock Origins</a>
            <a href="#photo-gallery" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Molten Moments Gallery</a>
            <a href="#contact" className="text-foreground/80 hover:text-primary transition-colors text-sm font-medium">Private Reserve Contact</a>
            <Link href="/services" className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">Services</Link>
          </nav>

          {/* Mobile toggle */}
          <button
            className="md:hidden p-2 rounded-md text-foreground hover:bg-muted transition-colors"
            onClick={() => setIsOpen(!isOpen)}
            aria-label="Toggle menu"
          >
            {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>

        {/* Mobile nav */}
        {isOpen && (
          <div className="md:hidden border-t py-4 space-y-1 px-2">
              <Link href="/" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Home</Link>
              <a href="#safari-experiences" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Bespoke Safari Experiences</a>
              <a href="#luxury-suites" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Six Sanctuary Suites</a>
              <a href="#our-story" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Molten Rock Origins</a>
              <a href="#photo-gallery" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Molten Moments Gallery</a>
              <a href="#contact" className="block px-3 py-2 rounded-lg text-foreground hover:bg-muted transition-colors" onClick={() => setIsOpen(false)}>Private Reserve Contact</a>
              <Link href="/services" className="block px-3 py-2 rounded-lg bg-primary text-primary-foreground font-medium" onClick={() => setIsOpen(false)}>Services</Link>
          </div>
        )}
      </div>
    </header>
  );
}