"use client"
import { Zap,Globe,Cpu,Layers,Shield,Droplets,Activity,CheckCircle, 
  RefreshCw, BarChart3,Thermometer, Factory, Award, Gauge,Clock,HardDrive,Settings,ZapOff,Eye,
  Wrench,
  TrendingDown,
  Maximize,
  Mail,
  Phone,
} from 'lucide-react';
import React from 'react'
import { tsProducts } from '@/lib/tsProducts'; '../../../../lib/tsProducts'
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import sqelectricalsImg17 from "../../../../../public/assets/plants/sq-electricals-mirsarai/transformer.png"
import banner1 from "../../../../../public/assets/plants/ts-transformer/transformer2.webp";
import banner2 from "../../../../../public/assets/plants/ts-transformer/transformer1.webp";
import banner3 from "../../../../../public/assets/plants/ts-transformer/transformer3.webp";

import banner5 from "../../../../../public/assets/plants/ts-transformer/transformer8.webp";
import banner6 from "../../../../../public/assets/plants/ts-transformer/transformer6.webp";

import sqelectricalsImg7 from "../../../../../public/assets/plants/ts-transformer/transformer7.webp";
import sqelectricalsImg9 from "../../../../../public/assets/plants/ts-transformer/transformer9.webp";
import sqelectricalsImg10 from "../../../../../public/assets/plants/ts-transformer/transformer10.webp";


import banner4 from "../../../../../public/assets/plants/ts-transformer/transformer4.webp";

import Link from 'next/link';
import Image from 'next/image';
import TsCounter from '@/components/tsCounter';


const slides = [
 
  {
    title: "Hassle Free Solution",
    image: banner3,
  },
    {
    title: "Hassle Free Solution",
    image: banner6,
  },
  {
    title: "Smart Ts Transformer",
    image: banner1,
  },
  {
    title: "Best Transformer",
    image: banner5,
  },

];


const page = () => {
  return (
    <div>
      <div className="lg:mt-0 mt-28">
          <div className="w-full lg:h-[80vh] h-[30vh] col-span-4">
            <Swiper
              modules={[Autoplay, Navigation, Pagination]}
              spaceBetween={0}
              slidesPerView={1}
              loop={true}
              className="vertical-pagination"
              autoplay={{
                delay: 7000,
                disableOnInteraction: false,
              }}

              navigation={true}
              pagination={{
                clickable: true,
              }}
            >
              {slides.map((slide, i) => (
                <SwiperSlide key={i} className=""> 
                <div className="lg:h-[80vh] h-[30vh] w-full relative">
                   <div
                      className="w-full h-full bg-cover bg-center"
                      style={{ backgroundImage: `url(${slide.image?.src})` }}
                    />
                </div>
                </SwiperSlide>
              ))}
            </Swiper>
            </div>
        </div>

     <div className=" flex flex-col">
      <div className="relative w-full overflow-hidden h-[550px]">
        <Image
         width={350}
          height={300}
          src={sqelectricalsImg9.src}
          alt="Continental Transportation truck on highway"
          className="absolute inset-0 w-full h-full object-cover object-center"
        />

        <div className="absolute inset-0 bg-black/40" />

        <div className="relative z-10 flex items-center h-full min-h-[420px] px-8 md:px-16 py-20">
          <div className="max-w-xl p-8 lg:max-w-2xl md:p-10 bg-[rgba(10,20,45,0.82)] backdrop-blur-[1px]">
            <h1 className="mb-4 font-oswald text-4xl font-bold uppercase leading-[1.15] tracking-[0.03em] text-white">
              High-Voltage Power Solutions
            </h1>

            <p className="font-open-sans text-base font-normal leading-relaxed text-gray-300">
              TS Transformers manufactures high-capacity power transformers engineered
              for heavy industry and power grids. Built in our advanced facility, our
              transformers deliver reliable, low-loss power distribution under the
              toughest conditions.
            </p>
          </div>
        </div>
      </div>
    </div>
      <div className="container mx-auto px-4 lg:pb-18 pb-10 lg:mt-24 mt-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="lg:order-1 order-1">
            <Image
              width={350}
              height={300}
              className="w-full h-[500px] rounded-2xl object-cover shadow-xl"
              src={sqelectricalsImg17.src}
              alt="TS Transformer Manufacturing Plant"
            />
          </div>
          <div className="lg:order-2 order-2">
          
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6 leading-tight">
              Engineering Reliable
              <span className="text-blue-900">
                {" "}Power Transformation Solutions
              </span>
            </h2>

            <p className="text-gray-600 mb-4 leading-relaxed">
              TS Transformer Ltd, a proud concern of SQ Group, is dedicated to
              manufacturing high-quality power and distribution transformers that
              support Bangladesh's growing energy and industrial sectors.
              Utilizing advanced manufacturing technologies and strict quality
              control processes, the company produces transformers designed for
              maximum efficiency, operational reliability, and long service life.
            </p>

            <p className="text-gray-600 mb-4 leading-relaxed">
              Our product portfolio includes distribution transformers, power
              transformers, and customized energy solutions suitable for
              substations, industrial facilities, commercial buildings, and
              infrastructure projects.
            </p>

            <p className="text-gray-600 mb-4 leading-relaxed">
              Every transformer is engineered to meet national and international
              standards, ensuring safe operation and superior performance under
              demanding conditions.With a strong focus on innovation, engineering excellence, and
              customer satisfaction, <span className='text-blue-500 font-semibold'>TS Transformer Ltd</span> continues to play an
              important role in strengthening Bangladesh's power distribution
              network.
            </p>

            <p className="text-gray-600 leading-relaxed">
              Trusted by utility providers, industrial manufacturers, and
              large-scale development projects, TS Transformer Ltd delivers
              dependable transformer solutions that power industries and connect
              communities.
            </p>
          </div>

        </div>
      </div>

      <div className="container mx-auto px-4 lg:pb-18 pb-10 mt-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="lg:order-2 order-1">
            <Image
              width={350}
              height={300}
              className="w-full h-[500px] rounded-2xl object-cover shadow-xl"
              src={sqelectricalsImg7.src}
              alt="TS Transformer Manufacturing Plant"
            />
          </div>
          <div className="lg:order-1 order-2">
          
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6 leading-tight">
              Copper Winding 
              <span className="text-blue-900">
                {" "}& Coil Manufacturing
              </span>
            </h2>

            <p className="text-gray-600 mb-4 leading-relaxed">
             TS Transformer Ltd utilizes precision-engineered copper winding processes to ensure the efficient electrical performance and long-term reliability of its transformers. High-conductivity copper conductors are carefully wound and assembled using controlled manufacturing techniques to maintain accuracy, insulation integrity, and consistent performance.
            </p>
            <p className="text-gray-600 mb-4 leading-relaxed">
              The winding process plays a critical role in transformer efficiency, thermal performance, and operational durability. Through advanced production methods and strict quality control, TS Transformer Ltd manufactures transformer windings designed to perform reliably under demanding electrical and industrial conditions.
            </p>

          </div>

        </div>
      </div>

      <div className="container mx-auto px-4 lg:pb-18 pb-10 mt-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="lg:order-1 order-1">
            <Image
              width={350}
              height={300}
              className="w-full h-[500px] rounded-2xl object-cover shadow-xl"
              src={sqelectricalsImg10.src}
              alt="TS Transformer Manufacturing Plant"
            />
          </div>
          <div className="lg:order-2 order-2">
            
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6 leading-tight">
              Transformer Bushings
              <span className="text-blue-900">
                {" "}& Electrical Connections
              </span>
            </h2>

            <p className="text-gray-600 mb-4 leading-relaxed">
              TS Transformer Ltd manufactures and assembles transformer components with a strong focus on electrical safety, insulation reliability, and operational performance. Precision-engineered bushings, terminals, connections, and other critical transformer assemblies are integrated to ensure dependable electrical operation under demanding conditions.
            </p>

            <p className="text-gray-600 mb-4 leading-relaxed">
             Each assembly is produced and inspected according to established engineering and quality requirements, helping ensure safe power transfer, reliable insulation, and long service life. Through engineering expertise and controlled manufacturing processes, TS Transformer Ltd delivers transformer solutions suitable for substations, industrial facilities, commercial applications, and infrastructure projects.
            </p>
          </div>

        </div>
      </div>

     <div className="font-sans antialiased bg-white text-gray-800">
 
<div
  className=" text-black overflow-hidden">
  <div className="absolute inset-0 " />

  <div className="absolute inset-0 opacity-10">
    <div className="absolute top-0 right-0 w-96 h-96 bg-blue-400 rounded-full blur-3xl" />

    <div className="absolute bottom-0 left-0 w-72 h-72 bg-blue-500 rounded-full blur-3xl" />
  </div>
  <div className='bg-slate-50'>
    <div className="relative z-10 container mx-auto px-6 md:py-10 flex flex-col items-center text-center">

    <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-1.5 rounded-full border border-white/10 text-base font-medium text-blue-500 mb-6">
      <Factory className="w-4 h-4" />

      <span>
        Manufacturing & Engineering Centre
      </span>
    </div>
    <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight max-w-5xl">
      <span className="text-blue-900">
        TS Transformers
      </span>
      <br />
      <span className="text-2xl md:text-4xl lg:text-5xl font-light text-black">
        Engineering Transformers for Reliable Power
      </span>
    </h1>
    <p className="text-lg md:text-xl text-center text-gray-500 max-w-5xl mt-6 leading-relaxed">
      The Gazipur plant brings together computerised design, precision
      transformer manufacturing, assembly, testing and quality assurance
      to produce equipment engineered for efficient operation, dependable
      service and long lifecycle performance.TS's own product information states that transformer electrical and mechanical designs are developed using computerised design tools to optimise performance and assess core and copper losses. Its three-phase transformers are specified to IEC 60076, using high-conductivity copper, CRGO silicon steel and ONAN cooling for the listed range.
    </p>

    <div className="mt-10 flex flex-wrap justify-center gap-4">

      <Link
       href={'/price/?product=Transformer&category=Distribution+Transformer'}
        className=" bg-blue-500 hover:bg-blue-400 text-white font-semibold py-3 px-8 rounded-full shadow-lg shadow-blue-500/30 transition-all duration-300 flex items-center gap-2"
      >
        <Zap className="w-5 h-5" />

        Explore Products
      </Link>

      <button
        className="border-2 border-blue-600 hover:bg-white/10 text-black font-medium py-3 px-8 rounded-full backdrop-blur-sm transition-all duration-300 flex items-center gap-2 "
      >
        <Activity className="w-5 h-5" />
        Manufacturing Process
      </button>

    </div>

    {/* Feature Cards */}
    <div className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-6 w-full max-w-3xl">

      {/* ISO */}
      <div
        className="
          bg-white/10
          backdrop-blur-md
          p-5
          rounded-2xl
          border
          border-white/15
          flex
          flex-col
          items-center
          hover:bg-white/15
          transition-all
          duration-300
        "
      >
        <Award className="w-8 h-8 text-blue-400 mb-2" />

        <span className="text-base font-semibold">
          ISO 9001:2015
        </span>

        <span className="text-sm text-black text-center mt-1">
          Certified Quality Management
        </span>
      </div>

      {/* IEC */}
      <div
        className="
          bg-white/10
          backdrop-blur-md
          p-5
          rounded-2xl
          border
          border-white/15
          flex
          flex-col
          items-center
          hover:bg-white/15
          transition-all
          duration-300
        "
      >
        <Gauge className="w-8 h-8 text-blue-400 mb-2" />

        <span className="text-base font-semibold">
          IEC 60076
        </span>

        <span className="text-sm text-black text-center mt-1">
          Design Reference Standard
        </span>
      </div>

      {/* Lifecycle */}
      <div
        className="
          bg-white/10
          backdrop-blur-md
          p-5
          rounded-2xl
          border
          border-white/15
          flex
          flex-col
          items-center
          hover:bg-white/15
          transition-all
          duration-300
        "
      >
        <Clock className="w-8 h-8 text-blue-400 mb-2" />

        <span className="text-base font-semibold">
          Lifecycle Support
        </span>

        <span className="text-sm text-white/60 text-center mt-1">
          Service & Reconditioning
        </span>
      </div>

    </div>

  </div>
  </div>
</div>

      <section className="py-16 md:py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="max-w-4xl mx-auto text-center mb-16">
            <span className="text-blue-600 font-semibold text-base tracking-widest uppercase">Engineering Excellence</span>
            <h2 className="text-3xl md:text-5xl font-bold mt-2 text-slate-800">DESIGN & ENGINEERING</h2>
            <p className="text-gray-500 text-lg mt-4">Every Transformer Begins with Engineering</p>
            <p className="text-gray-400 text-base mt-2 max-w-2xl mx-auto">
              Transformer performance is determined long before the first component reaches the production floor.
            </p>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <div className="bg-slate-50 p-6 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                <div className="flex items-start gap-4">
                  <div className="bg-blue-100 p-3 rounded-lg">
                    <Cpu className="w-6 h-6 text-blue-700" />
                  </div>
                  <div>
                    <h3 className="font-bold text-slate-800">Computerised Design Tools</h3>
                    <p className="text-gray-600 text-base mt-1">
                      TS uses computerised design tools to develop electrical and mechanical transformer designs, 
                      enabling engineers to optimise critical parameters such as winding configuration, core design, 
                      electrical losses, temperature performance and mechanical integrity.
                    </p>
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-center">
                  <TrendingDown className="w-6 h-6 text-blue-700 mx-auto mb-1" />
                  <p className="text-sm font-medium text-gray-700">Loss Reduction</p>
                </div>
                <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-center">
                  <Maximize className="w-6 h-6 text-blue-700 mx-auto mb-1" />
                  <p className="text-sm font-medium text-gray-700">Material Utilisation</p>
                </div>
              </div>
            </div>
            <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-white/10 shadow-2xl">
              <h4 className="text-xl font-semibold text-blue-500 mb-4">Engineering-Led Approach</h4>
              <ul className="space-y-3">
                {[
                  'Performance optimisation',
                  'Efficient material utilisation',
                  'Loss reduction',
                  'Reliable thermal behaviour',
                  'Mechanical strength',
                  'Application-specific transformer design'
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 text-white/80 text-base">
                    <CheckCircle className="w-4 h-4 text-blue-400 flex-shrink-0" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-slate-50">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-8 rounded-3xl shadow-md border border-slate-100">
              <div className="flex items-center gap-3 mb-4">
                <HardDrive className="w-8 h-8 text-indigo-600" />
                <h3 className="text-2xl font-bold text-slate-800">CORE MANUFACTURING</h3>
              </div>
              <p className="text-gray-500 text-base mb-2">Building the Magnetic Heart of the Transformer</p>
              <p className="text-gray-400 text-sm mb-6">
                The transformer core forms the magnetic pathway through which energy is transferred. 
                For TS's three-phase range, the company specifies wound-core or stacked-core construction using CRGO silicon steel.
              </p>
              <div className="space-y-3">
                {[
                  'Precision core preparation',
                  'Accurate stacking or wound-core construction',
                  'Controlled core clamping',
                  'Dimensional verification',
                  'Minimisation of magnetic losses'
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3 bg-slate-50 p-3 rounded-xl">
                    <div className="w-1 h-8 bg-indigo-300 rounded-full"></div>
                    <span className="text-base font-medium">{item}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-white p-8 rounded-3xl shadow-md border border-slate-100">
              <div className="flex items-center gap-3 mb-4">
                <ZapOff className="w-8 h-8 text-blue-600" />
                <h3 className="text-2xl font-bold text-slate-800">COIL WINDING</h3>
              </div>
              <p className="text-gray-500 text-base mb-2">Precision Where Electrical Performance Begins</p>
              <p className="text-gray-400 text-sm mb-6">
                Transformer windings must operate reliably under continuous electrical, thermal and mechanical stress. 
                High-conductivity copper is specified for the three-phase product range.
              </p>
              <div className="space-y-3">
                {[
                  'Electrical efficiency',
                  'Voltage regulation',
                  'Heat dissipation',
                  'Short-circuit withstand',
                  'Long service life'
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3 bg-slate-50 p-3 rounded-xl">
                    <div className="w-1 h-8 bg-blue-600 rounded-full"></div>
                    <span className="text-base font-medium">{item}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
            <div className="bg-gradient-to-br from-indigo-50 to-blue-50 p-8 rounded-3xl border border-indigo-100">
              <div className="flex items-center gap-3">
                <Layers className="w-8 h-8 text-indigo-700" />
                <h3 className="text-xl font-bold text-slate-800">ACTIVE PART ASSEMBLY</h3>
              </div>
              <p className="text-gray-600 text-base mt-2 font-medium">Bringing Core, Coil and Insulation Together</p>
              <p className="text-gray-500 text-base mt-3">
                Once core and winding components are prepared, the transformer's active part is assembled under 
                controlled manufacturing procedures. Careful alignment, insulation clearances, mechanical clamping 
                and electrical connections are essential to achieving stable transformer performance.
              </p>
            </div>
            <div className="bg-gradient-to-br from-amber-50 to-blue-50 p-8 rounded-3xl border border-amber-100">
              <div className="flex items-center gap-3">
                <Shield className="w-8 h-8 text-blue-700" />
                <h3 className="text-xl font-bold text-slate-800">TANK & FINAL ASSEMBLY</h3>
              </div>
              <p className="text-gray-600 text-base mt-2 font-medium">Protection Designed for Demanding Conditions</p>
              <p className="text-gray-500 text-base mt-3">
                Transformer tanks provide mechanical protection, retain insulating oil and support thermal management. 
                TS specifies its three-phase transformers for outdoor tropical conditions including high rainfall and 
                humidity—an important consideration for Bangladesh's operating environment.
              </p>
            </div>
          </div>
        </div>
      </section>

      <div
        className="relative w-full min-h-screen bg-cover bg-center bg-no-repeat bg-fixed"
        style={{
          backgroundImage: `url(${banner4.src})`,
        }}
      >
        <div className="absolute inset-0 bg-black/50" />

        <div className="relative z-10 flex justify-center items-center min-h-screen px-8 md:px-16 py-12">
          <div
            className="max-w-xl lg:max-w-4xl p-8 md:p-10"
            style={{
              background: "rgba(10, 20, 45, 0.82)",
              backdropFilter: "blur(1px)",
            }}
          >
            <h1
              className="text-4xl text-white uppercase leading-tight mb-4"
              style={{
                fontFamily: "'Oswald', sans-serif",
                fontWeight: 700,
                letterSpacing: "0.03em",
                lineHeight: 1.15,
              }}
            >
              Reliable Power for Demanding Applications
            </h1>

            <p
              className="text-gray-300 text-base leading-relaxed"
              style={{
                fontFamily: "'Open Sans', sans-serif",
                fontWeight: 400,
              }}
            >
              TS Transformers delivers advanced transformer solutions designed for
              industrial facilities, utility networks, and high-demand power systems.
              Our high-performance transformers are engineered for dependable
              operation, efficient energy transmission, and long-term reliability—even
              in challenging operating environments.
            </p>
          </div>
        </div>
      </div>

      <section className="py-16 md:py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="md:col-span-1 bg-slate-900 p-8 rounded-3xl text-white flex flex-col justify-between">
              <div>
                <Droplets className="w-10 h-10 text-cyan-300 mb-4" />
                <h3 className="text-2xl font-bold">INSULATION, DRYING & OIL PROCESSING</h3>
                <p className="text-white/60 text-base mt-2">Protecting Electrical Integrity</p>
                <p className="text-white/40 text-sm mt-4">
                  Moisture and contamination significantly affect transformer insulation performance. 
                  Controlled drying and oil-processing procedures play an important role in ensuring 
                  dielectric strength and long-term transformer reliability.
                </p>
              </div>
              <div className="mt-6 flex items-center gap-2 text-cyan-300 text-base bg-white/5 p-3 rounded-xl border border-white/10">
                <CheckCircle className="w-4 h-4 flex-shrink-0" /> 
                Clean, dry and electrically stable insulation system
              </div>
            </div>
            <div className="md:col-span-2 bg-slate-50 p-8 rounded-3xl border border-slate-200">
              <div className="flex items-center gap-3 mb-6">
                <Activity className="w-8 h-8 text-emerald-600" />
                <h3 className="text-2xl font-bold text-slate-800">TESTING & QUALITY ASSURANCE</h3>
              </div>
              <p className="text-gray-500 text-base mb-2">Verified Before It Reaches the Customer</p>
              <p className="text-gray-400 text-sm mb-6">
                The Gazipur plant's testing capability is one of the most important elements of the manufacturing process. 
                TS states that its modern testing facility includes a precision power analyser for transformer loss measurement, 
                partial discharge analyser and temperature logger.
              </p>
              <div className="grid grid-cols-2 gap-4">
                {[
                  { icon: BarChart3, label: 'Electrical Performance', sub: 'Measurement & verification' },
                  { icon: TrendingDown, label: 'Loss Measurement', sub: 'Precision power analyser' },
                  { icon: Eye, label: 'Partial Discharge', sub: 'Specialised insulation evaluation' },
                  { icon: Thermometer, label: 'Temperature Performance', sub: 'Thermal behaviour monitoring' },
                ].map((item, i) => (
                  <div key={i} className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100">
                    <item.icon className="w-6 h-6 text-blue-600 mb-1" />
                    <h4 className="font-semibold text-base">{item.label}</h4>
                    <p className="text-sm text-gray-500">{item.sub}</p>
                  </div>
                ))}
              </div>
              <div className="mt-6 bg-blue-50 border border-blue-200 p-4 rounded-xl">
                <p className="text-base text-blue-800 font-medium flex items-center gap-2">
                  <Zap className="w-4 h-4" />
                  Type Testing: Short-circuit, impulse-voltage and temperature-rise testing as applicable
                </p>
              </div>
              <p className="mt-4 text-base text-gray-600 italic border-t border-slate-200 pt-4 text-center font-medium">
                "Every transformer should leave the factory with demonstrated, not assumed, performance."
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-gray-50">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold">PRODUCTS MANUFACTURED</h2>
            <p className="text-gray-400 text-lg mt-2">Transformer Solutions Across Multiple Applications</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            
           
           {
            tsProducts.map((product)=>
               <Link key={product.id} href={`/plants/ts-transformers-gazipur/${product.id}/`} className="bg-blue-300/10 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:bg-blue-300/20 transition">
              <Image 
                width={350}
                height={300}
                src={product.images[0].src} 
                alt="Single-Phase Distribution Transformer"
                className="w-full lg:h-[450px] h-[300px] rounded-xl mb-4"
              />
              <h5 className="text-blue-500 text-base font-semibold">{product.name}</h5>
              <h4 className="text-xl font-bold mt-1 hover:text-blue-500">{product.title}</h4>
              <p className="text-gray-500 text-base mt-2">{product.shortDescription}</p>
            </Link>
            )
           }

          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-white">
        <div className="container mx-auto px-6 max-w-7xl">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Award className="w-8 h-8 text-blue-600" />
                <h3 className="text-2xl font-bold text-slate-800">QUALITY MANAGEMENT</h3>
              </div>
              <p className="text-gray-600 text-base font-medium">Consistency Through Systems</p>
              <p className="text-gray-500 text-base mt-2">
                TS Transformers is ISO 9001:2015 certified, reflecting the use of a structured quality management 
                system focused on consistent product conformity, customer requirements and continuous improvement.
              </p>
              <div className="mt-6 grid grid-cols-2 gap-2">
                {[
                  'Incoming materials',
                  'Design verification',
                  'Manufacturing control',
                  'In-process inspection',
                  'Testing',
                  'Documentation',
                  'Final release'
                ].map((item, i) => (
                  <span key={i} className="bg-slate-100 text-slate-700 text-sm px-3 lg:py-6 py-3 rounded-full text-center font-medium">
                    {item}
                  </span>
                ))}
              </div>
            </div>
            <div className="bg-slate-50 p-8 rounded-3xl border border-slate-200">
              <h3 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
                <Settings className="w-7 h-7 text-slate-700" />
                MANUFACTURING PHILOSOPHY
              </h3>
              <p className="text-gray-500 text-base mt-1 font-medium">Design. Quality. Reliability. Commitment.</p>
              <p className="text-gray-400 text-sm mt-2">
                TS Transformers identifies these four principles as central to customer satisfaction.
              </p>
              <ul className="mt-4 space-y-4">
                <li className="flex items-start gap-3 bg-white p-4 rounded-xl shadow-sm border border-slate-100">
                  <div className="bg-blue-500 w-1.5 h-full rounded-full mt-1"></div>
                  <div>
                    <span className="font-bold text-slate-800">Design accurately.</span>
                    <p className="text-gray-500 text-base">Use engineering to optimise performance before manufacturing begins.</p>
                  </div>
                </li>
                <li className="flex items-start gap-3 bg-white p-4 rounded-xl shadow-sm border border-slate-100">
                  <div className="bg-blue-500 w-1.5 h-full rounded-full mt-1"></div>
                  <div>
                    <span className="font-bold text-slate-800">Manufacture consistently.</span>
                    <p className="text-gray-500 text-base">Control materials, processes and assembly.</p>
                  </div>
                </li>
                <li className="flex items-start gap-3 bg-white p-4 rounded-xl shadow-sm border border-slate-100">
                  <div className="bg-blue-500 w-1.5 h-full rounded-full mt-1"></div>
                  <div>
                    <span className="font-bold text-slate-800">Test thoroughly.</span>
                    <p className="text-gray-500 text-base">Verify performance before release.</p>
                  </div>
                </li>
                <li className="flex items-start gap-3 bg-white p-4 rounded-xl shadow-sm border border-slate-100">
                  <div className="bg-blue-500 w-1.5 h-full rounded-full mt-1"></div>
                  <div>
                    <span className="font-bold text-slate-800">Support the customer.</span>
                    <p className="text-gray-500 text-base">Remain engaged throughout the asset lifecycle.</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <TsCounter></TsCounter>
          </div>
          <div className="mt-12 overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 p-6 md:p-10 text-white shadow-2xl">
      <div className="flex flex-col xl:flex-row items-center justify-between gap-8">

        <div className="flex items-start gap-5 w-full">
          <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/10 border border-blue-400/20">
            <Wrench className="h-7 w-7 text-blue-400" />
          </div>

          <div>
            <span className="text-xs font-semibold uppercase tracking-[0.2em] text-blue-400">
              Service & Support
            </span>

            <h4 className="mt-1 text-2xl md:text-3xl font-bold tracking-tight">
              Transformer Service & Reconditioning
            </h4>

            <p className="mt-2 max-w-2xl text-sm md:text-base leading-relaxed text-white/60">
              Get expert support for transformer repair, redesign,
              replacement and reconditioning throughout the asset lifecycle.
            </p>
          </div>
        </div>

        <div className="grid w-full xl:w-auto gap-3">

        <div className='flex gap-2'>
          <a
            href="tel:01979643460"
            className="group flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-5 py-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/40 hover:bg-blue-500/10"
          >
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-blue-500/10">
              <Phone className="h-5 w-5 text-blue-400 transition-transform duration-300 group-hover:scale-110" />
            </div>

            <div>
              <p className="text-xs text-white/40">Call Us</p>
              <p className="mt-1 font-semibold whitespace-nowrap">
                01979-643460
              </p>
            </div>
          </a>

          {/* Phone 02 */}
          <a
            href="tel:01979643465"
            className="group flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-5 py-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/40 hover:bg-blue-500/10"
          >
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-blue-500/10">
              <Phone className="h-5 w-5 text-blue-400 transition-transform duration-300 group-hover:scale-110" />
            </div>

            <div>
              <p className="text-xs text-white/40">Call Us</p>
              <p className="mt-1 font-semibold whitespace-nowrap">
                01979-643465
              </p>
            </div>
          </a>
        </div>

          {/* Email */}
          <a
            href="mailto:ts_info@tstransformers.com"
            className="group flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-5 py-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-400/40 hover:bg-blue-500/10"
          >
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-blue-500/10">
              <Mail className="h-5 w-5 text-blue-400 transition-transform duration-300 group-hover:scale-110" />
            </div>

            <div>
              <p className="text-xs text-white/40">Email Us</p>
              <p className="mt-1 font-semibold break-all">
                ts_info@tstransformers.com
              </p>
            </div>
          </a>

        </div>
      </div>
    </div>
        </div>
      </section>

      <footer className="bg-slate-950 text-white py-16 border-t border-white/5">
        <div className="container mx-auto px-6 text-center">
          <div className="flex justify-center items-center gap-3 mb-6">
            <Factory className="w-12 h-12 text-blue-400" />
            <span className="text-3xl font-bold tracking-tight">TS TRANSFORMERS</span>
          </div>
          <p className="text-white/40 max-w-3xl mx-auto text-base leading-relaxed">
            <span className="text-blue-400 font-semibold">POWERED BY ENGINEERING</span>
            <br />
            The Gazipur facility represents more than transformer production capacity. It brings together 
            design knowledge, manufacturing experience, testing capability and lifecycle services within 
            one specialist transformer operation. This integration enables TS Transformers to serve utilities, 
            industries and infrastructure customers with products and engineering support designed around 
            one overriding requirement:
          </p>
          <p className="text-white/60 text-xl font-light mt-4 max-w-2xl mx-auto">
            "Reliable power transformation, year after year."
          </p>
        
        </div>
      </footer>
    </div>
    </div>
  )
}

export default page