"use client"
import { useState } from "react";
import {
  Zap,
  Shield,
  Award,
  CheckCircle,
  ChevronRight,
  Star,
  Mail,
  Globe,
  ArrowRight,
  Factory,
  Cpu,
  Activity,
  Target,
  Settings,
  BarChart3,
  Phone,
  MapPin,
  Menu,
  X,
} from "lucide-react";
import Image from "next/image";
import tsImg from '../../../../../public/assets/catalogue/transformer.jpg'
import tsImg2 from '../../../../../public/assets/business-units/ts-transformer/transformer9.webp'
import tsImg3 from '../../../../../public/assets/business-units/ts-transformer/ts-transformerImg2.webp'
import Link from "next/link";
import TsBusiness from "./tsBusiness";
import TsServices from "./tsServices";
import TsBusinessModel from "./tsBusinessModel";
import TotalTransformers from "./total-transformers";

const PRODUCTS = [
  {
    id: "distribution",
    label: "Distribution Transformers",
    icon: Zap,
    title: "Single & Three Phase Distribution Transformers",
    description:
      "Comprehensive range of single-phase and three-phase distribution transformers designed to meet national and international technical standards for power utilities and infrastructure projects.",
    points: [
      "Single-phase and three-phase configurations available",
      "Meets national BSTI and international IEC standards",
      "Optimized core design for reduced losses",
      "Widely used in electrification programs across Bangladesh",
    ],
  },
  {
    id: "power",
    label: "Power Transformers",
    icon: Activity,
    title: "High-Capacity Power Transformers",
    description:
      "Large-scale power transformers built for transmission and sub-transmission networks, designed to handle heavy electrical loads with maximum reliability and efficiency.",
    points: [
      "Rated for high voltage transmission applications",
      "Advanced insulation and cooling systems",
      "Certified by internationally recognized testing labs",
      "Engineered for long-term durability and performance",
    ],
  },
  {
    id: "ct",
    label: "Current Transformers (CT)",
    icon: Cpu,
    title: "Precision Current Transformers",
    description:
      "Accurate metering and protection CTs designed for power metering panels, substations, and industrial switchgear applications throughout Bangladesh.",
    points: [
      "High accuracy class for metering and protection",
      "Compact design for easy panel integration",
      "Stable performance across temperature ranges",
      "Essential for modern power distribution systems",
    ],
  },
  {
    id: "pt",
    label: "Potential Transformers (PT)",
    icon: BarChart3,
    title: "Voltage Measurement Potential Transformers",
    description:
      "Reliable PTs providing accurate voltage measurements for protection relays, energy meters, and monitoring systems in utility and industrial environments.",
    points: [
      "High insulation voltage for safety compliance",
      "Low phase angle error for precision measurement",
      "Wide range of voltage ratios available",
      "Supports reliable grid monitoring and protection",
    ],
  },
  {
    id: "custom",
    label: "Custom Solutions",
    icon: Settings,
    title: "Custom Engineered Transformer Solutions",
    description:
      "Tailored transformer solutions for special applications — renewable energy integration, mining, marine, and large infrastructure projects requiring unique specifications.",
    points: [
      "Application-specific design and engineering",
      "Full-scale prototype testing before production",
      "Dedicated project engineering support",
      "Innovative solutions for evolving energy needs",
    ],
  },
];

const STATS = [
  { value: "500+", label: "Transformers Delivered" },
  { value: "20+", label: "Years of Excellence" },
  { value: "100%", label: "Quality Tested" },
  { value: "50+", label: "Project Partners" },
];

const CERTIFICATIONS = [
  {
    icon: Award,
    title: "International Standards",
    desc: "Products tested and certified by globally recognized testing laboratories to IEC and ISO standards.",
  },
  {
    icon: Shield,
    title: "Safety & Reliability",
    desc: "Rigorous quality control at every production stage ensuring maximum operational safety and durability.",
  },
  {
    icon: Factory,
    title: "Modern Manufacturing",
    desc: "Large-scale facility with advanced production technologies and modern automated testing systems.",
  },
  {
    icon: Target,
    title: "Engineering Excellence",
    desc: "Highly skilled workforce and strong engineering capabilities focused on continuous technological advancement.",
  },
];

export default function Page() {
  const [activeProduct, setActiveProduct] = useState("distribution");
  const [mobileOpen, setMobileOpen] = useState(false);
  const [email, setEmail] = useState("");
  const [website, setWebsite] = useState("");

  const active = PRODUCTS.find((p) => p.id === activeProduct)!;
  const ActiveIcon = active.icon;

  return (
    <div
      className="min-h-screen w-full font-sans antialiased"
      style={{ fontFamily: "'Inter', sans-serif" }}
    >

<section>
  <div
    className="w-full overflow-hidden bg-gradient-to-br from-[#0f3460] via-[#16213e] to-[#1a1a2e]"
    style={{ fontFamily: "'Inter', sans-serif" }}
  >

    <div className="relative flex flex-col overflow-hidden md:flex-row">

      <div
        className="order-2 lg:order-1 relative flex w-full flex-col justify-center overflow-hidden px-4 pb-14 pt-7 lg:pt-16 sm:px-6 md:w-[60%] md:px-14 md:pb-38 md:pt-28 lg:w-[58%] lg:px-20"
        style={{ minHeight: "80vh" }}
      >

        <svg
          className="absolute inset-0 h-full w-full pointer-events-none"
          viewBox="0 0 700 700"
          preserveAspectRatio="xMidYMid slice"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>

            <filter
              id="waterGlow"
              x="-20%"
              y="-20%"
              width="140%"
              height="140%"
            >
              <feGaussianBlur stdDeviation="0.7" />
            </filter>
            <filter
              id="waterGlowStrong"
              x="-20%"
              y="-20%"
              width="140%"
              height="140%"
            >
              <feGaussianBlur stdDeviation="1.5" />
            </filter>

          </defs>

          <path
            className="water-wave wave-1"
            d="M-100 560 Q80 520 180 540 Q280 560 360 510 Q440 460 520 490 Q600 520 680 470 Q760 420 850 440"
            stroke="rgba(100,120,255,0.60)"
            strokeWidth="1.2"
            fill="none"
          />

          <path
            className="water-wave wave-2"
            d="M-100 510 Q60 470 170 490 Q280 510 360 455 Q440 400 530 430 Q620 460 800 415"
            stroke="rgba(100,120,255,0.50)"
            strokeWidth="1"
            fill="none"
          />

          <path
            className="water-wave wave-3"
            d="M-100 455 Q70 415 190 440 Q310 465 390 400 Q470 335 560 368 Q650 401 820 360"
            stroke="rgba(120,140,255,0.45)"
            strokeWidth="1.2"
            fill="none"
          />

          <path
            className="water-wave wave-4"
            d="M-100 620 Q100 580 210 600 Q320 620 400 565 Q480 510 570 545 Q660 580 840 535"
            stroke="rgba(100,120,255,0.40)"
            strokeWidth="0.9"
            fill="none"
          />

          <path
            className="water-wave wave-5"
            d="M-100 395 Q80 352 200 380 Q320 408 400 340 Q480 272 570 305 Q660 338 830 300"
            stroke="rgba(140,160,255,0.35)"
            strokeWidth="0.8"
            fill="none"
          />

          <path
            className="water-wave wave-6"
            d="M-100 340 Q90 295 210 325 Q330 355 410 282 Q490 209 585 244 Q680 279 850 238"
            stroke="rgba(120,140,255,0.30)"
            strokeWidth="0.9"
            fill="none"
          />

          <path
            className="water-wave wave-7"
            d="M-100 275 Q100 228 225 262 Q350 296 430 220 Q510 144 610 182 Q710 220 880 178"
            stroke="rgba(100,120,255,0.25)"
            strokeWidth="0.8"
            fill="none"
          />

          <path
            className="water-wave wave-8"
            d="M-100 210 Q110 160 238 198 Q366 236 445 157 Q524 78 630 118 Q736 158 900 115"
            stroke="rgba(100,120,255,0.20)"
            strokeWidth="0.7"
            fill="none"
          />

          <path
            className="water-wave glow-wave wave-9"
            d="M-100 580 Q50 550 160 570 Q270 590 350 540 Q430 490 520 520 Q610 550 850 500"
            stroke="rgba(80,110,255,0.22)"
            strokeWidth="2"
            fill="none"
            filter="url(#waterGlow)"
          />

          <path
            className="water-wave glow-wave wave-10"
            d="M-100 430 Q40 395 160 420 Q280 445 370 375 Q460 305 550 340 Q640 375 850 320"
            stroke="rgba(100,140,255,0.16)"
            strokeWidth="2"
            fill="none"
            filter="url(#waterGlowStrong)"
          />
        </svg>

        <div
          className=" absolute right-[20%] top-[25%] h-32 w-32 rounded-full pointer-events-none"
          style={{
            background:
              "radial-gradient(circle, rgba(80,120,255,0.12) 0%, transparent 70%)",
            filter: "blur(10px)",
            animation: "dewPulse 7s ease-in-out infinite",
          }}
        />

        <div
          className="absolute right-[35%] bottom-[25%] h-24 w-24 rounded-full pointer-events-none"
          style={{
            background:
              "radial-gradient(circle, rgba(80,120,255,0.10) 0%, transparent 70%)",
            filter: "blur(12px)",
            animation: "dewPulse 9s ease-in-out infinite reverse",
          }}
        />

        <div
          className="absolute -bottom-20 -left-20 lg:bottom-0 lg:left-0 z-0 pointer-events-none bg-white"
          style={{
            width: "180px",
            height: "180px",
            background: "white",
            borderRadius: "0 100% 0 0",
          }}
        />

        <div className="relative z-10 max-w-2xl">

          <h1
            className="mb-6 text-4xl font-black leading-[1.08] tracking-tight text-white sm:text-5xl md:text-6xl"
          >
            <span
              className="block whitespace-normal md:whitespace-nowrap"
              style={{ fontFamily: "Georgia, 'Times New Roman', serif" }}
            >
              TS Transformers <span className="text-blue-500">Ltd.</span>
            </span>
          </h1>
          <h5 className="mb-5 text-xl text-white sm:text-2xl">Reliable Power. Trusted Engineering.</h5>

          {/* DESCRIPTION */}

          <p className="mb-5 max-w-5xl text-sm leading-relaxed text-white/60 md:text-base">
            TS Transformers Ltd., a member company of SQ Group, is a specialist transformer and power solutions business serving Bangladesh's utilities, industries, commercial developments and infrastructure sectors.
            With nearly two decades of transformer manufacturing experience, TS has built its reputation around four principles: Design, Quality, Reliability and Commitment.

          </p>
          <p className="mb-10 max-w-5xl text-sm leading-relaxed text-white/60 md:text-base">The company combines engineering expertise, customer-focused solutions and dependable after-sales support to deliver transformer systems designed for long-term performance and lower lifecycle cost. TS states that it has supplied hundreds of thousands of transformers in different capacities and configurations and has earned the trust of government power utilities and private-sector customers. 
            Engineering Confidence into Every Connection

          </p>

          <div className="flex gap-4 sm:flex-row sm:items-center">

            <Link
              href="/price/?product=Transformer&category=Distribution+Transformer"
              className="rounded-lg border-2 border-white px-7 py-3.5 text-sm font-semibold text-white transition-all duration-300 hover:border-blue-600 hover:bg-blue-600"
            >
              Get Started
            </Link>

            <Link
              href="/contact"
              className="rounded-lg border-2 border-blue-600  px-7 py-3.5 text-sm font-semibold text-white transition-all duration-300 hover:border-whtie hover:bg-white hover:text-blue-700"
            >
              Contact Us
            </Link>

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

      <div className="lg:mt-0 mt-30 order-1 lg:order-2 relative h-52 w-full md:block md:h-auto md:w-[40%] lg:w-[42%]">

        <img
          src={tsImg3.src}
          alt="Business team collaborating in a meeting"
          className="h-full w-full object-cover md:absolute md:inset-0"
        />


        <div
          className="absolute inset-y-0 right-0 z-10 w-full pointer-events-none opacity-50"
          style={{
            background:
              "linear-gradient(to right, transparent, #0f0b24)",
            
          }}
        />

      </div>
    </div>

    <style jsx>{`

      .water-wave {
        stroke-dasharray: 180 35 90 25;
        stroke-dashoffset: 0;

        animation-name: infiniteWaterFlow;
        animation-timing-function: linear;
        animation-iteration-count: infinite;

        will-change: stroke-dashoffset;
      }

      .wave-1 {
        animation-duration: 18s;
      }

      .wave-2 {
        animation-duration: 21s;
        animation-direction: reverse;
      }

      .wave-3 {
        animation-duration: 24s;
      }

      .wave-4 {
        animation-duration: 20s;
        animation-direction: reverse;
      }

      .wave-5 {
        animation-duration: 27s;
      }

      .wave-6 {
        animation-duration: 30s;
        animation-direction: reverse;
      }

      .wave-7 {
        animation-duration: 34s;
      }

      .wave-8 {
        animation-duration: 38s;
        animation-direction: reverse;
      }

      .wave-9 {
        animation-duration: 26s;
      }

      .wave-10 {
        animation-duration: 32s;
        animation-direction: reverse;
      }

      @keyframes infiniteWaterFlow {

        0% {
          stroke-dashoffset: 0;
        }

        100% {
          stroke-dashoffset: -600;
        }

      }

      .glow-wave {
        animation-name: infiniteWaterGlow;
      }

      @keyframes infiniteWaterGlow {

        0% {
          stroke-dashoffset: 0;
          opacity: 0.12;
        }

        20% {
          opacity: 0.20;
        }

        40% {
          opacity: 0.30;
        }

        60% {
          opacity: 0.22;
        }

        80% {
          opacity: 0.16;
        }

        100% {
          stroke-dashoffset: -600;
          opacity: 0.12;
        }

      }


      @keyframes dewPulse {

        0% {
          transform: scale(0.8);
          opacity: 0.2;
        }

        50% {
          transform: scale(1.3);
          opacity: 0.5;
        }

        100% {
          transform: scale(0.8);
          opacity: 0.2;
        }

      }

      @media (max-width: 768px) {

        .water-wave {
          stroke-dasharray: 150 30 70 20;
        }

      }

      @media (prefers-reduced-motion: reduce) {

        .water-wave {
          animation: none !important;
        }

      }

    `}</style>
  </div>
</section>

      <section>
        <TsBusiness></TsBusiness>
      </section>

      <section className="relative z-10 bg-gradient-to-br from-[#0f3460] via-[#16213e] to-[#1a1a2e] pt-16 ">
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          <div className="absolute top-8 left-8 text-white/10 text-8xl font-bold select-none">★</div>
          <div className="absolute top-20 right-16 text-white/10 text-5xl font-bold select-none">★</div>
          <div className="absolute bottom-32 left-1/4 text-white/5 text-9xl font-bold select-none">★</div>
          <div className="absolute top-1/3 right-8 text-white/5 text-6xl font-bold select-none">★</div>
        </div>

        <div className="relative container mx-auto px-6 lg:pb-10 lg:pt-5 flex flex-col items-center text-center">
          <h4
            className="text-white text-xl md:text-3xl font-semibold leading-tight mb-4"
          >
            Engineering Reliable Power 
            <span className="text-orange-500"> for Bangladesh's Future</span>
          </h4>
          <p className="text-gray-300 text-xs lg:text-base max-w-xl mb-8">
            Part of SQ Group · Advanced Manufacturing · Internationally Certified
          </p>
        </div>
        <div className="relative z-10 max-w-7xl mx-auto lg:px-6 pb-0 ">
          <div className=" rounded-t-2xl shadow-2xl h-64 md:h-80">
            <div className="absolute z-20 lg:h-[700px] h-[400px] w-full lg:p-0 p-3">
              <Link href={'/plants/ts-transformers-gazipur'}>
                <Image className="h-full w-full rounded-2xl" src={tsImg2} alt={'TS Transformers Manufacturing Facility'} ></Image>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-white pt-43 lg:pt-100 pb-0 lg:pb-20">
        <div className="container mx-auto px-6">
          <div className="text-center mb-14">
            <span className="inline-block bg-[#f5a623]/10 text-orange-500 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 border border-[#f5a623]/20">
              About Us
            </span>
            <h2
              className="text-3xl md:text-4xl font-bold text-[#1a2c5b] mb-4"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Bangladesh's Premier Transformer
              <br />
              Manufacturer
            </h2>
            <p className="text-gray-500 text-sm max-w-md mx-auto leading-relaxed">
              TS Transformers Ltd. is one of Bangladesh's leading transformer manufacturers,
              specializing in high-quality power and distribution transformers for the
              country's growing energy and infrastructure sectors.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-16 items-center">

            <div className="relative">
              <div className="relative rounded-2xl  h-[400px] flex items-center justify-center shadow-xl">
                <Image className="h-full w-full lg:object-fill object-cover rounded-2xl" src={tsImg} alt={'TS Transformers Manufacturing Facility'} ></Image>
              </div>
              <div className="absolute -top-3 -left-3 max-w-[140px] rounded-xl border border-gray-100 bg-white p-3 shadow-lg sm:-top-6 sm:-left-6 sm:max-w-[180px] sm:p-4">
                <div className="flex items-start gap-3">
                  <div className="h-8 w-8 shrink-0 rounded-full bg-[#f5a623]/10 flex items-center justify-center">
                    <Activity className="h-4 w-4 text-orange-500" />
                  </div>
                  <div>
                    <p className="text-xs font-semibold text-gray-800">Quality Testing</p>
                    <p className="mt-0.5 text-[10px] text-gray-400 sm:text-xs">Internationally certified labs</p>
                  </div>
                </div>
              </div>
              <div className="absolute -bottom-3 -right-3 max-w-[140px] rounded-xl border border-gray-100 bg-white p-3 shadow-lg sm:-bottom-6 sm:-right-4 sm:max-w-[180px] sm:p-4">
                <div className="flex items-center gap-1 mb-2">
                  {[1, 2, 3, 4, 5].map((s) => (
                    <Star key={s} className="w-3 h-3 fill-[#f5a623] text-orange-500" />
                  ))}
                </div>
                <p className="text-xs font-semibold text-gray-800">Engineering Excellence</p>
                <p className="text-xs text-gray-400 mt-0.5">Trusted across Bangladesh</p>
              </div>
            </div>

            <div>
              <h3
                className="text-2xl font-bold text-[#1a2c5b] mb-4 leading-snug"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                Powering the Nation with{" "}
                <span className="text-orange-500">Reliable Energy Solutions</span>
              </h3>
              <p className="text-gray-500 text-sm leading-relaxed mb-6">
                Established as part of SQ Group's long-term industrial expansion strategy,
                TS Transformers Ltd. operates a large-scale manufacturing facility equipped
                with advanced production technologies and modern testing systems to ensure
                the highest standards of quality, safety, and reliability.
              </p>
              <ul className="space-y-3 mb-8">
                {[
                  "Comprehensive range of single-phase and three-phase transformers",
                  "Products tested by internationally recognized testing laboratories",
                  "Widely used by power utilities and industrial facilities",
                  "Commitment to global quality standards and innovation",
                ].map((point) => (
                  <li key={point} className="flex items-start gap-3 text-sm text-gray-600">
                    <CheckCircle className="w-4 h-4 text-orange-500 mt-0.5 shrink-0" />
                    {point}
                  </li>
                ))}
              </ul>
              <a
                href="#products"
                className="inline-flex items-center gap-2 text-orange-500 font-semibold text-sm hover:gap-3 transition-all"
              >
                Explore Products <ArrowRight className="w-4 h-4" />
              </a>
            </div>
          </div>
        </div>
      </section>



      <section className="bg-[#f8f9fc] py-14">
        <div className="container mx-auto grid grid-cols-2 gap-6 px-4 text-center sm:px-6 md:grid-cols-4 md:gap-8">
          {STATS.map((s) => (
            <div key={s.label}>
              <p
                className="text-4xl font-bold text-[#1a2c5b] mb-1"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                {s.value}
              </p>
              <p className="text-xs text-gray-500 font-medium">{s.label}</p>
            </div>
          ))}
        </div>
      </section>

      <section>
        <TsServices></TsServices>
      </section>

      <section>
        <TsBusinessModel></TsBusinessModel>
      </section>

      <section id="products" className="bg-white lg:py-20 py-5">
        <div className="container mx-auto px-6">
          <div className="text-center mb-14">
            <span className="inline-block bg-[#f5a623]/10 text-orange-500 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 border border-[#f5a623]/20">
              Key Products
            </span>
            <h2
              className="text-3xl md:text-4xl font-bold text-[#1a2c5b] mb-4"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Provide Comprehensive
              <br />
              Transformer Solutions
            </h2>
            <p className="text-gray-500 text-sm max-w-md mx-auto leading-relaxed">
              A full product range designed to meet national and international
              technical standards for every application.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-[320px_1fr] md:gap-10">
            <ul className="flex flex-wrap gap-2 md:flex-col md:flex-nowrap md:overflow-visible">
              {PRODUCTS.map((p) => {
                const Icon = p.icon;
                const isActive = activeProduct === p.id;
                return (
                  <li key={p.id} className="min-w-[180px] flex-1 md:min-w-0">
                    <button
                      onClick={() => setActiveProduct(p.id)}
                      className={`flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium transition-all ${
                        isActive
                          ? "bg-orange-500 text-white shadow-md"
                          : "text-gray-500 hover:text-[#1a2c5b] hover:bg-gray-50"
                      }`}
                    >
                      <Icon className={`h-4 w-4 shrink-0 ${isActive ? "text-white" : "text-gray-400"}`} />
                      <span className="block truncate">{p.label}</span>
                    </button>
                  </li>
                );
              })}
            </ul>

            <div>
              <div className="bg-[#f8f9fc] rounded-2xl p-8 border border-gray-100">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 rounded-lg bg-[#f5a623]/10 flex items-center justify-center">
                    <ActiveIcon className="w-5 h-5 text-orange-500" />
                  </div>
                  <h3
                    className="text-xl font-bold text-[#1a2c5b]"
                    style={{ fontFamily: "'Poppins', sans-serif" }}
                  >
                    {active.title}
                  </h3>
                </div>
                <p className="text-gray-500 text-sm leading-relaxed mb-6">
                  {active.description}
                </p>
                <ul className="space-y-3">
                  {active.points.map((pt) => (
                    <li key={pt} className="flex items-start gap-3 text-sm text-gray-600">
                      <CheckCircle className="w-4 h-4 text-orange-500 mt-0.5 shrink-0" />
                      {pt}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <TotalTransformers></TotalTransformers>
      </section>

      <section className="bg-[#f8f9fc] py-20">
        <div className="container mx-auto px-6">
          <div className="text-center mb-14">
            <span className="inline-block bg-[#f5a623]/10 text-orange-500 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 border border-[#f5a623]/20">
              Our Commitment
            </span>
            <h2
              className="text-3xl md:text-4xl font-bold text-[#1a2c5b] mb-4"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              Engineering Excellence You
              <br />
              Can Trust
            </h2>
            <p className="text-gray-500 text-sm max-w-lg mx-auto leading-relaxed">
              TS Transformers has earned a strong reputation for product durability
              and dependable performance, certified by internationally recognized
              testing laboratories.
            </p>
          </div>

          <div className="grid items-center gap-10 md:grid-cols-2">

            <div className="relative">
              <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 sm:p-8">
                <div className="text-orange-500 text-5xl font-serif leading-none mb-4">"</div>
                <blockquote className="text-gray-600 text-sm leading-relaxed mb-6">
                  Over the years, TS Transformers has earned a strong reputation for
                  engineering excellence, product durability, and dependable
                  performance. Its products are tested and certified by internationally
                  recognized testing laboratories, reflecting its commitment to global
                  quality standards and continuous technological advancement.
                </blockquote>
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-[#1a2c5b] flex items-center justify-center shrink-0">
                    <span className="text-white font-bold text-xs">SQ</span>
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-gray-800">SQ Group Management</p>
                    <p className="text-xs text-gray-400">
                      TS Transformers Ltd.{" "}
                      <span className="text-orange-500">· Company Statement</span>
                    </p>
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-3 mt-6 px-2">
                {["#1a2c5b", "#f5a623", "#22c55e", "#8b5cf6", "#ef4444"].map(
                  (color, i) => (
                    <div
                      key={i}
                      className="w-9 h-9 rounded-full border-2 border-white shadow flex items-center justify-center text-white text-xs font-bold"
                      style={{ background: color }}
                    >
                      {["IEC", "BSTI", "ISO", "CE", "QA"][i]}
                    </div>
                  )
                )}
                <span className="text-xs text-gray-400 ml-1">Certified quality</span>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {CERTIFICATIONS.map(({ icon: Icon, title, desc }) => (
                <div
                  key={title}
                  className="bg-white rounded-xl p-5 border border-gray-100 shadow-sm hover:shadow-md transition-shadow"
                >
                  <div className="w-9 h-9 rounded-lg bg-[#1a2c5b]/5 flex items-center justify-center mb-3">
                    <Icon className="w-4 h-4 text-[#1a2c5b]" />
                  </div>
                  <p className="text-sm font-semibold text-gray-800 mb-1.5">{title}</p>
                  <p className="text-xs text-gray-400 leading-relaxed">{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="container mx-auto px-6">
          <div className="grid items-center gap-14 md:grid-cols-2">
            <div>
              <span className="inline-block bg-[#f5a623]/10 text-orange-500 text-xs font-semibold px-4 py-1.5 rounded-full mb-5 border border-[#f5a623]/20">
                About TS Transformers
              </span>
              <h2
                className="text-3xl font-bold text-[#1a2c5b] mb-5 leading-snug"
                style={{ fontFamily: "'Poppins', sans-serif" }}
              >
                Contributing to Bangladesh's Power
                Infrastructure
              </h2>
              <p className="text-gray-500 text-sm leading-relaxed mb-4">
                Established as part of SQ Group's long-term industrial expansion
                strategy, TS Transformers Ltd. operates a large-scale manufacturing
                facility equipped with advanced production technologies and modern
                testing systems to ensure the highest standards of quality, safety,
                and reliability.
              </p>
              <p className="text-gray-500 text-sm leading-relaxed mb-4">
                The company manufactures a comprehensive range of single-phase and
                three-phase distribution transformers, power transformers, current
                transformers (CT), and potential transformers (PT) designed to meet
                national and international technical standards. Its products are widely
                used by power utilities, industrial facilities, infrastructure projects,
                and electrification programs across Bangladesh.
              </p>
              <p className="text-gray-500 text-sm leading-relaxed mb-8">
                With a highly skilled workforce, strong engineering capabilities, and
                a focus on innovation, TS Transformers Ltd. continues to contribute
                significantly to Bangladesh's power distribution and transmission
                infrastructure while supporting the nation's growing demand for
                reliable energy solutions.
              </p>
              <div className="flex flex-wrap gap-3">
                <div className="flex items-center gap-2 bg-[#f8f9fc] rounded-lg px-4 py-2.5 border border-gray-100">
                  <MapPin className="w-4 h-4 text-orange-500" />
                  <span className="text-xs font-medium text-gray-600">Dhaka, Bangladesh</span>
                </div>
                <div className="flex items-center gap-2 bg-[#f8f9fc] rounded-lg px-4 py-2.5 border border-gray-100">
                  <Phone className="w-4 h-4 text-orange-500" />
                  <span className="text-xs font-medium text-gray-600">Part of SQ Group</span>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {[
                { label: "Power Utilities", value: "Nationwide Coverage", color: "#1a2c5b" },
                { label: "Industrial Clients", value: "500+ Projects", color: "#1a2c5b" },
                { label: "IEC Certified", value: "International Standards", color: "#1a2c5b" },
                { label: "SQ Group", value: "Industrial Excellence", color: "#1a2c5b" },
              ].map(({ label, value, color }) => (
                <div
                  key={label}
                  className="rounded-xl p-5 text-white"
                  style={{ background: color }}
                >
                  <p className="text-xs font-medium opacity-80 mb-2">{label}</p>
                  <p className="text-sm font-bold leading-snug">{value}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

    <section
      id="contact"
      className="bg-gradient-to-br from-[#0f3460] via-[#16213e] to-[#1a1a2e] py-20 [background:linear-gradient(135deg,#1a2c5b_0%,#2a4080_100%)]"
    >
      <div className="max-w-4xl mx-auto px-6 text-center">
        <h2
          className="text-3xl md:text-4xl font-bold text-white mb-4 font-['Poppins',sans-serif]"
        >
          Power Your Project with
          <span className="text-orange-500">TS Transformers</span>
        </h2>
        <p className="text-gray-300 text-sm max-w-md mx-auto mb-10 leading-relaxed">
          Contact us to discuss your transformer requirements and get a tailored
          quote from our engineering team.
        </p>

        <div className="flex flex-col sm:flex-row gap-3 max-w-2xl mx-auto">
          <div className="flex-1 relative">
            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <input
              type="email"
              placeholder="Email Address"
              className="w-full bg-white border border-gray-200 rounded-md pl-10 pr-4 py-3 text-sm text-gray-700 outline-none focus:ring-2 focus:ring-[#f5a623]/50"
            />
          </div>
          <div className="flex-1 relative">
            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9" />
            </svg>
            <input
              type="text"
              placeholder="Company / Project Name"
              className="w-full bg-white border border-gray-200 rounded-md pl-10 pr-4 py-3 text-sm text-gray-700 outline-none focus:ring-2 focus:ring-[#f5a623]/50"
            />
          </div>
          <button className="bg-orange-500 text-white font-semibold px-7 py-3 rounded-md hover:bg-orange-600 transition-colors text-sm whitespace-nowrap shadow-lg">
            Get Report
          </button>
        </div>

        <div className="mt-10 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-center gap-6 text-md text-gray-200/90">
          <div className="flex items-center gap-2">
            <svg className="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            <span>01979-643460</span>
            <span className="mx-1 text-white/20">|</span>
            <span>01979-643465</span>
          </div>
          <div className="flex items-center gap-2">
            <svg className="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <span>ts_info@tstransformers.com</span>
          </div>
        </div>
      </div>
    </section>

    </div>
  );
}