"use client";

import type { LucideIcon } from "lucide-react";
import { Building2, Megaphone, Smartphone, Tv } from "lucide-react";
import { useTranslations } from "next-intl";

import { SectionReveal } from "@/components/sections/SectionReveal";

const USE_CASE_ICONS: LucideIcon[] = [Tv, Smartphone, Megaphone, Building2];

export function VideoMakerUseCases() {
  const t = useTranslations("videoMaker");

  const useCases = USE_CASE_ICONS.map((Icon, i) => ({
    Icon,
    title: t(`useCase${i}Title` as Parameters<typeof t>[0]),
    description: t(`useCase${i}Desc` as Parameters<typeof t>[0]),
  }));

  return (
    <section className="bg-white py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionReveal className="text-center">
          <h2 className="font-heading text-3xl font-bold text-neutral-900 sm:text-4xl">
            {t("useCasesHeading")}
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-neutral-600">
            {t("useCasesSub")}
          </p>
        </SectionReveal>

        <SectionReveal className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {useCases.map(({ Icon, title, description }) => (
            <article
              key={title}
              className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-50 text-primary-600">
                <Icon className="h-6 w-6" aria-hidden />
              </div>
              <h3 className="mt-4 font-heading text-lg font-semibold text-neutral-900">
                {title}
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-neutral-600">
                {description}
              </p>
            </article>
          ))}
        </SectionReveal>
      </div>
    </section>
  );
}