"use client";

import React, { useState } from "react";
import Image from "next/image";
import { distributorData } from "@/data/siteData";

export const Distributors: React.FC = () => {
  // Default to national distributors matching the uploaded screenshot!
  const [activeTab, setActiveTab] = useState<"national" | "international">("national");

  const filteredDistributors = distributorData.filter((item) =>
    activeTab === "national"
      ? item.region === "national"
      : item.region === "international"
  );

  return (
    <section className="w-full pt-4 pb-8 sm:pt-6 sm:pb-10 select-none cursor-default" id="distributors">
      {/* 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">
        
        {/* Header with Title and Functional Tabs matching screenshot */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-3 sm:gap-4">
          <div>
            <h2 
              style={{ fontFamily: 'var(--font-roboto), "Roboto", sans-serif' }}
              className="text-2xl sm:text-3xl lg:text-[48px] font-medium tracking-tight text-slate-900"
            >
              Our Distributors
            </h2>
          </div>

          {/* Interactive Tabs: National Distributors first (filled blue), International Distributors second (outlined) */}
          <div className="flex flex-wrap items-center gap-2 sm:gap-2.5 md:gap-3">
            <button
              type="button"
              onClick={() => setActiveTab("national")}
              className={`px-3.5 sm:px-4 md:px-5 py-2 sm:py-2.5 text-xs sm:text-[14px] md:text-[18px] font-semibold rounded-lg transition-all duration-200 cursor-pointer ${
                activeTab === "national"
                  ? "bg-[#0077b6] text-white shadow-xs"
                  : "bg-white text-[#0077b6] border border-[#0077b6] hover:bg-sky-50"
              }`}
            >
              National Distributors
            </button>
            <button
              type="button"
              onClick={() => setActiveTab("international")}
              className={`px-3.5 sm:px-4 md:px-5 py-2 sm:py-2.5 text-xs sm:text-[14px] md:text-[18px] font-semibold rounded-lg transition-all duration-200 cursor-pointer ${
                activeTab === "international"
                  ? "bg-[#0077b6] text-white shadow-xs"
                  : "bg-white text-[#0077b6] border border-[#0077b6] hover:bg-sky-50"
              }`}
            >
              International Distributors
            </button>
          </div>
        </div>

        {/* Distributors Grid: 
            - For National Distributors: 3 compact cards matching the reference image.
            - For International Distributors: 6 compact cards in one row on desktop.
        */}
        <div 
          className={`grid gap-3 sm:gap-4 ${
            activeTab === "national"
              ? "grid-cols-1 md:grid-cols-3"
              : "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
          }`}
        >
          {filteredDistributors.map((distributor) => (
            <div
              key={distributor.id}
              className={`flex items-center justify-center p-3 sm:p-4 rounded-xl bg-white border border-slate-200/90 shadow-2xs hover:border-sky-300 transition-all ${
                activeTab === "national"
                  ? "h-28 sm:h-32"
                  : "h-24 sm:h-28"
              }`}
              title={`${distributor.name} (${distributor.country || "Worldwide"})`}
            >
              <div className="relative w-full h-full flex items-center justify-center px-2">
                <Image
                  src={distributor.logo}
                  alt={`${distributor.name} logo`}
                  fill
                  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16vw"
                  className="object-contain p-2"
                />
              </div>
            </div>
          ))}
        </div>

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