"use client";

import Image from "next/image";
import { useState } from "react";
import { BarChart2, Banknote, Globe, Laptop, Map, Package, Shield, Tag } from "lucide-react";
import { WHY_BUYERS, WHY_SUPPLIERS } from "@/lib/constants";
import { HOME_IMAGES } from "@/lib/home/images";
import { cn } from "@/lib/utils";
import Reveal from "./Reveal";

const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
  Tag,
  Banknote,
  Globe,
  Package,
  Shield,
  Map,
  Laptop,
  BarChart: BarChart2,
};

const TABS = [
  { key: "buyer", label: "For buyers", items: WHY_BUYERS, image: HOME_IMAGES.workers, alt: "Site engineers in hard hats" },
  { key: "supplier", label: "For suppliers", items: WHY_SUPPLIERS, image: HOME_IMAGES.warehouse, alt: "Supplier warehouse with a forklift" },
] as const;

export default function WhyChooseUs() {
  const [tab, setTab] = useState<(typeof TABS)[number]["key"]>("buyer");
  const current = TABS.find((t) => t.key === tab) ?? TABS[0];

  return (
    <section className="bg-slate-50 py-16 sm:py-20">
      <div className="mx-auto grid max-w-7xl items-center gap-10 px-4 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16 lg:px-8">
        <Reveal className="relative">
          <div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl lg:aspect-square">
            {TABS.map((t) => (
              <Image
                key={t.key}
                src={t.image}
                alt={t.key === tab ? t.alt : ""}
                fill
                sizes="(max-width: 1024px) 100vw, 520px"
                className={cn("object-cover transition-opacity duration-700", t.key === tab ? "opacity-100" : "opacity-0")}
              />
            ))}
            <div className="absolute inset-0 bg-gradient-to-t from-slate-950/60 to-transparent" />
          </div>
          <div className="absolute -bottom-6 left-4 right-4 rounded-2xl bg-white p-4 shadow-xl ring-1 ring-slate-100 sm:left-auto sm:right-6 sm:w-64">
            <p className="text-3xl font-extrabold text-[#CC1414]">1%+</p>
            <p className="mt-1 text-sm text-slate-600">lower than prevailing market rates for buyers</p>
          </div>
        </Reveal>

        <div className="pt-6 lg:pt-0">
          <Reveal>
            <span className="text-sm font-semibold uppercase tracking-wider text-[#CC1414]">Why choose Biznie</span>
            <h2 className="mt-2 text-3xl font-black tracking-tight text-slate-900 md:text-4xl">Built for every stakeholder</h2>
            <p className="mt-3 text-slate-500">
              Whether you buy steel for a site or sell from your yard, Biznie takes the friction out of every trade.
            </p>

            <div role="tablist" aria-label="Benefits for" className="mt-6 inline-flex rounded-xl bg-white p-1 shadow-sm ring-1 ring-slate-200">
              {TABS.map((t) => (
                <button
                  key={t.key}
                  type="button"
                  role="tab"
                  aria-selected={t.key === tab}
                  onClick={() => setTab(t.key)}
                  className={cn(
                    "rounded-lg px-5 py-2.5 text-sm font-semibold transition-all",
                    t.key === tab ? "bg-[#CC1414] text-white shadow-md" : "text-slate-500 hover:text-slate-900"
                  )}
                >
                  {t.label}
                </button>
              ))}
            </div>
          </Reveal>

          <div role="tabpanel" className="mt-8 grid grid-cols-2 gap-3 sm:gap-4">
            {current.items.map((item, i) => {
              const Icon = iconMap[item.icon] || Tag;
              return (
                <div
                  key={`${tab}-${item.title}`}
                  style={{ animationDelay: `${i * 70}ms` }}
                  className="group animate-[fade-in-up_0.5s_ease-out_both] rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-100 transition-all sm:p-5 hover:-translate-y-1 hover:shadow-lg hover:ring-red-100"
                >
                  <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-red-50 text-[#CC1414] sm:h-12 sm:w-12 transition-colors group-hover:bg-[#CC1414] group-hover:text-white">
                    <Icon size={22} />
                  </span>
                  <h3 className="mt-3 text-sm font-bold text-slate-900 sm:mt-4 sm:text-base">{item.title}</h3>
                  <p className="mt-1 text-xs leading-relaxed text-slate-500 sm:text-sm">{item.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}