"use client";

import { useState } from "react";
import Link from "next/link";
import { ArrowUpRight, Cpu, Layers, LayoutGrid } from "lucide-react";
import { FaBolt } from "react-icons/fa";
import Breadcrumb from "@/components/Common/Breadcrumb";

// 📦 क्लीन और सेंट्रलाइज्ड डेटा ऑब्जेक्ट (डुप्लीकेट हटा दिया गया है)
const tabs = [
  {
    title: "Human Machine Interface (HMI)",
    content: [
      { name: 'Slim Relays', link: "/gic/human-machine-interface/4-3-human-machine-interface-hmi" }
    ],
  },
  {
    title: "Lighting Automation",
    sections: [
      {
        heading: "Time Switches",
        items: ["Digital Time Switch Pulse", "Digital Time Switch Crono", "Digital Time Switch Crono Pro", "Time Switch FM Series"],
      },
      {
        heading: "Astronomical Time Switches",
        items: ["Astro Accessories – Memory", "Astro Accessories – RS232 Cable", "Astro Accessories Software", "Astro Accessories – USB Cable", "Digital Time Switch Astro",
          "Digital Time Switch Astro Accessories – Memory",
          "Digital Time Switch Astro Accessories – Rs232 Cable",
          "Digital Time Switch Astro Accessories Software",
          "Digital Time Switch Astro Accessories Usb Cable",
          "Digital Time Switch Astro Mini",
          "Digital Time Switch Astro Pro",
          "Digital Time Switch Astro Pro Plus"

        ],
      },
    ],
  },
  {
    title: "Instrumentation",
    sections: [
      {
        heading: "Hour Meters",
        items: ["Digital Hour Meter", "Hour Meter Series HM 36", "Hour Meter Series HR 26"],
      },
      {
        heading: "Counters",
        items: ["Digital Counters", "Impulse Counter Series CR 26"],
      },
      {
        heading: "Digital Hour Meter & Counter",
        items: ["Digital Hour Meter And counter", "Impulse Counter Series CR 26"],
      },
      {
        heading: "Rate Indicator & Totaliser",
        items: ["Rate Indicator & Totaliser", "Impulse Counter Series CR 26"],
      },
    ],
  },
  {
    title: "Converters & Transducers",
    content: [
      { name: "Digital Time Switch Crono", link: "#" },
      { name: "Digital Time Switch Crono Pro", link: "#" },
      { name: "Time Switch FM Series", link: "#" },
    ],
  },
  { title: "Process Indicators", content: [{ name: "Process Indicators", link: "#" }] },
  { title: "Alarm Annunciators", content: [{ name: "Alarm Annunciators", link: "#" }] },
  { title: "Isolated Relay Module", content: [{ name: "Isolated Relay Module", link: "#" }] },
  { title: "Slim Relays", content: [{ name: "Slim Relays", link: "#" }] },
];

export default function GICClient() {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <>
      {/* 1. SEO & Navigation */}
      <Breadcrumb pageName="GIC Automation" description="General Industrial Controls Portfolio" />

      {/* 💻 फ्लूइड कंटेनर और पैडिंग जो हर डिवाइस के हिसाब से स्केल होगी */}
      <section className="py-8 sm:py-14 md:py-20 lg:py-24 bg-gradient-to-b from-slate-50 to-slate-100/80 min-h-screen w-full overflow-x-hidden">
        <div className="container mx-auto px-4 sm:px-6 max-w-7xl">

          {/* 🌟 2. SEO Optimized Responsive Header */}
          <header className="text-center mb-8 sm:mb-12 md:mb-16">
            <h1 className="text-xl sm:text-3xl md:text-4xl font-extrabold text-slate-950 tracking-tight max-w-3xl mx-auto leading-tight">
              GIC Industrial Automation & Controls
            </h1>
            <p className="text-xs sm:text-sm md:text-base text-slate-500 mt-2.5 max-w-xl mx-auto px-2">
              Authorized distributor of General Industrial Controls (GIC) - HMIs, Time Switches, and Instrumentation devices.
            </p>
            <div className="relative w-32 sm:w-40 h-[2px] bg-gradient-to-r from-transparent via-[#db2516] to-transparent mx-auto mt-4 sm:mt-5">
              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-full border border-[#006db1]/30 bg-white shadow-sm text-[#006db1] text-xs dark:bg-zinc-900 dark:text-[#db2516]">
                <FaBolt className="animate-pulse text-[10px] sm:text-xs" />
              </div>
            </div>
          </header>

          {/* 📱 3. Ultimate Responsive Grid System */}
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8 items-start">

            {/* 🛠️ बायां हिस्सा: कैटेगरीज कंपोनेंट (मोबाइल पर फुल विड्थ स्वाइप, डेस्कटॉप पर फिक्स्ड साइडबार) */}
            <div className="w-full lg:col-span-4 bg-white rounded-2xl border border-slate-200/60 shadow-sm p-3 sm:p-4 lg:sticky lg:top-24 z-20">
              <div className="flex items-center justify-between px-1 mb-3 text-slate-400">
                <div className="flex items-center gap-2">
                  <LayoutGrid size={14} />
                  <p className="text-[11px] sm:text-xs font-bold uppercase tracking-wider">Categories</p>
                </div>
                {/* मोबाइल यूज़र्स को समझने के लिए हिंट */}
                <span className="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full lg:hidden font-medium">
                  Swipe →
                </span>
              </div>

              {/* ⚡ रिस्पॉन्सिव स्क्रॉल इंजन: किसी भी फोन पर लेआउट को टूटने नहीं देता */}
              <div className="flex lg:flex-col gap-1.5 sm:gap-2 overflow-x-auto pb-2 lg:pb-0 snap-x snap-mandatory [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                {tabs.map((tab, index) => {
                  const isActive = activeTab === index;
                  return (
                    <button
                      key={index}
                      onClick={() => setActiveTab(index)}
                      className={`whitespace-nowrap lg:whitespace-normal snap-start text-left px-3.5 sm:px-4 py-2.5 sm:py-3 rounded-xl font-bold transition-all duration-200 text-xs sm:text-sm md:text-[15px] min-w-[65%] sm:min-w-[40%] lg:min-w-full flex-1 lg:flex-none ${isActive
                        ? "bg-blue-600 text-white shadow-md lg:shadow-lg lg:shadow-blue-600/15"
                        : "bg-slate-50 lg:bg-transparent text-slate-700 hover:bg-slate-100 hover:text-blue-600"
                        }`}
                    >
                      {tab.title}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* 📄 दायां हिस्सा: प्रोडक्ट शोकेस एरिया (Fluid UI) */}
            <div className="w-full lg:col-span-8">
              <div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm p-4 sm:p-6 md:p-8 min-h-[300px] sm:min-h-[400px] flex flex-col justify-between">

                <div>
                  <div className="flex items-center gap-3 border-b border-slate-100 pb-4 mb-5 sm:mb-6">
                    <Cpu className="text-blue-600 shrink-0" size={22} />
                    <h2 className="text-base sm:text-lg md:text-xl font-black text-slate-900 tracking-tight line-clamp-1">
                      {tabs[activeTab].title}
                    </h2>
                  </div>

                  {/* 🛡️ कंडीशनल सब-सेक्शन्स रेंडरिंग */}
                  {tabs[activeTab].sections ? (
                    tabs[activeTab].sections.map((section, idx) => (
                      <div key={idx} className="mb-6 sm:mb-8 last:mb-0">
                        <div className="flex items-center gap-2 mb-3">
                          <Layers size={15} className="text-indigo-600 shrink-0" />
                          <h3 className="text-xs sm:text-sm md:text-base font-extrabold text-slate-800">
                            {section.heading}
                          </h3>
                        </div>

                        {/* ग्रिड: स्मॉल मोबाइल पर 1 कॉलम, टैबलेट और लैपटॉप पर 2 कॉलम */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-4">
                          {section.items?.map((item, i) => (
                            <Link
                              key={i}
                              href="#"
                              className="group flex items-center justify-between p-3 border border-slate-100 rounded-xl bg-slate-50/50 hover:border-blue-500 hover:bg-white hover:shadow-sm transition-all duration-300 min-w-0"
                            >
                              <span className="text-slate-700 font-semibold text-xs sm:text-sm group-hover:text-blue-600 transition-colors truncate pr-2">
                                {item}
                              </span>
                              <ArrowUpRight size={15} className="text-slate-400 group-hover:text-blue-600 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform shrink-0" />
                            </Link>
                          ))}
                        </div>
                      </div>
                    ))
                  ) : (
                    /* डायरेक्ट प्रोडक्ट्स रेंडरिंग (जैसे HMI) */
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-4">
                      {tabs[activeTab].content?.map((item, i) => (
                        <Link
                          key={i}
                          href={item.link || "#"}
                          className="group flex items-center justify-between p-3 border border-slate-100 rounded-xl bg-slate-50/50 hover:border-blue-500 hover:bg-white hover:shadow-sm transition-all duration-300 min-w-0"
                        >
                          <span className="text-slate-700 font-semibold text-xs sm:text-sm group-hover:text-blue-600 transition-colors truncate pr-2">
                            {item.name}
                          </span>
                          <ArrowUpRight size={15} className="text-slate-400 group-hover:text-blue-600 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform shrink-0" />
                        </Link>
                      ))}
                    </div>
                  )}
                </div>

              </div>
            </div>

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