import React from "react"
import sqlogoImg from '../../../../../public/assets/product-details/logo-02.png'
import detailsImg1 from '../../../../../public/assets/product-details/Certification.png'
import detailsImg2 from '../../../../../public/assets/product-details/color.png'
import detailsImg3 from '../../../../../public/assets/product-details/SQ-Electricals-logo.png'
import detailsImg4 from '../../../../../public/assets/product-details/Icon.png'

interface CableProduct {
  id: string
  name: string
  subtitle: string
  standards: string[]
  conductorType: string
  insulationMaterial: string
  availableColors: { name: string; hex: string }[]
  constructionCharacteristics: { label: string; value: string }[]
  dimensionalCharacteristics: { label: string; value: string }[]
  electricalCharacteristics: { label: string; value: string }[]
  mechanicalCharacteristics: { label: string; value: string }[]
  usageCharacteristics: { label: string; value: string }[]
  features: string[]
  installationConditions: string[]
}

const cableProducts: CableProduct[] = [
  {
    id: "1x0.5-re-bya",
    name: "1x0.5 re BYA Cable",
    subtitle: "100 meter Coil",
    standards: [
      "BS 6004, BDS IEC 60227-3, IEC 60332, IEC 61034 & IEC 60228",
      "✓ 1 Core Building Wire",
      "✓ 450/750V T11 PVC Insulated",
      "✓ Copper Conductor",
    ],
    conductorType: "Copper, Class 1",
    insulationMaterial: "PVC, T11",
    availableColors: [
      { name: "Red", hex: "#e02020" },
      { name: "Yellow", hex: "#f5c518" },
      { name: "Blue", hex: "#1a56d4" },
      { name: "Black", hex: "#1a1a1a" },
      { name: "Green", hex: "#1e8c3a" },
      { name: "Yellow-Green", hex: "#8db33a" },
    ],
    constructionCharacteristics: [
      { label: "Conductor flexibility", value: "Class 1" },
      { label: "Conductor material", value: "Copper" },
      { label: "Conductor shape", value: "Circular" },
      { label: "Insulation", value: "PVC (T11)" },
      { label: "Type of conductor", value: "Solid" },
    ],
    dimensionalCharacteristics: [
      { label: "Approximate weight", value: "1.0 kg/100 m" },
      { label: "Cable length", value: "100 m" },
      { label: "Conductor cross-section", value: "0.5 mm²" },
      { label: "Number & nominal diameter of wire", value: "1/0.80 no./mm" },
      { label: "Nominal insulation thickness", value: "0.6 mm" },
      { label: "Overall diameter", value: "1.9-2.3 mm" },
    ],
    electricalCharacteristics: [
      { label: "Minimum insulation resistance constant k at 20°C", value: "35 MΩ.km" },
      { label: "Maximum DC resistance of the conductor at 20°C", value: "36.0 Ω/km" },
      { label: "Rated voltage U₀/U", value: "450/750 V" },
      { label: "Current rating in conduit at 35°C", value: "8 A" },
      { label: "Current rating in air at 35°C", value: "11 A" },
    ],
    mechanicalCharacteristics: [
      { label: "Cable flexibility", value: "Rigid" },
      { label: "Minimum tensile strength", value: "12.5 N/mm²" },
      { label: "Minimum percentage elongation at break", value: "125%" },
    ],
    usageCharacteristics: [
      { label: "Minimum bending radius", value: "6 (xD)" },
    ],
    features: [
      "Operating Temperature",
      "Flame Retardant",
      "Maximum Short circuit",
      "Lead free",
      "Skin coated",
      "Rigid",
      "Resistance to Solar Radiation",
      "Test 1.5–2.5kV",
    ],
    installationConditions: ["Home Use", "Outdoor Installation", "Open air", "In conduit"],
  },
  {
    id: "1x1.5-re-bya",
    name: "1x1.5 re BYA Cable",
    subtitle: "100 meter Coil",
    standards: [
      "BS 6004, BDS IEC 60227-3, IEC 60332, IEC 61034 & IEC 60228",
      "✓ 1 Core Building Wire",
      "✓ 450/750V T11 PVC Insulated",
      "✓ Copper Conductor",
    ],
    conductorType: "Copper, Class 1",
    insulationMaterial: "PVC, T11",
    availableColors: [
      { name: "Red", hex: "#e02020" },
      { name: "Yellow", hex: "#f5c518" },
      { name: "Blue", hex: "#1a56d4" },
      { name: "Black", hex: "#1a1a1a" },
      { name: "Green", hex: "#1e8c3a" },
    ],
    constructionCharacteristics: [
      { label: "Conductor flexibility", value: "Class 1" },
      { label: "Conductor material", value: "Copper" },
      { label: "Conductor shape", value: "Circular" },
      { label: "Insulation", value: "PVC (T11)" },
      { label: "Type of conductor", value: "Solid" },
    ],
    dimensionalCharacteristics: [
      { label: "Approximate weight", value: "1.5 kg/100 m" },
      { label: "Cable length", value: "100 m" },
      { label: "Conductor cross-section", value: "1.5 mm²" },
      { label: "Number & nominal diameter of wire", value: "1/1.38 no./mm" },
      { label: "Nominal insulation thickness", value: "0.7 mm" },
      { label: "Overall diameter", value: "3.0-3.4 mm" },
    ],
    electricalCharacteristics: [
      { label: "Minimum insulation resistance constant k at 20°C", value: "35 MΩ.km" },
      { label: "Maximum DC resistance of the conductor at 20°C", value: "12.1 Ω/km" },
      { label: "Rated voltage U₀/U", value: "450/750 V" },
      { label: "Current rating in conduit at 35°C", value: "13 A" },
      { label: "Current rating in air at 35°C", value: "17 A" },
    ],
    mechanicalCharacteristics: [
      { label: "Cable flexibility", value: "Rigid" },
      { label: "Minimum tensile strength", value: "12.5 N/mm²" },
      { label: "Minimum percentage elongation at break", value: "125%" },
    ],
    usageCharacteristics: [
      { label: "Minimum bending radius", value: "6 (xD)" },
    ],
    features: [
      "Operating Temperature",
      "Flame Retardant",
      "Maximum Short circuit",
      "Lead free",
      "Skin coated",
      "Rigid",
      "Resistance to Solar Radiation",
      "Test 1.5–2.5kV",
    ],
    installationConditions: ["Home Use", "Outdoor Installation", "Open air", "In conduit"],
  },
]

function getProductById(id: string): CableProduct | undefined {
  return cableProducts.find((p) => p.id === id)
}

function SectionHeader({ title }: { title: string }) {
  return (
    <tr>
      <td
        colSpan={2}
        className="bg-[#1a3a6b] text-white text-[11px] font-bold px-3 py-1.5 uppercase tracking-wide"
      >
        {title}
      </td>
    </tr>
  )
}

function TableRow({
  label,
  value,
  striped,
}: {
  label: string
  value: string
  striped: boolean
}) {
  return (
    <tr className={striped ? "bg-[#dce8f7]" : "bg-white"}>
      <td className="text-[11px] px-3 py-1.5 border-b border-[#c5d9ef] text-[#1a1a1a]">
        {label}
      </td>
      <td className="text-[11px] px-3 py-1.5 border-b border-[#c5d9ef] text-right font-semibold text-[#1a1a1a] whitespace-nowrap">
        {value}
      </td>
    </tr>
  )
}

function IconBadge({ label }: { label: string }) {
  const abbr = label.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase()
  return (
    <div className="flex flex-col items-center gap-1">
      <div className="w-11 h-11 rounded-full bg-white border-2 border-[#1a3a6b] flex items-center justify-center shadow-sm">
        <span className="text-[#1a3a6b] text-[9px] font-black leading-none">{abbr}</span>
      </div>
      <span className="text-[8px] text-center text-[#333] leading-tight max-w-[52px]">{label}</span>
    </div>
  )
}

const PRODUCT_ID = "1x0.5-re-bya"

export default function App() {
  const product = getProductById(PRODUCT_ID)

  if (!product) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-[#e8f2fb]">
        <p className="text-sm text-gray-500">
          Product not found: <strong>{PRODUCT_ID}</strong>
        </p>
      </div>
    )
  }

  const sections = [
    { title: "Construction characteristics",  rows: product.constructionCharacteristics },
    { title: "Dimensional characteristics",   rows: product.dimensionalCharacteristics },
    { title: "Electrical characteristics",    rows: product.electricalCharacteristics },
    { title: "Mechanical characteristics",    rows: product.mechanicalCharacteristics },
    { title: "Usage characteristics",         rows: product.usageCharacteristics },
  ]

  return (
    <div className=" p-3 sm:p-6 font-sans lg:mt-0 mt-28">
      <div className="bg-[#dde8f5] max-w-5xl mx-auto rounded-lg overflow-hidden shadow-lg border border-[#b8cfe8] p-4 lg:p-15">

        <div className=" py-2">
          <div className="flex items-center justify-between rounded py-1  gap-1.5">
            <div className="w-[250px]">
              <img className="w-full" src={sqlogoImg.src} alt="" />
            </div>
           <div className="w-[350px] h-[110px]">
              <img className="w-full h-full" src={detailsImg1.src} alt="" />
            </div>
          </div>
        </div>

        <div className="bg-[#e4eef8] px-4 pt-3 pb-2 flex items-start justify-between gap-3">
          <div>
            <h1 className="text-[22px] font-extrabold text-[#1a3a6b] leading-tight">
              {product.name}
            </h1>
            <p className="text-sm text-[#333] mt-0.5">{product.subtitle}</p>
          </div>

          <div className="flex items-center gap-2 flex-shrink-0">
            <svg width="78" height="78" viewBox="0 0 78 78">
              <circle cx="39" cy="39" r="36" fill="#2e8b57" />
              <circle cx="39" cy="39" r="24" fill="#f0c040" />
              <circle cx="39" cy="39" r="13" fill="#b87333" />
              <circle cx="39" cy="39" r="4"  fill="#7a4510" />

              <line x1="52" y1="26" x2="70" y2="14" stroke="#555" strokeWidth="0.8" />
              <line x1="45" y1="34" x2="70" y2="38" stroke="#555" strokeWidth="0.8" />
            </svg>
            <div className="text-[10px] leading-snug">
              <p className="font-bold text-[#1a1a1a]">Conductor</p>
              <p className="text-[#555]">{product.conductorType}</p>
              <p className="font-bold text-[#1a1a1a] mt-1">Insulation</p>
              <p className="text-[#555]">{product.insulationMaterial}</p>
            </div>
          </div>
        </div>

        <div className="bg-[#e4eef8] px-4 pb-3">
          <div className="bg-[#1a3a6b] text-white text-[11px] font-bold px-3 py-1 uppercase tracking-wide">
            Standards
          </div>
          <div className="bg-white border border-[#b8cfe8] px-3 py-2 text-[11px] text-[#1a1a1a] leading-[1.6]">
            {product.standards.map((s, i) => (
              <div key={i}>{s}</div>
            ))}
          </div>
        </div>

        <div className="bg-[#e4eef8] px-4 pb-3 flex flex-wrap items-center gap-2">
          <span className="text-[11px] font-bold text-[#1a3a6b]">Available Color:</span>
          <div className="flex gap-1.5">
            {product.availableColors.map((c) => (
              <div
                key={c.name}
                title={c.name}
                className="w-5 h-5 rounded-[3px] border border-[#999] shadow-sm"
                style={{ backgroundColor: c.hex }}
              />
            ))}
          </div>
          <span className="text-[10px] text-[#555]">or as per request</span>
        </div>

        <div className="bg-[#e4eef8] px-4 pb-4">
          <div className="bg-[#1a3a6b] text-white text-[11px] font-bold px-3 py-1 uppercase tracking-wide mb-0">
            Characteristics
          </div>
          <table className="w-full border-collapse border border-[#b8cfe8]">
            <tbody>
              {sections.map(({ title, rows }) => (
                <React.Fragment key={title}>
                  <SectionHeader title={title} />
                  {rows.map((row, i) => (
                    <TableRow
                      key={title + i}
                      label={row.label}
                      value={row.value}
                      striped={i % 2 === 0}
                    />
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>

        <div className="bg-[#e4eef8] px-4 pb-5 w-full">
            <img src={detailsImg4.src} alt="" />
          
        </div>

        <div className="bg-[#e4eef8] px-4 py-3 flex flex-col sm:flex-row gap-4 text-white text-[10px] leading-[1.5]">
          <div className="flex-1 border-r-3 border-orange-600">
            <img src={detailsImg3.src} alt="" />
          </div>
          <div className="flex-1 border-r-3 border-orange-600">
            <h5 className="text-xl font-bold mb-0.5 text-[#1a3a6b]">Head Office:</h5>
            <p className="text-sm text-gray-800">
              Suvastu Suraiya Trade Center, Level: 8-13, Plot: 57 Road: 21,
              Block: B, Kemal Ataturk Avenue, Banani, Dhaka-1213, Bangladesh.
            </p>
          </div>
          <div className="flex-1">
            <h5 className="text-xl font-bold mb-0.5 text-indigo-950">SQ Industrial Park:</h5>
            <p className="text-sm text-gray-800">
              Plot No.: 40, Zone-2A, National Special Economic Zone (NSEZ)
              Mirsarai, Chattogram, Bangladesh.
            </p>
          </div>
        </div>

      </div>
    </div>
  )
}