import {
  IconBolt,
  IconBrain,
  IconChartLine,
  IconClockBolt,
  IconCode,
  IconInfinity,
  IconRocket,
  IconShieldCheck,
} from "@tabler/icons-react";
import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils";

const featureIcons = [
  <IconRocket key="rocket" />,
  <IconChartLine key="chart" />,
  <IconInfinity key="infinity" />,
  <IconClockBolt key="clock" />,
  <IconBrain key="brain" />,
  <IconCode key="code" />,
  <IconShieldCheck key="shield" />,
  <IconBolt key="bolt" />,
];

const featureKeys = [
  "launchCampaigns",
  "abTest",
  "integrateMartTech",
  "instantPreviews",
  "personalizeContent",
  "cmsTeamLove",
  "seoFoundation",
  "scalability",
] as const;

export function FeaturesSectionIntteligence() {
  const t = useTranslations("fullIntelligence");

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

  return (
    <section className="relative overflow-hidden py-12 sm:py-24 md:py-32">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-8 text-center md:mb-16">
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:text-5xl">
            {t("headingPrefix")}
            <span className="text-[#FD105E]"> {t("headingHighlight")}</span>
          </h2>
          <p className="mx-auto max-w-3xl text-base text-neutral-400 md:text-xl">
            {t("subtitle")}
          </p>
        </div>
        <div className="relative z-10 mx-auto grid max-w-7xl grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
          {features.map((feature, index) => (
            <Feature key={featureKeys[index]} {...feature} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

const Feature = ({
  title,
  description,
  icon,
  index,
}: {
  title: string;
  description: string;
  icon: React.ReactNode;
  index: number;
}) => (
  <div
    className={cn(
      "group/feature relative flex flex-col border-neutral-800 border-b py-6 last:border-b-0 md:border-b-0 md:py-10 lg:border-r",
      (index === 0 || index === 4) && "border-neutral-800 lg:border-l",
      index < 4 && "border-neutral-800 lg:border-b"
    )}
  >
    {index < 4 && (
      <div className="pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-t from-[#FD105E]/10 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100" />
    )}
    {index >= 4 && (
      <div className="pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-b from-[#FD105E]/10 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100" />
    )}
    <div className="relative z-10 mb-4 px-4 text-[#FD105E]/70 transition-colors duration-200 group-hover/feature:text-[#FD105E] sm:px-6 lg:px-8">
      {icon}
    </div>
    <div className="relative z-10 mb-2 px-4 font-bold text-base sm:px-6 md:text-lg lg:px-8">
      <div className="absolute inset-y-0 left-0 h-6 w-1 origin-center rounded-tr-full rounded-br-full bg-neutral-700 transition-all duration-200 group-hover/feature:h-8 group-hover/feature:bg-[#E00D54]" />
      <span className="inline-block text-white transition duration-200 group-hover/feature:translate-x-2">
        {title}
      </span>
    </div>
    <p className="relative z-10 px-4 text-neutral-400 text-sm sm:px-6 lg:px-8">
      {description}
    </p>
  </div>
);