import React from "react";
import Image from "next/image";
import Link from "next/link";
import { brandData } from "@/data/siteData";

export const Brands: React.FC = () => {
  return (
    <section className="w-full pt-4 pb-8 sm:pt-6 sm:pb-10">
      {/* Same max-w-[1800px] and px-6 sm:px-10 lg:px-12 */}
      <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12">
        {/* Section Heading */}
        <div className="mb-5">
          <h2 
            style={{ fontFamily: 'var(--font-roboto), "Roboto", sans-serif' }}
            className="text-2xl sm:text-3xl font-medium tracking-tight text-slate-900 lg:text-[48px]"
          >
            Explore Brands
          </h2>
        </div>

        {/* 6 Brands Grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
          {brandData.map((brand) => (
            <Link
              key={brand.id}
              href={brand.href}
              className={`flex items-center justify-center p-3 h-32 sm:h-36 rounded-xl border transition-all duration-200 hover:shadow-md ${
                brand.isFilled
                  ? "bg-[#0077B6] border-[#0077B6] shadow-sm hover:bg-[#02699e]"
                  : "bg-white border-slate-200/90 shadow-2xs hover:border-sky-300"
              }`}
            >
              <div className="relative w-full h-full flex items-center justify-center">
                <Image
                  src={brand.logo}
                  alt={`${brand.name} - ${brand.tagline}`}
                  fill
                  sizes="(max-width: 640px) 45vw, (max-width: 1024px) 30vw, 16vw"
                  className="object-contain p-2"
                />
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
};