import { useEffect, useState, useRef } from 'react';
import { 
  Menu, X, Phone, ArrowRight, Clock, Target, Triangle, Users, 
  Factory, Zap, ArrowUpRight, CheckCircle, Quote, Facebook, Linkedin, Instagram, Twitter,
  MapPin, Mail, ChevronUp, HardHat, Wrench, Settings, Shield, FileText
} from 'lucide-react';
import './App.css';

// Navigation Component
function Navigation() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

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

  const navLinks = [
    { name: 'Home', href: '#home' },
    { name: 'About', href: '#about' },
    { name: 'Services', href: '#services' },
    { name: 'Team', href: '#team' },
    { name: 'Contact', href: '#footer' },
  ];

  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
      isScrolled ? 'bg-black/90 backdrop-blur-md py-4' : 'bg-transparent py-6'
    }`}>
      <div className="container-custom flex items-center justify-between">
        <a href="#home" className="flex items-center gap-3">
          <div className="w-10 h-10 bg-[#e63946] flex items-center justify-center">
            <HardHat className="w-6 h-6 text-white" />
          </div>
          <span className="text-white font-bold text-xl tracking-wider font-['Oswald']">JOKSONS</span>
        </a>

        {/* Desktop Navigation */}
        <div className="hidden md:flex items-center gap-8">
          {navLinks.map((link) => (
            <a
              key={link.name}
              href={link.href}
              className="text-white/80 hover:text-[#e63946] transition-colors text-sm uppercase tracking-wider font-medium"
            >
              {link.name}
            </a>
          ))}
          <a href="#footer" className="btn-primary text-sm py-3 px-6">
            Get Quote
          </a>
        </div>

        {/* Mobile Menu Button */}
        <button
          className="md:hidden text-white"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        >
          {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 right-0 bg-black/95 backdrop-blur-md py-6">
          <div className="container-custom flex flex-col gap-4">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                className="text-white/80 hover:text-[#e63946] transition-colors text-lg uppercase tracking-wider"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                {link.name}
              </a>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
}

// Hero Section
function HeroSection() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <section id="home" className="relative min-h-screen flex items-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <img
          src="/hero-welding.jpg"
          alt="Industrial welding"
          className="w-full h-full object-cover scale-110 animate-pulse-slow"
        />
        <div className="absolute inset-0 gradient-overlay-dark" />
      </div>

      {/* Content */}
      <div className="relative z-10 container-custom pt-32 pb-20">
        <div className="max-w-4xl">
          {/* Eyebrow */}
          <div className={`flex items-center gap-3 mb-6 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div className="w-8 h-[2px] bg-[#e63946]" />
            <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
              Best For Our Industry
            </span>
          </div>

          {/* Heading */}
          <h1 className={`heading-xl text-white mb-8 text-shadow transition-all duration-1000 delay-200 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            Nigeria's Leading Provider of
            <span className="text-[#e63946]"> Engineering & Construction </span>
            Services
          </h1>

          {/* Subheading */}
          <p className={`text-white/80 text-lg md:text-xl max-w-2xl mb-10 leading-relaxed transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            We deliver comprehensive EPCM solutions including engineering, procurement, 
            construction, and project management for oil, gas, and energy sectors across Nigeria.
          </p>

          {/* CTA Button */}
          <div className={`flex flex-wrap gap-4 transition-all duration-1000 delay-400 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <a href="#services" className="btn-primary flex items-center gap-2">
              Our Services
              <ArrowRight className="w-5 h-5" />
            </a>
            <a href="#about" className="px-8 py-4 border-2 border-white/30 text-white hover:bg-white/10 transition-all flex items-center gap-2">
              Learn More
            </a>
          </div>
        </div>

        {/* Stats Bar */}
        <div className={`mt-20 grid grid-cols-1 md:grid-cols-3 gap-6 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          {/* Hotline Card */}
          <div className="bg-white/10 backdrop-blur-md p-6 border-l-4 border-[#e63946]">
            <p className="text-white/60 text-sm uppercase tracking-wider mb-2">Professional Consultation</p>
            <div className="flex items-center gap-3">
              <Phone className="w-5 h-5 text-[#e63946]" />
              <span className="text-white text-xl font-bold">+234 800 JOKSONS</span>
            </div>
          </div>

          {/* Stats */}
          <div className="bg-white/10 backdrop-blur-md p-6 border-l-4 border-[#e63946]">
            <p className="text-white/60 text-sm uppercase tracking-wider mb-2">Projects Completed</p>
            <div className="text-white text-3xl font-bold font-['Oswald']">500+</div>
          </div>

          <div className="bg-white/10 backdrop-blur-md p-6 border-l-4 border-[#e63946]">
            <p className="text-white/60 text-sm uppercase tracking-wider mb-2">Years Experience</p>
            <div className="text-white text-3xl font-bold font-['Oswald']">15+</div>
          </div>
        </div>
      </div>

      {/* Scroll Indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2">
          <div className="w-1 h-2 bg-white rounded-full" />
        </div>
      </div>
    </section>
  );
}

// About Section
function AboutSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.2 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const cards = [
    { icon: Clock, title: 'Our History', desc: 'Years of excellence', color: 'bg-gray-100' },
    { icon: Target, title: 'Strategy', desc: 'Goal-driven approach', color: 'bg-black text-white' },
    { icon: Triangle, title: 'Structure', desc: 'Organized workflow', color: 'bg-gray-100' },
    { icon: Users, title: 'Leadership', desc: 'Expert management', color: 'bg-[#e63946] text-white' },
  ];

  return (
    <section id="about" ref={sectionRef} className="section-padding bg-white">
      <div className="container-custom">
        <div className="grid lg:grid-cols-2 gap-16 items-start">
          {/* Left - Heading */}
          <div className={`transition-all duration-1000 ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-10'}`}>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-8 h-[2px] bg-[#e63946]" />
              <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
                About Us
              </span>
            </div>
            <h2 className="heading-lg text-gray-900 mb-8">
              Engineering Procurement Construction & Management
            </h2>
          </div>

          {/* Right - Description */}
          <div className={`transition-all duration-1000 delay-200 ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-10'}`}>
            <p className="text-gray-600 text-lg leading-relaxed mb-6">
              Joksons is a leading EPCM company in Nigeria, delivering comprehensive engineering 
              solutions for the oil, gas, and energy sectors. Our team of experts provides 
              end-to-end services from concept to commissioning.
            </p>
            <p className="text-gray-600 leading-relaxed">
              We are hard workers and problem solvers, able to understand both the technical 
              and business challenges when delivering complex industrial projects. Our 
              commitment to safety, quality, and timely delivery has made us a trusted partner 
              for major energy companies across West Africa.
            </p>
          </div>
        </div>

        {/* Cards */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-16">
          {cards.map((card, index) => (
            <div
              key={card.title}
              className={`${card.color} p-8 card-hover cursor-pointer group transition-all duration-700 ${
                isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
              }`}
              style={{ transitionDelay: `${300 + index * 100}ms` }}
            >
              <card.icon className={`w-10 h-10 mb-6 ${card.color.includes('text-white') ? 'text-white' : 'text-[#e63946]'}`} />
              <h3 className="text-xl font-bold mb-2 font-['Oswald']">{card.title}</h3>
              <p className={`text-sm ${card.color.includes('text-white') ? 'text-white/70' : 'text-gray-500'}`}>
                {card.desc}
              </p>
              <div className="mt-6 flex items-center gap-2 text-[#e63946] opacity-0 group-hover:opacity-100 transition-opacity">
                <span className="text-sm uppercase tracking-wider">View More</span>
                <ArrowRight className="w-4 h-4" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Services Section with Tabs
function ServicesSection() {
  const [activeTab, setActiveTab] = useState(0);
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const services = [
    {
      icon: Settings,
      title: 'Engineering',
      image: '/service-mining.jpg',
      heading: 'Engineering & Technical Services',
      description: 'Comprehensive engineering support for upstream, midstream, and downstream facilities. We provide civil, structural, and electrical engineering support with 2D/3D CAD, BIM drafting, and technical documentation.',
    },
    {
      icon: Factory,
      title: 'Construction',
      image: '/service-metallurgy.jpg',
      heading: 'Construction & Installation',
      description: 'Safe and efficient delivery of industrial construction projects including civil works, structural steel fabrication, electrical & instrumentation installation, and equipment installation.',
    },
    {
      icon: Zap,
      title: 'E & I',
      image: '/service-energy.jpg',
      heading: 'Electrical & Instrumentation',
      description: 'Specialized electrical and automation services for industrial operations. HV/LV installation, switchgear & MCC installation, motor control & VSD systems, PLC & SCADA support.',
    },
    {
      icon: Wrench,
      title: 'Mechanical',
      image: '/service-products.jpg',
      heading: 'Mechanical Services',
      description: 'Mechanical construction, maintenance, and plant support including piping fabrication, pump and compressor installation, equipment alignment, and pressure testing.',
    },
    {
      icon: Shield,
      title: 'Inspection',
      image: '/service-logistics.jpg',
      heading: 'Inspection & Testing',
      description: 'Ensuring systems are safe, compliant, and operational through electrical testing, hydrostatic & pressure testing, pre-commissioning support, and QA/QC documentation.',
    },
    {
      icon: FileText,
      title: 'Maintenance',
      image: '/service-procurement.jpg',
      heading: 'Maintenance Services',
      description: 'Minimizing downtime and maximizing asset reliability through preventive & corrective maintenance, shutdown & turnaround support, and emergency breakdown response.',
    },
  ];

  return (
    <section id="services" ref={sectionRef} className="section-padding bg-gray-50">
      <div className="container-custom">
        {/* Section Header */}
        <div className={`text-center mb-12 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <div className="flex items-center justify-center gap-3 mb-6">
            <div className="w-8 h-[2px] bg-[#e63946]" />
            <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
              Our Services
            </span>
            <div className="w-8 h-[2px] bg-[#e63946]" />
          </div>
          <h2 className="heading-lg text-gray-900">Areas of Activity</h2>
        </div>

        {/* Tabs */}
        <div className={`flex flex-wrap justify-center gap-2 md:gap-6 mb-12 transition-all duration-1000 delay-200 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          {services.map((service, index) => (
            <button
              key={service.title}
              onClick={() => setActiveTab(index)}
              className={`flex items-center gap-2 px-4 md:px-6 py-3 text-sm md:text-base font-medium transition-all border-b-2 ${
                activeTab === index
                  ? 'text-[#e63946] border-[#e63946]'
                  : 'text-gray-500 border-transparent hover:text-gray-700'
              }`}
            >
              <service.icon className="w-5 h-5" />
              <span className="hidden sm:inline">{service.title}</span>
            </button>
          ))}
        </div>

        {/* Content */}
        <div className={`grid lg:grid-cols-2 gap-12 items-center transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          {/* Image */}
          <div className="img-zoom rounded-lg overflow-hidden shadow-2xl">
            <img
              src={services[activeTab].image}
              alt={services[activeTab].title}
              className="w-full h-[400px] object-cover"
            />
          </div>

          {/* Text */}
          <div className="lg:pl-8">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-8 h-[2px] bg-[#e63946]" />
              <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
                {services[activeTab].title}
              </span>
            </div>
            <h3 className="heading-md text-gray-900 mb-6">{services[activeTab].heading}</h3>
            <p className="text-gray-600 text-lg leading-relaxed mb-8">
              {services[activeTab].description}
            </p>
            <a href="#footer" className="btn-primary inline-flex items-center gap-2">
              View More
              <ArrowRight className="w-5 h-5" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// SME Services Section
function SMEServicesSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const smeServices = [
    { title: 'Civil Engineering Technician', desc: 'Site inspections, earthworks, foundations, drainage support' },
    { title: 'Electrical Engineering Technician', desc: 'HV/LV systems, switchgear, transformers, MCCs maintenance' },
    { title: 'Welder & Fabricator', desc: 'Structural steel, pipe welding, fabrication drawings' },
    { title: 'Mechanical Fitter', desc: 'Pumps, compressors, motors installation and maintenance' },
    { title: 'Electrician (Industrial)', desc: 'HV/LV electrical systems, cable termination, hazardous areas' },
    { title: 'Instrument Technician', desc: 'Instrument installation, calibration, loop checking' },
    { title: 'Maintenance Planner', desc: 'Preventive maintenance scheduling, CMMS management' },
    { title: 'Project Manager', desc: 'End-to-end project oversight, risk management' },
  ];

  return (
    <section ref={sectionRef} className="section-padding bg-white">
      <div className="container-custom">
        <div className={`text-center mb-16 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <div className="flex items-center justify-center gap-3 mb-6">
            <div className="w-8 h-[2px] bg-[#e63946]" />
            <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
              SME Technical Services
            </span>
            <div className="w-8 h-[2px] bg-[#e63946]" />
          </div>
          <h2 className="heading-lg text-gray-900">Expert Technical Personnel</h2>
          <p className="text-gray-600 mt-4 max-w-2xl mx-auto">
            We provide skilled professionals for all your industrial project needs
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {smeServices.map((service, index) => (
            <div
              key={service.title}
              className={`group p-6 border border-gray-200 hover:border-[#e63946] transition-all duration-500 hover:-translate-y-2 hover:shadow-xl ${
                isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
              }`}
              style={{ transitionDelay: `${200 + index * 100}ms` }}
            >
              <div className="w-12 h-12 bg-[#e63946]/10 flex items-center justify-center mb-4 group-hover:bg-[#e63946] transition-colors">
                <HardHat className="w-6 h-6 text-[#e63946] group-hover:text-white transition-colors" />
              </div>
              <h3 className="text-lg font-bold mb-2 font-['Oswald']">{service.title}</h3>
              <p className="text-gray-500 text-sm">{service.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Info Grid Section
function InfoGridSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const infoItems = [
    { category: 'Development', title: 'Strong Communication', bg: 'bg-black text-white' },
    { category: 'For Shareholders', title: 'Project Updates', bg: 'bg-white text-gray-900' },
    { category: 'Support', title: 'Free Consultation', bg: 'bg-black text-white' },
    { category: 'Distribution', title: 'Aptitude for Technology', bg: 'bg-white text-gray-900' },
    { category: 'For Investors', title: 'Corporate Governance', bg: 'bg-[#e63946] text-white' },
    { category: 'Dividends', title: 'Historical Projects', bg: 'bg-white text-gray-900' },
  ];

  return (
    <section ref={sectionRef} className="relative py-0">
      {/* Background Image */}
      <div className="absolute inset-0">
        <img
          src="/bg-welding-sparks.jpg"
          alt="Welding background"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-black/70" />
      </div>

      {/* Content Grid */}
      <div className="relative z-10 grid sm:grid-cols-2 lg:grid-cols-3">
        {infoItems.map((item, index) => (
          <div
            key={item.title}
            className={`${item.bg} p-10 md:p-12 group cursor-pointer transition-all duration-700 hover:scale-[1.02] ${
              isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
            }`}
            style={{ transitionDelay: `${index * 100}ms` }}
          >
            <div className="flex items-center gap-2 mb-4">
              <div className={`w-6 h-[2px] ${item.bg.includes('text-white') ? 'bg-white/50' : 'bg-[#e63946]'}`} />
              <span className={`text-xs uppercase tracking-widest ${item.bg.includes('text-white') ? 'text-white/60' : 'text-[#e63946]'}`}>
                {item.category}
              </span>
            </div>
            <h3 className="text-xl md:text-2xl font-bold mb-6 font-['Oswald']">{item.title}</h3>
            <ArrowUpRight className={`w-6 h-6 transition-transform group-hover:translate-x-2 group-hover:-translate-y-2 ${
              item.bg.includes('text-white') ? 'text-white' : 'text-[#e63946]'
            }`} />
          </div>
        ))}
      </div>
    </section>
  );
}

// Stats Section
function StatsSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.2 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const stats = [
    { value: '500+', label: 'Projects Completed' },
    { value: '15+', label: 'Years Experience' },
    { value: '200+', label: 'Expert Personnel' },
    { value: '50+', label: 'Major Clients' },
  ];

  const features = [
    'Increased Project Precision',
    'Semi-Automated Processes',
    'High Speed of Operation',
    'Cost-Effective Solutions',
  ];

  return (
    <section ref={sectionRef} className="section-padding bg-white">
      <div className="container-custom">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Left - Content */}
          <div className={`transition-all duration-1000 ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-10'}`}>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-8 h-[2px] bg-[#e63946]" />
              <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
                Global Data
              </span>
            </div>
            <h2 className="heading-lg text-gray-900 mb-6">
              Browse Our Industry Expertise
            </h2>
            <p className="text-gray-600 text-lg leading-relaxed mb-8">
              We are proud of the fact that we have formed a highly effective team. 
              The difficulties we have gone through together and the highs we have 
              achieved have united us into a like-minded team.
            </p>

            {/* Features */}
            <div className="grid sm:grid-cols-2 gap-4">
              {features.map((feature) => (
                <div key={feature} className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-[#e63946] flex-shrink-0" />
                  <span className="text-gray-700">{feature}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right - Stats */}
          <div className={`grid grid-cols-2 gap-6 transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-10'}`}>
            {stats.map((stat, index) => (
              <div
                key={stat.label}
                className="bg-gray-50 p-8 text-center card-hover"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="text-4xl md:text-5xl font-bold text-[#e63946] mb-2 font-['Oswald']">
                  {stat.value}
                </div>
                <div className="text-gray-600 text-sm uppercase tracking-wider">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Team Section
function TeamSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const team = [
    { name: 'James Okonkwo', role: 'Managing Director', image: '/team-1.webp' },
    { name: 'Sarah Adeyemi', role: 'Operations Manager', image: '/team-2.jpg' },
    { name: 'Michael Ibrahim', role: 'Technical Director', image: '/team-3.jpg' },
    { name: 'Grace Okafor', role: 'Project Manager', image: '/team-4.jpg' },
  ];

  return (
    <section id="team" ref={sectionRef} className="section-padding bg-gray-50">
      <div className="container-custom">
        {/* Header */}
        <div className={`text-center mb-16 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <div className="flex items-center justify-center gap-3 mb-6">
            <div className="w-8 h-[2px] bg-[#e63946]" />
            <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
              Our Team
            </span>
            <div className="w-8 h-[2px] bg-[#e63946]" />
          </div>
          <h2 className="heading-lg text-gray-900">Meet The Industry Experts</h2>
        </div>

        {/* Team Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {team.map((member, index) => (
            <div
              key={member.name}
              className={`group relative overflow-hidden transition-all duration-700 ${
                isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
              }`}
              style={{ transitionDelay: `${200 + index * 100}ms` }}
            >
              <div className="img-zoom aspect-[3/4] overflow-hidden">
                <img
                  src={member.image}
                  alt={member.name}
                  className="w-full h-full object-cover"
                />
              </div>
              {/* Overlay */}
              <div className="absolute bottom-0 left-0 right-0 bg-[#e63946] p-6 translate-y-full group-hover:translate-y-0 transition-transform duration-500">
                <h3 className="text-white text-xl font-bold font-['Oswald']">{member.name}</h3>
                <p className="text-white/80 text-sm uppercase tracking-wider">{member.role}</p>
                <div className="flex gap-3 mt-4">
                  <Linkedin className="w-5 h-5 text-white/70 hover:text-white cursor-pointer" />
                  <Twitter className="w-5 h-5 text-white/70 hover:text-white cursor-pointer" />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div className={`text-center mt-12 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <a href="#footer" className="btn-primary inline-flex items-center gap-2">
            Join Our Team
            <ArrowRight className="w-5 h-5" />
          </a>
        </div>
      </div>
    </section>
  );
}

// Testimonials Section
function TestimonialsSection() {
  const [isVisible, setIsVisible] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const testimonials = [
    {
      quote: "Joksons delivered our refinery expansion project on time and within budget. Their team's expertise in EPCM services is unmatched in the industry.",
      author: 'John Peters',
      role: 'Project Director, Shell Nigeria',
    },
    {
      quote: "The quality of work and attention to safety standards demonstrated by Joksons has made them our preferred contractor for all major projects.",
      author: 'Amara Nwosu',
      role: 'CEO, Niger Delta Energy',
    },
    {
      quote: "Professional, reliable, and efficient. Joksons transformed our maintenance operations with their expert technical team.",
      author: 'David Ogunleye',
      role: 'Operations Manager, TotalEnergies',
    },
  ];

  return (
    <section ref={sectionRef} className="section-padding bg-white">
      <div className="container-custom">
        <div className={`max-w-4xl mx-auto text-center transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <Quote className="w-12 h-12 text-[#e63946] mx-auto mb-8" />
          
          <p className="text-2xl md:text-3xl text-gray-800 leading-relaxed mb-8 font-light">
            "{testimonials[activeIndex].quote}"
          </p>
          
          <div className="mb-8">
            <div className="font-bold text-lg font-['Oswald']">{testimonials[activeIndex].author}</div>
            <div className="text-gray-500 text-sm">{testimonials[activeIndex].role}</div>
          </div>

          {/* Dots */}
          <div className="flex justify-center gap-3">
            {testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => setActiveIndex(index)}
                className={`w-3 h-3 rounded-full transition-all ${
                  activeIndex === index ? 'bg-[#e63946] w-8' : 'bg-gray-300'
                }`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Partners Section
function PartnersSection() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const partners = [
    'Shell', 'Chevron', 'TotalEnergies', 'ExxonMobil', 'NLNG', 'NNPC'
  ];

  return (
    <section ref={sectionRef} className="section-padding bg-gray-50">
      <div className="container-custom">
        <div className={`flex flex-col md:flex-row md:items-end md:justify-between mb-12 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <div>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-8 h-[2px] bg-[#e63946]" />
              <span className="text-[#e63946] uppercase tracking-widest text-sm font-semibold">
                Partners & Clients
              </span>
            </div>
            <h2 className="heading-md text-gray-900">Trusted By Industry Leaders</h2>
          </div>
          <p className="text-gray-500 mt-4 md:mt-0">You are in good company</p>
        </div>

        <div className={`grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 transition-all duration-1000 delay-200 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          {partners.map((partner) => (
            <div
              key={partner}
              className="bg-white p-8 flex items-center justify-center h-24 grayscale hover:grayscale-0 transition-all hover:shadow-lg"
            >
              <span className="text-xl font-bold text-gray-400 hover:text-[#e63946] transition-colors font-['Oswald']">
                {partner}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Footer Section
function Footer() {
  const [isVisible, setIsVisible] = useState(false);
  const footerRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (footerRef.current) {
      observer.observe(footerRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <footer id="footer" ref={footerRef} className="bg-black text-white">
      {/* CTA Section */}
      <div className="border-b border-white/10">
        <div className="container-custom py-16">
          <div className={`grid lg:grid-cols-2 gap-8 items-center transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div>
              <h2 className="heading-md text-white mb-4">Ready to Start Your Project?</h2>
              <p className="text-white/60">Contact us today for a free consultation and quote.</p>
            </div>
            <div className="flex flex-wrap gap-4 lg:justify-end">
              <a href="tel:+234800JOKSONS" className="btn-primary flex items-center gap-2">
                <Phone className="w-5 h-5" />
                Call Us Now
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Main Footer */}
      <div className="container-custom py-16">
        <div className={`grid sm:grid-cols-2 lg:grid-cols-4 gap-12 transition-all duration-1000 delay-200 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          {/* Brand */}
          <div>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 bg-[#e63946] flex items-center justify-center">
                <HardHat className="w-6 h-6 text-white" />
              </div>
              <span className="text-white font-bold text-xl tracking-wider font-['Oswald']">JOKSONS</span>
            </div>
            <p className="text-white/60 mb-6">
              Engineering Procurement Construction & Management services for Nigeria's energy sector.
            </p>
            <div className="flex gap-4">
              <Facebook className="w-5 h-5 text-white/60 hover:text-[#e63946] cursor-pointer transition-colors" />
              <Twitter className="w-5 h-5 text-white/60 hover:text-[#e63946] cursor-pointer transition-colors" />
              <Linkedin className="w-5 h-5 text-white/60 hover:text-[#e63946] cursor-pointer transition-colors" />
              <Instagram className="w-5 h-5 text-white/60 hover:text-[#e63946] cursor-pointer transition-colors" />
            </div>
          </div>

          {/* Fields */}
          <div>
            <h4 className="text-lg font-bold mb-6 font-['Oswald']">Our Services</h4>
            <ul className="space-y-3">
              {['Engineering', 'Construction', 'Electrical & Instrumentation', 'Mechanical', 'Maintenance', 'Project Management'].map((item) => (
                <li key={item}>
                  <a href="#services" className="text-white/60 hover:text-[#e63946] transition-colors">{item}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Information */}
          <div>
            <h4 className="text-lg font-bold mb-6 font-['Oswald']">Information</h4>
            <ul className="space-y-3">
              {['About Us', 'Our Team', 'Projects', 'Careers', 'News', 'Contact'].map((item) => (
                <li key={item}>
                  <a href={`#${item.toLowerCase().replace(' ', '-')}`} className="text-white/60 hover:text-[#e63946] transition-colors">{item}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="text-lg font-bold mb-6 font-['Oswald']">Contact Us</h4>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <MapPin className="w-5 h-5 text-[#e63946] flex-shrink-0 mt-1" />
                <span className="text-white/60">123 Industrial Avenue, Port Harcourt, Rivers State, Nigeria</span>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="w-5 h-5 text-[#e63946] flex-shrink-0" />
                <span className="text-white/60">+234 800 JOKSONS</span>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="w-5 h-5 text-[#e63946] flex-shrink-0" />
                <span className="text-white/60">info@joksons.ng</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Copyright */}
      <div className="border-t border-white/10">
        <div className="container-custom py-6 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-white/40 text-sm">
            © 2024 Joksons Engineering. All rights reserved.
          </p>
          <div className="flex gap-6">
            <a href="#" className="text-white/40 hover:text-white text-sm transition-colors">Privacy Policy</a>
            <a href="#" className="text-white/40 hover:text-white text-sm transition-colors">Terms of Use</a>
          </div>
        </div>
      </div>

      {/* Scroll to Top */}
      <button
        onClick={scrollToTop}
        className="fixed bottom-8 right-8 w-12 h-12 bg-[#e63946] text-white flex items-center justify-center hover:bg-[#c1121f] transition-colors z-50 shadow-lg"
      >
        <ChevronUp className="w-6 h-6" />
      </button>
    </footer>
  );
}

// Main App
function App() {
  return (
    <div className="min-h-screen bg-white">
      <Navigation />
      <HeroSection />
      <AboutSection />
      <ServicesSection />
      <SMEServicesSection />
      <InfoGridSection />
      <StatsSection />
      <TeamSection />
      <TestimonialsSection />
      <PartnersSection />
      <Footer />
    </div>
  );
}

export default App;
