import { BadgeCheck, Headphones, Leaf } from "lucide-react";
import Image from "next/image";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { scooters } from "@/lib/mock-data";

const proofItems = [
  { label: "100% Genuine Products", icon: BadgeCheck },
  { label: "Reliable After-Sales Support", icon: Headphones },
  { label: "Sustainable Mobility for Nepal", icon: Leaf },
];

export function AboutHero({
  heroBackgroundImage = "/images/backgrounds/hero-bg-general.png",
  heroProductImage = scooters[0].heroImage,
  heroTitle = "About Bashista Auto",
  heroSubtitle = "Empowering Nepal's Mobility with Trust, Innovation & Care",
  heroDescription = "We are more than a showroom. We are your mobility partner for life. From premium electric scooters to unmatched after-sales support, we drive a cleaner, smarter, and better tomorrow.",
}: {
  heroBackgroundImage?: string;
  heroProductImage?: string;
  heroTitle?: string;
  heroSubtitle?: string;
  heroDescription?: string;
}) {
  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.95fr_1.05fr]">
          <div>
            <Badge variant="blue">About Us</Badge>
            <h1 className="mt-5 text-4xl font-bold leading-tight text-navy-deep sm:text-5xl lg:text-6xl">
              {heroTitle}
            </h1>
            <h2 className="mt-4 text-xl font-bold leading-8 text-navy-deep">
              {heroSubtitle}
            </h2>
            <p className="mt-4 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" variant="green">
                Explore Scooters
              </Button>
              <Button href="/contact" variant="outline">
                Contact Us
              </Button>
            </div>
            <div className="mt-7 grid gap-3 sm:grid-cols-3">
              {proofItems.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" />
                    <p className="text-xs font-bold text-navy-deep">{item.label}</p>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="relative rounded-[2rem] border border-white bg-white/65 p-5 shadow-soft">
            <img
              src={heroProductImage}
              alt={scooters[0].name}
              className="mx-auto aspect-[4/3] w-full max-w-2xl object-contain"
            />
          </div>
        </div>
      </div>
    </section>
  );
}