"use client";

import { useState } from 'react';
import Link from 'next/link';
import { Menu, X, Crown, Mail } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { FaWhatsapp } from 'react-icons/fa';

const navLinks = [
  { href: '#achievements', label: 'Achievements' },
  { href: '#play', label: 'Practise & Learn' },
  { href: '#resources', label: 'Resources' },
  { href: '#pricing', label: 'Pricing' },
];

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

  return (
    <>
      <div className='bg-primary'>
        <div className="container flex flex-row justify-between px-10 py-2">
          <a href="tel:+381603112100" className="gap-2 flex flex-row text-primary-foreground/80 transition-colors hover:text-accent">
            <FaWhatsapp className="h-6 w-6" />
            <span className='isHidden'>+381603112100</span>
          </a>
          <a href="mailto:vukn07237@gmail.com" className="gap-2 flex flex-row text-primary-foreground/80 transition-colors hover:text-accent">
            <Mail className="h-6 w-6" />
            <span className='isHidden'>vukn07237@gmail.com</span>
          </a>
        </div>
      </div>
      <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <div className="mr-4 flex items-center">
            <Link href="/" className="flex items-center gap-2 font-bold text-primary">
              <Crown className="h-6 w-6 text-accent" />
              <span className="font-headline text-xl">PieceVeritas</span>
            </Link>
          </div>
          <nav className="hidden items-center space-x-6 text-sm font-medium md:flex">
            {navLinks.map((link) => (
              <Link key={link.href} href={link.href} className="transition-colors hover:text-accent">
                {link.label}
              </Link>
            ))}
          </nav>
          <div className="flex flex-1 items-center justify-end space-x-4">
            <Button asChild className="hidden md:inline-flex bg-accent hover:bg-accent/90 text-accent-foreground">
              <a href="#contact">Book a Lesson</a>
            </Button>
            <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" className="px-2 md:hidden">
                  <Menu className="h-6 w-6" />
                  <span className="sr-only">Toggle Menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="right">
                <div className="flex h-full flex-col">
                  <div className="flex items-center justify-between border-b pb-4">
                    <Link href="/" className="flex items-center gap-2 font-bold text-primary" onClick={() => setIsMenuOpen(false)}>
                      <Crown className="h-6 w-6 text-accent" />
                      <span className="font-headline text-xl">PieceVeritas</span>
                    </Link>
                    {/* <Button variant="ghost" size="icon" onClick={() => setIsMenuOpen(false)}>
                      <X className="h-6 w-6" />
                    </Button> */}
                  </div>
                  <nav className="mt-8 flex flex-col space-y-4">
                    {navLinks.map((link) => (
                      <Link
                        key={link.href}
                        href={link.href}
                        className="text-lg font-medium transition-colors hover:text-accent"
                        onClick={() => setIsMenuOpen(false)}
                      >
                        {link.label}
                      </Link>
                    ))}
                  </nav>
                  <Button asChild className="mt-auto bg-accent hover:bg-accent/90 text-accent-foreground" onClick={() => setIsMenuOpen(false)}>
                    <a href="#contact">Book a Lesson</a>
                  </Button>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </header>
    </>
  );
}