import React, { useState, useEffect } from 'react';
import { 
  Menu, 
  X, 
  Phone, 
  Mail, 
  ChevronRight, 
  Award, 
  Briefcase, 
  Globe, 
  TrendingUp, 
  HardHat, 
  Zap, 
  Wifi, 
  Activity, 
  Cpu, 
  Truck, 
  Hammer,
  ArrowRight
} from 'lucide-react';

const DurangoWorks = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const scrollToSection = (id) => {
    setIsMenuOpen(false);
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div className="min-h-screen font-sans text-slate-800 bg-slate-50">
      
      {/* Navigation */}
      <nav 
        className={`fixed w-full z-50 transition-all duration-300 ${
          scrolled ? 'bg-white shadow-lg py-2' : 'bg-transparent py-4'
        }`}
      >
        <div className="container mx-auto px-6 flex justify-between items-center">
          {/* Logo Placeholder */}
          <div className="flex items-center space-x-2 cursor-pointer" onClick={() => scrollToSection('home')}>
            <div className={`font-bold text-2xl tracking-tighter ${scrolled ? 'text-slate-900' : 'text-white'}`}>
              DURANGO<span className="text-amber-500">WORKS</span>
            </div>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center space-x-8">
            {['About', 'Services', 'Projects', 'Gallery', 'Contact'].map((item) => (
              <button 
                key={item}
                onClick={() => scrollToSection(item.toLowerCase())}
                className={`text-sm font-medium hover:text-amber-500 transition-colors ${
                  scrolled ? 'text-slate-600' : 'text-white/90'
                }`}
              >
                {item}
              </button>
            ))}
            <a 
              href="tel:2259073887" 
              className="bg-amber-500 hover:bg-amber-600 text-white px-5 py-2 rounded-full text-sm font-semibold transition-transform hover:scale-105 flex items-center gap-2"
            >
              <Phone size={16} /> (225) 907-3887
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button 
            className="md:hidden text-amber-500"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
          </button>
        </div>

        {/* Mobile Menu Overlay */}
        {isMenuOpen && (
          <div className="absolute top-full left-0 w-full bg-white shadow-xl py-6 px-6 flex flex-col space-y-4 md:hidden border-t border-slate-100">
            {['About', 'Services', 'Projects', 'Gallery', 'Contact'].map((item) => (
              <button 
                key={item}
                onClick={() => scrollToSection(item.toLowerCase())}
                className="text-left text-lg font-medium text-slate-700 hover:text-amber-500"
              >
                {item}
              </button>
            ))}
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative h-screen flex items-center justify-center overflow-hidden">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2070&auto=format&fit=crop" 
            alt="Industrial Construction Site" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-slate-900/80"></div>
        </div>

        <div className="relative z-10 container mx-auto px-6 text-center text-white">
          <div className="inline-block px-3 py-1 mb-6 border border-amber-500/50 rounded-full bg-amber-500/10 backdrop-blur-sm text-amber-400 text-sm font-medium tracking-wide uppercase animate-fade-in-up">
            Developing Career Opportunities
          </div>
          <h1 className="text-5xl md:text-7xl font-bold mb-6 tracking-tight leading-tight">
            Resources. Tools. <br />
            <span className="text-amber-500">Network.</span>
          </h1>
          <p className="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto mb-10 leading-relaxed">
            Leading the way in workforce development for the energy, manufacturing, and construction sectors. We build the bridge between industry needs and skilled talent.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button 
              onClick={() => scrollToSection('contact')}
              className="bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all hover:shadow-lg hover:shadow-amber-500/30 flex items-center justify-center gap-2"
            >
              Contact Us Today <ArrowRight size={20} />
            </button>
            <button 
              onClick={() => scrollToSection('services')}
              className="bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all flex items-center justify-center"
            >
              Explore Programs
            </button>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="flex flex-col lg:flex-row items-center gap-16">
            
            {/* Image Side */}
            <div className="lg:w-1/2 relative">
              <div className="relative z-10 rounded-2xl overflow-hidden shadow-2xl border-4 border-white">
                <img 
                  src="https://durangoworks.com/wp-content/uploads/2024/04/drmel1.jpg" 
                  alt="Girard J. Melancon, Ph.D." 
                  className="w-full object-cover hover:scale-105 transition-transform duration-700"
                />
              </div>
              {/* Floating Badge */}
              <div className="absolute -bottom-6 -right-6 bg-slate-900 text-white p-6 rounded-xl shadow-xl z-20 max-w-[200px]">
                <div className="text-5xl font-bold text-amber-500 mb-1">25+</div>
                <div className="text-sm font-medium leading-tight text-slate-300">Years of Executive Experience</div>
              </div>
              {/* Decorative Element */}
              <div className="absolute -top-10 -left-10 w-40 h-40 bg-amber-100 rounded-full blur-3xl opacity-50 z-0"></div>
            </div>

            {/* Content Side */}
            <div className="lg:w-1/2">
              <h4 className="text-amber-600 font-bold uppercase tracking-wider mb-2">About Us</h4>
              <h2 className="text-4xl font-bold text-slate-900 mb-4">Girard J. Melancon, Ph.D.</h2>
              <h3 className="text-xl text-slate-500 font-medium mb-8">President / Founder, Durango Works Corp.</h3>
              
              <p className="text-slate-600 mb-8 leading-relaxed">
                Dr. Melancon is a nationally recognized workforce consultant, assisting the postsecondary education sectors to build effective workforce programs in alternative energy, manufacturing, petrochemical, transportation, and construction. We specialize in programs designed to recruit, train, employ, and prepare individuals for sustainable careers in evolving industries.
              </p>

              <div className="space-y-6">
                <div className="flex gap-4">
                  <div className="bg-amber-50 p-3 rounded-lg h-fit text-amber-600">
                    <Briefcase size={24} />
                  </div>
                  <div>
                    <h5 className="font-bold text-slate-900 mb-1">Leadership</h5>
                    <p className="text-slate-600 text-sm">Served as president of the National Council for Workforce Education (NCWE), the largest national community college workforce development institute.</p>
                  </div>
                </div>
                
                <div className="flex gap-4">
                  <div className="bg-amber-50 p-3 rounded-lg h-fit text-amber-600">
                    <Globe size={24} />
                  </div>
                  <div>
                    <h5 className="font-bold text-slate-900 mb-1">National Impact</h5>
                    <p className="text-slate-600 text-sm">Lead consultant for global leaders in Hydrogen Production and national foundations addressing manufacturing challenges.</p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="bg-amber-50 p-3 rounded-lg h-fit text-amber-600">
                    <TrendingUp size={24} />
                  </div>
                  <div>
                    <h5 className="font-bold text-slate-900 mb-1">Servant Leadership</h5>
                    <p className="text-slate-600 text-sm">Passion and track record for serving business, industry, state & local government, and federal policymakers.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Program Development / Services Section */}
      <section id="services" className="py-24 bg-slate-50 relative">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16 max-w-3xl mx-auto">
            <h4 className="text-amber-600 font-bold uppercase tracking-wider mb-2">Our Expertise</h4>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Specializing in Program Development</h2>
            <p className="text-slate-600">
              Workforce training across key industries is essential to support economic growth, innovation, and public well-being.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <ServiceCard 
              icon={<Zap size={32} />} 
              title="Energy & Efficiency" 
              desc="Advancing sustainable practices and meeting growing energy demands." 
            />
            <ServiceCard 
              icon={<Activity size={32} />} 
              title="Petrochemical" 
              desc="Ensuring safety, efficiency, and innovation in high-demand industries." 
            />
            <ServiceCard 
              icon={<Hammer size={32} />} 
              title="Manufacturing" 
              desc="Maintaining productivity and embracing new technologies." 
            />
            <ServiceCard 
              icon={<Wifi size={32} />} 
              title="Telecommunication" 
              desc="Supporting rapid technological advancements and high-speed connectivity." 
            />
            <ServiceCard 
              icon={<HardHat size={32} />} 
              title="Construction" 
              desc="Ensuring jobsite safety and meeting industry demands with skilled labor." 
            />
            <ServiceCard 
              icon={<Cpu size={32} />} 
              title="Information Tech" 
              desc="Securing digital infrastructure and meeting tech-driven needs." 
            />
            <ServiceCard 
              icon={<Truck size={32} />} 
              title="Transportation" 
              desc="Improving efficiency in the movement of goods and people." 
            />
            <ServiceCard 
              icon={<Award size={32} />} 
              title="Allied Health" 
              desc="Critical training for delivering high-quality patient care." 
            />
          </div>
        </div>
      </section>

      {/* Current Projects Section */}
      <section id="projects" className="py-24 bg-slate-900 text-white">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-end mb-12 border-b border-slate-700 pb-8">
            <div className="max-w-2xl">
              <h4 className="text-amber-500 font-bold uppercase tracking-wider mb-2">Current Initiatives</h4>
              <h2 className="text-3xl md:text-4xl font-bold">Making an Impact</h2>
            </div>
            <div className="hidden md:block">
              <button className="text-amber-500 hover:text-white transition-colors flex items-center gap-2 font-medium">
                View All Projects <ChevronRight size={16} />
              </button>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <ProjectCard 
              title="National Green Job Advisory Council"
              description="Director for the council funded by a Large National Foundation. Focusing on alternative energy, HVAC technology, electric vehicles, and green construction."
            />
            <ProjectCard 
              title="Hydrogen Production Workforce"
              description="Lead consultant for a global leader in Hydrogen Production workforce project development in Sacramento, CA."
            />
            <ProjectCard 
              title="Manufacturing Solutions"
              description="Lead consultant for a national foundation to develop solutions addressing challenges in the manufacturing sector."
            />
            <ProjectCard 
              title="Community College Realignment"
              description="Consultant for an east coast community college system to help their workforce realignment with business and industry."
            />
            <ProjectCard 
              title="Nonprofit Program Design"
              description="Lead consultant for a prominent Baton Rouge nonprofit, focused on workforce program assessment and design."
            />
          </div>
        </div>
      </section>

      {/* Gallery Section */}
      <section id="gallery" className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h4 className="text-amber-600 font-bold uppercase tracking-wider mb-2">Gallery</h4>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Durango Works in Action</h2>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 auto-rows-[200px]">
            {/* Using placeholders that match the industry theme since original image URLs might break */}
            <div className="col-span-2 row-span-2 rounded-xl overflow-hidden group relative">
              <img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?q=80&w=2070&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" alt="Meeting" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                <p className="text-white font-medium">Workforce Training Sessions</p>
              </div>
            </div>
            <div className="col-span-1 row-span-1 rounded-xl overflow-hidden group relative">
              <img src="https://images.unsplash.com/photo-1581094794329-cd1096d7a43f?q=80&w=2070&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" alt="Industry" />
            </div>
            <div className="col-span-1 row-span-2 rounded-xl overflow-hidden group relative">
              <img src="https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" alt="Construction" />
            </div>
            <div className="col-span-1 row-span-1 rounded-xl overflow-hidden group relative">
              <img src="https://images.unsplash.com/photo-1574607383476-f517b261d35b?q=80&w=2070&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" alt="Technology" />
            </div>
             <div className="col-span-2 row-span-1 rounded-xl overflow-hidden group relative">
              <img src="https://images.unsplash.com/photo-1565514020176-db99480bc132?q=80&w=2070&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" alt="Conference" />
            </div>
          </div>
        </div>
      </section>

      {/* Partners Strip */}
      <section className="py-12 bg-slate-100 border-y border-slate-200">
        <div className="container mx-auto px-6">
          <p className="text-center text-slate-400 text-sm font-semibold uppercase tracking-widest mb-8">Trusted by Industry Leaders</p>
          <div className="flex flex-wrap justify-center items-center gap-12 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
             {/* Text placeholders for logos to avoid broken images */}
             <div className="text-2xl font-bold text-slate-600">ExxonMobil</div>
             <div className="text-2xl font-bold text-slate-600">Dow</div>
             <div className="text-2xl font-bold text-slate-600">BASF</div>
             <div className="text-2xl font-bold text-slate-600">Oxy</div>
             <div className="text-2xl font-bold text-slate-600">Georgia-Pacific</div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-24 bg-white relative overflow-hidden">
        <div className="absolute right-0 top-0 w-1/3 h-full bg-slate-50 skew-x-12 translate-x-20 z-0 hidden lg:block"></div>
        
        <div className="container mx-auto px-6 relative z-10">
          <div className="flex flex-col lg:flex-row gap-16">
            <div className="lg:w-1/2">
              <h4 className="text-amber-600 font-bold uppercase tracking-wider mb-2">Get in Touch</h4>
              <h2 className="text-4xl font-bold text-slate-900 mb-6">Let's Build Your Workforce Strategy</h2>
              <p className="text-slate-600 mb-8 text-lg">
                Ready to develop career opportunities and strengthen your industry presence? Contact Durango Works today.
              </p>
              
              <div className="space-y-6">
                <div className="flex items-center gap-4 group">
                  <div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center group-hover:bg-amber-500 transition-colors">
                    <Phone size={20} />
                  </div>
                  <div>
                    <div className="text-sm text-slate-500">Call Us</div>
                    <div className="text-xl font-bold text-slate-900">(225) 907-3887</div>
                  </div>
                </div>
                
                <div className="flex items-center gap-4 group">
                  <div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center group-hover:bg-amber-500 transition-colors">
                    <Mail size={20} />
                  </div>
                  <div>
                    <div className="text-sm text-slate-500">Email Us</div>
                    <div className="text-xl font-bold text-slate-900">girard@durangoworks.com</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="lg:w-1/2 bg-white rounded-2xl shadow-xl p-8 border border-slate-100">
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">First Name</label>
                    <input type="text" className="w-full px-4 py-3 rounded-lg bg-slate-50 border border-slate-200 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition-all" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">Last Name</label>
                    <input type="text" className="w-full px-4 py-3 rounded-lg bg-slate-50 border border-slate-200 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition-all" />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Email Address</label>
                  <input type="email" className="w-full px-4 py-3 rounded-lg bg-slate-50 border border-slate-200 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition-all" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Message</label>
                  <textarea rows="4" className="w-full px-4 py-3 rounded-lg bg-slate-50 border border-slate-200 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition-all"></textarea>
                </div>
                <button className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 rounded-lg transition-colors shadow-lg shadow-amber-500/30">
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950 text-slate-400 py-12 border-t border-slate-800">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
            <div className="col-span-1 md:col-span-2">
              <div className="text-2xl font-bold text-white mb-4">
                DURANGO<span className="text-amber-500">WORKS</span>
              </div>
              <p className="max-w-md mb-6">
                Developing career opportunities and building the workforce of tomorrow. We connect industry leaders with educational institutions to create sustainable pathways for success.
              </p>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4">Quick Links</h4>
              <ul className="space-y-2">
                {['Home', 'About Us', 'Services', 'Partners', 'Contact'].map(link => (
                  <li key={link}><button className="hover:text-amber-500 transition-colors">{link}</button></li>
                ))}
              </ul>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4">Industries</h4>
              <ul className="space-y-2">
                <li>Manufacturing</li>
                <li>Petrochemical</li>
                <li>Green Energy</li>
                <li>Construction</li>
              </ul>
            </div>
          </div>
          <div className="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center text-sm">
            <p>&copy; {new Date().getFullYear()} Durango Works Corp. All rights reserved.</p>
            <p>Developing Career Opportunities</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

// Helper Components

const ServiceCard = ({ icon, title, desc }) => (
  <div className="bg-white p-8 rounded-xl shadow-lg border border-slate-100 hover:border-amber-500 hover:shadow-xl transition-all duration-300 group">
    <div className="w-14 h-14 bg-slate-50 rounded-lg flex items-center justify-center text-amber-500 mb-6 group-hover:bg-amber-500 group-hover:text-white transition-colors">
      {icon}
    </div>
    <h3 className="text-xl font-bold text-slate-900 mb-3 group-hover:text-amber-600 transition-colors">{title}</h3>
    <p className="text-slate-600 leading-relaxed text-sm">{desc}</p>
  </div>
);

const ProjectCard = ({ title, description }) => (
  <div className="bg-slate-800 p-8 rounded-xl border border-slate-700 hover:bg-slate-750 hover:border-amber-500/50 transition-all duration-300">
    <div className="h-1 w-12 bg-amber-500 mb-6 rounded-full"></div>
    <h3 className="text-xl font-bold text-white mb-4">{title}</h3>
    <p className="text-slate-400 leading-relaxed">{description}</p>
  </div>
);

export default DurangoWorks;