import { CalendarCheck, ShieldCheck, Sparkles, WalletCards } from "lucide-react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { scooters as mockScooters, type Scooter } from "@/lib/mock-data";

const proofItems = [
  { label: "Wide Range", detail: "Top Brands", icon: Sparkles },
  { label: "Best Price", detail: "Guaranteed", icon: ShieldCheck },
  { label: "Easy Purchase", detail: "Simple showroom process", icon: WalletCards },
];

type OffersHeroProps = {
  scooters?: Scooter[];
  heroBackgroundImage?: string;
  financeEnabled?: boolean;
  heroProductImage?: string;
  heroTitle?: string;
  heroSubtitle?: string;
  heroDescription?: string;
};

export function OffersHero({
  scooters = mockScooters,
  heroBackgroundImage = "/images/backgrounds/hero-bg-offers.png",
  financeEnabled = false,
  heroProductImage,
  heroTitle = "Season of Savings, Future of Mobility",
  heroSubtitle = "Offers & Discounts",
  heroDescription = "Exclusive offers on electric scooters. Limited period only.",
}: OffersHeroProps) {
  const fallbackScooter = mockScooters[0];
  const heroScooter =
    scooters.find((scooter) => scooter.isFeatured) ?? scooters[0] ?? fallbackScooter;

  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-14 md:pt-12">
        <div className="grid items-center gap-8 lg:grid-cols-[0.98fr_1.02fr]">
          <div>
            <Badge variant="blue" className="gap-2">
              <Sparkles className="h-3.5 w-3.5" />
              {heroSubtitle}
            </Badge>
            <h1 className="mt-5 text-4xl font-bold leading-tight text-navy-deep sm:text-5xl lg:text-6xl">
              {heroTitle}
            </h1>
            <p className="mt-5 max-w-xl text-base leading-7 text-navy-muted">
              {heroDescription}
            </p>
            <div className="mt-7 flex flex-col gap-3 sm:flex-row">
              <Button href="#scooters-on-offer" variant="green">
                View Offers on Scooters
              </Button>
              {financeEnabled ? (
                <Button href="#emi" variant="outline">
                  Explore Finance Plans
                </Button>
              ) : null}
            </div>
            <div className="mt-7 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 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/65 p-5 shadow-soft">
            <div className="absolute right-5 top-5 z-10 rounded-[1.2rem] bg-primary-deep px-5 py-4 text-white shadow-soft">
              <p className="text-xs font-bold uppercase tracking-[0.08em]">Special Offer</p>
              <p className="mt-1 text-xl font-black">Limited-Time Deals Available</p>
            </div>
            {heroScooter ? (
                <img
                src={heroProductImage || heroScooter.heroImage}
                alt={heroScooter.name}
                className="mx-auto aspect-[4/3] w-full max-w-2xl object-contain pt-20 md:pt-0"
              />
            ) : null}
            <div className="absolute bottom-5 left-5 rounded-2xl bg-white/90 px-4 py-3 text-sm font-semibold text-navy-muted shadow-card">
              <CalendarCheck className="mr-2 inline h-4 w-4 text-ev" />
              T&C apply
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}