import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, X, Leaf } from 'lucide-react';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const location = useLocation();

  const isActive = (path: string) => location.pathname === path;

  return (
    <header className="bg-soft-white/95 backdrop-blur-sm sticky top-0 z-50 border-b border-primary-green/20 shadow-soft">
      <div className="max-w-content mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-3 group">
            <img 
              src="/logo.png" 
              alt="Nutrifaith Logo" 
              className="h-12 w-auto group-hover:scale-105 transition-transform duration-200"
            />
            <div>
              <h1 className="text-xl font-heading font-semibold text-deep-green">NUTRIFAITH</h1>
              <p className="text-xs text-neutral-charcoal">by Bhavika Patel</p>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <Link
              to="/about"
              className={`text-body-sm font-medium transition-colors hover:text-primary-green ${
                isActive('/about') ? 'text-primary-green' : 'text-deep-green'
              }`}
            >
              About
            </Link>
            <Link
              to="/coaching"
              className={`text-body-sm font-medium transition-colors hover:text-primary-green ${
                isActive('/coaching') ? 'text-primary-green' : 'text-deep-green'
              }`}
            >
              Services
            </Link>
            <Link
              to="/success-stories"
              className={`text-body-sm font-medium transition-colors hover:text-primary-green ${
                isActive('/success-stories') ? 'text-primary-green' : 'text-deep-green'
              }`}
            >
              Success Stories
            </Link>
            <Link
              to="/resources"
              className={`text-body-sm font-medium transition-colors hover:text-primary-green ${
                isActive('/resources') ? 'text-primary-green' : 'text-deep-green'
              }`}
            >
              Resources
            </Link>
            <Link
              to="/book-call"
              className="bg-deep-green text-soft-white px-6 py-3 rounded-button font-semibold text-body-sm uppercase tracking-cta hover:bg-accent-blue-green transition-all duration-200 hover:scale-105 transform shadow-soft inline-block text-center"
            >
              Book a Call
            </Link>
          </nav>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden p-2"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X className="w-6 h-6 text-deep-green" /> : <Menu className="w-6 h-6 text-deep-green" />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <nav className="md:hidden mt-6 pb-6 border-t border-primary-green/30">
            <div className="flex flex-col space-y-6 pt-6">
              <Link
                to="/about"
                className={`text-body font-medium transition-colors hover:text-primary-green ${
                  isActive('/about') ? 'text-primary-green' : 'text-deep-green'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                About
              </Link>
              <Link
                to="/coaching"
                className={`text-body font-medium transition-colors hover:text-primary-green ${
                  isActive('/coaching') ? 'text-primary-green' : 'text-deep-green'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                Services
              </Link>
              <Link
                to="/success-stories"
                className={`text-body font-medium transition-colors hover:text-primary-green ${
                  isActive('/success-stories') ? 'text-primary-green' : 'text-deep-green'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                Success Stories
              </Link>
              <Link
                to="/resources"
                className={`text-body font-medium transition-colors hover:text-primary-green ${
                  isActive('/resources') ? 'text-primary-green' : 'text-deep-green'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                Resources
              </Link>
              <Link
                to="/book-call"
                className="bg-deep-green text-soft-white px-6 py-4 rounded-button font-semibold text-body uppercase tracking-cta hover:bg-accent-blue-green transition-colors w-full inline-block text-center"
                onClick={() => setIsMenuOpen(false)}
              >
                Book a Call
              </Link>
            </div>
          </nav>
        )}
      </div>
    </header>
  );
};

export default Header;