import type { ReactElement } from "react";

import tsTransformerImg3 from '../../../../../public/assets/business-units/ts-transformer/ts-transformers3.webp'
import tsTransformerImg4 from '../../../../../public/assets/business-units/ts-transformer/ts-transfomers4.webp'
import tsTransformerImg5 from '../../../../../public/assets/business-units/ts-transformer/ts-transformers5.webp'
import tsTransformerImg6 from '../../../../../public/assets/business-units/ts-transformer/ts-transformer6.webp'

const ORANGE = "#E85516";

const services = [
  {
    id: 1,
    title: "Distribution Transformers",
    description:
      "Single-phase, two-phase and three-phase transformer solutions serving electricity distribution, commercial and industrial applications.",
    image:tsTransformerImg3.src,
    delay: "delay-100",
  },
  {
    id: 2,
    title: "Power Transformers",
    description:
      "Engineered transformer solutions for substations, utilities, industries and demanding high-voltage power applications throughout Bangladesh's expanding energy sector.",
    image:tsTransformerImg5.src,
    delay: "delay-200",
  },
  {
    id: 3,
    title: "Instrument Transformers",
    description:
      "CT and PT solutions supporting accurate measurement, system protection and power-monitoring applications in utilities and industrial installations.",
    image:tsTransformerImg4.src,
    delay: "delay-300",
  },
  {
    id: 4,
    title: "Substation Solutions",
    description:
      "Engineering support and total substation solutions for government utilities, private-sector customers and industrial facilities.",
    image:tsTransformerImg6.src,
    delay: "delay-400",
  },
  {
    id: 5,
    title: "Transformer Services",
    description:
      "Testing, repair, reconditioning, redesign, replacement and technical support throughout the transformer lifecycle.TS's official site specifically describes total substation solutions for government utilities and private/industrial sectors, together with consultation, proposal, installation and inspection support.",
    image:
      "https://images.unsplash.com/photo-1777575764649-c8e5933e9ece?w=600&h=480&fit=crop&auto=format",
    delay: "delay-500",
  },
];

function ServiceIcon({ id }: { id: number }) {
  const icons: Record<number, ReactElement> = {
    1: (
      <svg viewBox="0 0 24 24" fill="white" className="w-6 h-6">
        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
      </svg>
    ),
    2: (
      <svg viewBox="0 0 24 24" fill="white" className="w-6 h-6">
        <path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm0 2a8 8 0 1 1 0 16A8 8 0 0 1 12 4zm1 2h-2v6.5l4 2.5-1 1.73-4.5-2.73V6h3.5z" />
      </svg>
    ),
    3: (
      <svg viewBox="0 0 24 24" fill="white" className="w-6 h-6">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" />
      </svg>
    ),
    4: (
      <svg viewBox="0 0 24 24" fill="white" className="w-6 h-6">
        <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" />
      </svg>
    ),
    5: (
      <svg viewBox="0 0 24 24" fill="white" className="w-6 h-6">
        <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" />
      </svg>
    ),
  };
  return icons[id] ?? null;
}

function ServiceCard({
  service,
  index,
  total,
}: {
  service: (typeof services)[0];
  index: number;
  total: number;
}) {
  const isLastRow = total === 5 && index >= 3;
  return (
    <div
      className={`card-animate ${service.delay} ${isLastRow ? "w-full sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)]" : "w-full sm:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)]"} flex-shrink-0`}
    >
      <div className="group relative h-[370px] overflow-hidden shadow-lg cursor-pointer bg-gray-800">
        {/* Photo */}
        <img
          src={service.image}
          alt={service.title}
          className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
        />

        {/* Permanent gradient at bottom */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/10 to-transparent pointer-events-none" />

        {/* Bottom badge — slides away on hover */}
        <div className="absolute bottom-0 left-0 right-0 flex items-stretch transition-transform duration-500 ease-in-out group-hover:translate-y-full">
          <div
            className="bg-orange-600 flex items-center justify-center px-4 py-4 flex-shrink-0"
          >
            <ServiceIcon id={service.id} />
          </div>
          <div className="bg-white/95 flex-1 flex items-center px-4">
            <span
              className="font-semibold text-gray-900 text-sm leading-tight"
              style={{ fontFamily: "Inter, sans-serif" }}
            >
              {service.title}
            </span>
          </div>
        </div>

        {/* Hover overlay — slides up */}
        <div className="absolute inset-0 bg-gray-950/93 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out flex flex-col justify-center px-7 py-8">
          <div
            className="bg-orange-600 inline-flex items-center justify-center w-12 h-12 mb-5 flex-shrink-0"
          >
            <ServiceIcon id={service.id} />
          </div>
          <h3
            className="text-white font-bold text-lg mb-3 leading-snug"
            style={{ fontFamily: "'Roboto Slab', serif" }}
          >
            {service.title}
          </h3>
          <p
            className="text-gray-300 text-sm leading-relaxed mb-6"
            style={{ fontFamily: "Inter, sans-serif" }}
          >
            {service.description}
          </p>
        </div>
      </div>
    </div>
  );
}

export default function TsBusiness() {
  return (
    <div
      className="min-h-full py-16 px-4"
      style={{ fontFamily: "Inter, sans-serif" }}
    >
      {/* Section header */}
      <div className="max-w-6xl mx-auto mb-12 text-center">
        <p
          className="title-animate delay-0 text-sm font-semibold uppercase tracking-widest mb-3"
          style={{ color: ORANGE }}
        >
          What We Offer
        </p>
        <h2
          className="title-animate delay-100 text-4xl md:text-5xl font-bold text-gray-900 mb-4"
          style={{ fontFamily: "'Roboto Slab', serif" }}
        >
          Our Business
        </h2>
        {/* Accent bar */}
        <div className="title-animate delay-200 flex items-center justify-center gap-3 mb-5">
          <div className="h-px w-16 bg-gray-300" />
          <div className="w-8 h-1 bg-orange-600" />
          <div className="h-px w-16 bg-gray-300" />
        </div>
        <p
          className="title-animate delay-300 text-gray-500 text-base max-w-xl mx-auto leading-relaxed"
        >
          As Bangladesh expands its electricity network, TS Transformers delivers
          reliable, efficient power equipment backed by expert engineering and
          lifecycle support.
        </p>
      </div>

      {/* Cards grid */}
      <div className="max-w-6xl mx-auto flex flex-wrap justify-center gap-6">
        {services.map((service, index) => (
          <ServiceCard
            key={service.id}
            service={service}
            index={index}
            total={services.length}
          />
        ))}
      </div>
    </div>
  );
}