import { BadgeCheck, CalendarCheck, Phone, ShieldCheck, WalletCards } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PHONE_PRIMARY } from "@/lib/constants";
import { scooters as mockScooters, type Scooter } from "@/lib/mock-data";

const trustBadges = [
  { label: "Best Price Guaranteed", icon: BadgeCheck },
  { label: "100% Genuine Products", icon: ShieldCheck },
  { label: "Easy Finance Options", icon: WalletCards },
  { label: "Trusted After-Sales Support", icon: BadgeCheck },
  { label: "Multiple Brands Under One Roof", icon: ShieldCheck },
];

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

export function OffersCTA({ scooters = mockScooters }: OffersCTAProps) {
  const scooter = scooters[2] ?? scooters[0];

  return (
    <section className="bg-white pb-10 pt-6">
      <div className="container-custom">
        <div className="grid gap-5 lg:grid-cols-2">
          <article className="green-gradient rounded-[1.5rem] border border-ev/20 p-6 shadow-card md:p-8">
            <div className="grid items-center gap-5 sm:grid-cols-[1fr_auto]">
              <div>
                <p className="text-sm font-bold text-ev-deep">
                  Experience the Future Today
                </p>
                <h2 className="mt-3 text-3xl font-bold text-navy-deep">
                  Book a Test Ride
                </h2>
                <p className="mt-3 text-sm leading-6 text-navy-muted">
                  Feel the performance. Live the future.
                </p>
                <Button className="mt-5" href="/book-test-ride" variant="green">
                  <CalendarCheck className="h-4 w-4" />
                  Book Test Ride
                </Button>
              </div>
              {scooter ? (
                <img
                  src={scooter.thumbnailImage}
                  alt={scooter.name}
                  className="h-40 w-52 rounded-2xl object-cover"
                />
              ) : null}
            </div>
          </article>

          <article className="blue-gradient rounded-[1.5rem] border border-primary/20 p-6 shadow-card md:p-8">
            <p className="text-sm font-bold text-primary">Talk to Our Experts</p>
            <h2 className="mt-3 text-3xl font-bold text-navy-deep">Call Now</h2>
            <p className="mt-3 text-sm leading-6 text-navy-muted">
              Get the best offers, tailored for you.
            </p>
            <Button className="mt-5" href={`tel:${PHONE_PRIMARY}`}>
              <Phone className="h-4 w-4" />
              {PHONE_PRIMARY}
            </Button>
          </article>
        </div>

        <div className="mt-6 grid gap-3 rounded-card border border-border bg-white p-4 shadow-card md:grid-cols-5">
          {trustBadges.map((badge) => {
            const Icon = badge.icon;
            return (
              <div className="flex items-center justify-center gap-3 text-center" key={badge.label}>
                <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ev-soft text-ev-deep">
                  <Icon className="h-4 w-4" />
                </span>
                <p className="text-xs font-bold text-navy-muted">{badge.label}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}