import {
  IconChartBar,
  IconChecklist,
  IconFileText,
  IconReportAnalytics,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";

const deliverableIcons = [
  IconFileText,
  IconChartBar,
  IconChecklist,
  IconReportAnalytics,
];
const deliverableKeys = [
  "currentState",
  "roiProjection",
  "recommendations",
  "lighthouse",
] as const;

export async function DeliverablesSection() {
  const t = await getTranslations("deliverablesSection");

  const deliverables = deliverableKeys.map((key, i) => ({
    icon: deliverableIcons[i],
    title: t(`${key}Title`),
    description: t(`${key}Desc`),
  }));

  return (
    <section className="py-12 sm:py-24 md:py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <FadeIn className="mb-8 text-center md:mb-16" y={20}>
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
            {t("headingPrefix")}{" "}
            <span className="text-[#FD105E]">{t("headingHighlight")}</span>
          </h2>
          <p className="mx-auto max-w-4xl text-base text-white/70 md:text-lg">
            {t("subtitle")}
          </p>
        </FadeIn>

        {/* Deliverables Grid */}
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
          {deliverables.map((item, index) => (
            <FadeIn
              className="relative rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/30 sm:p-6 md:p-8"
              delay={index * 0.1}
              duration={0.6}
              key={deliverableKeys[index]}
              y={20}
            >
              <div className="flex items-start gap-4">
                <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10">
                  <item.icon
                    className="h-6 w-6 text-[#FD105E]"
                    strokeWidth={1.5}
                  />
                </div>
                <div>
                  <h3 className="mb-2 font-bold text-white text-xl">
                    {item.title}
                  </h3>
                  <p className="text-neutral-300 leading-relaxed">
                    {item.description}
                  </p>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}