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

export default function Portfolio() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('');

  useEffect(() => {
    const handleScroll = () => {
      const sections = document.querySelectorAll('section');
      sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        if (rect.top <= 100 && rect.bottom >= 100) {
          setActiveSection(section.id);
        }
      });
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-[#F6F6F6] selection:bg-[#DCDCDC]">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 z-50 mix-blend-difference">
        <div className="max-w-[1440px] mx-auto px-6 md:px-12">
          <div className="flex justify-between items-center h-[72px]">
            <a href="/" className="text-sm font-normal tracking-tight text-white">Giorgi</a>
            <div className="hidden md:flex space-x-6">
              <a 
                href="#work" 
                className={`text-sm tracking-tight transition-colors duration-200 ${
                  activeSection === 'work' ? 'text-white' : 'text-[#757575]'
                } hover:text-white`}
              >
                Work
              </a>
              <a 
                href="#info" 
                className={`text-sm tracking-tight transition-colors duration-200 ${
                  activeSection === 'info' ? 'text-white' : 'text-[#757575]'
                } hover:text-white`}
              >
                Info
              </a>
            </div>
            <button 
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="md:hidden text-white"
            >
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-40 bg-black pt-[72px] md:hidden">
          <div className="p-6 space-y-6">
            <a href="#work" className="block text-2xl text-white font-normal">Work</a>
            <a href="#info" className="block text-2xl text-white font-normal">Info</a>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <section className="pt-48 pb-24 px-6 md:px-12 max-w-[1440px] mx-auto">
        <h1 className="text-[32px] md:text-[40px] lg:text-[48px] leading-tight font-normal max-w-[960px] tracking-[-0.02em]">
          I'm a product designer and developer helping companies build digital products and solve complex problems.
        </h1>
      </section>

      {/* Work Section */}
      <section id="work" className="py-24 px-6 md:px-12 max-w-[1440px] mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-24">
          <div className="space-y-24">
            <div>
              <div className="aspect-[4/3] bg-[#E8E8E8] mb-6 overflow-hidden">
                <img 
                  src="https://placehold.co/800x600" 
                  alt="Project 1"
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                />
              </div>
              <h3 className="text-lg mb-2">Project Title</h3>
              <p className="text-[#757575]">Project description</p>
            </div>
            <div>
              <div className="aspect-[4/3] bg-[#E8E8E8] mb-6 overflow-hidden">
                <img 
                  src="https://placehold.co/800x600" 
                  alt="Project 2"
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                />
              </div>
              <h3 className="text-lg mb-2">Project Title</h3>
              <p className="text-[#757575]">Project description</p>
            </div>
          </div>
          <div className="space-y-24 md:mt-48">
            <div>
              <div className="aspect-[4/3] bg-[#E8E8E8] mb-6 overflow-hidden">
                <img 
                  src="https://placehold.co/800x600" 
                  alt="Project 3"
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                />
              </div>
              <h3 className="text-lg mb-2">Project Title</h3>
              <p className="text-[#757575]">Project description</p>
            </div>
            <div>
              <div className="aspect-[4/3] bg-[#E8E8E8] mb-6 overflow-hidden">
                <img 
                  src="https://placehold.co/800x600" 
                  alt="Project 4"
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                />
              </div>
              <h3 className="text-lg mb-2">Project Title</h3>
              <p className="text-[#757575]">Project description</p>
            </div>
          </div>
        </div>
      </section>

      {/* Info Section */}
      <section id="info" className="py-24 px-6 md:px-12 max-w-[1440px] mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-24">
          <div>
            <h2 className="text-[32px] leading-tight font-normal mb-6 tracking-[-0.02em]">
              About
            </h2>
            <div className="space-y-6 text-lg text-[#757575]">
              <p>
                I'm a product designer and developer with over 8 years of experience working 
                with startups and established companies. I help businesses solve complex 
                problems and build digital products that users love.
              </p>
              <p>
                My approach combines strategic thinking with detailed execution, ensuring 
                that every project not only looks great but also delivers real value.
              </p>
            </div>
          </div>
          <div>
            <h2 className="text-[32px] leading-tight font-normal mb-6 tracking-[-0.02em]">
              Contact
            </h2>
            <div className="space-y-6">
              <p className="text-lg text-[#757575]">
                Available for select freelance projects.
                Get in touch to discuss your project:
              </p>
              <a 
                href="mailto:email@example.com" 
                className="text-lg hover:text-[#757575] transition-colors duration-200"
              >
                email@example.com
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-6 px-6 md:px-12 max-w-[1440px] mx-auto">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
          <p className="text-sm text-[#757575]">© 2023</p>
          <div className="flex space-x-6">
            <a href="#" className="text-sm hover:text-[#757575] transition-colors duration-200">Twitter</a>
            <a href="#" className="text-sm hover:text-[#757575] transition-colors duration-200">LinkedIn</a>
            <a href="#" className="text-sm hover:text-[#757575] transition-colors duration-200">Read.cv</a>
          </div>
        </div>
      </footer>
    </div>
  );
}