import { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import HeroSection from "@/components/HeroSection";
import ServiceLifecycle from "@/components/ServiceLifecycle";
import { Star, Award, Building2, BadgeCheck, Anchor, Plane, Hammer, FlaskConical, ChevronLeft, ChevronRight } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import Certifications from "@/components/certifications";
import Chatbot from "@/components/Chatbot";
import About from "@/components/about";
import Stats from "@/components/stats";
import GlobalHero from "@/components/globalhero";
import Request from "@/components/request";
import OurCapabilities from "@/components/OurCapabilities";
import SEO from "@/components/SEO";

// Images
import industryOilGas from "@/assets/industry-oil-gas.jpg";
import industryPower from "@/assets/industry-power.jpg";
import industryWater from "@/assets/industry-water.jpg";
import industryCement from "@/assets/industry-cement.jpg";

// =====================================================
// DATA (Updated with IDs matching RelatedIndustries paths)
// =====================================================
const journeyItems = [
  { id: "oil-gas", image: industryOilGas, title: "Oil & Gas", icon: Building2 },
  { id: "power", image: industryPower, title: "Power Industry", icon: Award },
  { id: "water", image: industryWater, title: "Water Treatment", icon: Star },
  { id: "cement", image: industryCement, title: "Cement Industry", icon: BadgeCheck },
  { id: "marine", image: industryOilGas, title: "Marine & Defense", icon: Anchor },
  { id: "refinery", image: industryPower, title: "Refinery & Petrochemical", icon: Plane },
  { id: "chemical", image: industryWater, title: "Chemical Process", icon: FlaskConical },
  { id: "lng", image: industryCement, title: "LNG & Cryogenic", icon: Hammer },
];

// =====================================================
// BUSINESS JOURNEY (AUTO + MANUAL SCROLL)
// =====================================================
const BusinessJourney = () => {
  const trackRef = useRef<HTMLDivElement>(null);
  const isDragging = useRef(false);
  const startX = useRef(0);
  const scrollX = useRef(0);
  const [paused, setPaused] = useState(false);

  // ---- Manual Drag (Mouse + Touch)
  const onStart = (x: number) => {
    isDragging.current = true;
    startX.current = x;
    scrollX.current = trackRef.current!.scrollLeft;
    setPaused(true);
  };

  const onMove = (x: number) => {
    if (!isDragging.current) return;
    const walk = startX.current - x;
    trackRef.current!.scrollLeft = scrollX.current + walk;
  };

  const onEnd = () => {
    isDragging.current = false;
    setTimeout(() => setPaused(false), 1200);
  };

  // ---- Button Scroll
  const scrollByAmount = (dir: "left" | "right") => {
    setPaused(true);
    trackRef.current?.scrollBy({
      left: dir === "left" ? -350 : 350,
      behavior: "smooth",
    });
    setTimeout(() => setPaused(false), 1500);
  };

  return (
    <section className="py-20 industrial-gradient relative overflow-hidden">

      {/* Header */}
      <div className="text-center mb-12 relative z-10">
        <span className="text-[13px] tracking-[0.25em] font-semibold uppercase bg-gradient-to-r from-[#F9D976] via-[#F39F27] to-[#C47E1C] text-transparent bg-clip-text">
          OUR BUSINESS
        </span>

        <div className="flex items-center justify-center gap-3 my-4">
          <div className="w-14 h-[2px] bg-yellow-400/80" />
          <Star className="w-5 h-5 text-yellow-400 fill-yellow-400" />
          <div className="w-14 h-[2px] bg-yellow-400/80" />
        </div>

        <h2 className="text-4xl md:text-6xl font-serif font-bold bg-gradient-to-r from-[#F9D976] via-[#F39F27] to-[#C47E1C] text-transparent bg-clip-text">
          Susin Journey
        </h2>
      </div>

      {/* Manual Buttons */}
      <button
        onClick={() => scrollByAmount("left")}
        className="absolute left-4 top-1/2 -translate-y-1/2 z-20 p-3 rounded-full bg-black/40 text-white hover:bg-black/70 transition"
      >
        <ChevronLeft />
      </button>

      <button
        onClick={() => scrollByAmount("right")}
        className="absolute right-4 top-1/2 -translate-y-1/2 z-20 p-3 rounded-full bg-black/40 text-white hover:bg-black/70 transition"
      >
        <ChevronRight />
      </button>

      {/* Slider */}
      <div
        ref={trackRef}
        className="relative overflow-x-scroll scrollbar-hide"
        onMouseDown={(e) => onStart(e.pageX)}
        onMouseMove={(e) => onMove(e.pageX)}
        onMouseUp={onEnd}
        onMouseLeave={onEnd}
        onTouchStart={(e) => onStart(e.touches[0].pageX)}
        onTouchMove={(e) => onMove(e.touches[0].pageX)}
        onTouchEnd={onEnd}
      >
        <div
          className={`flex w-max ${
            paused ? "paused" : "auto-scroll"
          }`}
        >
          {/* Double map for infinite scroll effect */}
          {[...journeyItems, ...journeyItems].map((item, index) => (
            <Link
              to={`/industries/${item.id}`}
              key={index}
              className="relative w-[300px] md:w-[350px] mx-4 h-[450px] flex-shrink-0 rounded-lg overflow-hidden shadow-xl group cursor-pointer block"
              draggable="false"
            >
              <img
                src={item.image}
                alt={item.title}
                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
              />

              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />

              <div className="absolute inset-0 flex flex-col items-center justify-end p-8 pb-12">
                <div className="mb-4 p-3 rounded-full bg-white/10 backdrop-blur-md text-[#F9D976] transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
                  <item.icon className="w-8 h-8" />
                </div>

                <h3 className="text-2xl font-bold text-white group-hover:text-[#F9D976] transition">
                  {item.title}
                </h3>

                <div className="w-12 h-1 bg-[#F39F27] mt-4 scale-x-0 group-hover:scale-x-100 transition-transform duration-500" />
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
};

// =====================================================
// INDEX PAGE
// =====================================================
export default function Index() {
  const { t } = useLanguage();

  useEffect(() => {
    window.scrollTo(0, 0);
    document.documentElement.style.scrollBehavior = "smooth";
    return () => {
      document.documentElement.style.scrollBehavior = "auto";
    };
  }, []);

  return (
    <div className="min-h-screen flex flex-col">
        <SEO
        title="Home"
        description="Susin Group is a leading manufacturer of pneumatic, electrical, and mechanical actuators for industrial automation. Serving power generation, oil & gas, and process industries worldwide for over 15 years."
        keywords="industrial actuators, pneumatic actuators, electric actuators, mechanical actuators, valve automation, industrial automation, Susin Group, actuator manufacturer, automation solutions, power generation, oil & gas, process industries, BHEL, NTPC, Kahramaa"
        url="https://www.susinworld.in/"
        type="website"
        structuredData={{
          "@context": "https://schema.org",
          "@type": "Organization",
          name: "Susin Group",
          url: "https://www.susingroup.com",
          logo: "https://www.susingroup.com/logo.png",
          description: "Leading manufacturer of industrial actuators and automation solutions",
          foundingDate: "2008",
          address: {
            "@type": "PostalAddress",
            addressCountry: "IN",
          },
          contactPoint: {
            "@type": "ContactPoint",
            contactType: "Customer Service",
            email: "info@susinworld.in",
          },
          sameAs: [
            "https://www.linkedin.com/company/susin-group",
            "https://www.facebook.com/susingroup",
            "https://twitter.com/susingroup",
          ],
          aggregateRating: {
            "@type": "AggregateRating",
            ratingValue: "4.8",
            reviewCount: "150",
          },
        }}
        alternateLanguages={[
          { lang: "en", url: "https://www.susingroup.com/" },
          { lang: "de", url: "https://www.susingroup.com/de" },
          { lang: "fr", url: "https://www.susingroup.com/fr" },
          { lang: "it", url: "https://www.susingroup.com/it" },
          { lang: "ko", url: "https://www.susingroup.com/ko" },
          { lang: "nl", url: "https:/www.susingroup.com/nl" },
          { lang: "zh-TW", url: "https://www.susingroup.com/zh-TW" },
        ]}
      />
      
      <Navbar />

      <main className="flex-1 overflow-x-hidden">
        <HeroSection />
        <BusinessJourney />
        <ServiceLifecycle />
        <Stats />
        <About />
        <GlobalHero />
        <Certifications />
      
        <Request />
      </main>

      <Footer />
      <Chatbot />
    </div>
  );
}