import { Button } from "@/components/ui/button";
import { scooters as mockScooters, type Scooter } from "@/lib/mock-data";

type FinancingBannerProps = {
  scooters?: Scooter[];
};

export function FinancingBanner({ scooters = mockScooters }: FinancingBannerProps) {
  const spotlightScooter = scooters[4] ?? scooters[0];

  return (
    <section className="bg-white py-3">
      <div className="container-custom">
        <div className="relative overflow-hidden rounded-[1.25rem] bg-gradient-to-r from-primary-deep via-cyan-600 to-ev p-6 text-white shadow-soft md:p-8">
          <div className="grid items-center gap-6 md:grid-cols-[1fr_0.55fr_0.95fr_0.45fr]">
            <div>
              <h2 className="text-2xl font-bold">Easy Financing for Your Dream Ride</h2>
              <p className="mt-3 max-w-md text-sm leading-6 text-blue-50">
                Bring home your favorite electric scooter with flexible EMI
                options and showroom guidance.
              </p>
              <Button className="mt-5" href="/offers" variant="secondary">
                Explore Offers
              </Button>
            </div>
            {spotlightScooter ? (
              <img
                src={spotlightScooter.thumbnailImage}
                alt={spotlightScooter.name}
                className="mx-auto aspect-[4/3] w-full max-w-[14rem] object-contain drop-shadow-2xl"
              />
            ) : null}
            <div className="border-l border-dashed border-white/70 pl-8">
              <p className="text-sm font-semibold uppercase">Up to</p>
              <p className="mt-2 text-4xl font-black md:text-5xl">Rs. 20,000</p>
              <p className="mt-1 text-xl font-bold uppercase">Cashback*</p>
            </div>
            <div className="text-left md:text-right">
              <p className="text-sm font-semibold">Easy EMI</p>
              <p className="mt-1 text-lg font-bold">Starting from</p>
              <p className="mt-2 text-3xl font-black">Rs. 3,999</p>
              <p className="text-sm">/month*</p>
              <p className="mt-2 text-6xl font-black leading-none">%</p>
            </div>
          </div>
          <p className="absolute bottom-4 right-5 text-xs font-semibold text-white/80">
            *T&C Apply
          </p>
        </div>
      </div>
    </section>
  );
}