import Link from 'next/link';
import tsImg1 from '../../../../../public/assets/business-units/ts-transformer/ts-transformers1.webp'
import tsImg2 from '../../../../../public/assets/business-units/ts-transformer/ts-transformers2.webp'
import tsImg3 from '../../../../../public/assets/business-units/ts-transformer/ts-transformers3.webp'



function Arc({
  size = 88,
  stroke = "#7c6bff",
  sw = 14,
  rotation = 220,
}: {
  size?: number;
  stroke?: string;
  sw?: number;
  rotation?: number;
}) {
  const r = (size - sw) / 2;
  const circ = 2 * Math.PI * r;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle
        cx={size / 2}
        cy={size / 2}
        r={r}
        fill="none"
        stroke={stroke}
        strokeWidth={sw}
        strokeDasharray={`${circ * 0.6} ${circ}`}
        strokeLinecap="round"
        transform={`rotate(${rotation} ${size / 2} ${size / 2})`}
      />
    </svg>
  );
}

function Dot({ size = 20, color = "#f59e0b" }: { size?: number; color?: string }) {
  return (
    <div
      style={{ width: size, height: size, backgroundColor: color, borderRadius: "50%" }}
    />
  );
}

const section1Features = [
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
        <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
      </svg>
    ),
    title: "Engineering Support",
    desc: "Technical guidance before procurement and throughout the asset's operating life.",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
        <path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
      </svg>
    ),
    title: "Dependable Manufacturing",
    desc: "Dedicated Gazipur facility combining design, production and quality assurance.",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
    title: "Verified Testing",
    desc: "Routine and specialised testing that supports product quality and confidence.",
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
        <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
      </svg>
    ),
    title: "Lifecycle Service",
    desc: "Repair, reconditioning and long-term technical assistance beyond initial supply.",
  },
];

const section2Features = [
  { title: "Proven Experience", desc: "Nearly two decades of specialist transformer manufacturing and market experience." },
  { title: "Customer Trust", desc: "Serving government power utilities and private-sector customers across Bangladesh." },
  { title: "Engineering-Led Design", desc: "Computerised design for accurate electrical and mechanical engineering." },
  { title: "Comprehensive Portfolio", desc: "Distribution, power and instrument transformers plus substation solutions." },
  { title: "Testing Capability", desc: "Routine and specialised testing to support product quality." },
  { title: "Lifecycle Support", desc: "Repair, reconditioning and technical assistance extending beyond initial supply." },
  { title: "Quality Management", desc: "ISO 9001:2015 certified quality management system." },
];

const section3Points = [
  {
    label: "Deepen Utility & Infrastructure Business",
    detail: "Strengthen relationships with utilities, EPC contractors and major infrastructure projects.",
  },
  {
    label: "Expand Industrial Solutions",
    detail: "Grow as a transformer and substation partner to Bangladesh's expanding manufacturing sector.",
  },
  {
    label: "Increase Power Transformer Capability",
    detail: "Continue developing higher-capacity and technically demanding transformer solutions.",
  },
  {
    label: "Strengthen Lifecycle Services",
    detail: "Expand testing, repair, reconditioning and technical service relationships.",
  },
];

export default function TotalTransformers() {
  return (
    <div
      className="min-h-screen bg-white overflow-x-hidden"
      style={{ fontFamily: "'Outfit', sans-serif", color: "#1a2744" }}
    >
      <section className="relative py-24 px-6 md:px-12 container mx-auto">
        <div className="absolute left-2 top-16 bubble-float-up" style={{ zIndex: 0 }}>
          <Arc size={96} stroke="#7c6bff" sw={14} rotation={220} />
        </div>
        <div className="absolute left-16 bottom-20 bubble-pulse" style={{ zIndex: 0 }}>
          <Dot size={22} color="#f59e0b" />
        </div>
        <div className="absolute right-4 top-12 bubble-drift-right" style={{ zIndex: 0 }}>
          <Dot size={14} color="#f472b6" />
        </div>
        <div
          className="absolute bubble-float-down"
          style={{ right: "48%", bottom: 32, zIndex: 0 }}
        >
          <Arc size={64} stroke="#0ea5e9" sw={10} rotation={40} />
        </div>

        <div className="relative z-10 grid md:grid-cols-2 gap-12 lg:gap-20 items-center">
          <div className="relative">
            <div
              className="relative overflow-hidden bg-slate-200"
              style={{ borderRadius: 28 }}
            >
              <img
                src={tsImg1.src}
                alt="Electrical transformer substation — TS Transformers supply"
                className="w-full h-[460px] md:h-[520px] object-cover"
              />
              <div
                className="absolute inset-0"
                style={{
                  background:
                    "linear-gradient(to top, rgba(15,35,73,0.45) 0%, transparent 55%)",
                }}
              />
            </div>
            <div
              className="absolute bottom-6 right-6 bg-white shadow-2xl px-5 py-4"
              style={{ borderRadius: 18, minWidth: 140 }}
            >
              <p
                className="text-4xl font-bold leading-none"
                style={{ fontFamily: "'Roboto Slab', serif", color: "#1a2744" }}
              >
                18+
              </p>
              <p className="text-sm font-medium text-slate-500 mt-1 leading-tight">
                Years Specialist<br />Manufacturing
              </p>
            </div>
          </div>

          <div>
            <span
              className="text-md font-bold tracking-[0.18em] uppercase"
              style={{ color: "#7c6bff" }}
            >
              Total Transformer Solutions
            </span>
            <h2
              className="text-4xl lg:text-5xl font-bold leading-tight mt-3 mb-5"
              style={{ fontFamily: "'Roboto Slab', serif", color: "#0f2349" }}
            >
              Beyond Equipment Supply
            </h2>
            <p className="text-slate-600 leading-relaxed text-[15px] mb-4">
              Transformer customers increasingly require more than a manufactured unit. They require
              engineering support before procurement, dependable manufacturing, verified testing,
              installation support and technical assistance throughout the operating life of the asset.
            </p>
            <p className="text-slate-600 leading-relaxed text-[15px] mb-8">
              TS Transformers approaches the market as a transformer and substation{" "}
              <span className="font-semibold text-slate-700">solutions partner</span>, supporting
              customers from initial consultation through proposal, supply, installation, inspection
              and lifecycle service.
            </p>
            <div
              className="inline-block px-4 py-2 mb-8 rounded-xl text-sm font-semibold"
              style={{ background: "#f0eeff", color: "#5b4ee8" }}
            >
              Our objective: dependable transformer and power solutions from specification to long-term operation.
            </div>
            <div className="grid grid-cols-2 gap-x-6 gap-y-6">
              {section1Features.map((f) => (
                <div key={f.title} className="flex gap-3 items-start">
                  <div
                    className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center"
                    style={{ background: "#f0eeff", color: "#7c6bff" }}
                  >
                    {f.icon}
                  </div>
                  <div>
                    <p className="font-semibold text-[14px]" style={{ color: "#0f2349" }}>
                      {f.title}
                    </p>
                    <p className="text-slate-500 text-[13px] mt-0.5 leading-snug">{f.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <div className="max-w-7xl mx-auto px-12">
        <div className="h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent" />
      </div>

      <section
        className="relative py-24 px-6 md:px-12 container mx-auto"
        style={{ background: "linear-gradient(135deg, #fafbff 0%, #f5f3ff 100%)" }}
      >
        <div
          className="absolute bubble-float-up"
          style={{ right: 20, top: 48, zIndex: 0 }}
        >
          <Arc size={104} stroke="#0ea5e9" sw={13} rotation={30} />
        </div>
        <div
          className="absolute bubble-pulse"
          style={{ right: 100, bottom: 60, zIndex: 0 }}
        >
          <Dot size={18} color="#f59e0b" />
        </div>
        <div
          className="absolute bubble-float-down"
          style={{ left: "52%", top: 24, zIndex: 0 }}
        >
          <Dot size={12} color="#f472b6" />
        </div>
        <div className="absolute left-4 bottom-32 bubble-drift-left" style={{ zIndex: 0 }}>
          <Arc size={56} stroke="#7c6bff" sw={9} rotation={150} />
        </div>

        <div className="relative z-10 grid md:grid-cols-2 gap-12 lg:gap-20 items-center">
          <div>
            <span
              className="text-md font-bold tracking-[0.18em] uppercase"
              style={{ color: "#0ea5e9" }}
            >
              Why TS Transformers?
            </span>
            <h2
              className="text-4xl lg:text-5xl font-bold leading-tight mt-3 mb-5"
              style={{ fontFamily: "'Roboto Slab', serif", color: "#0f2349" }}
            >
              A Business Built Around Reliability
            </h2>
            <p className="text-slate-600 text-[15px] leading-relaxed mb-8">
              From government power utilities to private-sector customers across Bangladesh,
              TS Transformers has built a reputation on engineering knowledge, quality delivery
              and long-term customer relationships.
            </p>
            <div className="grid grid-cols-1 gap-4">
              {section2Features.map((f, i) => (
                <div key={f.title} className="flex gap-4 items-start">
                  <div
                    className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
                    style={{ background: "#e0f2fe", color: "#0284c7" }}
                  >
                    {String(i + 1).padStart(2, "0")}
                  </div>
                  <div>
                    <p className="font-semibold text-[14px]" style={{ color: "#0f2349" }}>
                      {f.title}
                    </p>
                    <p className="text-slate-500 text-[13px] mt-0.5">{f.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="relative">
            <div
              className="relative overflow-hidden bg-slate-200"
              style={{ borderRadius: 28 }}
            >
              <img
                src={tsImg2.src}
                alt="Power transformer insulators and components against blue sky"
                className="w-full h-[520px] md:h-[580px] object-cover"
              />
              <div
                className="absolute inset-0"
                style={{
                  background:
                    "linear-gradient(to top, rgba(15,35,73,0.5) 0%, transparent 50%)",
                }}
              />
            </div>
            <div
              className="absolute bottom-6 left-6 bg-white shadow-2xl px-5 py-4"
              style={{ borderRadius: 18 }}
            >
              <div className="flex items-center gap-2 mb-1">
                <div className="w-2.5 h-2.5 rounded-full bg-emerald-400" />
                <p className="text-xs font-semibold text-emerald-600 uppercase tracking-wider">
                  Certified
                </p>
              </div>
              <p
                className="text-base font-bold leading-tight"
                style={{ fontFamily: "'Roboto Slab', serif", color: "#0f2349" }}
              >
                ISO 9001:2015
              </p>
              <p className="text-xs text-slate-500 mt-0.5">Quality Management System</p>
            </div>
          </div>
        </div>
      </section>

      <div className="max-w-7xl mx-auto px-12">
        <div className="h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent" />
      </div>

      <section className="relative py-24 px-6 md:px-12 container mx-auto">
        <div className="absolute left-8 top-20 bubble-float-up" style={{ zIndex: 0 }}>
          <Arc size={80} stroke="#f59e0b" sw={12} rotation={200} />
        </div>
        <div className="absolute left-28 bottom-16 bubble-pulse" style={{ zIndex: 0 }}>
          <Dot size={16} color="#7c6bff" />
        </div>
        <div className="absolute right-10 bottom-28 bubble-drift-right" style={{ zIndex: 0 }}>
          <Arc size={72} stroke="#f472b6" sw={10} rotation={60} />
        </div>
        <div
          className="absolute bubble-float-gentle"
          style={{ right: "44%", top: 36, zIndex: 0 }}
        >
          <Dot size={20} color="#0ea5e9" />
        </div>

        <div className="relative z-10 grid md:grid-cols-2 gap-12 lg:gap-20 items-center">
          <div className="relative">
            <div
              className="relative overflow-hidden bg-slate-200"
              style={{ borderRadius: 28 }}
            >
              <img
                src={tsImg3.src}
                alt="Gazipur manufacturing and industrial facility — TS Transformers Bangladesh"
                className="w-full h-[480px] md:h-[540px] object-full"
              />
              <div
                className="absolute inset-0"
                style={{
                  background:
                    "linear-gradient(to top, rgba(15,35,73,0.55) 0%, transparent 50%)",
                }}
              />
              <div
                className="absolute bottom-0 left-0 right-0 px-6 py-5"
              >
                <a
                  href="#gazipur"
                  className="inline-flex items-center gap-2 text-white text-sm font-semibold hover:underline"
                >
                  Explore Our Gazipur Manufacturing Facility
                  <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
                    <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                  </svg>
                </a>
              </div>
            </div>
            <div
              className="absolute top-6 right-6 bg-white shadow-2xl px-5 py-4"
              style={{ borderRadius: 18 }}
            >
              <p
                className="text-3xl font-bold leading-none"
                style={{ fontFamily: "'Roboto Slab', serif", color: "#0f2349" }}
              >
                4
              </p>
              <p className="text-sm font-medium text-slate-500 mt-1 leading-tight">
                Core Growth<br />Priorities
              </p>
            </div>
          </div>

          <div>
            <div className="mb-10">
              <span
                className="text-md font-bold tracking-[0.18em] uppercase"
                style={{ color: "#f59e0b" }}
              >
                Our Ambition
              </span>
              <h2
                className="text-4xl lg:text-5xl font-bold leading-tight mt-3 mb-4"
                style={{ fontFamily: "'Roboto Slab', serif", color: "#0f2349" }}
              >
                A Trusted Transformer Partner for Bangladesh and Beyond
              </h2>
              <p className="text-slate-600 text-[15px] leading-relaxed mb-3">
                TS Transformers' ambition is to build on its established market reputation and become
                one of Bangladesh's most trusted transformer and power solutions businesses.
              </p>
              <p className="text-slate-600 text-[15px] leading-relaxed">
                As electricity networks expand, industries become more sophisticated and customers
                demand greater reliability, TS intends to compete through engineering knowledge,
                quality, dependable service and long-term customer relationships.
              </p>
              <p
                className="mt-4 font-semibold italic text-[15px]"
                style={{ color: "#0f2349" }}
              >
                "Transforming power. Supporting industry. Strengthening Bangladesh."
              </p>
            </div>

            <div
              className="rounded-2xl p-6"
              style={{ background: "#f8f7ff", border: "1px solid #e8e5ff" }}
            >
              <span
                className="text-md font-bold tracking-[0.18em] uppercase block mb-4"
                style={{ color: "#7c6bff" }}
              >
                Our Growth Strategy
              </span>
              <p className="text-sm font-semibold text-slate-600 mb-5">
                Strengthening Bangladesh's Power Infrastructure
              </p>
              <div className="space-y-4">
                {section3Points.map((p, i) => (
                  <div key={i} className="flex gap-3 items-start">
                    <div
                      className="shrink-0 mt-0.5 w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold"
                      style={{ background: "#7c6bff", color: "#fff" }}
                    >
                      {i + 1}
                    </div>
                    <div>
                      <p className="text-[14px] font-semibold" style={{ color: "#0f2349" }}>
                        {p.label}
                      </p>
                      <p className="text-[13px] text-slate-500 mt-0.5">{p.detail}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-8 pt-6 border-t border-slate-100">
              <p className="text-slate-600 text-[15px] leading-relaxed mb-4">
                Behind the TS Transformers business is its dedicated{" "}
                <span className="font-semibold text-slate-700">Gazipur manufacturing and testing facility</span>,
                where computerised design, transformer manufacturing, quality assurance and specialised
                testing come together to deliver reliable products.
              </p>
              <Link
                href="/plants/ts-transformers-gazipur"
                className="inline-flex items-center gap-2 text-sm font-bold hover:gap-3 transition-all"
                style={{ color: "#f59e0b" }}
              >
                Explore TS Transformers Gazipur Plant
                <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
                  <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                </svg>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}