'use client';

import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";

const C = {
  dark: "#12241A",
  green: "#347b36",
  lime: "#9dc92e",
  ink: "#1C2B22",
  slate: "#5B6B61",
};

// Add / edit image paths here — the slider rotates through these every 2s
const IMAGES = [
  "/products/wtp/wtp-1.jpeg",
  "/products/stp/stp-1.jpeg",
  "/products/etp/etp-1.jpeg",
  "/products/wtp/wtp-2.jpeg",
  "/products/stp/stp-2.jpeg",
  "/products/etp/etp-2.jpeg",
  "/products/etp/etp-3.jpeg"
];

function ImageSlider() {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setActive((prev) => (prev + 1) % IMAGES.length);
    }, 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="relative w-full h-[420px] md:h-[560px]">
      <div className="absolute inset-0 overflow-hidden shadow-[0_25px_60px_-15px_rgba(18,36,26,0.4)] border border-[#12241A]/10 bg-slate-100 z-10">
        {IMAGES.map((src, i) => (
          <img
            key={src}
            src={src}
            alt={`Industrial Storage ${i + 1}`}
            className="absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out"
            style={{ opacity: active === i ? 1 : 0 }}
          />
        ))}

        {/* Sharp corner accent tabs */}
        <div className="absolute top-0 left-0 w-10 h-10 z-20" style={{ borderTop: `4px solid ${C.lime}`, borderLeft: `4px solid ${C.lime}` }} />
        <div className="absolute bottom-0 right-0 w-10 h-10 z-20" style={{ borderBottom: `4px solid ${C.lime}`, borderRight: `4px solid ${C.lime}` }} />

        {/* Slide indicators */}
        <div className="absolute bottom-4 left-4 flex gap-1.5 z-20">
          {IMAGES.map((_, i) => (
            <span
              key={i}
              className="h-1 transition-all duration-300"
              style={{
                width: active === i ? "22px" : "8px",
                backgroundColor: active === i ? C.lime : "rgba(255,255,255,0.6)",
              }}
            />
          ))}
        </div>
      </div>

      {/* Geometric angular backdrop accent */}
      <div
        className="absolute -bottom-6 -left-6 w-full h-full -z-10 pointer-events-none"
        style={{
          background: `linear-gradient(135deg, ${C.dark}0D, transparent 70%)`,
          clipPath: "polygon(0 8%, 100% 0, 100% 92%, 0% 100%)",
        }}
      />
    </div>
  );
}

export default function ExactWrapSection() {
  return (
    <section 
      className="relative box-border w-full max-w-[100vw] overflow-x-clip py-10 lg:py-14"
      style={{
        backgroundColor: "#FCFCFC",
        backgroundImage: `
          linear-gradient(
            to right, 
            rgba(0, 0, 0, 0.04) 1px, 
            transparent 1px
          )
        `,
        backgroundSize: "16px 100%",
      }}
    >
      {/* Background Soft Atmospheric Glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[350px] rounded-full blur-[140px] bg-[#479530]/15 pointer-events-none" />

      {/* Large angular shape, bottom-right */}
      <div
        className="absolute -right-24 -bottom-32 w-[520px] h-[520px] pointer-events-none z-0"
        style={{
          background: `linear-gradient(135deg, ${C.dark}09, transparent 65%)`,
          clipPath: "polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%)",
        }}
      />
      <div
        className="absolute top-0 left-0 w-1.5 h-full z-0"
        style={{ background: `linear-gradient(180deg, ${C.green}, ${C.lime})` }}
      />

      <div className="relative z-10 mx-auto box-border w-full max-w-[1400px] px-4 sm:px-6 md:px-10 lg:px-12">
        <div className="relative clearfix w-full">

          {/* LEFT SIDE: Rotating Image Slider */}
          <div className="float-none lg:float-left w-full lg:w-[42%] mb-10 lg:mb-0 lg:mr-14 lg:pr-4 relative">
            <ImageSlider />
          </div>

          {/* RIGHT & FULL-WIDTH WRAPPED TEXT CONTENT */}
          <div className="text-content-area font-['Inter',_sans-serif] min-w-0">

            {/* Home Breadcrumb Header */}
            <div className="flex items-center gap-2 mb-5">
              <span className="w-3 h-3 flex items-center justify-center" style={{ backgroundColor: C.green }}>
                <span className="w-1.5 h-1.5 bg-white"></span>
              </span>
              <span className="text-[11px] font-bold uppercase tracking-[0.25em]" style={{ color: C.green }}>
                Home
              </span>
            </div>

            {/* Section 1: Water Treatment Plant */}
            <div className="mb-10">
              <div
                className="font-bold tracking-tight mb-3 text-[20px] sm:text-[25px] leading-snug" style={{ color: C.dark }}
              >
                Advanced Solutions for Water Treatment Plant in Ghaziabad
              </div>
              <p className="text-[15.5px] sm:text-[17px] leading-[1.8] font-normal" style={{ color: C.slate }}>
                <strong className="font-semibold" style={{ color: C.ink }}>Ecosphere</strong> offers a
                trustworthy{" "}
                <strong className="font-semibold" style={{ color: C.ink }}>Water Treatment Plant in Ghaziabad, Uttar Pradesh</strong>,
                offering a very reliable Water Treatment Plant for optimal performance and effective water
                utilization. Ecosphere recognizes the fact that each location has its own peculiarities and
                therefore pays particular attention to the selection of treatment technologies and projects.
              </p>
            </div>

            {/* Section 2: Sewage Treatment Plant */}
            <div className="mb-10 pl-5 border-l-2" style={{ borderColor: `${C.lime}` }}>
              <div className="font-bold tracking-tight mb-3 text-[20px] sm:text-[25px] leading-snug" style={{ color: C.dark }}>
                Trusted Sewage Treatment Plant Manufacturers in Ghaziabad, Uttar Pradesh
              </div>
              <p className="text-[15.5px] sm:text-[17px] leading-[1.8]" style={{ color: C.slate }}>
                Ecosphere is one of the experienced{" "}
                <strong className="font-semibold" style={{ color: C.ink }}>Sewage Treatment Plant Manufacturers in Ghaziabad</strong>,
                which offers sewage treatment solutions for residential, commercial, and industrial use. In
                addition to the type of sewage, the planning of the system takes into account such aspects as
                capacity, availability of space, and operating conditions. In addition to sewage treatment
                solutions, the company offers a Water Treatment Plant, an Effluent Treatment Plant, and a Sewage
                Treatment Plant. Such measures help companies deal with their various requirements for water and
                wastewater treatment by providing appropriate equipment and facilities.
              </p>
            </div>

            {/* Section 3: Effluent Treatment Plant Exporter */}
            <div className="mb-10 pl-5 border-l-2" style={{ borderColor: `${C.lime}` }}>
              <div className="font-bold tracking-tight mb-3 text-[20px] sm:text-[25px] leading-snug" style={{ color: C.dark }}>
                Complete Treatment Solutions from Effluent Treatment Plant Exporter in Uttar Pradesh
              </div>
              <p className="text-[15.5px] sm:text-[17px] leading-[1.8]" style={{ color: C.slate }}>
                Ecosphere is the trusted{" "}
                <strong className="font-semibold" style={{ color: C.ink }}>Effluent Treatment Plant exporter in Uttar Pradesh</strong>,
                which places particular emphasis on effective industrial wastewater treatment. Each system is
                designed using the information related to the nature of wastewater, the degree of necessary
                treatment, the capacity of the plant, and the operating conditions. The aim of the company is to
                develop practical treatment solutions that can ensure the efficient operation of the plant.
              </p>
            </div>

            {/* Section 4: Specifications and Features */}
            <div className="mb-10 pl-5 border-l-2" style={{ borderColor: `${C.lime}` }}>
              <div className="font-bold tracking-tight mb-3 text-[20px] sm:text-[25px] leading-snug" style={{ color: C.dark }}>
                Effluent Treatment Plant – Specifications and Features
              </div>
              <p className="text-[15.5px] sm:text-[17px] leading-[1.8] mb-4" style={{ color: C.slate }}>
                Ecosphere designs each Effluent Treatment Plant using information about the nature of wastewater,
                required flow, required degree of treatment, available space, and operating conditions in order
                to design a practical treatment solution.
              </p>
              <ul className="space-y-2.5">
                {[
                  { label: "Treatment Capacity", text: "Treatment capacity is planned according to wastewater flow requirements." },
                  { label: "System Design", text: "System design is planned according to the site requirements and process." },
                  { label: "Space Required", text: "Space required in the design for system installation." },
                  { label: "Operational Requirement", text: "Design according to operational simplicity." },
                  { label: "Maintenance", text: "Accessibility of all the components enables easy maintenance." },
                  { label: "Plant Performance", text: "Plant performance is focused on an efficient treatment process." },
                ].map((item) => (
                  <li key={item.label} className="flex items-start gap-3 text-[15px] sm:text-[16px] leading-[1.7]" style={{ color: C.slate }}>
                    <span className="mt-2 w-1.5 h-1.5 flex-shrink-0" style={{ backgroundColor: C.lime }} />
                    <span>
                      <strong className="font-semibold" style={{ color: C.ink }}>{item.label}</strong> – {item.text}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Section 5: Why Choose Ecosphere */}
            <div className="mb-10 pl-5 border-l-2" style={{ borderColor: `${C.lime}` }}>
              <div className="font-bold tracking-tight mb-3 text-[20px] sm:text-[25px] leading-snug" style={{ color: C.dark }}>
                Why Should You Go With Ecosphere?
              </div>
              <p className="text-[15.5px] sm:text-[17px] leading-[1.8]" style={{ color: C.slate }}>
                Ecosphere is an expert choice for business enterprises searching for experienced{" "}
                <strong className="font-semibold" style={{ color: C.ink }}>Effluent Treatment Plant Service Providers in Ghaziabad, Uttar Pradesh, India</strong>.
                Ecosphere concentrates on reliable implementation and usability and is thus a perfect choice for
                those companies that require structured water management systems.
              </p>
            </div>

            {/* Action Buttons Footer */}
            <div className="clear-both pt-7 border-t flex items-center gap-4" style={{ borderColor: "#12241A1A" }}>
              <button
                className="px-8 py-3.5 font-bold uppercase tracking-[0.15em] text-[12px] text-white shadow-md transition-all hover:opacity-90 flex items-center gap-2"
                style={{ backgroundColor: C.green }}
              >
                About More
                <FontAwesomeIcon icon={faArrowRight} className="w-4 h-4" />
              </button>

              
            </div>

          </div>

        </div>
      </div>
    </section>
  );
}