'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { useEffect, useState } from 'react';
import ImageCarousel from '@/components/ImageCarousel';

const CircuitAnimation = () => {
  return (
    <div className="absolute inset-0 overflow-hidden">
      <motion.div
        className="absolute w-full h-full"
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 0.15 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      >
        <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
          <motion.path
            d="M0,50 C25,30 75,70 100,50"
            stroke="#4CAF50"
            strokeWidth="0.5"
            fill="none"
            initial={{ pathLength: 0 }}
            animate={{ pathLength: 1 }}
            transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
          />
          <motion.path
            d="M0,30 C25,50 75,30 100,50"
            stroke="#4CAF50"
            strokeWidth="0.5"
            fill="none"
            initial={{ pathLength: 0 }}
            animate={{ pathLength: 1 }}
            transition={{ duration: 2, delay: 0.5, repeat: Infinity, repeatType: "reverse" }}
          />
          <motion.path
            d="M0,70 C25,50 75,70 100,50"
            stroke="#4CAF50"
            strokeWidth="0.5"
            fill="none"
            initial={{ pathLength: 0 }}
            animate={{ pathLength: 1 }}
            transition={{ duration: 2, delay: 1, repeat: Infinity, repeatType: "reverse" }}
          />
        </svg>
      </motion.div>
    </div>
  );
};

export default function Home() {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    // Auto-scroll to carousel after 3 seconds
    const timer = setTimeout(() => {
      const carouselSection = document.getElementById('carousel-section');
      if (carouselSection) {
        carouselSection.scrollIntoView({ behavior: 'smooth' });
      }
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  };

  if (!mounted) {
    return null;
  }

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center bg-primary text-white overflow-hidden">
        <CircuitAnimation />
        <AnimatePresence>
          <motion.div
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -50 }}
            transition={{ duration: 0.8 }}
            className="container-padding text-center z-10"
          >
            <motion.div
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ duration: 1, delay: 0.2 }}
            >
              <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white via-green-200 to-white">
                Where Tech Meets Sustainability
              </h1>
            </motion.div>
            <motion.p
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.5 }}
              className="text-xl md:text-2xl mb-8 max-w-2xl mx-auto"
            >
              Your trusted partner in electronic waste management and sustainable technology solutions
            </motion.p>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="btn-secondary"
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.8 }}
            >
              Learn More
            </motion.button>
          </motion.div>
        </AnimatePresence>
        <div className="absolute inset-0 bg-black opacity-40" />
      </section>

      {/* Image Carousel Section */}
      <section id="carousel-section">
        <ImageCarousel />
      </section>

      {/* Services Section */}
      <section ref={ref} className="section-padding bg-white">
        <div className="container mx-auto container-padding">
          <motion.h2
            variants={fadeIn}
            initial="hidden"
            animate={inView ? "visible" : "hidden"}
            transition={{ duration: 0.6 }}
            className="text-3xl md:text-4xl font-bold text-center mb-16 text-primary"
          >
            Our Services
          </motion.h2>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <motion.div
                key={service.title}
                variants={fadeIn}
                initial="hidden"
                animate={inView ? "visible" : "hidden"}
                transition={{ duration: 0.6, delay: index * 0.2 }}
                className="bg-gray-50 rounded-lg p-6 hover:shadow-lg transition-shadow duration-300"
              >
                <div className="text-secondary mb-4 text-4xl">
                  {service.icon}
                </div>
                <h3 className="text-xl font-semibold mb-3">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Partners Section */}
      <section className="section-padding bg-gradient-to-r from-gray-50 via-white to-gray-50 overflow-hidden">
        <div className="container mx-auto container-padding">
          <motion.h2
            variants={fadeIn}
            initial="hidden"
            animate={inView ? "visible" : "hidden"}
            transition={{ duration: 0.6 }}
            className="text-3xl md:text-4xl font-bold text-center mb-16"
          >
            <span className="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
              Our Trusted Partners
            </span>
          </motion.h2>
        </div>

        <div className="partners-container relative">
          <div className="flex overflow-hidden">
            <motion.div
              className="flex space-x-8 animate-scroll"
              animate={{
                x: [0, -1920],
              }}
              transition={{
                x: {
                  repeat: Infinity,
                  repeatType: "loop",
                  duration: 30,
                  ease: "linear",
                },
              }}
            >
              {[...partners, ...partners].map((partner, index) => (
                <motion.div
                  key={index}
                  className="partner-card flex-shrink-0 px-8 py-6 rounded-xl min-w-[250px] flex items-center justify-center group"
                  whileHover={{ scale: 1.05 }}
                  transition={{ type: "spring", stiffness: 300 }}
                >
                  <div className="relative">
                    <span className="text-lg font-bold text-white relative z-10 drop-shadow-md">
                      {partner}
                    </span>
                    <motion.div
                      className="absolute bottom-0 left-0 w-full h-0.5 bg-white opacity-75"
                      initial={{ width: "0%" }}
                      whileHover={{ width: "100%" }}
                      transition={{ duration: 0.3 }}
                    />
                  </div>
                </motion.div>
              ))}
            </motion.div>
          </div>
          <div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-gray-50 to-transparent z-10" />
          <div className="absolute top-0 right-0 w-32 h-full bg-gradient-to-l from-gray-50 to-transparent z-10" />
        </div>
      </section>
    </div>
  );
}

const services = [
  {
    title: "E-Waste Collection",
    description: "Professional collection and management of electronic waste from businesses and institutions.",
    icon: "♻️",
  },
  {
    title: "Computer Repair",
    description: "Expert maintenance and repair services for all types of computers and IT equipment.",
    icon: "🔧",
  },
  {
    title: "Data Security",
    description: "Secure data destruction and protection services for your sensitive information.",
    icon: "🔒",
  },
  {
    title: "Assistive Technologies",
    description: "Bridging the gap to digital accessibility by empowering visually impaired individuals with screen readers and assistive tools, while helping institutions create inclusive environments.",
    icon: "👥",
  },
];

const partners = [
  "Light for the World",
  "Bopinc",
  "WEEE Centre",
  "Rock",
  "Lementila Enterprise",
  "Teamjoint Company Limited",
  "Waitronics",
];