import Link from "next/link";
import Image from "next/image";
import { BadgeCheck, Headphones, Map, ShieldCheck } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { Brand, Scooter } from "@/lib/mock-data";

const proofItems = [
  {
    label: "100% Genuine Products",
    detail: "Authorized dealership",
    icon: ShieldCheck,
  },
  {
    label: "Expert Support",
    detail: "Sales, service and more",
    icon: Headphones,
  },
  {
    label: "Wide Range",
    detail: "Multiple brands in one destination",
    icon: Map,
  },
];

type BrandsHeroProps = {
  brands: Brand[];
  scooters: Scooter[];
  heroBackgroundImage?: string;
  heroProductImage?: string;
  heroTitle?: string;
  heroDescription?: string;
};

export function BrandsHero({
  brands,
  scooters,
  heroBackgroundImage = "/images/backgrounds/hero-bg-general.png",
  heroProductImage,
  heroTitle = "Brands We Offer",
  heroDescription = "At Bashista Auto, we partner with trusted names in electric mobility to bring you the best in performance, reliability, and innovation. Explore our top electric scooter brands and find the perfect ride for your journey.",
}: BrandsHeroProps) {
  const heroScooters = scooters.slice(0, 3);

  return (
    <section className="blue-gradient relative overflow-hidden">
      <Image
        src={heroBackgroundImage}
        alt=""
        fill
        sizes="100vw"
        className="pointer-events-none object-cover object-center opacity-65"
      />
      <div className="container-custom relative z-10 pb-10 pt-8 md:pb-12 md:pt-10">
        <div className="mb-6 flex items-center gap-2 text-sm font-semibold text-navy-muted">
          <Link href="/" className="hover:text-primary">
            Home
          </Link>
          <span>/</span>
          <span className="text-primary">Brands</span>
        </div>
        <div className="grid items-center gap-8 lg:grid-cols-[0.95fr_1.05fr]">
          <div>
            <h1 className="text-4xl font-bold leading-tight text-navy-deep sm:text-5xl">
              {heroTitle}
            </h1>
            <p className="mt-5 max-w-xl text-base leading-7 text-navy-muted">
              {heroDescription}
            </p>
            <div className="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-3">
              {brands.map((brand) => (
                <Link
                  href={`#${brand.slug}`}
                  className="flex min-h-20 items-center justify-center rounded-card border border-border bg-white px-4 text-center shadow-card transition hover:border-primary"
                  key={brand.id}
                >
                  <span className="text-lg font-black text-navy-deep">{brand.name}</span>
                </Link>
              ))}
            </div>
            <div className="mt-6 grid gap-3 sm:grid-cols-3">
              {proofItems.map((item) => {
                const Icon = item.icon;
                return (
                  <div className="soft-card flex items-center gap-3 p-3" key={item.label}>
                    <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-ev-soft text-ev-deep">
                      <Icon className="h-5 w-5" />
                    </span>
                    <span>
                      <span className="block text-xs font-bold text-navy-deep">
                        {item.label}
                      </span>
                      <span className="text-xs text-navy-muted">{item.detail}</span>
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="relative rounded-[2rem] border border-white bg-white/60 p-5 shadow-soft">
            <Badge variant="green" className="absolute left-5 top-5 z-10 gap-2">
              <BadgeCheck className="h-3.5 w-3.5" />
              Authorized EV Brands
            </Badge>
            <div className="flex min-h-[360px] items-end justify-center gap-0 pt-12">
              {heroScooters.map((scooter, index) => (
                <img
                  key={scooter.id}
                  src={index === 1 && heroProductImage ? heroProductImage : scooter.heroImage}
                  alt={scooter.name}
                  className="w-1/3 max-w-sm object-contain"
                  style={{
                    transform: `translateX(${index === 0 ? 28 : index === 2 ? -28 : 0}px)`,
                    zIndex: index === 1 ? 2 : 1,
                  }}
                />
              ))}
            </div>
            <div className="mt-4 flex justify-center">
              <Button href="/scooters" variant="green">
                Explore Scooters
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}