'use client';

import React, { useState, useEffect } from 'react';
import { Menu, X } from 'lucide-react';

const navItems = [
  { label: '首页', href: '#hero' },
  { label: '关于我们', href: '#about' },
  { label: '核心业务', href: '#services' },
  { label: '联系方式', href: '#contact' },
];

const Navbar: React.FC = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

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

  return (
    <nav
      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
        isScrolled
          ? 'bg-feie-cream/90 backdrop-blur-md shadow-sm py-4'
          : 'bg-transparent py-6'
      }`}
    >
      <div className="container mx-auto px-6 flex justify-between items-center">
        <a href="#" className="flex items-center gap-2 group">
          <div className={`w-8 h-8 rounded-sm border-2 flex items-center justify-center transition-colors ${isScrolled ? 'border-feie-dark text-feie-dark' : 'border-feie-white text-feie-white'}`}>
             <span className="font-serif font-bold text-lg">F</span>
          </div>
          <span className={`font-serif text-xl font-bold tracking-wide transition-colors ${isScrolled ? 'text-feie-dark' : 'text-feie-white'}`}>
            FEIE TECH
          </span>
        </a>

        {/* Desktop Menu */}
        <div className="hidden md:flex items-center space-x-8">
          {navItems.map((item) => (
            <a
              key={item.label}
              href={item.href}
              className={`font-serif text-sm tracking-widest uppercase hover:text-feie-gold transition-colors duration-300 ${
                isScrolled ? 'text-feie-dark' : 'text-feie-white/90'
              }`}
            >
              {item.label}
            </a>
          ))}
          <a
            href="#contact"
            className={`px-5 py-2 border font-serif text-sm transition-all duration-300 ${
              isScrolled
                ? 'border-feie-dark text-feie-dark hover:bg-feie-dark hover:text-feie-white'
                : 'border-feie-white text-feie-white hover:bg-feie-white hover:text-feie-dark'
            }`}
          >
            合作咨询
          </a>
        </div>

        {/* Mobile Toggle */}
        <button
          className="md:hidden focus:outline-none"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        >
          {isMobileMenuOpen ? (
            <X className={isScrolled ? 'text-feie-dark' : 'text-feie-white'} />
          ) : (
            <Menu className={isScrolled ? 'text-feie-dark' : 'text-feie-white'} />
          )}
        </button>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 w-full bg-feie-cream border-t border-gray-200 py-4 shadow-lg flex flex-col items-center space-y-4">
          {navItems.map((item) => (
            <a
              key={item.label}
              href={item.href}
              className="font-serif text-feie-dark hover:text-feie-gold"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              {item.label}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
};

export default Navbar;