import { useState, useEffect, useRef } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useLanguage } from "@/contexts/LanguageContext";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import Chatbot from "@/components/Chatbot";
import SEO from "@/components/SEO";
import { ArrowRight, Settings, ShieldCheck, Gauge, ArrowUpFromLine, Layers, ChevronDown, ChevronUp, X, Download, Calendar, Tag, Hash, Info, Zap, Cpu, Thermometer, Shield, Calculator } from "lucide-react";

// Import product images
import pneumaticPds from "@/assets/products/pneumatic-pds.png";
import pneumaticHd from "@/assets/products/pneumatic-hd.jpg";
import pneumaticPlds from "@/assets/products/pls1-series.png";
import pneumaticMplds from "@/assets/products/mpld.png";
import electricalItq from "@/assets/products/electrical-itq.jpg";
import electricalIql from "@/assets/products/electrical-iql.jpg";
import electricalItl from "@/assets/products/electrical-itl.jpg";
import electricalItm from "@/assets/products/electrical-itm.png";
import mechanicalBevel from "@/assets/products/mechanical-bevel.png";
import mechanicalWorm from "@/assets/products/worm-gearboxes.png";
import accessoriesIt from "@/assets/products/accessories-it.png";
import accessoriesHandwheels from "@/assets/products/handwheels.png";
import hydraulicActuator from "@/assets/products/hydralic.png";
import heroVideo from "@/assets/susini tork.mp4";

/* ===========================================================
   INTERFACES
   =========================================================== */
interface Product {
  id: string;
  name: string;
  type: string;
  image: string;
  models: string[];
  description: string;
  torque?: string;
  thrust?: string;
  features?: string[];
  applications?: string[];
  certifications?: string[];
  seriesLinks?: { label: string; path: string }[];
}

/* ===========================================================
   MODEL DETAILS INTERFACE
   =========================================================== */
interface ModelDetails {
  modelNumber: string;
  productName: string;
  specifications: {
    torqueNm?: string;
    torqueLbfFt?: string;
    thrustKN?: string;
    thrustLbf?: string;
    gearRatio?: string;
    mechanicalAdvantage?: string;
    temperature?: string;
    ipRating?: string;
    weight?: string;
    mounting?: string;
    handwheel?: string;
    turns?: string;
    pressure?: string;
    cycles?: string;
    protection?: string;
    control?: string;
    stroke?: string;
    model?: string;
    type?: string;
    [key: string]: string | undefined;
  };
  description: string;
  features: string[];
  datasheetUrl?: string;
  cadUrl?: string;
}

/* ===========================================================
   MODEL DATA INTERFACES
   =========================================================== */
interface BaseModelData {
  name: string;
  torqueNm: string;
  torqueLbfFt: string;
  gearRatio: string;
  mechanicalAdvantage: string;
  weight: string;
  mounting: string;
  handwheel: string;
}

interface ThrustModelData extends BaseModelData {
  thrustKN: string;
  thrustLbf: string;
  turns?: string;
}

interface TurnsModelData extends BaseModelData {
  turns: string;
  thrustKN?: never;
  thrustLbf?: never;
}

type ModelData = BaseModelData | ThrustModelData | TurnsModelData;

/* ===========================================================
   SERIES MODELS INTERFACE
   =========================================================== */
interface SeriesModels {
  series: string;
  models: ModelData[];
}

/* ===========================================================
   MODEL DETAILS MODAL COMPONENT
   =========================================================== */
const ModelDetailsModal = ({
  isOpen,
  onClose,
  details
}: {
  isOpen: boolean;
  onClose: () => void;
  details: ModelDetails | null;
}) => {
  if (!isOpen || !details) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-0 sm:p-6 bg-slate-950/90 backdrop-blur-md">
      <div className="relative w-full max-w-5xl max-h-[100vh] sm:max-h-[92vh] overflow-hidden bg-white shadow-[0_0_50px_-12px_rgba(185,28,28,0.3)] animate-in fade-in zoom-in-98 duration-300 flex flex-col border border-red-900/10">

        {/* Professional Header: Industrial Red Panel */}
        <div className="flex items-center justify-between p-6 bg-red-700 text-white relative">
          <div className="flex items-center gap-5">
            <div className="hidden sm:flex p-3 bg-white/10 border border-white/20 backdrop-blur-md rounded-sm">
              <Info className="w-6 h-6" />
            </div>
            <div>
              <span className="text-[10px] font-black uppercase tracking-[0.3em] opacity-80 mb-1 block">Engineering Data Sheet</span>
              <h2 className="text-3xl font-light tracking-tight flex items-center gap-3">
                {details.productName}
                <span className="h-6 w-[1px] bg-white/30 hidden sm:block"></span>
                <span className="text-sm font-mono bg-black/20 px-3 py-1 rounded-sm border border-white/10 uppercase">
                  ID: {details.modelNumber}
                </span>
              </h2>
            </div>
          </div>

          <button
            onClick={onClose}
            className="group flex items-center gap-2 p-2 hover:bg-white/10 transition-all border border-transparent hover:border-white/20"
          >
            <span className="text-[10px] uppercase font-bold tracking-widest hidden sm:block">Close</span>
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* Main Scrollable Content */}
        <div className="flex-1 overflow-y-auto p-6 sm:p-10 space-y-12">

          {/* Description Section: Clean & Focused */}
          <section className="max-w-3xl">
            <h3 className="text-[11px] font-black uppercase tracking-widest text-red-700 mb-4 flex items-center gap-2">
              <div className="w-8 h-[2px] bg-red-700"></div> Product Overview
            </h3>
            <p className="text-xl text-slate-600 font-light leading-relaxed italic">
              "{details.description}"
            </p>
          </section>

          {/* Specifications Grid: Precision Thin-Border Layout */}
          {Object.keys(details.specifications).length > 0 && (
            <section>
              <div className="flex items-center gap-3 mb-6">
                <Settings className="w-5 h-5 text-red-700" />
                <h3 className="text-[11px] font-black uppercase tracking-widest text-slate-900">Technical Parameters</h3>
                <div className="flex-1 h-[1px] bg-slate-100"></div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-slate-200 border border-slate-200 shadow-sm">
                {Object.entries(details.specifications).map(([key, value], idx) => (
                  value && (
                    <div key={idx} className="bg-white p-6 hover:bg-red-50/50 transition-colors">
                      <div className="text-[10px] font-bold text-slate-400 uppercase tracking-tighter mb-2">
                        {key.replace(/([A-Z])/g, ' $1').replace(/_/g, ' ').replace('Nm', ' (Nm)').replace('Lbf Ft', ' (lbf-ft)').replace('KN', ' (kN)').replace('Lbf', ' (lbf)')}
                      </div>
                      <div className="text-lg font-bold text-red-700">
                        {value}
                      </div>
                    </div>
                  )
                ))}
              </div>
            </section>
          )}

          {/* Key Features: Two Column Checklist */}
          {details.features.length > 0 && (
            <section>
              <h3 className="text-[11px] font-black uppercase tracking-widest text-slate-900 mb-6 flex items-center gap-2">
                <div className="w-8 h-[2px] bg-red-700"></div> Key Performance Features
              </h3>
              <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4">
                {details.features.map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-4 p-3 border-l-2 border-slate-100 hover:border-red-600 hover:bg-slate-50 transition-all group">
                    <span className="text-red-600 font-bold group-hover:scale-125 transition-transform">0{idx + 1}</span>
                    <span className="text-slate-700 text-sm leading-snug">{feature}</span>
                  </li>
                ))}
              </ul>
            </section>
          )}

          {/* Action Footer: Fixed at bottom for high visibility */}
          <div className="flex flex-col sm:flex-row gap-4 pt-10 border-t border-slate-100">
            <Button
              size="lg"
              className="flex-1 bg-red-700 hover:bg-red-800 text-white rounded-none py-8 text-sm uppercase tracking-[0.2em] font-bold shadow-lg shadow-red-900/20 transition-all"
              onClick={() => window.open(`/contact?model=${details.modelNumber}`, '_blank')}
            >
              <Calendar className="w-5 h-5 mr-3" />
              Request Quotation
            </Button>

            <Button
              size="lg"
              variant="outline"
              className="flex-1 border-slate-200 text-slate-500 hover:bg-slate-50 rounded-none py-8 text-sm uppercase tracking-[0.2em] font-bold"
              onClick={onClose}
            >
              Close Specification
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ===========================================================
   HD ACTUATOR – SERIES WISE MODELS
=========================================================== */
const hdSeriesModels = [
  {
    series: "A1 Series",
    models: ["A1-10", "A1-12", "A1-16", "A1-20"],
  },
  {
    series: "01 Series",
    models: ["01-10", "01-12", "01-16", "01-18", "01-20", "01-25"],
  },
  {
    series: "02 Series",
    models: ["02-20", "02-23", "02-25", "02-28", "02-30", "02-35", "02-38"],
  },
  {
    series: "03 Series",
    models: ["03-35", "03-38", "03-43", "03-48"],
  },
  {
    series: "04 Series",
    models: ["04-43", "04-48", "04-53", "04-58", "04-63"],
  },
  {
    series: "05 Series",
    models: ["05-43", "05-48", "05-53", "05-58", "05-63", "05-73"],
  },
  {
    series: "06 Series",
    models: ["06-53", "06-58", "06-63", "06-68", "06-73", "06-78", "06-83", "06-88"],
  },
  {
    series: "07 Series",
    models: ["07-73", "07-78", "07-83", "07-88", "07-93"],
  },
];

/* ===========================================================
   MAB SERIES – BEVEL GEAR ACTUATOR MODELS WITH DATA
=========================================================== */
const mabSeriesModels: SeriesModels[] = [
  {
    series: "Standard Models",
    models: [
      { name: "MAB-075", torqueNm: "250", torqueLbfFt: "184.39", thrustKN: "75", thrustLbf: "16860.67", gearRatio: "2.5:1", mechanicalAdvantage: "2.27", weight: "9.50", mounting: "F10", handwheel: "Ø300" },
      { name: "MAB-100", torqueNm: "420", torqueLbfFt: "309.78", thrustKN: "100", thrustLbf: "22480.89", gearRatio: "3:1", mechanicalAdvantage: "2.72", weight: "12.00", mounting: "F12", handwheel: "Ø300" },
      { name: "MAB-125", torqueNm: "700", torqueLbfFt: "516.29", thrustKN: "125", thrustLbf: "28101.12", gearRatio: "3.5:1", mechanicalAdvantage: "3.18", weight: "22.00", mounting: "F14", handwheel: "Ø400" },
      { name: "MAB-150", torqueNm: "1100", torqueLbfFt: "811.32", thrustKN: "150", thrustLbf: "33721.34", gearRatio: "3.75:1", mechanicalAdvantage: "3.40", weight: "30.00", mounting: "F16", handwheel: "Ø500" },
      { name: "MAB-200", torqueNm: "1600", torqueLbfFt: "1180.10", thrustKN: "200", thrustLbf: "44961.79", gearRatio: "4:1", mechanicalAdvantage: "3.63", weight: "34.00", mounting: "F16", handwheel: "Ø600" },
      { name: "MAB-300", torqueNm: "2500", torqueLbfFt: "1843.91", thrustKN: "300", thrustLbf: "67442.68", gearRatio: "5:1", mechanicalAdvantage: "4.62", weight: "70.00", mounting: "F25", handwheel: "Ø710" },
      { name: "MAB-350", torqueNm: "3800", torqueLbfFt: "2802.74", thrustKN: "350", thrustLbf: "78683.13", gearRatio: "5.5:1", mechanicalAdvantage: "5.24", weight: "95.00", mounting: "F35", handwheel: "Ø710" },
      { name: "MAB-400", torqueNm: "5600", torqueLbfFt: "4130.35", thrustKN: "400", thrustLbf: "89923.58", gearRatio: "6:1", mechanicalAdvantage: "5.70", weight: "130.00", mounting: "F35", handwheel: "Ø800" },
      { name: "MAB-500", torqueNm: "7800", torqueLbfFt: "5752.98", thrustKN: "500", thrustLbf: "112404.47", gearRatio: "6.5:1", mechanicalAdvantage: "6.19", weight: "175.00", mounting: "F40", handwheel: "Ø900" },
      { name: "MAB-1200", torqueNm: "12000", torqueLbfFt: "8850.75", thrustKN: "1200", thrustLbf: "269770.73", gearRatio: "7:1", mechanicalAdvantage: "6.70", weight: "195.00", mounting: "F40", handwheel: "Ø1000" },
      { name: "MAB-2500", torqueNm: "18000", torqueLbfFt: "13276.12", thrustKN: "2500", thrustLbf: "562022.36", gearRatio: "7.5:1", mechanicalAdvantage: "7.20", weight: "390.00", mounting: "F48", handwheel: "Ø1000" }
    ],
  },
  {
    series: "Single Stage Reduction",
    models: [
      { name: "MAB-125-1S", torqueNm: "700", torqueLbfFt: "516.29", thrustKN: "125", thrustLbf: "28101.12", gearRatio: "7:1", mechanicalAdvantage: "5.72", weight: "30.00", mounting: "F14", handwheel: "Ø400" },
      { name: "MAB-150-1S", torqueNm: "1100", torqueLbfFt: "811.32", thrustKN: "150", thrustLbf: "33721.34", gearRatio: "9.4:1", mechanicalAdvantage: "7.82", weight: "35.00", mounting: "F16", handwheel: "Ø400" },
      { name: "MAB-200-1S", torqueNm: "1600", torqueLbfFt: "1180.10", thrustKN: "200", thrustLbf: "44961.79", gearRatio: "12:1", mechanicalAdvantage: "10.16", weight: "40.00", mounting: "F16", handwheel: "Ø400" },
      { name: "MAB-300-1S", torqueNm: "2500", torqueLbfFt: "1843.91", thrustKN: "300", thrustLbf: "67442.68", gearRatio: "15:1", mechanicalAdvantage: "12.94", weight: "80.00", mounting: "F25", handwheel: "Ø500" },
      { name: "MAB-350-1S", torqueNm: "3800", torqueLbfFt: "2802.74", thrustKN: "350", thrustLbf: "78683.13", gearRatio: "16.5:1", mechanicalAdvantage: "14.67", weight: "105.00", mounting: "F35", handwheel: "Ø800" },
      { name: "MAB-400-1S", torqueNm: "5600", torqueLbfFt: "4130.35", thrustKN: "400", thrustLbf: "89923.58", gearRatio: "21:1", mechanicalAdvantage: "18.81", weight: "140.00", mounting: "F35", handwheel: "Ø800" },
      { name: "MAB-500-1S", torqueNm: "7800", torqueLbfFt: "5752.98", thrustKN: "500", thrustLbf: "112404.47", gearRatio: "22.75:1", mechanicalAdvantage: "20.43", weight: "189.00", mounting: "F40", handwheel: "Ø710" },
      { name: "MAB-1200-1S", torqueNm: "12000", torqueLbfFt: "8850.75", thrustKN: "1200", thrustLbf: "269770.73", gearRatio: "28:1", mechanicalAdvantage: "24.79", weight: "215.00", mounting: "F40", handwheel: "Ø710" },
      { name: "MAB-2500-1S", torqueNm: "18000", torqueLbfFt: "13276.12", thrustKN: "2500", thrustLbf: "562022.36", gearRatio: "30:1", mechanicalAdvantage: "26.64", weight: "430.00", mounting: "F48", handwheel: "Ø900" }
    ],
  },
  {
    series: "Double Stage Reduction",
    models: [
      { name: "MAB-150-2S", torqueNm: "1100", torqueLbfFt: "811.32", thrustKN: "150", thrustLbf: "33721.34", gearRatio: "15:1", mechanicalAdvantage: "11.02", weight: "40.00", mounting: "F16", handwheel: "Ø400" },
      { name: "MAB-200-2S", torqueNm: "1600", torqueLbfFt: "1180.10", thrustKN: "200", thrustLbf: "44961.79", gearRatio: "16:1", mechanicalAdvantage: "11.76", weight: "45.00", mounting: "F16", handwheel: "Ø400" },
      { name: "MAB-300-2S", torqueNm: "2500", torqueLbfFt: "1843.91", thrustKN: "300", thrustLbf: "67442.68", gearRatio: "45:1", mechanicalAdvantage: "36.22", weight: "85.00", mounting: "F25", handwheel: "Ø500" },
      { name: "MAB-350-2S", torqueNm: "3800", torqueLbfFt: "2802.74", thrustKN: "350", thrustLbf: "78683.13", gearRatio: "49.5:1", mechanicalAdvantage: "41.08", weight: "110.00", mounting: "F35", handwheel: "Ø800" },
      { name: "MAB-400-2S", torqueNm: "5600", torqueLbfFt: "4130.35", thrustKN: "400", thrustLbf: "89923.58", gearRatio: "73.5:1", mechanicalAdvantage: "62.07", weight: "150.00", mounting: "F35", handwheel: "Ø800" },
      { name: "MAB-500-2S", torqueNm: "7800", torqueLbfFt: "5752.98", thrustKN: "500", thrustLbf: "112404.47", gearRatio: "79.63:1", mechanicalAdvantage: "67.41", weight: "200.00", mounting: "F40", handwheel: "Ø710" },
      { name: "MAB-1200-2S", torqueNm: "12000", torqueLbfFt: "8850.75", thrustKN: "1200", thrustLbf: "269770.73", gearRatio: "112:1", mechanicalAdvantage: "91.72", weight: "230.00", mounting: "F40", handwheel: "Ø710" },
      { name: "MAB-2500-2S", torqueNm: "18000", torqueLbfFt: "13276.12", thrustKN: "2500", thrustLbf: "562022.36", gearRatio: "151.87:1", mechanicalAdvantage: "133.13", weight: "450.00", mounting: "F48", handwheel: "Ø900" }
    ],
  },
];

/* ===========================================================
   MAW SERIES – WORM GEAR ACTUATOR MODELS WITH DATA
=========================================================== */
const mawSeriesModels: SeriesModels[] = [
  {
    series: "Standard Models",
    models: [
      { name: "MAW-012", torqueNm: "125", torqueLbfFt: "92.20", gearRatio: "32:1", mechanicalAdvantage: "6.00", weight: "4", handwheel: "Ø100", turns: "8", mounting: "F05" },
      { name: "MAW-025", torqueNm: "250", torqueLbfFt: "184.40", gearRatio: "32:1", mechanicalAdvantage: "7.00", weight: "4.5", handwheel: "Ø200", turns: "8", mounting: "F07" },
      { name: "MAW-045", torqueNm: "450", torqueLbfFt: "331.90", gearRatio: "38:1", mechanicalAdvantage: "8.00", weight: "5.5", handwheel: "Ø250", turns: "9.5", mounting: "F10" },
      { name: "MAW-080", torqueNm: "800", torqueLbfFt: "590.00", gearRatio: "40:1", mechanicalAdvantage: "12.20", weight: "10", handwheel: "Ø400", turns: "10", mounting: "F12" },
      { name: "MAW-100", torqueNm: "1000", torqueLbfFt: "737.60", gearRatio: "40:1", mechanicalAdvantage: "12.20", weight: "11", handwheel: "Ø500", turns: "10", mounting: "F12" },
      { name: "MAW-200", torqueNm: "2000", torqueLbfFt: "1475.00", gearRatio: "42:1", mechanicalAdvantage: "12.50", weight: "20", handwheel: "Ø500", turns: "10.5", mounting: "F14" },
      { name: "MAW-300", torqueNm: "3000", torqueLbfFt: "2212.70", gearRatio: "52:1", mechanicalAdvantage: "16.50", weight: "33", handwheel: "Ø600", turns: "13", mounting: "F16" },
      { name: "MAW-400", torqueNm: "4000", torqueLbfFt: "2950.00", gearRatio: "56:1", mechanicalAdvantage: "16.50", weight: "43", handwheel: "Ø600", turns: "14", mounting: "F20" },
      { name: "MAW-650", torqueNm: "6500", torqueLbfFt: "4794.00", gearRatio: "52:1", mechanicalAdvantage: "17.50", weight: "57", handwheel: "Ø600", turns: "13", mounting: "F20" },
      { name: "MAW-900", torqueNm: "9000", torqueLbfFt: "6638.00", gearRatio: "66:1", mechanicalAdvantage: "20.00", weight: "88", handwheel: "Ø710", turns: "16.5", mounting: "F25" },
      { name: "MAW-1200", torqueNm: "12000", torqueLbfFt: "8851.00", gearRatio: "68:1", mechanicalAdvantage: "20.50", weight: "100", handwheel: "Ø710", turns: "17", mounting: "F30" },
      { name: "MAW-1500", torqueNm: "15000", torqueLbfFt: "11063.00", gearRatio: "60:1", mechanicalAdvantage: "21.00", weight: "130", handwheel: "Ø800", turns: "15", mounting: "F30" },
      { name: "MAW-1800", torqueNm: "18000", torqueLbfFt: "13276.00", gearRatio: "62:1", mechanicalAdvantage: "21.00", weight: "160", handwheel: "Ø850", turns: "15.5", mounting: "F30" },
      { name: "MAW-2400", torqueNm: "24000", torqueLbfFt: "17701.00", gearRatio: "56:1", mechanicalAdvantage: "21.00", weight: "190", handwheel: "Ø900", turns: "14", mounting: "F35" },
      { name: "MAW-3200", torqueNm: "32000", torqueLbfFt: "23602.00", gearRatio: "58:1", mechanicalAdvantage: "22.00", weight: "235", handwheel: "Ø900", turns: "14.5", mounting: "F35" }
    ],
  },
  {
    series: "Single Stage Reduction",
    models: [
      { name: "MAW-300-1S", torqueNm: "3000", torqueLbfFt: "2212.70", gearRatio: "102:1", mechanicalAdvantage: "29.70", weight: "42", handwheel: "Ø600", turns: "25.5", mounting: "F16" },
      { name: "MAW-400-1S", torqueNm: "4000", torqueLbfFt: "2950.00", gearRatio: "144:1", mechanicalAdvantage: "37.46", weight: "53", handwheel: "Ø600", turns: "36", mounting: "F20" },
      { name: "MAW-650-1S", torqueNm: "6500", torqueLbfFt: "4794.00", gearRatio: "156:1", mechanicalAdvantage: "49.00", weight: "67", handwheel: "Ø600", turns: "39", mounting: "F20" },
      { name: "MAW-900-1S", torqueNm: "9000", torqueLbfFt: "6638.00", gearRatio: "198:1", mechanicalAdvantage: "56.00", weight: "98", handwheel: "Ø710", turns: "49.5", mounting: "F25" },
      { name: "MAW-1200-1S", torqueNm: "12000", torqueLbfFt: "8851.00", gearRatio: "204:1", mechanicalAdvantage: "57.40", weight: "110", handwheel: "Ø710", turns: "51", mounting: "F30" },
      { name: "MAW-1500-1S", torqueNm: "15000", torqueLbfFt: "11063.00", gearRatio: "240:1", mechanicalAdvantage: "79.80", weight: "140", handwheel: "Ø850", turns: "60", mounting: "F30" },
      { name: "MAW-1800-1S", torqueNm: "18000", torqueLbfFt: "13276.00", gearRatio: "248:1", mechanicalAdvantage: "79.80", weight: "165", handwheel: "Ø850", turns: "62", mounting: "F35" },
      { name: "MAW-2400-1S", torqueNm: "24000", torqueLbfFt: "17701.00", gearRatio: "224:1", mechanicalAdvantage: "79.80", weight: "210", handwheel: "Ø900", turns: "56", mounting: "F35" },
      { name: "MAW-3200-1S", torqueNm: "32000", torqueLbfFt: "23602.00", gearRatio: "232:1", mechanicalAdvantage: "83.60", weight: "225", handwheel: "Ø900", turns: "58", mounting: "F35" }
    ],
  },
  {
    series: "Double Stage Reduction",
    models: [
      { name: "MAW-900-2S", torqueNm: "9000", torqueLbfFt: "6638.00", gearRatio: "594:1", mechanicalAdvantage: "156.8", weight: "108", handwheel: "Ø710", turns: "148.5", mounting: "F25" },
      { name: "MAW-1200-2S", torqueNm: "12000", torqueLbfFt: "8851.00", gearRatio: "612:1", mechanicalAdvantage: "160.72", weight: "118", handwheel: "Ø710", turns: "153", mounting: "F30" },
      { name: "MAW-1500-2S", torqueNm: "15000", torqueLbfFt: "11063.00", gearRatio: "528:1", mechanicalAdvantage: "164.64", weight: "135", handwheel: "Ø850", turns: "132", mounting: "F30" },
      { name: "MAW-1800-2S", torqueNm: "18000", torqueLbfFt: "13276.00", gearRatio: "992:1", mechanicalAdvantage: "303.24", weight: "188", handwheel: "Ø850", turns: "248", mounting: "F35" },
      { name: "MAW-2400-2S", torqueNm: "24000", torqueLbfFt: "17701.00", gearRatio: "896:1", mechanicalAdvantage: "303.24", weight: "210", handwheel: "Ø900", turns: "224", mounting: "F35" },
      { name: "MAW-3200-2S", torqueNm: "32000", torqueLbfFt: "23602.00", gearRatio: "928:1", mechanicalAdvantage: "317.680", weight: "270", handwheel: "Ø900", turns: "232", mounting: "F35" }
    ],
  },
];

/* ===========================================================
   ITG SERIES – DECLUTCHABLE WORM GEAR MODELS WITH DATA
=========================================================== */
const itgSeriesModels: SeriesModels[] = [
  {
    series: "Standard Models",
    models: [
      { name: "ITG-012", torqueNm: "60", torqueLbfFt: "44.25", gearRatio: "30:1", mechanicalAdvantage: "6.00", weight: "4.5", handwheel: "Ø100", turns: "7.5", mounting: "F05" },
      { name: "ITG-025", torqueNm: "125", torqueLbfFt: "92.20", gearRatio: "36:1", mechanicalAdvantage: "7.00", weight: "5", handwheel: "Ø200", turns: "9", mounting: "F07" },
      { name: "ITG-045", torqueNm: "300", torqueLbfFt: "221.27", gearRatio: "40:1", mechanicalAdvantage: "8.00", weight: "5.5", handwheel: "Ø250", turns: "10", mounting: "F10" },
      { name: "ITG-080", torqueNm: "650", torqueLbfFt: "479.42", gearRatio: "36:1", mechanicalAdvantage: "10.00", weight: "14.5", handwheel: "Ø400", turns: "9", mounting: "F12" },
      { name: "ITG-100", torqueNm: "800", torqueLbfFt: "590.05", gearRatio: "36:1", mechanicalAdvantage: "10.00", weight: "15", handwheel: "Ø500", turns: "9", mounting: "F12" },
      { name: "ITG-200", torqueNm: "1600", torqueLbfFt: "1180.10", gearRatio: "40:1", mechanicalAdvantage: "11.00", weight: "25", handwheel: "Ø500", turns: "10", mounting: "F14" },
      { name: "ITG-300", torqueNm: "2600", torqueLbfFt: "1917.66", gearRatio: "52:1", mechanicalAdvantage: "16.50", weight: "39", handwheel: "Ø600", turns: "13", mounting: "F16" },
      { name: "ITG-400", torqueNm: "3600", torqueLbfFt: "2655.22", gearRatio: "52:1", mechanicalAdvantage: "16.50", weight: "57", handwheel: "Ø600", turns: "13", mounting: "F16" },
      { name: "ITG-650", torqueNm: "5600", torqueLbfFt: "4130.35", gearRatio: "48:1", mechanicalAdvantage: "17.00", weight: "67", handwheel: "Ø600", turns: "12", mounting: "F20" },
      { name: "ITG-900", torqueNm: "8000", torqueLbfFt: "5900.50", gearRatio: "62:1", mechanicalAdvantage: "18.50", weight: "110", handwheel: "Ø710", turns: "15.5", mounting: "F25" },
      { name: "ITG-1200", torqueNm: "10500", torqueLbfFt: "7744.40", gearRatio: "68:1", mechanicalAdvantage: "19.50", weight: "121", handwheel: "Ø710", turns: "17", mounting: "F30" },
      { name: "ITG-1500", torqueNm: "13500", torqueLbfFt: "9957.09", gearRatio: "58:1", mechanicalAdvantage: "20.00", weight: "135", handwheel: "Ø500", turns: "14.5", mounting: "F30" },
      { name: "ITG-1800", torqueNm: "16000", torqueLbfFt: "11800.99", gearRatio: "62:1", mechanicalAdvantage: "20.00", weight: "155", handwheel: "Ø500", turns: "15.5", mounting: "F30" },
      { name: "ITG-2400", torqueNm: "21000", torqueLbfFt: "15488.81", gearRatio: "56:1", mechanicalAdvantage: "20.00", weight: "180", handwheel: "Ø500", turns: "14", mounting: "F35" },
      { name: "ITG-3200", torqueNm: "28000", torqueLbfFt: "20651.74", gearRatio: "58:1", mechanicalAdvantage: "21.00", weight: "230", handwheel: "Ø500", turns: "14.5", mounting: "F35" }
    ],
  },
  {
    series: "Single Stage Reduction",
    models: [
      { name: "ITG-400-1S", torqueNm: "3600", torqueLbfFt: "2655.22", gearRatio: "130:1", mechanicalAdvantage: "37.46", weight: "67", handwheel: "Ø600", turns: "32.5", mounting: "F16" },
      { name: "ITG-650-1S", torqueNm: "5600", torqueLbfFt: "4130.35", gearRatio: "144:1", mechanicalAdvantage: "47.60", weight: "77", handwheel: "Ø600", turns: "36", mounting: "F20" },
      { name: "ITG-900-1S", torqueNm: "8000", torqueLbfFt: "5900.50", gearRatio: "186:1", mechanicalAdvantage: "51.80", weight: "120", handwheel: "Ø710", turns: "46.5", mounting: "F25" },
      { name: "ITG-1200-1S", torqueNm: "10500", torqueLbfFt: "7744.40", gearRatio: "204:1", mechanicalAdvantage: "54.60", weight: "131", handwheel: "Ø710", turns: "51", mounting: "F30" },
      { name: "ITG-1500-1S", torqueNm: "13500", torqueLbfFt: "9957.09", gearRatio: "232:1", mechanicalAdvantage: "76.00", weight: "145", handwheel: "Ø500", turns: "58", mounting: "F30" },
      { name: "ITG-1800-1S", torqueNm: "16000", torqueLbfFt: "11800.99", gearRatio: "248:1", mechanicalAdvantage: "76.00", weight: "170", handwheel: "Ø500", turns: "62", mounting: "F35" },
      { name: "ITG-2400-1S", torqueNm: "21000", torqueLbfFt: "15488.81", gearRatio: "224:1", mechanicalAdvantage: "76.00", weight: "205", handwheel: "Ø500", turns: "56", mounting: "F35" },
      { name: "ITG-3200-1S", torqueNm: "28000", torqueLbfFt: "20651.74", gearRatio: "232:1", mechanicalAdvantage: "79.80", weight: "240", handwheel: "Ø500", turns: "58", mounting: "F35" }
    ],
  },
  {
    series: "Double Stage Reduction",
    models: [
      { name: "ITG-900-2S", torqueNm: "8000", torqueLbfFt: "5900.50", gearRatio: "558:1", mechanicalAdvantage: "145.04", weight: "135", handwheel: "Ø710", turns: "139.5", mounting: "F25" },
      { name: "ITG-1200-2S", torqueNm: "10500", torqueLbfFt: "7744.40", gearRatio: "612:1", mechanicalAdvantage: "152.88", weight: "141", handwheel: "Ø710", turns: "153", mounting: "F30" },
      { name: "ITG-1500-2S", torqueNm: "13500", torqueLbfFt: "9957.09", gearRatio: "522:1", mechanicalAdvantage: "156.80", weight: "155", handwheel: "Ø500", turns: "130.5", mounting: "F30" },
      { name: "ITG-1800-2S", torqueNm: "16000", torqueLbfFt: "11800.99", gearRatio: "992:1", mechanicalAdvantage: "288.80", weight: "188", handwheel: "Ø500", turns: "248", mounting: "F35" },
      { name: "ITG-2400-2S", torqueNm: "21000", torqueLbfFt: "15488.81", gearRatio: "896:1", mechanicalAdvantage: "288.80", weight: "215", handwheel: "Ø500", turns: "224", mounting: "F35" },
      { name: "ITG-3200-2S", torqueNm: "28000", torqueLbfFt: "20651.74", gearRatio: "928:1", mechanicalAdvantage: "303.24", weight: "270", handwheel: "Ø500", turns: "232", mounting: "F35" }
    ],
  },
];

/* ===========================================================
   MTG SERIES – MECHANICAL ACTUATOR MODELS WITH DATA
=========================================================== */
const mtgSeriesModels: SeriesModels[] = [
  {
    series: "Standard Models",
    models: [
      { name: "MTG-100", torqueNm: "1000", torqueLbfFt: "737.60", thrustKN: "160", thrustLbf: "35969.43", gearRatio: "20:1", mechanicalAdvantage: "9.20", weight: "14", handwheel: "Ø400", mounting: "F12" },
      { name: "MTG-200", torqueNm: "2000", torqueLbfFt: "1475.00", thrustKN: "240", thrustLbf: "53954.15", gearRatio: "21:1", mechanicalAdvantage: "9.50", weight: "27", handwheel: "Ø710", mounting: "F14" },
      { name: "MTG-300", torqueNm: "3000", torqueLbfFt: "2212.70", thrustKN: "290", thrustLbf: "65194.59", gearRatio: "26:1", mechanicalAdvantage: "11.50", weight: "37", handwheel: "Ø710", mounting: "F16" },
      { name: "MTG-400", torqueNm: "4000", torqueLbfFt: "2950.00", thrustKN: "380", thrustLbf: "85427.40", gearRatio: "28:1", mechanicalAdvantage: "11.50", weight: "43", handwheel: "Ø710", mounting: "F20" },
      { name: "MTG-650", torqueNm: "6500", torqueLbfFt: "4794.00", thrustKN: "600", thrustLbf: "134885.37", gearRatio: "26:1", mechanicalAdvantage: "12.00", weight: "65", handwheel: "Ø710", mounting: "F20" },
      { name: "MTG-900", torqueNm: "9000", torqueLbfFt: "6638.00", thrustKN: "870", thrustLbf: "195583.78", gearRatio: "33:1", mechanicalAdvantage: "14.00", weight: "88", handwheel: "Ø710", mounting: "F25" },
      { name: "MTG-1200", torqueNm: "12000", torqueLbfFt: "8851.00", thrustKN: "1100", thrustLbf: "247289.84", gearRatio: "34:1", mechanicalAdvantage: "14.50", weight: "100", handwheel: "Ø800", mounting: "F30" },
      { name: "MTG-1800", torqueNm: "18000", torqueLbfFt: "13276.00", thrustKN: "1800", thrustLbf: "404656.10", gearRatio: "31:1", mechanicalAdvantage: "15.00", weight: "160", handwheel: "Ø850", mounting: "F30" }
    ],
  },
  {
    series: "Single Stage Reduction",
    models: [
      { name: "MTG-300-1S", torqueNm: "3000", torqueLbfFt: "2212.70", thrustKN: "290", thrustLbf: "65194.59", gearRatio: "65:1", mechanicalAdvantage: "25.30", weight: "50", handwheel: "Ø710", mounting: "F16" },
      { name: "MTG-400-1S", torqueNm: "4000", torqueLbfFt: "2950.00", thrustKN: "380", thrustLbf: "85427.40", gearRatio: "70:1", mechanicalAdvantage: "25.30", weight: "55", handwheel: "Ø710", mounting: "F20" },
      { name: "MTG-650-1S", torqueNm: "6500", torqueLbfFt: "4794.00", thrustKN: "600", thrustLbf: "134885.37", gearRatio: "60:1", mechanicalAdvantage: "33.60", weight: "75", handwheel: "Ø710", mounting: "F20" },
      { name: "MTG-900-1S", torqueNm: "9000", torqueLbfFt: "6638.00", thrustKN: "870", thrustLbf: "195583.78", gearRatio: "99:1", mechanicalAdvantage: "39.20", weight: "98", handwheel: "Ø710", mounting: "F25" },
      { name: "MTG-1200-1S", torqueNm: "12000", torqueLbfFt: "8851.00", thrustKN: "1100", thrustLbf: "247289.84", gearRatio: "102:1", mechanicalAdvantage: "40.60", weight: "110", handwheel: "Ø710", mounting: "F30" }
    ],
  },
  {
    series: "Double Stage Reduction",
    models: [
      { name: "MTG-900-2S", torqueNm: "9000", torqueLbfFt: "6638.00", thrustKN: "870", thrustLbf: "195583.78", gearRatio: "297:1", mechanicalAdvantage: "109.76", weight: "108", handwheel: "Ø710", mounting: "F25" },
      { name: "MTG-1200-2S", torqueNm: "12000", torqueLbfFt: "8851.00", thrustKN: "1100", thrustLbf: "247289.84", gearRatio: "306:1", mechanicalAdvantage: "113.68", weight: "118", handwheel: "Ø710", mounting: "F30" },
      { name: "MTG-1800-2S", torqueNm: "18000", torqueLbfFt: "13276.00", thrustKN: "1800", thrustLbf: "404656.10", gearRatio: "279:1", mechanicalAdvantage: "109.35", weight: "188", handwheel: "Ø800", mounting: "F30" }
    ],
  },
];

/* ===========================================================
   PRODUCT DATA
   =========================================================== */
const pneumaticProducts: Product[] = [
  {
    id: "pds-rotary",
    name: "PDS Actuator (Rotary)",
    type: "Pneumatic",
    image: pneumaticPds,
    models: ["PDS 45", "PDS 50", "PDS 55", "PDS 70", "PDS 75", "PDS 85", "PDS 100", "PDS 125", "PDS 160", "PDS 200"],
    description:
      "We specialize in providing the best & reliable flow control solutions in the most challenging environments. PDS series Pneumatic Actuators are designed using Scotch-Yoke technology for superior torque.",
    torque: "5 Nm - 5,000 Nm",
    features: [
      "Scotch-Yoke mechanism for high break-out torque",
      "Hard anodized aluminum body for corrosion resistance",
      "Operating pressure: 3.5 - 8 Bar",
      "Temperature range: -20°C to +80°C",
      "Adjustable travel stops ±5°",
      "Pre-compressed spring packages for safety",
      "ISO 5211, NAMUR & VDI/VDE 3845 compliant",
      "SIL 3 Capable (IEC 61508)"
    ],
    applications: ["Oil & Gas", "Chemical Processing", "Power Plants", "Water Treatment", "Food & Beverage"],
    certifications: ["ATEX", "SIL 3", "PED", "ISO 9001", "IP67"],
    seriesLinks: [
      { label: "PD Series (Double Acting)", path: "/products/pds-rotary/pd-series" },
      { label: "PS Series (Single Acting)", path: "/products/pds-rotary/ps-series" }
    ]
  },
  {
    id: "hd-rotary",
    name: "HD Actuator (Rotary)",
    type: "Pneumatic",
    image: pneumaticHd,
    models: [
      "02-20", "02-25", "02-30", "02-35", "03-35", "03-38", "03-43",
      "04-43", "04-48", "04-53", "05-53", "05-58", "05-63",
      "06-63", "06-68", "06-73"
    ],
    description:
      "Our flagship heavy-duty scotch yoke actuators deliver exceptional torque for the most demanding valve automation applications.",
    torque: "200 Nm - 120,867 Nm",
    features: [
      "High torque capacity up to 120,867 Nm",
      "Extended service life (>2 million cycles)",
      "Operating pressure: 2.8 - 10 bar",
      "Spring return or double acting configurations",
      "Custom bracket designs for any valve",
      "Ideal for ball, butterfly & plug valves",
      "ATEX/IECEx certified for hazardous areas",
      "Corrosion-resistant coating options"
    ],
    applications: ["Oil & Gas", "Power Generation", "Petrochemical", "Offshore FPSO"],
    certifications: ["ISO 5211", "NAMUR", "ATEX", "API 609"],
    seriesLinks: [
      { label: "ISD Series", path: "/products/hd-rotary/isd-series" },
      { label: "ICD Series", path: "/products/hd-rotary/icd-series" },
      { label: "ISR Series", path: "/products/hd-rotary/isr-series" },
      { label: "ICR Series", path: "/products/hd-rotary/icr-series" }
    ]
  },
  {
    id: "plds-linear",
    name: "PLDS Actuator (Linear)",
    type: "Pneumatic",
    image: pneumaticPlds,
    models: ["PLDS-100", "PLDS-125", "PLDS-160", "PLDS-200", "PLDS-250", "PLDS-300"],
    description:
      "The PLDS series of Pneumatic Linear Double Acting Cylinders are meticulously designed to provide superior performance for tasks requiring precise linear motion control.",
    thrust: "1 KN - 500 KN",
    features: [
      "Double Acting & Spring Return configurations",
      "Bore sizes from 100mm to 980mm",
      "Operating Pressure: 2.8 to 10 Bar",
      "High thrust capability for Gate & Globe valves",
      "Standard Temp: -20°C to +80°C (Options up to +100°C)",
      "Hard chrome plated piston rod for durability",
      "Manual override options: Hydraulic or Gearbox",
      "Field reversible action (Fail Open/Close)"
    ],
    applications: ["Linear Valve Automation (Gate/Globe)", "Dampers", "Material Handling", "Power Generation"],
    certifications: ["SIL 3", "ATEX", "PED", "IP66/IP67"],
    seriesLinks: [
      { label: "PLD Series", path: "/products/plds-linear/pld-series" },
      { label: "PLS Series", path: "/products/plds-linear/pls-series" }
    ]
  },
  {
    id: "mplds-linear",
    name: "MPLDS Actuator (Linear)",
    type: "Pneumatic",
    image: pneumaticMplds,
    models: ["50mm", "75mm", "100mm", "150mm", "200mm", "250mm"],
    description:
      "The MPLDS series of Micro Pneumatic Double Acting Linear Cylinders are designed for precision and compact applications where space is limited but performance cannot be compromised.",
    thrust: "1 KN - 50 KN",
    features: [
      "Micro cylinder design for tight spaces",
      "Double Acting mechanism for controlled motion",
      "Operating Pressure: 2.1 to 6.2 Bar",
      "Standard Temperature: -10°C to +60°C",
      "IP66 Protection against dust and water",
      "High-quality construction for long service life",
      "Ideal for fine automation systems",
      "Modular design for easy maintenance"
    ],
    applications: ["Fine Automation", "Small-scale Machinery", "Linear Valve Control", "Material Handling"],
    certifications: ["IP66", "ISO 9001", "CE"],
    seriesLinks: [
      { label: "MPLD Series", path: "/products/mplds-linear/mpld-series" },
      { label: "MPLS Series", path: "/products/mplds-linear/mpls-series" }
    ]
  },
];

const electricalProducts: Product[] = [
  {
    id: "itq-rotary",
    name: "ITQ SERIES (Rotary)",
    type: "Electrical",
    image: electricalItq,
    models: ["ITQ 0020 (25Nm)", "ITQ 0040 (40Nm)", "ITQ 0080 (80Nm)"],
    description:
      "A compact and robust quarter-turn electric actuator designed for the automation of ball, butterfly, and plug valves. Features a self-locking double worm gear drive and advanced control options.",
    torque: "25 Nm - 9,000 Nm",
    features: [
      "Hard anodized aluminum housing with powder coating",
      "Self-locking double worm gearing (no brake required)",
      "Auto-declutching manual override handwheel",
      "Weatherproof IP67 enclosure (IP68 optional)",
      "High starting torque induction motor",
      "Mechanical torque sensing system",
      "Modulating control options (4-20mA, 0-10V)",
      "ISO 5211 mounting base for easy installation"
    ],
    applications: ["Water Treatment", "Chemical Processing", "HVAC Automation", "Power Plants", "Oil & Gas"],
    certifications: ["IP67", "IP68", "ATEX", "ISO 9001", "CE"]
  },
  {
    id: "iql-linear",
    name: "IQL SERIES (Linear)",
    type: "Electrical",
    image: electricalIql,
    models: ["IQL 04", "IQL 06", "IQL 08", "IQL 10", "IQL 12", "IQL 20", "IQL 25"],
    description:
      "A robust linear electric actuator designed for precise modulating control of globe and control valves. Features intelligent positioning, fail-safe options, and a high thrust capacity.",
    thrust: "4 KN - 25 KN",
    features: [
      "Wide thrust range from 4 KN to 25 KN",
      "Stroke range: 40mm to 100mm",
      "Modulating control (4-20mA / 0-10V)",
      "Weatherproof IP66 enclosure (IP68 optional)",
      "Auto-declutching manual override handwheel",
      "Digital display for position monitoring",
      "Mechanical thrust sensing system for overload protection",
      "Battery backup for fail-safe operation"
    ],
    applications: ["Globe Control Valves", "Gate Valves", "Damper Automation", "Power Plants", "Water Treatment"],
    certifications: ["CE", "IP66", "IP68", "Ex d II B T4", "ISO 9001"]
  },
  {
    id: "itl-linear",
    name: "ITL SERIES (Linear)",
    type: "Electrical",
    image: electricalItl,
    models: ["ITL01", "ITL02", "ITL04", "ITL06"],
    description:
      "A compact and powerful linear electric actuator featuring a 100% duty cycle motor. Designed for high-frequency modulating control in sophisticated automation systems.",
    thrust: "1 KN - 6 KN",
    features: [
      "100% Duty Cycle (Continuous Duty) Motor",
      "Thrust range: 1 KN to 6 KN",
      "Stroke range: 20mm to 50mm",
      "Compact design with hard anodized aluminum housing",
      "Input/Output Isolation for signal safety",
      "Built-in manual override with storable handwheel",
      "Wide voltage support (AC 100-240V, DC 24V)",
      "High resolution position control (4-20mA / 0-10V)"
    ],
    applications: ["Control Valves (2-way/3-way)", "Industrial Dampers", "Process Automation", "High-Frequency Modulation"],
    certifications: ["IP67", "CE", "ISO 9001"]
  },
  {
    id: "itm-multiturn",
    name: "ITM SERIES (Multiturn)",
    type: "Electrical",
    image: electricalItm,
    models: ["ITM 0180", "ITM 0450", "ITM 0750", "ITM 1800", "ITM 3000"],
    description:
      "A high-efficiency multi-turn electric actuator designed for gate and globe valves. Features a digitalized torque sensing system and robust IP68 watertight enclosure.",
    torque: "177 Nm - 3,000 Nm",
    features: [
      "Digitalized torque sensing system (30-100% adjustable)",
      "Watertight IP68 enclosure (10m for 100 hours)",
      "High efficiency motor with thermal protection",
      "Top-mounted handwheel for easy manual operation",
      "Battery backup for position detecting system",
      "Fieldbus communication (Profibus, CANopen)",
      "Explosion-proof Ex d II C T4 option available",
      "Non-intrusive setting via remote control"
    ],
    applications: ["Gate Valves", "Globe Valves", "Sluice Gates", "Penstocks", "Power Plants"],
    certifications: ["IP68", "Ex d II C T4", "CE", "ISO 9001"]
  },
];

const mechanicalProducts: Product[] = [
  {
    id: "bevel-gear",
    name: "BEVEL GEAR ACTUATORS (MAB Series)",
    type: "Mechanical",
    image: mechanicalBevel,
    models: mabSeriesModels.flatMap(series => series.models.map(m => m.name)),
    description:
      "Precision bevel gear actuator for manual multi-turn valve operation (Gate/Globe). Designed for high efficiency, smooth transmission, and heavy-duty industrial applications.",
    torque: "250 Nm - 18,000 Nm",
    thrust: "75 KN - 2,500 KN",
    features: [
      "Ductile Iron housing for superior strength",
      "Output torque range: 250 to 18,000 Nm with gear reduction",
      "Output thrust range: 75 to 2,500 KN",
      "IP Rating: IP55, IP65, IP67M, IP68",
      "Temperature range: -20°C to +80°C (Standard)",
      "Extended temperature: -45°C to +120°C (Optional)",
      "Housing: Ductile Iron / Cast Iron (Optional)",
      "Input Shaft: Steel / Stainless Steel (Optional)",
      "Easy replaceable splined stem bush",
      "Dual locknuts for stem bush movement arrest",
      "ISO 5210 valve mounting standard",
      "Motorizable with ISO-5210 MOV flange"
    ],
    applications: ["Oil & Gas", "Power Plants", "Water Treatment", "Marine", "Steel Industry", "Processing Facilities"],
    certifications: ["ISO 9001", "IP67", "IP68", "ISO 5210"],
    seriesLinks: [
      { label: "MAB Series", path: "/products/bevel-gear/mab-series" }
    ]
  },
  {
    id: "worm-gear",
    name: "WORM GEAR ACTUATORS",
    type: "Mechanical",
    image: mechanicalWorm,
    models: [
      ...mawSeriesModels.flatMap(series => series.models.map(m => m.name)),
      ...itgSeriesModels.flatMap(series => series.models.map(m => m.name)),
      ...mtgSeriesModels.flatMap(series => series.models.map(m => m.name))
    ],
    description:
      "Comprehensive range of worm gear actuators including MAW, ITG, and MTG series. Designed for manual quarter-turn valve operations with rugged construction and high-performance gearing.",
    torque: "60 Nm - 32,000 Nm",
    features: [
      "Rugged Ductile Iron housing (Cast Iron optional)",
      "Torque output range: 60 to 32,000 Nm",
      "±5° stroke adjustment capability",
      "IP Rating: IP54, IP55, IP65, IP67M",
      "Temperature range: -20°C to +85°C (Standard)",
      "Low temperature option: -45°C to +120°C",
      "Self-locking worm gear design for safety",
      "Steel input shaft (Stainless Steel optional)",
      "Epoxy & PU coating for corrosion resistance",
      "Bearing construction for smooth operation",
      "Splined bushing for accurate valve stem alignment",
      "MOV flange for electric actuator mounting (ISO-5210)",
      "Ideal for ball, butterfly, plug valves & dampers"
    ],
    applications: ["Ball Valves", "Butterfly Valves", "Plug Valves", "Dampers", "HVAC Systems", "Water Works", "Chemical", "Power"],
    certifications: ["IP67", "IP68", "ISO 5211", "ISO 9001"],
    seriesLinks: [
      { label: "MAW Series", path: "/products/worm-gear/maw-series" },
      { label: "ITG Series", path: "/products/worm-gear/itg-series" },
      { label: "MTG Series", path: "/products/worm-gear/mtg-series" }
    ]
  },
];

const accessoryProducts: Product[] = [
  {
    id: "its-series",
    name: "ITS Series Components",
    type: "Accessories",
    image: accessoriesIt,
    models: ["ITS 100", "ITS 300", "ITS 500"],
    description:
      "Precision-engineered position monitoring switches for rotary actuators. Features robust weatherproof and explosion-proof housings with visual indicators for reliable valve status feedback.",
    features: [
      "Rugged aluminum or stainless steel housing options",
      "Visual dome indicator for 0°-90° position",
      "Weatherproof (IP67) and Explosion-proof (Ex d IIC T6) versions",
      "2-SPDT mechanical switches or proximity sensors",
      "NAMUR standard shaft for easy mounting",
      "Corrosion-resistant epoxy-polyester coating",
      "Wide operating temperature range (-20°C to +80°C)",
      "Multiple cable entry options (NPT, PF, M20)"
    ],
    applications: ["Chemical Plants", "Oil & Gas", "Water Treatment", "Power Generation", "Process Automation"],
    certifications: ["IP67", "IP68", "ATEX (Ex d IIC T6)", "IECEx", "CE"],
    seriesLinks: [
      { label: "View IT Series", path: "/products/it-series" }
    ]
  },
  {
    id: "handwheels",
    name: "Handwheels",
    type: "Accessories",
    image: accessoriesHandwheels,
    models: ["100mm - 500mm (Chain)", "200mm - 400mm (Cast)", "200mm - 1000mm (Fab)"],
    description:
      "Ergonomic manual override handwheels available in Casting, Fabricated, and Chain Wheel designs. Engineered for smooth operation and durability in harsh industrial environments.",
    features: [
      "Available in Casting, Fabricated, and Chain Wheel types",
      "Size range: 100mm to 1000mm (4\" to 40\")",
      "Epoxy or Powder coated finish (RAL 5015/3011)",
      "Stainless Steel chain options for corrosive areas",
      "Keyed, Pinned, or Squared drive connections",
      "Optional locking plates and visual indicators",
      "Rugged construction for high torque transmission"
    ],
    applications: ["Manual Valve Override", "Gearbox Operation", "High-Reach Valve Control (Chain Wheels)", "Industrial Automation"],
    certifications: ["ISO 9001", "ISO 12944-2 (Painting)"]
  },
];

const hydraulicProducts: Product[] = [
  {
    id: "hyd-rotary",
    name: "Electro-Hydraulic Rotary Actuator",
    type: "Hydraulic",
    image: hydraulicActuator,
    models: [
      "PANDA D10 – D130 (Low Pressure)",
      "PA D10 – D60 (High Pressure)"
    ],
    description:
      "Electro-hydraulic rotary actuators designed as a high-performance alternative to pneumatic and electric actuators. These compact units deliver very high torque density, fast response times, and near wear-free operation.",
    torque: "46 Nm – 10,000 Nm (Higher on request)",
    features: [
      "Electro-hydraulic compact actuator design",
      "Low pressure (PANDA) and high pressure (PA) variants",
      "Single acting (spring return – fail safe) or double acting",
      "Extremely high torque density with compact dimensions",
      "Near wear-free operation due to oil-lubricated components",
      "Fail-safe function via spring or hydraulic accumulator",
      "Adjustable stroke time via hydraulic throttle",
      "No gearbox – high efficiency, minimal power loss",
      "Block construction – no external piping required",
      "ISO 5211 & NAMUR mounting interface",
      "Suitable for continuous outdoor and marine environments"
    ],
    applications: [
      "Oil & Gas Onshore / Offshore",
      "Power Plants",
      "Water & Wastewater Treatment",
      "Chemical & Petrochemical Plants",
      "Steel & Heavy Industries",
      "Emergency Shut Down (ESD) Valves"
    ],
    certifications: [
      "ATEX (Zone 1 & 2)",
      "SIL 2 / SIL 3 (Configurable)",
      "Machinery Directive 2006/42/EC",
      "EN ISO 12100",
      "IP67 / IP68"
    ],
    seriesLinks: [
      {
        label: "PANDA Series – Low Pressure (up to 8 bar)",
        path: "/products/hydraulic-rotary/panda-series"
      },
      {
        label: "PA Series – High Pressure (up to 180 bar)",
        path: "/products/hydraulic-rotary/pa-series"
      }
    ]
  }
];

const allProducts = [
  ...pneumaticProducts,
  ...electricalProducts,
  ...mechanicalProducts,
  ...hydraulicProducts,
  ...accessoryProducts,
];

/* ===========================================================
   GET MODEL DETAILS FUNCTION - UPDATED WITH ALL SERIES
   =========================================================== */
const getModelDetails = (product: Product, modelNumber: string): ModelDetails => {
  // Base specifications
  const baseSpecs: ModelDetails['specifications'] = {
    model: modelNumber,
    type: product.type,
  };

  // Add product-specific specifications
  if (product.torque) baseSpecs.torqueNm = product.torque;
  if (product.thrust) baseSpecs.thrustKN = product.thrust;

  // MAB Series Specifications
  if (product.id === "bevel-gear" && modelNumber.includes("MAB")) {
    const allMabModels = mabSeriesModels.flatMap(series => series.models);
    const modelData = allMabModels.find(m => m.name === modelNumber);

    if (modelData && 'thrustKN' in modelData && 'thrustLbf' in modelData) {
      baseSpecs.torqueNm = `${modelData.torqueNm} Nm`;
      baseSpecs.torqueLbfFt = `${modelData.torqueLbfFt} lbf-ft`;
      baseSpecs.thrustKN = `${modelData.thrustKN} kN`;
      baseSpecs.thrustLbf = `${modelData.thrustLbf} lbf`;
      baseSpecs.gearRatio = modelData.gearRatio;
      baseSpecs.mechanicalAdvantage = modelData.mechanicalAdvantage;
      baseSpecs.weight = `${modelData.weight} kg`;
      baseSpecs.mounting = `ISO 5210 ${modelData.mounting}`;
      baseSpecs.handwheel = modelData.handwheel;
      baseSpecs.ipRating = "IP55, IP65, IP67M, IP68";
      baseSpecs.temperature = "-20°C to +80°C (Standard), -45°C to +120°C (Optional)";
    }
  }

  // Worm Gear Series Specifications (MAW, ITG, MTG)
  else if (product.id === "worm-gear") {
    // Check MAW Series
    const allMawModels = mawSeriesModels.flatMap(series => series.models);
    const mawModelData = allMawModels.find(m => m.name === modelNumber);

    // Check ITG Series
    const allItgModels = itgSeriesModels.flatMap(series => series.models);
    const itgModelData = allItgModels.find(m => m.name === modelNumber);

    // Check MTG Series
    const allMtgModels = mtgSeriesModels.flatMap(series => series.models);
    const mtgModelData = allMtgModels.find(m => m.name === modelNumber);

    const modelData = mawModelData || itgModelData || mtgModelData;

    if (modelData) {
      baseSpecs.torqueNm = `${modelData.torqueNm} Nm`;
      baseSpecs.torqueLbfFt = `${modelData.torqueLbfFt} lbf-ft`;

      // Add thrust for MTG series
      if ('thrustKN' in modelData && modelData.thrustKN && 'thrustLbf' in modelData && modelData.thrustLbf) {
        baseSpecs.thrustKN = `${modelData.thrustKN} kN`;
        baseSpecs.thrustLbf = `${modelData.thrustLbf} lbf`;
      }

      baseSpecs.gearRatio = modelData.gearRatio;
      baseSpecs.mechanicalAdvantage = modelData.mechanicalAdvantage;
      baseSpecs.weight = `${modelData.weight} kg`;
      baseSpecs.mounting = modelData.mounting ? `ISO 5211 ${modelData.mounting}` : undefined;
      baseSpecs.handwheel = modelData.handwheel;

      // Add turns for MAW and ITG series
      if ('turns' in modelData && modelData.turns) {
        baseSpecs.turns = modelData.turns;
      }

      if (modelNumber.includes("MAW") || modelNumber.includes("ITG")) {
        baseSpecs.ipRating = "IP54, IP55, IP65, IP67M";
        baseSpecs.temperature = "-20°C to +85°C (Standard), -45°C to +120°C (Optional)";
      } else if (modelNumber.includes("MTG")) {
        baseSpecs.ipRating = "IP65, IP67, IP67M";
      }
    }
  }

  // Other product types
  else {
    switch (product.id) {
      case "pds-rotary":
        baseSpecs.pressure = "3.5 - 8 Bar";
        baseSpecs.temperature = "-20°C to +80°C";
        baseSpecs.weight = "Based on model size";
        break;
      case "hd-rotary":
        baseSpecs.pressure = "2.8 - 10 Bar";
        baseSpecs.temperature = "-20°C to +120°C";
        baseSpecs.cycles = ">2 million cycles";
        break;
      case "itq-rotary":
        baseSpecs.protection = "IP67 / IP68";
        baseSpecs.mounting = "ISO 5211";
        baseSpecs.control = "4-20mA / 0-10V";
        break;
      case "iql-linear":
        baseSpecs.stroke = "40mm - 100mm";
        baseSpecs.protection = "IP66 / IP68";
        baseSpecs.control = "Modulating";
        break;
      case "hyd-rotary":
        baseSpecs.pressure = "8 - 180 Bar";
        baseSpecs.mounting = "ISO 5211 & NAMUR";
        baseSpecs.protection = "IP67 / IP68";
        break;
      default:
        baseSpecs.pressure = "Consult datasheet";
        baseSpecs.temperature = "Standard industrial range";
    }
  }

  return {
    modelNumber,
    productName: product.name,
    specifications: baseSpecs,
    description: `${modelNumber} is part of the ${product.name} series. ${product.description}`,
    features: product.features || [],
    datasheetUrl: `/datasheets/${product.id}-${modelNumber.toLowerCase().replace(/\s+/g, '-')}.pdf`,
    cadUrl: `/cad/${product.id}-${modelNumber.toLowerCase().replace(/\s+/g, '-')}.step`,
  };
};

/* ===========================================================
   PRODUCT ROW
   =========================================================== */
const ProductRow = ({ product, index }: { product: Product; index: number }) => {
  const navigate = useNavigate();
  const { ref, isVisible } = useScrollAnimation(0.1);
  const isReversed = index % 2 === 1;
  const [showAllModels, setShowAllModels] = useState(false);
  const [activeSeries, setActiveSeries] = useState<string | null>(null);
  const [selectedModelDetails, setSelectedModelDetails] = useState<ModelDetails | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  // Get the appropriate series models based on product ID
  const getSeriesModels = () => {
    switch (product.id) {
      case "hd-rotary":
        return hdSeriesModels;
      case "bevel-gear":
        return mabSeriesModels;
      case "worm-gear":
        // Return all worm gear series combined
        return [
          { series: "MAW Series", models: mawSeriesModels.flatMap(s => s.models.map(m => m.name)) },
          { series: "ITG Series", models: itgSeriesModels.flatMap(s => s.models.map(m => m.name)) },
          { series: "MTG Series", models: mtgSeriesModels.flatMap(s => s.models.map(m => m.name)) }
        ];
      default:
        return null;
    }
  };

  const seriesModels = getSeriesModels();
  const isSeriesProduct = seriesModels !== null;

  // Determine how many models to show initially for non-series products
  const initialModelCount = 6;
  const hasManyModels = !isSeriesProduct && product.models.length > initialModelCount;
  const displayModels = showAllModels
    ? product.models
    : product.models.slice(0, initialModelCount);

  const handleModelClick = (modelNumber: string) => {
    const details = getModelDetails(product, modelNumber);
    setSelectedModelDetails(details);
    setIsModalOpen(true);
  };

  // Get models for active series
  const getActiveSeriesModels = () => {
    if (!activeSeries || !seriesModels) return [];
    if (Array.isArray(seriesModels[0].models) && typeof seriesModels[0].models[0] === 'string') {
      // For HD series
      const series = seriesModels.find(s => s.series === activeSeries) as any;
      return series ? series.models : [];
    } else {
      // For other series
      const series = seriesModels.find(s => s.series === activeSeries) as SeriesModels;
      return series ? series.models.map(m => (m as ModelData).name) : [];
    }
  };

  // Get detailed model data for MAB series
  const getMabModelData = (modelName: string): ModelData | undefined => {
    const allMabModels = mabSeriesModels.flatMap(series => series.models);
    return allMabModels.find(m => m.name === modelName);
  };

  // Get detailed model data for worm gear series
  const getWormGearModelData = (modelName: string): ModelData | undefined => {
    const allMawModels = mawSeriesModels.flatMap(series => series.models);
    const allItgModels = itgSeriesModels.flatMap(series => series.models);
    const allMtgModels = mtgSeriesModels.flatMap(series => series.models);

    return allMawModels.find(m => m.name === modelName) ||
      allItgModels.find(m => m.name === modelName) ||
      allMtgModels.find(m => m.name === modelName);
  };

  return (
    <>
      <div
        id={product.id}
        ref={ref}
        className={`scroll-fade-in ${isVisible ? "visible" : ""} 
        relative z-0 py-12 md:py-24 px-4 md:px-12 border-b border-red-100/50 last:border-0 scroll-mt-24`}
      >
        <div
          className={`flex flex-col ${isReversed ? "lg:flex-row-reverse" : "lg:flex-row"
            } gap-12 lg:gap-20 items-center max-w-7xl mx-auto`}
        >
          {/* Product Image */}
          <div className="w-full lg:w-1/2 flex justify-center items-center">
            <img
              src={product.image}
              alt={product.name}
              className="w-full h-auto max-h-[300px] md:max-h-[500px] object-contain drop-shadow-2xl transform transition-transform duration-700 hover:scale-105"
            />
          </div>

          {/* Product Details - Right Column */}
          <div className="w-full lg:w-1/2 space-y-8 text-center lg:text-left">

            {/* HEADER SECTION */}
            <div className="space-y-4">
              <div className="flex justify-center lg:justify-start">
                <span className="inline-block px-4 py-1 bg-red-50 text-red-700 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">
                  {product.type}
                </span>
              </div>

              <h2 className="text-3xl md:text-5xl font-serif font-bold text-slate-900 leading-tight">
                {product.name}
              </h2>

              {/* Torque Spec */}
              {product.torque && (
                <div className="flex items-center justify-center lg:justify-start gap-2 text-red-700 font-bold text-lg md:text-xl">
                  <Gauge className="w-6 h-6" />
                  <span>Torque: {product.torque}</span>
                </div>
              )}

              {/* Thrust Spec */}
              {product.thrust && (
                <div className="flex items-center justify-center lg:justify-start gap-2 text-red-700 font-bold text-lg md:text-xl">
                  <ArrowUpFromLine className="w-6 h-6" />
                  <span>Thrust: {product.thrust}</span>
                </div>
              )}

              <p className="text-base md:text-lg text-slate-600 leading-relaxed font-light font-sans lg:border-l-4 lg:border-red-800/20 lg:pl-6">
                {product.description}
              </p>

              {/* NEW: SERIES SELECTION BUTTONS WITH PREMIUM RED DESIGN */}
              {product.seriesLinks && product.seriesLinks.length > 0 && (
                <div className="pt-4">
                  <h4 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center justify-center lg:justify-start gap-2">
                    <Layers className="w-4 h-4 text-red-700" /> Select Series
                  </h4>
                  <div className="flex flex-wrap gap-3 justify-center lg:justify-start">
                    {product.seriesLinks.map((link, idx) => (
                      <button
                        key={idx}
                        onClick={() => navigate(link.path)}
                        className="group relative overflow-hidden rounded-full bg-gradient-to-r from-red-700 to-red-600 px-6 py-2.5 
                                     text-white font-medium text-sm shadow-md transition-all duration-300
                                     hover:shadow-lg hover:shadow-red-500/30 hover:-translate-y-0.5 flex items-center gap-2"
                      >
                        {/* Shimmer Effect */}
                        <div className="absolute inset-0 -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent z-0"></div>

                        {/* Button Content */}
                        <span className="relative z-10 tracking-wide">{link.label}</span>
                        <ArrowRight className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:translate-x-1" />
                      </button>
                    ))}

                    {/* Calculator Button (Only for Mechanical Products) */}
                    {product.type === "Mechanical" && (
                      <a
                        href="https://actuator.susinworld.in/rimpull.php"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="group relative overflow-hidden rounded-full bg-gradient-to-r from-red-700 to-red-600 px-6 py-2.5 
                                       text-white font-medium text-sm shadow-md transition-all duration-300
                                       hover:shadow-lg hover:shadow-red-500/30 hover:-translate-y-0.5 flex items-center gap-2"
                      >
                        <div className="absolute inset-0 -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent z-0"></div>
                        <span className="relative z-10 tracking-wide">Rim Pull Calculator</span>
                        <Calculator className="w-4 h-4 relative z-10" />
                      </a>
                    )}
                  </div>
                </div>
              )}
            </div>

            {/* KEY FEATURES GRID */}
            {product.features && (
              <div className="bg-slate-50/50 rounded-xl p-6 border border-slate-100">
                <h3 className="text-sm font-bold text-slate-900 uppercase tracking-widest mb-4 flex items-center gap-2">
                  <Settings className="w-4 h-4 text-red-700" /> Key Features
                </h3>
                <ul className="grid grid-cols-1 md:grid-cols-2 gap-3 text-left">
                  {product.features.map((feature, idx) => (
                    <li key={idx} className="flex items-start gap-2 text-sm text-slate-700">
                      <span className="text-red-600 mt-1">▸</span>
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {/* APPLICATIONS & CERTIFICATIONS ROW */}
            {(product.applications || product.certifications) && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

                {/* Applications */}
                {product.applications && (
                  <div>
                    <h4 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">
                      Applications
                    </h4>
                    <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
                      {product.applications.map((app, idx) => (
                        <span key={idx} className="px-3 py-1 bg-blue-50 text-blue-800 text-xs font-semibold rounded-md border border-blue-100">
                          {app}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {/* Certifications */}
                {product.certifications && (
                  <div>
                    <h4 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3 flex items-center justify-center lg:justify-start gap-2">
                      <ShieldCheck className="w-3 h-3" /> Certifications
                    </h4>
                    <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
                      {product.certifications.map((cert, idx) => (
                        <span key={idx} className="px-3 py-1 bg-green-50 text-green-800 text-xs font-semibold rounded-md border border-green-100">
                          {cert}
                        </span>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}

            {/* AVAILABLE MODELS */}
            <div className="pt-2">
              {isSeriesProduct ? (
                /* ================= SERIES BASED PRODUCTS ================= */
                <div className="space-y-6">
                  <h4 className="text-xs font-bold text-slate-400 uppercase tracking-widest">
                    Available Models
                  </h4>

                  {/* SERIES BUTTONS */}
                  <div className="flex flex-wrap gap-3 justify-center lg:justify-start">
                    {seriesModels!.map((group, idx) => {
                      const isActive = activeSeries === group.series;

                      return (
                        <button
                          key={idx}
                          onClick={() =>
                            setActiveSeries(isActive ? null : group.series)
                          }
                          className={`group relative overflow-hidden
                            px-5 py-2.5 text-xs md:text-sm font-semibold rounded-sm border
                            transition-all duration-300 ease-out
                            transform active:scale-95
                            ${isActive
                              ? "bg-gradient-to-r from-red-700 to-red-600 text-white border-red-700 shadow-md shadow-red-500/30"
                              : "bg-white text-slate-700 border-slate-300 hover:border-red-600 hover:text-red-700 hover:-translate-y-0.5 hover:shadow-sm"
                            }`}
                        >
                          {/* shimmer */}
                          <span className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/25 to-transparent" />

                          <span className="relative z-10 tracking-wide">
                            {group.series}
                          </span>
                        </button>
                      );
                    })}
                  </div>

                  {/* MODELS (SHOW ONLY WHEN SERIES CLICKED) */}
                  {activeSeries && (
                    <div className="mt-4 animate-in fade-in slide-in-from-top-2 duration-300">
                      <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
                        {getActiveSeriesModels().map((model, idx) => {
                          // Get detailed model data
                          let modelData: ModelData | undefined;
                          if (product.id === "bevel-gear") {
                            modelData = getMabModelData(model);
                          } else if (product.id === "worm-gear") {
                            modelData = getWormGearModelData(model);
                          }

                          return (
                            <button
                              key={idx}
                              onClick={() => handleModelClick(model)}
                              className="group relative
                                         px-4 py-1.5 text-xs md:text-sm font-medium
                                         bg-white border border-slate-300
                                         text-slate-700 rounded-sm
                                         transition-all duration-300 ease-out
                                         hover:border-red-600 hover:text-red-700 hover:bg-red-50
                                         hover:-translate-y-0.5 hover:shadow-sm
                                         active:scale-95"
                            >
                              {model}
                              {modelData && (
                                <div className="text-[10px] text-slate-500 mt-1">
                                  {modelData.torqueNm} Nm / {modelData.torqueLbfFt} lbf-ft
                                </div>
                              )}
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                /* ================= NORMAL PRODUCTS ================= */
                <div>
                  <div className="flex justify-between items-center mb-4">
                    <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
                      Available Models ({product.models.length})
                    </span>

                    {hasManyModels && (
                      <button
                        onClick={() => setShowAllModels(!showAllModels)}
                        className="group flex items-center gap-1
                                   text-xs font-semibold text-red-700
                                   px-3 py-1.5 rounded-md
                                   transition-all duration-300
                                   hover:text-red-800 hover:bg-red-50
                                   active:scale-95"
                      >
                        {showAllModels ? (
                          <>
                            <ChevronUp className="w-3 h-3 transition-transform group-hover:-translate-y-0.5" />
                            Show Less
                          </>
                        ) : (
                          <>
                            <ChevronDown className="w-3 h-3 transition-transform group-hover:translate-y-0.5" />
                            Show All Models
                          </>
                        )}
                      </button>
                    )}
                  </div>

                  <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
                    {displayModels.map(
                      (model, idx) => (
                        <button
                          key={idx}
                          onClick={() => handleModelClick(model)}
                          className="px-3 py-1.5 md:px-4 md:py-2
                                     bg-white border border-slate-200
                                     text-slate-600 text-xs md:text-sm font-medium
                                     rounded-sm
                                     transition-all duration-300
                                     hover:border-red-300 hover:bg-red-50/40
                                     hover:text-red-700 hover:shadow-sm
                                     active:scale-95"
                        >
                          {model}
                        </button>
                      )
                    )}
                  </div>
                </div>
              )}
            </div>

            {/* BUTTONS */}
            <div className="pt-4 flex flex-col md:flex-row gap-4 w-full md:w-auto">
              <Button
                size="lg"
                className="group relative overflow-hidden bg-red-700 hover:bg-red-800 text-white text-sm md:text-base font-serif tracking-wide px-8 py-6 rounded-sm shadow-xl hover:shadow-red-900/30 transition-all duration-500 w-full md:w-auto"
                onClick={() => navigate(`/products/${product.id}`)}
              >
                <span className="relative z-10 flex items-center justify-center gap-2">
                  View Details <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </span>
                <div className="absolute inset-0 h-full w-full scale-0 rounded-sm transition-all duration-300 group-hover:scale-100 group-hover:bg-red-600/20"></div>
              </Button>

              {/* Request a Quote */}
              <Button
                size="lg"
                className="group bg-white border-2 border-red-700 text-red-700 hover:bg-red-50 text-sm md:text-base font-serif tracking-wide px-8 py-6 rounded-sm transition-all duration-300 shadow-sm w-full md:w-auto"
                onClick={() =>
                  navigate(`/contact`)
                }
              >
                <span className="flex items-center justify-center gap-2">
                  Request a Quote
                  <ArrowRight className="w-4 h-4" />
                </span>
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Model Details Modal */}
      <ModelDetailsModal
        isOpen={isModalOpen}
        onClose={() => {
          setIsModalOpen(false);
          setSelectedModelDetails(null);
        }}
        details={selectedModelDetails}
      />
    </>
  );
};

/* ===========================================================
   MAIN PAGE
   =========================================================== */
export default function Products() {
  const { t } = useLanguage();
  const [searchParams] = useSearchParams();
  const [activeTab, setActiveTab] = useState("all");

  const contentStartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const category = searchParams.get("category");
    const productId = searchParams.get("id");

    if (category) {
      setActiveTab(category);
      setTimeout(() => {
        if (contentStartRef.current) {
          const yOffset = -200;
          const element = contentStartRef.current;
          const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      }, 100);
    }

    if (productId) {
      const product = allProducts.find(p => p.id === productId);
      if (product) {
        setActiveTab(product.type.toLowerCase());
        setTimeout(() => {
          const element = document.getElementById(productId);
          if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }
        }, 300);
      }
    }

  }, [searchParams]);

  const filteredProducts =
    activeTab === "all"
      ? allProducts
      : allProducts.filter(
        (p) => p.type.toLowerCase() === activeTab.toLowerCase()
      );

  return (
    <div className="min-h-screen bg-white text-slate-800">
      <SEO
        title="Industrial Actuators & Valve Automation Solutions | Susin Group"
        description="Browse our comprehensive range of industrial actuators including pneumatic actuators (PDS, HD, PLDS, MPLDS), electrical actuators (ITQ, IQL, ITL, ITM), mechanical actuators (bevel gear, worm gear), and hydraulic actuators. Premium quality actuators for power generation, oil & gas, and process industries."
        keywords="pneumatic actuators, electric actuators, mechanical actuators, hydraulic actuators, PDS actuator, ITQ actuator, bevel gear actuator, worm gear actuator, valve actuators, industrial automation actuators, Susin actuators"
        url="https://www.susingroup.com/products"
        type="website"
        structuredData={{
          "@context": "https://schema.org",
          "@type": "CollectionPage",
          name: "Industrial Actuators - Susin Group",
          description: "Comprehensive range of industrial actuators for automation",
          url: "https://www.susingroup.com/products",
          mainEntity: {
            "@type": "ItemList",
            itemListElement: allProducts.slice(0, 10).map((product, index) => ({
              "@type": "ListItem",
              position: index + 1,
              item: {
                "@type": "Product",
                name: product.name,
                description: product.description,
                url: `https://www.susingroup.com/products/${product.id}`,
              },
            })),
          },
        }}
      />
      <Navbar />

      {/* Video Hero Section */}
      <section className="relative w-full h-[50vh] md:h-[70vh] overflow-hidden bg-black border-b-8 border-red-900">
        <video
          autoPlay
          loop
          muted
          playsInline
          preload="metadata"
          className="absolute inset-0 w-full h-full object-cover opacity-60"
        >
          <source src={heroVideo} type="video/mp4" />
        </video>
      </section>

      {/* Filter Tabs - Relative */}
      <div
        ref={contentStartRef}
        className="relative bg-white border-b py-4 shadow-sm"
      >
        <div className="container mx-auto px-4">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full flex justify-center">
            <TabsList className="bg-slate-50 p-1.5 h-auto rounded-xl flex flex-wrap justify-center gap-2">
              <TabsTrigger value="all" className="data-[state=active]:bg-red-700 data-[state=active]:text-white rounded-lg px-4 py-2">All Collection</TabsTrigger>
              <TabsTrigger value="pneumatic" className="data-[state=active]:bg-red-700 data-[state=active]:text-white rounded-lg px-4 py-2">Pneumatic</TabsTrigger>
              <TabsTrigger value="electrical" className="data-[state=active]:bg-red-700 data-[state=active]:text-white rounded-lg px-4 py-2">Electrical</TabsTrigger>
              <TabsTrigger value="mechanical" className="data-[state=active]:bg-red-700 data-[state=active]:text-white rounded-lg px-4 py-2">Mechanical</TabsTrigger>
              <TabsTrigger value="accessories" className="data-[state=active]:bg-red-700 data-[state=active]:text-white rounded-lg px-4 py-2">Accessories</TabsTrigger>
              <TabsTrigger
                value="hydraulic"
                className="data-[state=active]:bg-red-700 data-[state=active]:text-white rounded-lg px-4 py-2"
              >
                Hydraulic
              </TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
      </div>

      {/* Product List */}
      <div className="min-h-screen pb-20 relative z-0">
        <div className="container mx-auto px-0 md:px-4">
          <Tabs value={activeTab} className="w-full">
            <TabsContent value={activeTab} className="mt-0">
              {filteredProducts.map((product, index) => (
                <ProductRow key={product.id} product={product} index={index} />
              ))}

              {filteredProducts.length === 0 && (
                <div className="py-20 text-center text-slate-400">
                  No products found in this category.
                </div>
              )}
            </TabsContent>
          </Tabs>
        </div>
      </div>

      <Footer />
      <Chatbot />
    </div>
  );
}