import React from "react";

export default function ProviderSection() {
  const providers = [
    "/images/prov/1.png",
    "/images/prov/2.png",
    "/images/prov/3.png",
    "/images/prov/4.png",
    "/images/prov/5.png",
    "/images/prov/6.png",
    "/images/prov/7.png",
    "/images/prov/8.png",
    "/images/prov/9.png",
    "/images/prov/10.png",
    "/images/prov/11.png",
    "/images/prov/12.png",
    "/images/prov/13.png",
    "/images/prov/14.png",
    "/images/prov/15.png",
    "/images/prov/16.png",
  ];

  return (
    <section
      id="provider_section"
      className="relative w-full px-4 pt-2 pb-4"
    >
      {/* top thin line */}
      <div className="absolute left-4 right-4 top-2 h-[1px] bg-white/25 opacity-70" />

      {/* grid */}
      <div className="mt-4 flex flex-wrap items-center justify-center gap-y-2 gap-x-6 sm:gap-x-8">
        {providers.map((src, i) => (
          <div
            key={i}
            className="h-[24px] sm:h-[26px] lg:h-[28px] px-1 flex items-center justify-center rounded-md select-none"
          >
            <img
              src={src}
              alt={`provider-${i + 1}`}
              className="h-full w-auto object-contain opacity-95 drop-shadow-[0_6px_10px_rgba(0,0,0,0.35)] transition-all duration-150 hover:-translate-y-[2px] hover:opacity-100"
            />
          </div>
        ))}
      </div>
    </section>
  );
}