"use client";

import Image from "next/image";
import Link from "next/link";
import { FaBolt } from "react-icons/fa";

const brands = [
  {
    title: "Low-Voltage Switchgears",
    desc: "Lauritz & Knudsen low-voltage switchgear for safe and efficient power control.",
    img: "/images/lauritz_knudsen.png",
    link: "/laurtiz-knudsen",
    // badge: "Trending",
  },
  {
    title: "Wires & Cables",
    desc: "Polycab Wires & Cables: High-quality, durable solutions for all your wiring needs.",
    img: "/images/polycab-1.png",
    link: "/polycab",
    // badge: "Best Seller",
  },
  {
    title: "Rotary & Load Break Switches",
    desc: "Rotary & Load Break Switches provide safe and reliable power control solutions.",
    img: "/images/salzer-2.png",
    link: "/salzer",
    // badge: "Authorized",
  },
  {
    title: "Digital Timer & Devices",
    desc: "Digital Timer & Monitoring Devices offer precise control and reliable performance.",
    img: "/images/gic-2.png",
    link: "/gic",
    // badge: "Automation",
  },
  {
    title: "Lugs & Glands Accessories",
    desc: "Braco Lugs & Glands Accessories ensure secure and reliable electrical connections.",
    img: "/images/braco-2.png",
    link: "/braco",
    // badge: "Accessories",
  },
  {
    title: "Current Transformers",
    desc: "Window and Split Core Transformers ensure precise current measurement.",
    img: "/images/newtek-2.png",
    link: "/newtek",
    // badge: "Measuring",
  },
  {
    title: "Tower Light & Switches",
    desc: "Tower Lights & Limit Switches provide clear signals and precise control.",
    img: "/images/esbee-2.png",
    link: "/esbee",
    // badge: "Signalling",
  },
  {
    title: "Terminal Blocks & Connectors",
    desc: "Interface Modules, DIN Rail Sockets, and Switches for connectivity.",
    img: "/images/connectwell-2.png",
    link: "/contact",
    // badge: "Connectivity",
  },
];

const BrandsSection = () => {
  return (
    <section
      className="relative py-20 xl:py-28 2xl:py-32 3xl:py-36 overflow-hidden border-y border-gray-200/50 dark:border-zinc-800/80"
      style={{
        background: "linear-gradient(270deg, rgba(3, 160, 153, 0.4) 0%, rgba(0, 109, 177, 0.4) 100%)",
      }}
    >
      {/* Background Grid Mesh Grid lines */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#006db104_1px,transparent_1px),linear-gradient(to_bottom,#006db104_1px,transparent_1px)] bg-[size:45px_45px] [mask-image:radial-gradient(ellipse_at_center,white,transparent_90%)]" />

      {/* Container carefully anchored up to 3xl viewports */}
      <div className="container relative mx-auto max-w-7xl 2xl:max-w-[1440px] 3xl:max-w-[1560px] px-4 sm:px-6 lg:px-8">

        {/* Header Block with scalable spacing */}
        <div className="text-center mb-16 xl:mb-20 flex flex-col items-center">
          <span className="mb-4 inline-flex items-center gap-1.5 rounded-full bg-[#006db1]/5 px-3.5 py-1.5 text-[11px] xl:text-xs font-black tracking-widest text-[#006db1] uppercase dark:bg-[#03a099]/10 dark:text-[#03a099]">
            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[#03a099]" />
            BRANDS
          </span>

          {/* Optional: Agar active karna ho heading, toh scalable setup ready hai */}
          <h2 className="text-3xl md:text-4xl 2xl:text-5xl font-black tracking-tight text-zinc-900 dark:text-zinc-100 uppercase">
            <span className="bg-gradient-to-r from-[#006db1] to-[#03a099] bg-clip-text text-transparent"></span>
          </h2>

          {/* Red line with lighting bolt anchor */}
          <div className="relative w-40 xl:w-48 h-[2px] bg-gradient-to-r from-transparent via-[#db2516] to-transparent mx-auto mt-5">
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-full border border-[#006db1]/30 bg-white shadow-sm text-[#006db1] text-xs dark:bg-zinc-900 dark:text-[#db2516]">
              <FaBolt className="animate-pulse" />
            </div>
          </div>
        </div>

        {/* 👑 CRITICAL GRID REPAIR: 2xl aur 3xl screens par items dynamic automatic distribution handle karenge */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 xl:gap-10 3xl:gap-12 justify-center">
          {brands.map((brand, index) => (
            <div
              key={index}
              className="group flex flex-col justify-between overflow-hidden rounded-2xl border border-gray-200/60 bg-white shadow-[0_4px_20px_-4px_rgba(0,0,0,0.02)] transition-all duration-300 hover:-translate-y-1.5 hover:border-[#006db1]/30 hover:shadow-[0_20px_40px_-10px_rgba(0,109,177,0.12)] dark:border-zinc-800 dark:bg-zinc-900/40 w-full mx-auto"
            >
              {/* Image Box Viewport scaled smoothly for giant screens */}
              <div className="relative h-48 xl:h-52 2xl:h-56 w-full bg-zinc-50/50 p-6 flex items-center justify-center dark:bg-zinc-900/40">
                <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-900/[0.01]" />
                <Image
                  src={brand.img}
                  alt={brand.title}
                  fill
                  className="object-contain p-6 xl:p-8 group-hover:scale-105 transition-transform duration-500 ease-out"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, (max-width: 1600px) 25vw, 350px"
                />
              </div>

              {/* Card content structure body */}
              <div className="flex flex-1 flex-col p-6 xl:p-7 2xl:p-8 text-center items-center justify-between">
                <div className="flex flex-col items-center w-full">

                  {/* Scaled Text Headings */}
                  <h3 className="text-lg xl:text-xl 2xl:text-2xl font-bold tracking-tight text-zinc-800 mt-2 xl:mt-4 mb-2 group-hover:text-[#006db1] transition-colors duration-200 dark:text-zinc-200">
                    {brand.title}
                  </h3>

                  {/* Description text safely managed inside ultra-wide ratios */}
                  <p className="text-xs xl:text-sm text-zinc-500 leading-relaxed line-clamp-2 mb-6 dark:text-zinc-400 max-w-[90%]">
                    {brand.desc}
                  </p>
                </div>

                {/* Call to action interaction button */}
                <Link
                  href={brand.link}
                  style={{
                    background:
                      "linear-gradient(270deg, rgba(3, 160, 153, 1) 0%, rgba(0, 109, 177, 1) 100%)",
                  }}
                  className="w-full inline-flex items-center justify-center text-white font-bold text-xs xl:text-sm px-4 py-3 xl:py-3.5 rounded-xl shadow-md shadow-[#006db1]/10 transition-all duration-300 transform hover:scale-[1.01] hover:shadow-lg active:scale-95"
                >
                  <span>Read More</span>
                  <svg
                    className="w-3.5 h-3.5 ms-1.5 transition-transform duration-300 group-hover:translate-x-1"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth="2.5"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M13 5l7 7m0 0l-7 7m7-7H3"
                    />
                  </svg>
                </Link>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
};

export default BrandsSection;