'use client'; // Ensure this file is treated as a Client Component

import { useState } from 'react';
import { Button } from '@/components/Button';
import { Container } from '@/components/Container';
import { Logo } from '@/components/Logo';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';

// Example navigation items
const navigationItems = [
  { name: 'About', href: '/about.html' },
  { name: 'HeroVerse 3D', href: '/heroverse.html' },
  { name: 'Features', href: '/features.html' },
  { name: 'Usecases', href: '/usecases.html' },
  { name: 'Community', href: '/community.html' },
];

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="relative z-50 flex-none lg:py-2 bg-white">
      <Container className="flex flex-wrap items-center justify-between lg:justify-center lg:flex-nowrap">
      <a href="/">
        <div className="my-5 lg:my-0 lg:grow lg:basis-0">
         <Logo className="h-12 w-auto text-slate-900" />
        </div>
     </a>
        <div className="hidden lg:flex lg:items-center lg:gap-8 lg:grow lg:basis-0">
          <div className="flex gap-8 mx-auto">
            {navigationItems.map((item) => (
              <a key={item.name} href={item.href} className="text-purple-700 font-semibold hover:text-purple-600">
                {item.name}
              </a>
            ))}
          </div>
          <Button href="https://portal.ourverse.tf" target='_blank'>Join OurVerse</Button>
        </div>
        <div className="lg:hidden flex items-center bg-gradient3">
          <button
            type="button"
            onClick={() => setMobileMenuOpen(true)}
            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-purple-700"
          >
            <span className="sr-only">Open menu</span>
            <Bars3Icon aria-hidden="true" className="h-6 w-6" />
          </button>
        </div>
      </Container>

      {/* Mobile menu */}
      {mobileMenuOpen && (
        <div className="fixed inset-0 z-10 bg-white shadow-lg lg:hidden">
          <div className="flex items-center justify-between p-6">
            <Logo className="h-12 w-auto text-slate-900" />
            <button
              type="button"
              onClick={() => setMobileMenuOpen(false)}
              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-purple-700"
            >
              <span className="sr-only">Close menu</span>
              <XMarkIcon aria-hidden="true" className="h-6 w-6" />
            </button>
          </div>
          <div className="flex flex-col p-6 space-y-4">
            {navigationItems.map((item) => (
              <a
                key={item.name}
                href={item.href}
                className="text-purple-600 hover:text-purple-800 text-lg font-semibold"
                onClick={() => setMobileMenuOpen(false)}
              >
                {item.name}
              </a>
            ))}
            <Button href="https://portal.ourverse.tf" target='_blank' className="mt-4 btn-gradient-dark">
              Join OurVerse
            </Button>
          </div>
        </div>
      )}
    </header>
  );
}