"use client";

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

export const metadata = {
  title: "GIC Digital Time Switch Pulse Crono | Real Switchgears",
  description: "Explore the GIC Digital Time Switch Pulse Crono. Features a high-visibility LCD screen, 25 memory programs, daily/weekly modes, 6-year power reserve, and robust 16A contact rating.",
  keywords: ["GIC Crono Switch", "Digital Time Switch Pulse Crono", "Programmable Time Switch", "1 C/O Time Switch", "DIN Rail Time Controller", "Real Switchgears"],
};

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

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

  const engineeringMetrics = [
    { label: "Contact Rating", val: "16A" },
    { label: "Memory Storage", val: "25 Programs" },
    { label: "Power Reserve", val: "6 Years" },
    { label: "Output Relay", val: "1 C/O Changeover" }
  ];

  const functionalCapabilities = [
    "Equipped with a crisp, multi-segment LCD layout designed to provide clear parameter reading and easy sequence configuration.",
    "Provides highly flexible time scheduling via selectable Daily and Weekly execution runtime modes.",
    "Features an expansive memory block capable of storing and running up to 25 separate execution programs.",
    "Guarantees seamless program retention with a built-in long-life power reserve lasting up to 6 operational years.",
    "Maintains excellent precision in critical environments with clock accuracy verified at +1 second/day at 20°C.",
    "Includes a robust output pathway utilizing a 1 C/O changeover relay layout rated for up to 16A currents.",
    "Adapts easily to standard control panel chassis layouts using a flexible, integrated Base or DIN rail mounting configuration.",
    "Validated to meet global quality benchmarks with official CE, RoHS, and UL certification documentation."
  ];

  const technicalSpecData: TechnicalSpecification[] = [
    {
      id: "spec-1",
      title: "Adaptive Multi-Voltage Selection Base",
      category: "Electrical Design",
      technicalDetails: "The Crono Series is engineered across three distinct supply voltage configurations to match different automation grids: low-voltage 12 VDC loops, standard industrial 24 VDC rails, and wide-band 110 – 240 VAC commercial power lines. Each model is paired with an independent 1 C/O changeover contact configuration."
    },
    {
      id: "spec-2",
      title: "High-Capacity 16A Logic Controls",
      category: "Output & Switching",
      technicalDetails: "Built for heavy industrial duty cycles, the time switch incorporates a high-capacity electro-mechanical relay system with an official 16A contact rating. This high threshold enables direct control of lighting arrays, single-phase motors, and commercial HVAC equipment without needing supplementary contactors."
    },
    {
      id: "spec-3",
      title: "Sustained Power Retention & Chrono Precision",
      category: "Timing Performance",
      technicalDetails: "The microprocessor-driven clock keeps timing tight with an accurate calibration of +1 second per day at an ambient temperature of 20°C. Coupled with an autonomous 6-year battery backup framework, scheduled automation routines remain completely secure during sudden power grid failures."
    },
    {
      id: "spec-4",
      title: "Global Compliance & Verified Safety Logs",
      category: "Regulatory Standards",
      technicalDetails: "The Pulse Crono platform is fully certified under major international validation networks. Its technical design complies with strict panel building codes, backed by official EC Declarations of Conformity (CE & RoHS approval logs) and official UL Certification records for high-reliability applications."
    }
  ];

  const coreApplications = [
    "Street Light Control",
    "HVAC Pump Cycles",
    "Security Alarms",
    "Industrial Siren Pulses",
    "School Bell Timers",
    "Defrost Cycle Blocks",
    "Distribution Boards"
  ];

  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 CRONO.png"
                  alt="GIC Digital Time Switch Pulse Crono Panel 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">
              Programmable Automation • Precision Timers
            </span>

            <h1 className="text-3xl md:text-4xl font-black tracking-tight text-slate-900 leading-tight">
              DIGITAL TIME SWITCH PULSE CRONO<br />
              <span className="text-amber-600 font-extrabold text-xl md:text-2xl block mt-2">
                25-Program Daily &amp; Weekly Logic Timer with 6-Year Internal Backup
              </span>
            </h1>

            <div className="space-y-4 text-slate-600 text-sm md:text-base leading-relaxed font-medium">
              <p>
                The GIC **Digital Time Switch Pulse Crono** serves as an advanced, microprocessor-controlled scheduling terminal, meticulously engineered to run accurate automated cycles across industrial, commercial, and residential facility arrays.
              </p>
              <p>
                Equipped with a high-visibility, digital **LCD interface panel**, the device supports comprehensive automation programming with up to **25 distinct execution slots**, allowing operators to fine-tune operations across both **Daily and Weekly selection modes**.
              </p>
              <p>
                Featuring an impressive **6-year internal power reserve**, this high-efficiency unit ensures your timing configuration profiles remain perfectly safe and synchronized through sudden grid failures, while keeping clock drift minimal at **+1 s/day at 20°C**.
              </p>
              <p>
                Built into a versatile, universal **Base or DIN rail chassis structure**, it handles high operational loads via a **16A changeover contact relay (1 C/O)**. The platform is available across versatile **12 VDC, 24 VDC, and wide-range 110 – 240 VAC supply lines**, with full compliance backed by official **CE, RoHS, and UL credentials**.
              </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-2 pt-2">
              <Link
                href="https://realswitchgears.com/assets/pdf/gic/Digital-Time-Switches-Crono-Pulse.pdf"
                target="_blank"
                className="inline-flex items-center gap-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold px-4 py-3 rounded-xl transition-all shadow-sm border border-slate-950"
              >
                Catalog <FaFilePdf className="w-3.5 h-3.5 text-red-400" />
              </Link>
              <Link
                href="https://realswitchgears.com/assets/pdf/gic/Digital_Time_Switches_Crono.pdf"
                target="_blank"
                className="inline-flex items-center gap-2 bg-white hover:bg-slate-100 text-slate-800 text-xs font-bold px-4 py-3 rounded-xl transition-all shadow-sm border border-slate-200"
              >
                Manual <FaBookOpen className="w-3.5 h-3.5 text-blue-500" />
              </Link>
              <Link
                href="https://realswitchgears.com/assets/pdf/gic/EC_Declaration_of_Conformity_Crono.pdf"
                target="_blank"
                className="inline-flex items-center gap-2 bg-white hover:bg-slate-100 text-slate-800 text-xs font-bold px-4 py-3 rounded-xl transition-all shadow-sm border border-slate-200"
              >
                CE &amp; RoHS <FaAward className="w-3.5 h-3.5 text-amber-600" />
              </Link>
              <Link
                href="https://realswitchgears.com/assets/pdf/gic/TIME_SWITCH_Crono.pdf"
                target="_blank"
                className="inline-flex items-center gap-2 bg-white hover:bg-slate-100 text-slate-800 text-xs font-bold px-4 py-3 rounded-xl transition-all shadow-sm border border-slate-200"
              >
                UL Report <FaAward className="w-3.5 h-3.5 text-emerald-600" />
              </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-4 py-3 rounded-xl transition-all shadow-sm"
              >
                Enquire Now <FaEnvelope className="w-3.5 h-3.5" />
              </Link>
            </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 Architecture &amp; System Parameters</h2>
              <p className="text-xs text-slate-500 font-medium">
                Select an engineering index item to review integrated voltage tolerances, relay thresholds, or international safety marks.
              </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 text-emerald-500" /> UL, CE &amp; RoHS Compliance Verified
                      </span>
                      <span>Verified GIC Instrumentation</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">Performance Protection &amp; Design Integrity</h2>
              <p className="text-xs text-slate-500 font-medium">
                Engineered to handle automated timing logic cycles with absolute precision and rugged industrial endurance.
              </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">
              <LuCpu className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-lg font-black text-slate-900">Target Operations &amp; Mounting Deployment</h2>
              <p className="text-xs text-slate-500 font-medium">
                Optimized to accurately govern periodic automated loop sequences across modern high-density panel assemblies.
              </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">
                  <LuClock 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>

        {/* ─── 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 Your Operational Efficiency with Verified Pulse Crono Timers
          </h3>
          <p className="text-slate-400 text-sm max-w-xl mx-auto mb-8 font-medium">
            Deploy dependable, low-drift digital timer modules, protect your system scheduling loops against prolonged power blackouts, and secure clean Base or DIN rail panel integration with GIC products. Contact our commercial sales desk today to verify real-time inventory, ask for wiring configuration guides, or coordinate bulk trade wholesale pricing.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="https://realswitchgears.com/assets/pdf/gic/Digital-Time-Switches-Crono-Pulse.pdf"
              target="_blank"
              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"
            >
              View Full Catalog
            </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 Trade Enquiry
              <FaChevronRight className="w-3 h-3" />
            </Link>
          </div>
        </div>

      </div >
    </div >
  );
}