import { CalendarCheck, MapPin } from "lucide-react";
import { Button } from "@/components/ui/button";
import { SafeImage } from "@/components/ui/SafeImage";
import { scooters } from "@/lib/mock-data";

export function AboutCTA({ ctaImage = scooters[0].thumbnailImage }: { ctaImage?: string }) {
  return (
    <section className="bg-white pb-10 pt-4">
      <div className="container-custom">
        <div className="overflow-hidden rounded-[1.5rem] bg-gradient-to-r from-primary-deep via-cyan-600 to-ev p-6 text-white shadow-soft">
          <div className="grid items-center gap-5 md:grid-cols-[auto_1fr_auto]">
            <SafeImage
              src={ctaImage}
              alt={scooters[0].name}
              className="h-32 w-44 rounded-2xl object-cover"
              fallbackSrc="/images/scooters/hero-scooter-v2.png"
            />
            <div>
              <h2 className="text-2xl font-bold">Ready to Experience the Future?</h2>
              <p className="mt-2 text-sm leading-6 text-blue-50">
                Visit our showroom today or book a test ride and feel the
                difference.
              </p>
            </div>
            <div className="flex flex-col gap-3 sm:flex-row md:flex-col">
              <Button href="/contact" variant="secondary">
                <MapPin className="h-4 w-4" />
                Visit Showroom
              </Button>
              <Button href="/book-test-ride" variant="green">
                <CalendarCheck className="h-4 w-4" />
                Book Test Ride
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}