import { BadgeCheck, Bike, Clock, ShieldCheck, UserCheck, Zap } from "lucide-react";
import Image from "next/image";
import { BranchSelection } from "@/components/forms/BranchSelection";
import { ScooterSelection } from "@/components/forms/ScooterSelection";
import { TestRideBenefits } from "@/components/forms/TestRideBenefits";
import { TestRideFAQ } from "@/components/forms/TestRideFAQ";
import { TestRideForm } from "@/components/forms/TestRideForm";
import { TestRideSteps } from "@/components/forms/TestRideSteps";
import { Badge } from "@/components/ui/badge";
import { scooters } from "@/lib/mock-data";
import { createPageMetadata } from "@/lib/seo";

export const metadata = createPageMetadata({
  title: "Book Test Ride",
  description:
    "Book an electric scooter test ride at Bashista Auto in Bharatpur or Kawasoti.",
  path: "/book-test-ride",
});

const heroProof = [
  { label: "100% Free", detail: "No booking fee", icon: ShieldCheck },
  { label: "No Obligation", detail: "Just explore", icon: BadgeCheck },
  { label: "Quick & Easy", detail: "Takes 2 minutes", icon: Clock },
];

const feelBenefits = [
  { title: "Expert Guidance", text: "Trained product experts", icon: UserCheck },
  { title: "Safe & Secure", text: "Safety is our priority", icon: ShieldCheck },
  { title: "Zero Pressure", text: "No sales pressure", icon: BadgeCheck },
  { title: "Real Road Experience", text: "Feel the real performance", icon: Bike },
];

export default function BookTestRidePage() {
  const heroScooter = scooters[0];

  return (
    <>
      <section className="blue-gradient relative overflow-hidden">
        <Image
          src="/images/backgrounds/hero-bg-testride.png"
          alt=""
          fill
          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.9fr_1.1fr]">
            <div>
              <Badge variant="blue" className="gap-2">
                <Zap className="h-3.5 w-3.5" />
                Test Ride
              </Badge>
              <h1 className="mt-5 text-4xl font-bold leading-tight text-navy-deep sm:text-5xl lg:text-6xl">
                Book Your <span className="text-ev-deep">Test Ride</span>
              </h1>
              <p className="mt-5 max-w-xl text-base leading-7 text-navy-muted">
                Experience the future of mobility first-hand. Choose your
                scooter, select your preferred time, and feel the difference.
              </p>
              <div className="mt-7 grid gap-3 sm:grid-cols-3">
                {heroProof.map((item) => {
                  const Icon = item.icon;
                  return (
                    <div className="flex items-center gap-3 rounded-card bg-white/80 p-3 shadow-card" key={item.label}>
                      <Icon className="h-5 w-5 shrink-0 text-ev" />
                      <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">
              <img
                src={heroScooter.heroImage}
                alt={heroScooter.name}
                className="mx-auto aspect-[4/3] w-full max-w-2xl object-contain"
              />
            </div>
          </div>
        </div>
      </section>

      <TestRideSteps />

      <section className="bg-white py-8">
        <div className="container-custom grid gap-5 lg:grid-cols-[1.25fr_0.75fr]">
          <TestRideForm />
          <article className="soft-card overflow-hidden">
            <div className="p-6 text-center">
              <h2 className="text-2xl font-bold text-navy-deep">
                Feel Before You Choose
              </h2>
              <p className="mx-auto mt-2 max-w-md text-sm leading-6 text-navy-muted">
                Our team will be ready to assist you with a safe and guided test
                ride experience.
              </p>
            </div>
            <img
              src={heroScooter.heroImage}
              alt={heroScooter.name}
              className="mx-auto aspect-[4/3] w-full max-w-lg object-contain"
            />
            <div className="grid gap-3 p-5 sm:grid-cols-2">
              {feelBenefits.map((benefit) => {
                const Icon = benefit.icon;
                return (
                  <div className="rounded-card border border-border bg-white p-4" key={benefit.title}>
                    <Icon className="h-5 w-5 text-ev" />
                    <h3 className="mt-2 font-bold text-navy-deep">{benefit.title}</h3>
                    <p className="mt-1 text-sm text-navy-muted">{benefit.text}</p>
                  </div>
                );
              })}
            </div>
          </article>
        </div>
      </section>

      <ScooterSelection />
      <BranchSelection />
      <TestRideBenefits />
      <TestRideFAQ />
    </>
  );
}