import { ArrowRight, Boxes, CreditCard, HelpCircle, Wrench } from "lucide-react";
import Link from "next/link";

const helpCards = [
  {
    title: "General Inquiries",
    text: "Questions about scooters, brands, or showrooms.",
    href: "/contact",
    icon: HelpCircle,
  },
  {
    title: "Service & Maintenance",
    text: "Book a service, check service centers, and support.",
    href: "/parts",
    icon: Wrench,
  },
  {
    title: "Parts & Accessories",
    text: "Spare parts availability and pricing.",
    href: "/parts",
    icon: Boxes,
  },
  {
    title: "Offers & Exchange",
    text: "Current offers and exchange information.",
    href: "/offers",
    icon: CreditCard,
  },
];

export function HelpCards() {
  return (
    <section className="bg-white py-10">
      <div className="container-custom">
        <div className="mb-6 text-center">
          <h2 className="text-3xl font-bold text-navy-deep">
            How Can We <span className="text-ev-deep">Help?</span>
          </h2>
          <p className="mt-3 text-sm text-navy-muted">
            Find quick answers to common questions or get in touch with our team.
          </p>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {helpCards.map((card) => {
            const Icon = card.icon;
            return (
              <article className="soft-card p-5" key={card.title}>
                <span className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary-soft text-primary">
                  <Icon className="h-6 w-6" />
                </span>
                <h3 className="mt-4 font-bold text-navy-deep">{card.title}</h3>
                <p className="mt-2 min-h-12 text-sm leading-6 text-navy-muted">
                  {card.text}
                </p>
                <Link
                  href={card.href}
                  className="mt-4 inline-flex items-center gap-2 text-sm font-bold text-primary"
                >
                  Learn More <ArrowRight className="h-4 w-4" />
                </Link>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}