import React from "react"

function UtilitiesIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <line x1="32" y1="6" x2="32" y2="58" />
      <line x1="14" y1="20" x2="50" y2="20" />
      <line x1="19" y1="33" x2="45" y2="33" />
      <line x1="14" y1="20" x2="22" y2="58" />
      <line x1="50" y1="20" x2="42" y2="58" />
      <line x1="26" y1="10" x2="32" y2="6" />
      <line x1="38" y1="10" x2="32" y2="6" />
      <line x1="26" y1="10" x2="14" y2="20" />
      <line x1="38" y1="10" x2="50" y2="20" />
      <path d="M6 24 Q10 27 14 24" />
      <path d="M50 24 Q54 27 58 24" />
      <path d="M8 36 Q13.5 39 19 36" />
      <path d="M45 36 Q50.5 39 56 36" />
    </svg>
  )
}

function IndustrialIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="30" width="52" height="26" rx="1" />
      <rect x="12" y="38" width="10" height="18" />
      <rect x="27" y="38" width="10" height="18" />
      <rect x="42" y="38" width="10" height="18" />
      <line x1="6" y1="30" x2="6" y2="20" />
      <polyline points="6,30 20,22 20,30" />
      <polyline points="20,30 34,22 34,30" />
      <polyline points="34,30 48,22 48,30" />
      <line x1="48" y1="30" x2="48" y2="20" />
      <line x1="20" y1="20" x2="20" y2="13" />
      <rect x="17" y="7" width="6" height="6" rx="1" />
      <line x1="34" y1="20" x2="34" y2="13" />
      <rect x="31" y="7" width="6" height="6" rx="1" />
    </svg>
  )
}

function CommercialIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="10" y="14" width="44" height="42" />
      <line x1="4" y1="56" x2="60" y2="56" />
      <line x1="10" y1="14" x2="32" y2="6" />
      <line x1="54" y1="14" x2="32" y2="6" />
      <rect x="15" y="20" width="8" height="8" />
      <rect x="28" y="20" width="8" height="8" />
      <rect x="41" y="20" width="8" height="8" />
      <rect x="15" y="34" width="8" height="8" />
      <rect x="41" y="34" width="8" height="8" />
      <rect x="26" y="38" width="12" height="18" />
      <line x1="32" y1="30" x2="32" y2="38" />
      <line x1="28" y1="34" x2="36" y2="34" />
    </svg>
  )
}

function InfrastructureIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <line x1="4" y1="46" x2="60" y2="46" />
      <path d="M4 46 Q32 10 60 46" />
      <line x1="16" y1="46" x2="20" y2="28" />
      <line x1="48" y1="46" x2="44" y2="28" />
      <line x1="32" y1="46" x2="32" y2="18" />
      <line x1="24" y1="46" x2="26" y2="35" />
      <line x1="40" y1="46" x2="38" y2="35" />
      <rect x="2" y="50" width="8" height="8" rx="1" />
      <rect x="54" y="50" width="8" height="8" rx="1" />
      <line x1="4" y1="50" x2="4" y2="46" />
      <line x1="60" y1="50" x2="60" y2="46" />
    </svg>
  )
}

function EPCIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="8" y="10" width="40" height="50" rx="1" />
      <line x1="48" y1="16" x2="56" y2="16" />
      <line x1="48" y1="22" x2="56" y2="22" />
      <line x1="48" y1="28" x2="56" y2="28" />
      <line x1="56" y1="16" x2="56" y2="28" />
      <line x1="15" y1="22" x2="35" y2="22" />
      <line x1="15" y1="30" x2="35" y2="30" />
      <line x1="15" y1="38" x2="28" y2="38" />
      <circle cx="38" cy="46" r="10" />
      <line x1="38" y1="36" x2="38" y2="46" />
      <line x1="38" y1="46" x2="46" y2="46" />
      <circle cx="38" cy="46" r="2.5" />
    </svg>
  )
}

const markets = [
  {
    id: 1,
    title: "Utilities",
    description: "Transformer and substation solutions supporting electricity distribution and network development.",
    Icon: UtilitiesIcon,
  },
  {
    id: 2,
    title: "Industrial",
    description: "Reliable power transformation for factories, processing facilities and demanding industrial operations.",
    Icon: IndustrialIcon,
  },
  {
    id: 3,
    title: "Commercial & Institutional",
    description: "Solutions for commercial buildings, hospitals, educational institutions and major developments.",
    Icon: CommercialIcon,
  },
  {
    id: 4,
    title: "Infrastructure",
    description: "Transformer and power solutions for large-scale public and private infrastructure projects.",
    Icon: InfrastructureIcon,
  },
  {
    id: 5,
    title: "Developers & EPC Contractors",
    description: "Engineering, equipment and technical support for complete electrical and substation requirements.",
    Icon: EPCIcon,
  },
]

const colStartClasses: Record<number, string> = {
  3: "lg:col-start-2",
  4: "lg:col-start-4",
}

function MarketCard({
  market,
  colClass,
}: {
  market: (typeof markets)[number]
  colClass: string
}) {
  const { Icon } = market
  const [hovered, setHovered] = React.useState(false)

  return (
    <div
      className={`market-card col-span-6 md:col-span-3 lg:col-span-2 ${colClass} relative overflow-hidden cursor-pointer group`}
      style={{
        backgroundColor: hovered ? "#ffffff" : "#f2f2f2",
        boxShadow: hovered ? "0 6px 32px rgba(0,0,0,0.09)" : "none",
        padding: "32px 28px 28px",
        transition: "background-color 0.28s ease, box-shadow 0.28s ease",
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Ghost background icon — faint large version */}
      <div
        className="absolute pointer-events-none overflow-hidden"
        style={{
          inset: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          opacity: hovered ? 1 : 0,
          transition: "opacity 0.3s ease",
        }}
      >
        <div
          style={{
            width: "180px",
            height: "180px",
            color: "#e55a1c",
            opacity: 0.07,
            transform: "translate(28%, 22%)",
            flexShrink: 0,
          }}
        >
          <Icon className="w-full h-full" />
        </div>
      </div>

      {/* Front icon — constrained in a sized box */}
      <div
        className="relative z-10 mb-5"
        style={{ width: "58px", height: "58px", color: "#e55a1c" }}
      >
        <Icon className="market-icon w-full h-full" />
      </div>

      {/* Title */}
      <h3
        className="relative z-10 mb-2"
        style={{
          fontFamily: "'Barlow', sans-serif",
          fontSize: "17px",
          fontWeight: 700,
          color: hovered ? "#e55a1c" : "#1a1a1a",
          lineHeight: 1.25,
          transition: "color 0.22s ease",
        }}
      >
        {market.title}
      </h3>

      {/* Description */}
      <p
        className="relative z-10"
        style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: "13.5px",
          lineHeight: 1.65,
          color: "#6b6b6b",
          fontWeight: 400,
        }}
      >
        {market.description}
      </p>
    </div>
  )
}

export default function TsServices() {
  return (
    <div
      className="min-h-full w-full py-20 px-6"
      style={{ fontFamily: "'Barlow', sans-serif" }}
    >
      {/* Section header */}
      <div className="text-center mb-14">
        <div className="flex items-center justify-center gap-3 mb-5">
          <span style={{ width: "32px", height: "2px", backgroundColor: "#e55a1c", display: "inline-block" }} />
          <span
            style={{
              fontFamily: "'Barlow Condensed', sans-serif",
              fontSize: "12px",
              fontWeight: 600,
              letterSpacing: "0.18em",
              color: "#e55a1c",
              textTransform: "uppercase" as const,
            }}
          >
            The Markets We Serve
          </span>
          <span style={{ width: "32px", height: "2px", backgroundColor: "#e55a1c", display: "inline-block" }} />
        </div>
        <h2
          style={{
            fontFamily: "'Barlow', sans-serif",
            fontSize: "clamp(26px, 3.5vw, 40px)",
            fontWeight: 800,
            color: "#1a1a1a",
            lineHeight: 1.15,
            maxWidth: "520px",
            margin: "0 auto",
          }}
        >
          From Distribution Networks
          <br />
          to Critical Industry
        </h2>
      </div>

      {/* Cards grid */}
      <div className="mx-auto grid max-w-6xl grid-cols-6 gap-5" >
        {markets.map((market, i) => (
          <MarketCard
            key={market.id}
            market={market}
            colClass={colStartClasses[i] ?? ""}
          />
        ))}
      </div>

      {/* Bottom note */}
      <p
        className="text-center"
        style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: "13px",
          color: "#999",
          maxWidth: "560px",
          margin: "48px auto 0",
          lineHeight: 1.7,
        }}
      >
        This broad market exposure gives TS Transformers a role across both
        Bangladesh&apos;s expanding power network and its long-term industrial development.
      </p>
    </div>
  )
}