// components/Header.tsx
'use client';

import Link from 'next/link';
import { useState, useEffect } from 'react';
import { Heart, Phone, Menu, X, Plus } from 'lucide-react';
import { usePathname } from 'next/navigation';

const Header = () => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleSmoothScroll = (
    e: React.MouseEvent<HTMLAnchorElement>,
    sectionId: string
  ) => {
    if (pathname !== '/') {
      setMobileMenuOpen(false);
      return;
    }

    e.preventDefault();

    const section = document.getElementById(sectionId);
    if (section) {
      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
      setMobileMenuOpen(false);
    }
  };

  const navigation = [
    { name: 'Our Communities', href: '/#communities', isScroll: true },
    { name: 'Services', href: '/#services', isScroll: true },
    { name: 'Contact', href: '/contact', isScroll: false },
  ];

  return (
    <header className={`fixed top-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-3' : 'bg-transparent py-5'
      }`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          {/* Logo with updated design */}
          <Link href="/" className="flex flex-col group">
            <div className="flex items-center gap-3">
              <div className="relative">
                <div className="w-11 h-11 bg-emerald-50 rounded-2xl flex items-center justify-center transform rotate-3 group-hover:rotate-0 transition-transform duration-300">
                  <Heart className="w-5 h-5 text-emerald-600" />
                </div>
                <div className="absolute -top-1 -right-1 w-3 h-3 bg-amber-400 rounded-full border-2 border-white"></div>
              </div>
              <div className="relative">
                <div className="flex items-baseline">
                  <span className="text-2xl font-light tracking-tight text-gray-900">americas</span>
                  <span className="text-2xl font-bold text-emerald-600">.care</span>
                </div>
                {/* Plus icon top right corner of the text */}
                <div className="absolute -top-1 -right-2">
                  <Plus className="w-4 h-4 text-emerald-500 font-bold" strokeWidth={3} />
                </div>
              </div>
            </div>
            {/* Subtitle - Assistant living services in capital letters */}
            <div className="text-[11px] tracking-wider text-gray-500 font-semibold ml-14 -mt-[12px]">
              ASSISTANT LIVING SERVICES
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center gap-1">
            {navigation.map((item) => (
              item.isScroll ? (
                <Link
                  key={item.name}
                  href={item.href}
                  onClick={(e) => handleSmoothScroll(e, item.href.split('#')[1])}
                  className="px-4 py-2 text-gray-600 hover:text-emerald-600 rounded-full hover:bg-emerald-50 transition-all cursor-pointer"
                >
                  {item.name}
                </Link>
              ) : (
                <Link
                  key={item.name}
                  href={item.href}
                  className="px-4 py-2 text-gray-600 hover:text-emerald-600 rounded-full hover:bg-emerald-50 transition-all"
                >
                  {item.name}
                </Link>
              )
            ))}
          </nav>

          {/* Desktop Right Section */}
          <div className="hidden md:flex items-center gap-3">
            <Link href="tel:+15551234567" className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-emerald-600 transition-colors">
              <Phone className="w-4 h-4" />
              <span className="text-sm font-medium">(555) 123-4567</span>
            </Link>
            <Link
              href="/contact"
              className="px-5 py-2.5 bg-emerald-600 text-white text-sm font-medium rounded-full hover:bg-emerald-700 shadow-sm hover:shadow transition-all"
            >
              Schedule a Tour
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="md:hidden p-2 rounded-xl bg-gray-100"
            aria-label="Toggle menu"
          >
            {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </button>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden mt-4 p-4 bg-white rounded-2xl shadow-lg border border-gray-100">
            {navigation.map((item) => (
              item.isScroll ? (
                <Link
                  key={item.name}
                  href={item.href}
                 onClick={(e) => handleSmoothScroll(e, item.href.split('#')[1])}
                  className="block py-3 text-gray-600 hover:text-emerald-600 border-b border-gray-100 last:border-0"
                >
                  {item.name}
                </Link>
              ) : (
                <Link
                  key={item.name}
                  href={item.href}
                  className="block py-3 text-gray-600 hover:text-emerald-600 border-b border-gray-100 last:border-0"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  {item.name}
                </Link>
              )
            ))}
            <Link
              href="#"
              className="block mt-3 px-4 py-3 bg-emerald-600 text-white text-center rounded-xl"
              onClick={() => setMobileMenuOpen(false)}
            >
              Schedule a Tour
            </Link>
          </div>
        )}
      </div>
    </header>
  );
};

export default Header;