"use client";

import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {
  FaEnvelope,
  FaChevronRight,
  FaFilePdf,
  FaAward,
  FaBookOpen,
  FaCertificate
} from "react-icons/fa6";
import {
  LuLayers,
  LuShieldCheck,
  LuTimer,
  LuSettings2,
  LuActivity,
  LuLightbulb,
  LuPower
} from "react-icons/lu";

export const metadata = {
  title: "GIC Digital Time Switch Pulse | Precise Lighting & Load Control",
  description: "Explore the GIC Digital Time Switch Pulse. Features multi-voltage inputs (12VDC, 24VDC, 110-240VAC), 1 C/O 16A contact rating, 6-year power reserve, and customizable scheduling.",
  keywords: ["GIC Time Switch", "Digital Time Switch Pulse", "DIN Rail Timer", "Lighting Control Switch", "16A Relay Timer", "Programmable Pulse Timer", "Industrial Load Automation"],
};

interface TechnicalSpecification {
  id: string;
  title: string;
  category: string;
  technicalDetails: string;
}

export default function DigitalTimeSwitchPulse() {
  const [activeTabId, setActiveTabId] = useState<string>("spec-1");

  const engineeringMetrics = [
    { label: "Contact Rating", val: "16A Switching" },
    { label: "Power Reserve", val: "6 Years Backup" },
    { label: "Clock Accuracy", val: "±1 s/day @ 20°C" },
    { label: "Output Relay", val: "1 C/O Config" }
  ];

  const functionalCapabilities = [
    "LCD display interface upgraded with an integrated high-visibility green backlight.",
    "High-precision daily, weekly, and dedicated pulse-mode execution loops.",
    "Continuous real-time bar graph visualizations mapping daily execution programs.",
    "Flexible configuration memory supporting up to 50 ON/OFF loops and 10 holiday blocks.",
    "Settable Daylight Saving Time (DST) tracking and secure equipment password locks.",
    "Dual or single 16A relay variants with independent program assignment capabilities.",
    "User-selectable 12-hour or 24-hour runtime presentation configurations.",
    "Integrated service and operations counters tracking runtime load-hour histories."
  ];

  const technicalSpecData: TechnicalSpecification[] = [
    {
      id: "spec-1",
      title: "GIC Time Switching Technology & Legacy Overview",
      category: "System Core",
      technicalDetails: "With more than 48 years of experience in time switch technology, GIC offers innovative technologies that deliver several benefits and make time switching tasks simpler, safer, and more energy-efficient. Our target is to supply the market with products known for their design, energy efficiency, functionality, safety, and environmental impact."
    },
    {
      id: "spec-2",
      title: "Flexible Power & Actuation Configurations",
      category: "Electrical Baseline",
      technicalDetails: "The Digital Time Switch - Pulse series supports multi-tier grid integration via distinct operational variants: 12 VDC, 24 VDC, and wide-range 110 – 240 VAC supply options. Each standalone layout delivers a 1 C/O output configuration rated at a robust 16A peak switching capacity."
    },
    {
      id: "spec-3",
      title: "Chassis Mechanics & Program Profiles",
      category: "Mechanical Profile",
      technicalDetails: "Engineered for flexibility in standard industrial enclosures, the device supports versatile Base or standard DIN-rail mounting topologies. The control matrix handles 16 integrated program blocks via an on-board LCD screen interface, operating with an extreme accuracy curve of ±1 second per day at an ambient 20°C threshold."
    },
    {
      id: "spec-4",
      title: "Energy Management & Load Control Matrix",
      category: "Operational Efficiency",
      technicalDetails: "To manage the activation of electrical loads in an installation and consequently improve their use and ensure energy-efficient management, GIC offers a wide range of time switches to handle the electric utilities as needed to fit the requirements of a wide variety of applications."
    }
  ];

  const coreApplications = [
    "Municipal Street Lights & Highways",
    "Scheduled Alarm & School Bells",
    "Commercial Sign-boards & Displays",
    "HVAC & AC Unit Cycling Control",
    "High Mast Industrial Lighting Systems",
    "Automated Water Sprinkling & Irrigation",
    "Industrial Motor & Water Pump Control"
  ];

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 py-16 lg:py-24 selection:bg-amber-100 selection:text-slate-900">
      <div className="container mx-auto px-4 max-w-7xl">

        {/* ─── HERO BRAND / DETAILS SECTION ──────────────────── */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center mb-20">

          {/* Left Frame: Image Asset Viewport */}
          <div className="lg:col-span-6 flex justify-center order-2 lg:order-1">
            <div className="relative w-full aspect-[4/3] rounded-3xl overflow-hidden bg-white border border-slate-200 p-4 shadow-xs group">
              <div className="relative w-full h-full rounded-2xl overflow-hidden">
                <Image
                  src="https://realswitchgears.com/assets/images/products/DIGITAL TIME SWITCH PULSE.png"
                  alt="GIC Digital DIN-Rail Mounted Time Switch Pulse Controller Module"
                  fill
                  priority
                  className="object-contain group-hover:scale-102 transition-transform duration-500"
                  sizes="(max-width: 1024px) 100vw, 600px"
                />
              </div>
            </div>
          </div>

          {/* Right Frame: Text Narrative Content */}
          <div className="lg:col-span-6 space-y-6 order-1 lg:order-2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-slate-900 px-4 py-1.5 text-xs font-bold tracking-wider text-amber-400 uppercase border border-slate-800">
              Energy Management • Advanced Pro Series
            </span>

            <h1 className="text-3xl md:text-4xl font-black tracking-tight text-slate-900 leading-tight">
              DIGITAL TIME SWITCH PULSE<br />
              <span className="text-amber-600 font-extrabold text-xl md:text-2xl block mt-2">
                High-Performance 16A DIN-Rail Scheduling Timers for Lighting &amp; Industry
              </span>
            </h1>

            <div className="space-y-4 text-slate-600 text-sm md:text-base leading-relaxed font-medium">
              <p>
                GIC’s precision-engineered **Digital Time Switch Pulse** units introduce best-in-class automated time-management frameworks, specifically tailored to handle modern lighting management arrays and complex electrical installations.
              </p>
              <p>
                To provide flexibility across varied infrastructure environments, these modules offer clear choices across **12 VDC, 24 VDC, and wide-band 110 – 240 VAC power designs**. This ensures seamless integration, while the heavy-duty **1 C/O output configuration handles up to 16A contact loads** without requiring external auxiliary hardware.
              </p>
              <p>
                Featuring an on-board **LCD interface and a continuous 6-year power reserve**, the device provides an exact clock accuracy profile within **±1 second per day at 20°C**. This baseline provides flawless operational continuity, allowing installers to optimize power use and ensure energy-efficient management.
              </p>
              <p>
                From classic analogue designs to the cutting-edge digital versions with the advanced Pro series, GIC **meets all the requirements of modern technology and Lighting control**.
              </p>
            </div>

            {/* Parameter Cards Summary Layout */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-white border border-slate-200 p-4 rounded-2xl shadow-xs">
              {engineeringMetrics.map((metric, index) => (
                <div key={index} className="bg-slate-50 border border-slate-100 p-3 rounded-xl text-center flex flex-col justify-center">
                  <span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider block mb-1">
                    {metric.label}
                  </span>
                  <span className="text-xs font-black text-slate-900 leading-snug">
                    {metric.val}
                  </span>
                </div>
              ))}
            </div>

            {/* Direct Brochure CTAs & Documentation Downloads */}
            <div className="flex flex-wrap gap-3 pt-2">
              <Link
                href="/contact"
                className="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-slate-950 text-xs font-bold px-5 py-3.5 rounded-xl transition-all shadow-sm"
              >
                Enquire Now <FaEnvelope className="w-3.5 h-3.5" />
              </Link>

              <a
                href="https://realswitchgears.com/assets/pdf/gic/Digital-Time-Switches-Crono-Pulse.pdf"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 bg-white hover:bg-slate-100 text-slate-700 text-xs font-bold px-4 py-3.5 rounded-xl border border-slate-200 transition-colors"
              >
                <FaFilePdf className="text-red-500 w-3.5 h-3.5" /> Catalog
              </a>

              <a
                href="https://realswitchgears.com/assets/pdf/gic/Digital_Time_Switches_Pulse.pdf"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 bg-white hover:bg-slate-100 text-slate-700 text-xs font-bold px-4 py-3.5 rounded-xl border border-slate-200 transition-colors"
              >
                <FaBookOpen className="text-blue-500 w-3.5 h-3.5" /> Manual
              </a>
            </div>
          </div>

        </div>

        {/* ─── INTERACTIVE ARCHITECTURE SPECIFICATION VIEWER ──── */}
        <div className="mb-20">
          <div className="flex items-center gap-3 mb-10 border-b border-slate-200/60 pb-4">
            <div className="p-2 bg-slate-100 border border-slate-200 text-slate-700 rounded-xl">
              <LuLayers className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-lg font-black text-slate-900">Functional Modules &amp; Engineering Subsystems</h2>
              <p className="text-xs text-slate-500 font-medium">
                Select an operational profile to explore voltage scaling options, calibration accuracy, and energy-management details.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

            {/* Left Control Panel Column */}
            <div className="lg:col-span-5 space-y-2">
              {technicalSpecData.map((spec) => (
                <button
                  key={spec.id}
                  onClick={() => setActiveTabId(spec.id)}
                  className={`w-full text-left p-3.5 rounded-xl border text-xs font-bold transition-all flex items-center justify-between group ${activeTabId === spec.id
                    ? "bg-slate-900 text-white border-slate-950 shadow-xs"
                    : "bg-white text-slate-700 border-slate-200 hover:bg-slate-100"
                    }`}
                >
                  <span className="truncate">{spec.title}</span>
                  <FaChevronRight className={`w-2.5 h-2.5 opacity-70 group-hover:translate-x-0.5 transition-transform ${activeTabId === spec.id ? "text-white" : "text-slate-400"
                    }`} />
                </button>
              ))}
            </div>

            {/* Right Details Information Block */}
            <div className="lg:col-span-7 bg-white border border-slate-200 rounded-2xl p-6 md:p-8 min-h-[220px] flex flex-col justify-between shadow-xs">
              {(() => {
                const specMatch = technicalSpecData.find((s) => s.id === activeTabId)!;
                return (
                  <>
                    <div className="space-y-4">
                      <div>
                        <span className="text-[10px] font-black tracking-widest text-amber-600 uppercase block mb-1">
                          {specMatch.category}
                        </span>
                        <h3 className="text-base font-black text-slate-900">
                          {specMatch.title}
                        </h3>
                      </div>
                      <p className="text-xs md:text-sm text-slate-600 font-medium leading-relaxed pt-2 border-t border-slate-100">
                        {specMatch.technicalDetails}
                      </p>
                    </div>

                    <div className="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-400 font-bold">
                      <span className="flex items-center gap-1 text-slate-700">
                        <LuShieldCheck className="w-3.5 h-3.5" /> High-Performance Scheduling
                      </span>
                      <span>DIN-Rail Base Mount Conformance</span>
                    </div>
                  </>
                );
              })()}
            </div>

          </div>
        </div>

        {/* ─── TECHNICAL ADVANTAGES & FEATURES ───────────────── */}
        <div className="mb-20">
          <div className="flex items-center gap-3 mb-8 border-b border-slate-200/60 pb-4">
            <div className="p-2 bg-slate-100 border border-slate-200 text-slate-700 rounded-xl">
              <LuSettings2 className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-lg font-black text-slate-900">Advanced Firmware &amp; Core Control Matrix</h2>
              <p className="text-xs text-slate-500 font-medium">
                Integrated toolsets engineered to deliver safety, silent operation, and reliable load control cycles.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {functionalCapabilities.map((feature, index) => (
              <div
                key={index}
                className="bg-white border border-slate-200 rounded-xl p-4 flex flex-col justify-between shadow-xs hover:border-amber-300 transition-all"
              >
                <span className="text-xs font-bold text-slate-700 leading-relaxed">
                  {feature}
                </span>
                <div className="w-4 h-1 bg-amber-500 rounded-full mt-3" />
              </div>
            ))}
          </div>
        </div>

        {/* ─── TARGETED APPLICATIONS GRID ────────────────────── */}
        <div className="mb-20">
          <div className="flex items-center gap-3 mb-8 border-b border-slate-200/60 pb-4">
            <div className="p-2 bg-slate-100 border border-slate-200 text-slate-700 rounded-xl">
              <LuLightbulb className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-lg font-black text-slate-900">Target Applications &amp; Deployment Environments</h2>
              <p className="text-xs text-slate-500 font-medium">
                Engineered to seamlessly coordinate electric utilities and improve load usage across multi-tenant installations.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
            {coreApplications.map((app, index) => (
              <div key={index} className="bg-white border border-slate-200 p-4 rounded-xl text-center flex flex-col items-center justify-center gap-2 group hover:bg-slate-900 hover:border-slate-950 transition-all duration-200">
                <div className="p-2 bg-slate-50 text-slate-700 rounded-lg group-hover:bg-slate-800 group-hover:text-amber-400 transition-colors">
                  <LuPower className="w-4 h-4" />
                </div>
                <span className="text-[11px] font-black tracking-tight text-slate-900 group-hover:text-white transition-colors">
                  {app}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* ─── COMPLIANCE & INTERNATIONAL COMPLIANCE LINKS ───── */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-20">
          <a
            href="https://realswitchgears.com/assets/pdf/gic/EC_Declaration_of_Conformity_Pulse.pdf"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-white border border-slate-200 p-5 rounded-2xl shadow-xs flex items-center justify-between group hover:border-emerald-500 transition-colors"
          >
            <div className="flex items-center gap-4">
              <div className="p-3 bg-emerald-50 text-emerald-700 rounded-xl border border-emerald-100">
                <FaCertificate className="w-5 h-5" />
              </div>
              <div>
                <h4 className="text-xs font-black text-slate-900">CE &amp; RoHS Declaration</h4>
                <p className="text-[11px] text-slate-500 font-medium">Download official EC Declaration of Conformity documents.</p>
              </div>
            </div>
            <FaFilePdf className="text-slate-300 group-hover:text-emerald-500 w-5 h-5 transition-colors" />
          </a>

          <a
            href="https://realswitchgears.com/assets/pdfs/TIME_SWITCH_Pulse.pdf"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-white border border-slate-200 p-5 rounded-2xl shadow-xs flex items-center justify-between group hover:border-blue-500 transition-colors"
          >
            <div className="flex items-center gap-4">
              <div className="p-3 bg-blue-50 text-blue-700 rounded-xl border border-blue-100">
                <FaAward className="w-5 h-5" />
              </div>
              <div>
                <h4 className="text-xs font-black text-slate-900">UL Certification Datasheet</h4>
                <p className="text-[11px] text-slate-500 font-medium">Review underwriter safety verification files and testing standards.</p>
              </div>
            </div>
            <FaFilePdf className="text-slate-300 group-hover:text-blue-500 w-5 h-5 transition-colors" />
          </a>
        </div>

        {/* ─── COMMERCIAL INQUIRY BLOCK ──────────────────────── */}
        <div className="bg-gradient-to-br from-slate-900 to-slate-800 text-white rounded-3xl p-8 md:p-12 text-center max-w-4xl mx-auto shadow-xs">
          <div className="inline-flex p-3 bg-slate-800 rounded-2xl border border-slate-700 text-amber-500 mb-4">
            <LuActivity className="w-6 h-6" />
          </div>
          <h3 className="text-xl md:text-2xl font-black text-white mb-3">
            Optimize Commercial Infrastructure with GIC Pulse Switch Frameworks
          </h3>
          <p className="text-slate-400 text-sm max-w-xl mx-auto mb-8 font-medium">
            Streamline high-mast arrays, control deep pump cycles, and isolate automated sign-boards with robust micro-programmable systems. Reach out to our logistics desk to clarify mounting orientations, confirm current stock parameters, or request item prices.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="/contact"
              className="inline-flex items-center gap-2 bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold px-8 py-4 rounded-full transition-all w-full sm:w-auto justify-center uppercase tracking-wider border border-slate-700"
            >
              Contact Engineering Desk
            </Link>
            <Link
              href="/contact"
              className="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-slate-950 text-xs font-bold px-8 py-4 rounded-full transition-all duration-200 active:scale-95 shadow-md shadow-amber-500/10 w-full sm:w-auto justify-center uppercase tracking-wider"
            >
              Submit Commercial Enquiry
              <FaChevronRight className="w-3 h-3" />
            </Link>
          </div>
        </div >

      </div >
    </div >
  );
}