"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 Time Switch FM Series | Real Switchgears",
  description: "Explore the GIC Time Switch FM Series. Features dual manual programming modes, 150 hours power reserve, base/DIN & flush mounting options, and a robust 16A contact rating.",
  keywords: ["GIC FM Series", "Time Switch FM Series", "Mechanical Time Switch", "1 C/O Changeover Timer", "Flush Mount Time Switch", "Real Switchgears"],
};

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

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

  const engineeringMetrics = [
    { label: "Contact Rating", val: "16A" },
    { label: "Power Reserve", val: "150 Hours" },
    { label: "Output Relay", val: "1 C/O Changeover" },
    { label: "System Programs", val: "1 Loop Pattern" }
  ];

  const functionalCapabilities = [
    "Supports multiple heavy-duty industrial automation applications with standard 110V AC or 240V AC operating grids.",
    "Provides high setup adaptability with options for integrated Base, DIN rail, and Flush mount installations.",
    "Allows engineers to tailor equipment cycles easily via selectable Daily or Weekly operational mode tracking.",
    "Features a robust 1 C/O changeover configuration to manage independent execution pathways smoothly.",
    "Includes a single integrated program cycle engineered for straightforward, high-reliability loop setups.",
    "Secures timing configuration paths through utility blackouts with a built-in 150-hour power reserve capacity.",
    "Maintains tight synchronicity across sensitive infrastructure with clock accuracy calibrated to +1 s/day at 20°C.",
    "Safely governs major commercial loads with an official heavy-duty 16A maximum contact rating."
  ];

  const technicalSpecData: TechnicalSpecification[] = [
    {
      id: "spec-1",
      title: "Dual AC Power Delivery Base",
      category: "Electrical Properties",
      technicalDetails: "The GIC Time Switch FM Series operates reliably across standard commercial distribution systems. The internal design handles voltage fluctuations across separate 110V AC and 240V AC power paths, making it a versatile drop-in controller for different machinery enclosures and plant configurations."
    },
    {
      id: "spec-2",
      title: "Versatile Panel Frame Integration",
      category: "Mechanical Mounting",
      technicalDetails: "This automation module features a highly versatile physical chassis design. Operators can secure the controller using standard Base or DIN rail configurations, or choose a Flush mount installation directly inside custom terminal doors and control panels."
    },
    {
      id: "spec-3",
      title: "16A Contact Handling & Loop Accuracy",
      category: "Output & Timing Logic",
      technicalDetails: "Equipped with a robust 1 C/O changeover relay layout, the FM Series safely monitors single-phase motor configurations and heavy utility systems up to a 16A threshold. The timer handles cyclical tracking with an accuracy of +1 second per day at 20°C to prevent overlapping schedules."
    },
    {
      id: "spec-4",
      title: "150-Hour Power Retention & Safety Records",
      category: "System Endurance",
      technicalDetails: "To protect the mechanical sequence from sudden power grid failures, an internal backup module delivers up to 150 hours of autonomous power reserve. The platform is built and verified to meet strict international metrics, backed by signed EC Declarations of Conformity for CE and RoHS safety compliance."
    }
  ];

  const coreApplications = [
    "Lighting Networks",
    "Ventilation Systems",
    "Pumping Stations",
    "Industrial Machinery",
    "Distribution Enclosures",
    "Signboard Controls",
    "HVAC Utility Blocks"
  ];

  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/gic/.png"
                  alt="GIC Time Switch FM Series Industrial Mechanical 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">
              GIC Industrial Instruments • Control Automation
            </span>

            <h1 className="text-3xl md:text-4xl font-black tracking-tight text-slate-900 leading-tight">
              TIME SWITCH FM SERIES<br />
              <span className="text-amber-600 font-extrabold text-xl md:text-2xl block mt-2">
                Daily &amp; Weekly High-Reliability Timer with 150-Hour Power Reserve
              </span>
            </h1>

            <div className="space-y-4 text-slate-600 text-sm md:text-base leading-relaxed font-medium">
              <p>
                The GIC **Time Switch FM Series** functions as a highly durable and simple automation timer, built to manage cyclical runtime routines and sequential processes in demanding industrial and infrastructure setups.
              </p>
              <p>
                Engineered for versatile panel installation, this robust timing module easily supports multiple chassis setups—including **Base, DIN rail, and Flush mount frameworks**—allowing plant engineers to place the controller directly onto distribution doors or interior component grids.
              </p>
              <p>
                The module features an integrated internal backup framework that provides an automated **150-hour power reserve**. This ensures your scheduling profiles stay safe and perfectly coordinated through sudden grid blackouts, maintaining high precision with a clock drift rating of **+1 s/day at 20°C**.
              </p>
              <p>
                Operating across flexible **110V AC or 240V AC power supplies**, the unit directs automated workflows through a premium **16A changeover relay (1 C/O)** built for 1 specific program layout. Complete safety validation is supported by official **CE and RoHS certification logs**.
              </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/Time_Switches_FM_Series.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/FM1_QT_IM.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_FMQTZ_240VAC-signed.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="/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 ranges, mounting configurations, 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" /> Signed CE &amp; RoHS Declarations Verified
                      </span>
                      <span>Official GIC Automation Asset</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 execute repetitive automation sequences with absolute reliability and high environmental 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; Enclosure Deployment</h2>
              <p className="text-xs text-slate-500 font-medium">
                Optimized to accurately govern ongoing automated workflows within modern high-density distribution configurations.
              </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 Process Routines with Verified GIC FM Time Switches
          </h3>
          <p className="text-slate-400 text-sm max-w-xl mx-auto mb-8 font-medium">
            Deploy highly reliable manual time-tracking setups, protect your facility control loops from prolonged grid blackouts, and implement clean Base, DIN rail, or Flush mount designs with GIC instruments. Reach out to our technical trade desk today to verify real-time stock availability, request specific layout guides, or secure commercial volume discounts.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="https://realswitchgears.com/assets/pdf/gic/Time_Switches_FM_Series.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 >
  );
}