import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Navigation, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const serviceModel = [
  {
    id: 1,
    title: "Transformer Expertise",
    description:
      "Nearly two decades of specialised experience in transformer design, manufacturing, testing and field application — delivering proven performance across every project.",
    icon: (
      <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="6" y="14" width="40" height="24" rx="2" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <circle cx="18" cy="26" r="6" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <circle cx="34" cy="26" r="6" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <line x1="6" y1="20" x2="46" y2="20" stroke="#e84c0e" strokeWidth="2" />
        <line x1="6" y1="32" x2="46" y2="32" stroke="#e84c0e" strokeWidth="2" />
        <line x1="18" y1="8" x2="18" y2="14" stroke="#e84c0e" strokeWidth="2.5" />
        <line x1="34" y1="8" x2="34" y2="14" stroke="#e84c0e" strokeWidth="2.5" />
        <line x1="18" y1="38" x2="18" y2="44" stroke="#e84c0e" strokeWidth="2.5" />
        <line x1="34" y1="38" x2="34" y2="44" stroke="#e84c0e" strokeWidth="2.5" />
      </svg>
    ),
  },
  {
    id: 2,
    title: "Broad Solution Portfolio",
    description:
      "Distribution transformers, power transformers, CT/PT and substation solutions provide customers with more than a single-product relationship.",
    icon: (
      <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="4" y="24" width="14" height="22" rx="1.5" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <rect x="19" y="16" width="14" height="30" rx="1.5" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <rect x="34" y="8" width="14" height="38" rx="1.5" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <line x1="4" y1="46" x2="48" y2="46" stroke="#e84c0e" strokeWidth="2" />
        <circle cx="11" cy="20" r="2" fill="#e84c0e" />
        <circle cx="26" cy="12" r="2" fill="#e84c0e" />
        <circle cx="41" cy="4" r="2" fill="#e84c0e" />
        <path d="M11 20 L26 12 L41 4" stroke="#e84c0e" strokeWidth="1.5" strokeDasharray="3 2" />
      </svg>
    ),
  },
  {
    id: 3,
    title: "Lifecycle Services",
    description:
      "Testing, repair, reconditioning and replacement services help customers maintain transformer performance and reduce operational disruption throughout the asset lifecycle.",
    icon: (
      <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M26 8 C17.2 8 10 15.2 10 24 C10 32.8 17.2 40 26 40" stroke="#e84c0e" strokeWidth="2.5" strokeLinecap="round" fill="none" />
        <path d="M26 40 C34.8 40 42 32.8 42 24 C42 15.2 34.8 8 26 8" stroke="#e84c0e" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="4 3" fill="none" />
        <polyline points="20,8 26,8 26,14" stroke="#e84c0e" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="26" cy="24" r="5" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <line x1="26" y1="19" x2="26" y2="17" stroke="#e84c0e" strokeWidth="2" />
        <line x1="26" y1="31" x2="26" y2="29" stroke="#e84c0e" strokeWidth="2" />
        <line x1="21" y1="24" x2="19" y2="24" stroke="#e84c0e" strokeWidth="2" />
        <line x1="33" y1="24" x2="31" y2="24" stroke="#e84c0e" strokeWidth="2" />
        <circle cx="38" cy="42" r="6" fill="#e84c0e" />
        <line x1="38" y1="38" x2="38" y2="42" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
        <circle cx="38" cy="44" r="1" fill="#fff" />
      </svg>
    ),
  },
  {
    id: 4,
    title: "Customer Commitment",
    description:
      "TS Transformers places customer satisfaction at the centre of every design decision, quality standard, and long-term support relationship we build.",
    icon: (
      <svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M26 44 C26 44 8 33 8 20 C8 14.5 12.5 10 18 10 C21.5 10 24.5 11.8 26 14.6 C27.5 11.8 30.5 10 34 10 C39.5 10 44 14.5 44 20 C44 33 26 44 26 44Z" stroke="#e84c0e" strokeWidth="2.5" fill="none" />
        <circle cx="26" cy="22" r="5" stroke="#e84c0e" strokeWidth="2" fill="none" />
        <polyline points="22,22 25,25 30,19" stroke="#e84c0e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  
];

export default function TsBusinessModel() {
  return (
    <div
      className="relative w-full overflow-hidden"
      style={{ fontFamily: "'Roboto', sans-serif" }}
    >
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage:
            "url('https://images.unsplash.com/photo-1621905252507-b35492cc74b4?w=1600&h=900&fit=crop&auto=format')",
        }}
      />
      
      <div className="relative z-10 w-full py-16 px-4 sm:px-6 md:px-10 lg:px-16">
        <div className="absolute bg-black w-full left-0 top-0 h-full opacity-30 z-10" />
        <div className="relative z-20 flex flex-col md:flex-row md:items-start md:justify-between gap-6 mb-12 max-w-6xl mx-auto">
          <div className="flex-1 max-w-xl">
            <h5 className="section-label text-orange-600">OUR BUSINESS MODEL</h5>
            <h2
              className="text-3xl sm:text-4xl md:text-[42px] font-black leading-tight text-white"
              style={{ fontFamily: "'Oswald', sans-serif", fontWeight: 700 }}
            >
              Engineering. Products.
              <br />
              Services &amp; Long-Term Support!
            </h2>
          </div>

          <div className="flex-1 max-w-md md:pt-10">
            <p
              className="text-sm sm:text-base leading-relaxed"
              style={{
                color: "#e84c0e",
                textDecoration: "underline",
                textDecorationColor: "rgba(232,76,14,0.4)",
              }}
            >
              TS Transformers' business is built around four complementary
              strengths — delivering transformer excellence from design through
              to long-term field support.
            </p>
          </div>
        </div>

        <div className="max-w-7xl mx-auto overflow-hidden">
          <div className="relative z-20">
            <Swiper
              modules={[Pagination, Navigation, Autoplay]}
              pagination={{ clickable: true, dynamicBullets: true }}
              navigation
              autoplay={{ delay: 4000, disableOnInteraction: false }}
              loop
              speed={700}
              observer
              observeParents
              spaceBetween={24}
              breakpoints={{
                0: { slidesPerView: 1 },
                640: { slidesPerView: 1 },
                768: { slidesPerView: 2 },
                1024: { slidesPerView: 3 },
                1280: { slidesPerView: 3 },
              }}
              className="w-full !overflow-visible pb-12"
            >
              {serviceModel.map((service) => (
                <SwiperSlide key={service.id} className="pb-2 h-auto bg-white ">
                  <div className="service-card h-full flex flex-col" style={{ minHeight: 280 }}>
                    <div className="p-6 flex items-start justify-between gap-4 border-b border-gray-100">
                      <h3
                        className="text-xl font-bold text-gray-900 leading-snug"
                        style={{ fontFamily: "'Oswald', sans-serif", fontWeight: 600 }}
                      >
                        {service.title}
                      </h3>
                      <div className="flex-shrink-0">{service.icon}</div>
                    </div>

                    <div className="p-6 flex flex-col flex-1 justify-between">
                      <p className="text-sm text-gray-600 leading-relaxed mb-6">
                        {service.description}
                      </p>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
      </div>
    </div>
  );
}
