import { CheckCircle2, PackageSearch } from "lucide-react";
import { Button } from "@/components/ui/button";
import { SafeImage } from "@/components/ui/SafeImage";
import type { PartCategory } from "@/lib/mock-data";

const supportItems = ["Expert Fitting", "Quality Check", "Performance Tested"];
const sourcingItems = [
  "Genuine parts sourcing",
  "Quick availability check",
  "Pan-Nepal logistics",
];

type ServiceSupportBannerProps = {
  partCategories: PartCategory[];
  supportImage?: string;
};

export function ServiceSupportBanner({
  partCategories,
  supportImage,
}: ServiceSupportBannerProps) {
  return (
    <section className="bg-white py-8">
      <div className="container-custom">
        <div className="grid overflow-hidden rounded-[1.5rem] shadow-card lg:grid-cols-2">
          <article className="bg-navy-deep p-6 text-white md:p-8">
            <h2 className="text-2xl font-bold">Installation & Service Support</h2>
            <p className="mt-3 max-w-md text-sm leading-6 text-blue-100">
              Our trained technicians ensure the right fit and best performance.
            </p>
            <ul className="mt-6 space-y-3">
              {supportItems.map((item) => (
                <li className="flex items-center gap-3 text-sm font-semibold" key={item}>
                  <CheckCircle2 className="h-5 w-5 text-ev" />
                  {item}
                </li>
              ))}
            </ul>
          </article>
          <article className="green-gradient p-6 md:p-8">
            <div className="grid items-center gap-5 sm:grid-cols-[1fr_auto]">
              <div>
                <h2 className="text-2xl font-bold text-navy-deep">
                  Need a Part Not Listed?
                </h2>
                <p className="mt-3 text-sm leading-6 text-navy-muted">
                  We can help you source it.
                </p>
                <ul className="mt-5 space-y-3">
                  {sourcingItems.map((item) => (
                    <li className="flex items-center gap-3 text-sm font-semibold text-navy-muted" key={item}>
                      <CheckCircle2 className="h-5 w-5 text-ev" />
                      {item}
                    </li>
                  ))}
                </ul>
                <Button className="mt-6" href="/contact" variant="green">
                  Request a Part
                </Button>
              </div>
              <div className="relative">
                <span className="absolute -left-4 -top-4 inline-flex h-14 w-14 items-center justify-center rounded-full bg-white text-ev shadow-card">
                  <PackageSearch className="h-7 w-7" />
                </span>
                <SafeImage
                  src={supportImage || partCategories[2]?.image || "/images/parts/categories/tyres.png"}
                  alt="Parts package"
                  className="h-48 w-56 rounded-2xl object-cover shadow-card"
                  fallbackSrc="/images/backgrounds/hero-bg-general.png"
                />
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}