import { ArrowRight } from "lucide-react";

import { TrackedCtaLink } from "@/components/marketing/MarketingAnalytics";
import { Card } from "@/components/ui/Card";

type PageType = "commercial" | "use_case_hub" | "use_case";

type GrowthLink = {
  href: string;
  title: string;
  description: string;
  ctaLabel: string;
};

export function GrowthLinksSection({
  eyebrow,
  title,
  description,
  links,
  pageType,
  cluster,
  useCase,
}: {
  eyebrow: string;
  title: string;
  description: string;
  links: GrowthLink[];
  pageType: PageType;
  cluster: string;
  useCase?: string;
}) {
  return (
    <section className="py-20 bg-slate-50">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <div className="max-w-3xl mb-12">
          <div className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-700">
            {eyebrow}
          </div>
          <h2 className="mt-3 text-4xl font-bold text-slate-900">{title}</h2>
          <p className="mt-4 text-xl text-slate-600">{description}</p>
        </div>

        <div className="grid gap-6 lg:grid-cols-4">
          {links.map((link) => (
            <TrackedCtaLink
              key={link.href}
              href={link.href}
              ctaLabel={link.ctaLabel}
              ctaLocation="related_workflows"
              pageType={pageType}
              cluster={cluster}
              useCase={useCase}
              className="group block h-full"
            >
              <Card className="h-full rounded-3xl border-slate-200 bg-white p-7 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg">
                <div className="text-lg font-semibold text-slate-900">
                  {link.title}
                </div>
                <p className="mt-3 text-base leading-7 text-slate-600">
                  {link.description}
                </p>
                <div className="mt-6 flex items-center gap-2 text-sm font-semibold text-blue-700">
                  <span>Open workflow</span>
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </div>
              </Card>
            </TrackedCtaLink>
          ))}
        </div>
      </div>
    </section>
  );
}