"use client";

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

export const metadata = {
  title: "GIC Digital Counters | Real Switchgears",
  description: "Explore high-precision GIC Digital Counters featuring an integrated 6-digit LCD screen, 9999999 max readout, and highly resilient multi-voltage power profile options.",
  keywords: ["GIC Digital Counters", "6 Digit LCD Counter", "24x48mm Digital Counter", "CE Certified Counters", "Industrial Panel Counters", "Real Switchgears"],
};

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

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

  const engineeringMetrics = [
    { label: "Max Readout", val: "9999999" },
    { label: "Display Module", val: "6-Digit LCD" },
    { label: "Standard Bezel", val: "24 x 48 mm" },
    { label: "Mounting Type", val: "Screw Mount" }
  ];

  const functionalCapabilities = [
    "Equipped with a crisp, low-power 6-digit LCD screen variant that offers sharp readability across diverse lighting setups.",
    "Engineered with a high-capacity counter register threshold that delivers reliable tracking all the way up to a 9999999 maximum readout.",
    "Highly adaptive multi-voltage input lines cover standard plant distribution layouts including 10-80V DC grid setups.",
    "Integrated 12-48V AC/DC dual-mode power profile capabilities streamline multi-system panel matching for global factories.",
    "Supports broad utility grids directly with dedicated low-latency 85-265V AC high-voltage operational boundaries.",
    "Compact space-saving design architecture utilizes a standardized 24x48mm structural front bezel footprint.",
    "Versatile industrial mounting layout profiles accommodate both classic Round styles and robust physical Screw Mount arrays.",
    "Fully verified, tested, and certified to meet premium international manufacturing criteria via official CE and RoHS compliance logs."
  ];

  const technicalSpecData: TechnicalSpecification[] = [
    {
      id: "spec-1",
      title: "Multi-Voltage Operational Grid Framework",
      category: "Electrical Profiles",
      technicalDetails: "The GIC Digital Counter series delivers premium stability across separate electrical paths, ensuring safe system operations inside 10-80V DC, 12-48V AC/DC, and wide-range 85-265V AC power setups. This highly flexible build significantly reduces internal component overhead inside intricate automation networks."
    },
    {
      id: "spec-2",
      title: "Compact Housing & Bezel Geometries",
      category: "Mechanical Profile",
      technicalDetails: "Engineered to fit into tight layout areas, this counting instrument provides an industry-standard 24x48mm front layout, a classic Round physical profile option, and heavy-duty integrated Screw Mount configurations. These mounting setups ensure a rock-solid, vibration-proof fit inside processing control panels."
    },
    {
      id: "spec-3",
      title: "High-Contrast 6-Digit LCD Analytics",
      category: "Display Architecture",
      technicalDetails: "Equipped with an advanced 6-digit liquid crystal display register module, engineered to log heavy-duty data loops clearly without ghosting. The robust digital counter tracking module accurately retains high-capacity information arrays up to a 9999999 absolute total readout boundary."
    },
    {
      id: "spec-4",
      title: "Certified Global Manufacturing Criteria",
      category: "Safety Compliance",
      technicalDetails: "Built according to rigorous global automation guidelines, the series is fully covered by official CE and RoHS compliance paperwork. This guarantees effective component shielding, safe material configuration rules, and dependable runtime counting integrity in harsh factory test sectors."
    }
  ];

  const coreApplications = [
    "Automation Enclosures",
    "Packaging Assemblies",
    "Pumping Facilities",
    "Textile Machine Bays",
    "Control Panel Arrays",
    "Switchgear Stations",
    "Batch Counting 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/.jpg"
                  alt="GIC Industrial Digital Counters Integrated 6 Digit LCD Control Unit"
                  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">
              High-Precision LCD Series • Digital Instruments
            </span>

            <h1 className="text-3xl md:text-4xl font-black tracking-tight text-slate-900 leading-tight">
              DIGITAL COUNTERS<br />
              <span className="text-amber-600 font-extrabold text-xl md:text-2xl block mt-2">
                Multi-Voltage 6-Digit LCD Industrial Operational Pulse Counter
              </span>
            </h1>

            <div className="space-y-4 text-slate-600 text-sm md:text-base leading-relaxed font-medium">
              <p>
                GIC's **Digital Counters** line functions as a high-precision instrumentation terminal, designed to deliver flawless cumulative sequence tracking and runtime monitoring across high-speed process manufacturing plants.
              </p>
              <p>
                Featuring an advanced **6-digit LCD register**, this system replaces legacy mechanical counters with a sharp, low-power display block. This upgrade ensures superior readability and long-term data tracking in bright factory environments.
              </p>
              <p>
                Engineered for maximum versatility, these counters offer an impressive **9999999 max readout** ceiling and feature a wide multi-voltage power base supporting **10-80V DC, 12-48V AC/DC, and 85-265V AC** lines.
              </p>
              <p>
                With its compact **24x48mm standard bezel profile**, along with **Round and Screw Mount mechanical options**, this CE and RoHS-certified counter integrates smoothly into existing control console arrays.
              </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/pdfs/gic/Digital_Counters.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/pdfs/gic/Digital_counter_hour_meter_with_bezel.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 Engineering &amp; Display Mechanics</h2>
              <p className="text-xs text-slate-500 font-medium">
                Select a data category to inspect voltage flexibility, mounting dimensions, or system compliance properties.
              </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" /> Full CE &amp; RoHS Safety Standards Met
                      </span>
                      <span>Official GIC Product Assembly</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">System Integration &amp; Operational Capacity</h2>
              <p className="text-xs text-slate-500 font-medium">
                Engineered to maintain steady, solid timeline tracking inside heavy power networks.
              </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; Industrial Contexts</h2>
              <p className="text-xs text-slate-500 font-medium">
                Optimized to simplify pulse tracking, deploy in dense layouts, and adapt to high-vibration systems.
              </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">
                  <LuToggleLeft 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">
            Ensure Maximum Logging Accuracy with GIC LCD Digital Counters
          </h3>
          <p className="text-slate-400 text-sm max-w-xl mx-auto mb-8 font-medium">
            Deploy clean, power-efficient display terminals, protect delicate instrumentation pathways against power drops, and configure reliable layouts with certified GIC components. Connect with our technical trade desk today to verify stock details or arrange wholesale commercial terms.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="https://realswitchgears.com/assets/pdfs/gic/Digital_Counters.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 Counter 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 >
  );
}