"use client";

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

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

interface UseCase {
  title: string;
  description: string;
  icon: LucideIcon;
}

const useCases: UseCase[] = [
  {
    title: "YouTube",
    description:
      "Intros, outros, and long-form explainers with chapters and thumbnail-ready frames.",
    icon: Tv,
  },
  {
    title: "Instagram Reels",
    description:
      "Vertical templates, bold captions, and beat-synced cuts built for short-form.",
    icon: Smartphone,
  },
  {
    title: "Ads",
    description:
      "High-converting promos for Meta, Google, and TikTok with platform-safe ratios.",
    icon: Megaphone,
  },
  {
    title: "Corporate Videos",
    description:
      "Onboarding, training, and investor updates with consistent brand styling.",
    icon: Building2,
  },
];

export function VideoMakerUseCases() {
  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">
            Built for every channel
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-neutral-600">
            Pick a format and let templates handle aspect ratio, safe zones, and
            pacing.
          </p>
        </SectionReveal>

        <SectionReveal className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {useCases.map((useCase) => {
            const Icon = useCase.icon;
            return (
              <article
                key={useCase.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">
                  {useCase.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-neutral-600">
                  {useCase.description}
                </p>
              </article>
            );
          })}
        </SectionReveal>
      </div>
    </section>
  );
}