import React, { useState } from "react";
import { motion } from "framer-motion";
import waterIcon from "../assets/water.png";
import stormIcon from "../assets/storm.png";
import electroIcon from "../assets/electro.png";
import realEstateIcon from "../assets/real-estate.png";
import tunnelIcon from "../assets/tunnel.png";
import roadsIcon from "../assets/roads.png";
import wastewaterIcon from "../assets/wastewater.png";
import irrigationIcon from "../assets/irrigation.png";
import renewableIcon from "../assets/renewable.png";
import "../styles/SectorsSlider.css";
 
const sectors = [
  {
    title: "Water Supply",
    icon: waterIcon,
    description: "LCEPL delivers end-to-end water infrastructure solutions, including 24x7 water supply networks, treatment plants, irrigation systems, wastewater management, and underground drainage for urban and rural needs. With over 1,50,000 km of pipelines laid, the company has executed major projects across multiple states, covering design, construction, commissioning, and operation of pumping stations, reservoirs, and SCADA-based automation systems.",
  },
  {
    title: "Storm Water",
    icon: stormIcon,
    description: "LCEPL provides efficient storm water  solutions to prevent flooding, protect infrastructure, and ensure environmental safety. Our expertise includes designing and constructing drainage systems, retention structures, and rainwater harvesting facilities. We integrate sustainable methods like permeable pavements and bioswales to manage runoff effectively. With advanced engineering and proven execution, we deliver reliable solutions for urban and industrial needs.",
  },
  {
    title: "Electromechanical & Instrumentation",
    icon: electroIcon,
    description: "LCEPL provides complete pump system solutions, from design and consultation to installation and maintenance. The company handles complex projects, including floating pontoon setups and high-voltage turnkey installations, with expertise in pumps up to 30,000 HP, transformers up to 26 MVA, and advanced surge protection systems.",
  },
  {
    title: "Real Estate/Buildings",
    icon: realEstateIcon,
    description: "LCEPL delivers end-to-end civil engineering solutions for residential, commercial, and industrial real estate / buildings projects. Our expertise spans land development, structural construction, and infrastructure integration with a focus on quality and timely delivery. We ensure sustainable design, robust engineering, and adherence to safety and regulatory standards to create lasting value for our clients.",
  },
  {
    title: "Tunnel",
    icon: tunnelIcon,
    description: "LCEPL specializes in the design and construction of tunnels for transportation, irrigation, and utility purposes. We leverage advanced engineering techniques and modern tunneling equipment to ensure safety, precision, and durability. Our expertise covers geological assessment, structural stability, and efficient project execution, even in challenging terrains.",
  },
  {
    title: "Roads",
    icon: roadsIcon,
    description: "LCEPL excels in the design, construction, and maintenance of roads and bridges, delivering high-quality infrastructure that meets all standard norms and guidelines. The company has successfully executed projects covering about 700 km of national highways, state highways, and village roads across Maharashtra, Madhya Pradesh, Chhattisgarh, and Bihar.",
  },
  {
    title: "Wastewater / Sewerage",
    icon: wastewaterIcon,
    description: "LCEPL delivers sustainable wastewater management solutions, ensuring safe disposal while protecting health and the environment. The company has executed over 1,000 km of underground drainage pipelines and designed and built sewage treatment plants (STPs) of various capacities, using advanced processes such as SBR, MBR, FAL, and oxidation ponds, along with pumping stations for efficient wastewater handling.",
  },
  {
    title: "Irrigation",
    icon: irrigationIcon,
    description: "LCEPL specializes in Lift Irrigation Systems, enabling water to be pumped from lower to higher elevations for agriculture, landscaping, and soil restoration in dry regions. With extensive experience in building dams, canals, and related infrastructure in collaboration with the government, the company has executed projects involving over 1,00,000 km of pipelines, pumping stations, earthen dams, barrages, weirs, and lift irrigation schemes across multiple states, supported by advanced SCADA-based automation systems.",
  },
  {
    title: "Renewable Energy",
    icon: renewableIcon,
    description: "LCEPL offers high-capacity pumped storage systems, with solutions reaching up to 300 MW. The system primarily consists of reversible Francis turbines, reversible pump-turbine motor-generators operating as a combined unit, and a grid interface with speed governors and control systems.",
  },
];
 

const SectorsSlider = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const goToSlide = (index) => setActiveIndex(index);
  const goToPrev = () => setActiveIndex((prev) => (prev === 0 ? sectors.length - 1 : prev - 1));
  const goToNext = () => setActiveIndex((prev) => (prev === sectors.length - 1 ? 0 : prev + 1));

  return (
    <section className="infraCont">
      <div className="max-w-7xl mx-auto px-4 text-center relative z-10 pt-0">
  <h2 className="text-4xl font-bold text-blue-900 mb-2 relative inline-block">
    <span className="relative z-10">
      Our Core Sectors
      <motion.span
        initial={{ scaleX: 0 }}
        whileInView={{ scaleX: 1 }}
        transition={{ duration: 0.6, delay: 0.3 }}
        viewport={{ once: true }}
        className="absolute bottom-0 left-0 w-full h-1 bg-red-600 z-0 transform origin-left"
      />
    </span>
  </h2>
  <p className="text-xl text-gray-600 max-w-3xl mx-auto mt-2">
    Explore our expertise across diverse infrastructure sectors
  </p>
</div>


      <div className="custom">
        {sectors.map((sector, index) => (
          <div key={index} className={`infraWrap ${index === activeIndex ? "active" : ""}`}>
            <div className="slideTing">
              <div className="sector-card">
                <img src={sector.icon} alt={sector.title} className="sector-image" />
              </div>
            </div>
            <div className="infraright">
              <div className="infraInfo">
                <h2>{sector.title}</h2>
                <h3>
                  {sector.title === "Roads"
                    ? "TRUSTED PATHWAYS TO TOMORROW"
                    : `REDEFINING ${sector.title.toUpperCase()} FOR THE FUTURE`}
                </h3>
                <p>{sector.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="slider-nav">
        <button onClick={goToPrev} className="nav-arrow prev" aria-label="Previous sector">
          &lt;
        </button>
        <button onClick={goToNext} className="nav-arrow next" aria-label="Next sector">
          &gt;
        </button>
      </div>

      <div className="indicators">
        {sectors.map((_, index) => (
          <button
            key={index}
            onClick={() => goToSlide(index)}
            className={`indicator ${activeIndex === index ? "active" : ""}`}
            aria-label={`Go to sector ${index + 1}`}
          />
        ))}
      </div>
    </section>
  );
};

export default SectorsSlider;

