import {
  IconActivity,
  IconPuzzle,
  IconShieldLock,
  IconStack3,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";

const pillarKeys = ["pillar1", "pillar2", "pillar3", "pillar4"] as const;

const pillarIcons = [IconShieldLock, IconActivity, IconPuzzle, IconStack3];

export async function WpMaintenanceWhatIs() {
  const t = await getTranslations("wpMaintenanceWhatIs");

  const pillars = pillarKeys.map((key, index) => ({
    icon: pillarIcons[index],
    title: t(`${key}Title`),
    description: t(`${key}Desc`),
  }));

  return (
    <section className="relative overflow-hidden py-12 md:py-24 lg:py-32">
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-4xl">
          <FadeIn>
            <h2 className="mb-6 text-center font-bold text-2xl text-white leading-tight sm:text-3xl md:mb-8 md:text-5xl">
              {t("title")}
            </h2>
            <p className="mb-8 text-center text-base text-neutral-200 leading-relaxed md:mb-12 md:text-lg">
              {t("description")}
            </p>
          </FadeIn>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
            {pillars.map((pillar, index) => (
              <FadeIn
                delay={index * 0.08}
                duration={0.5}
                ease={[0.21, 0.47, 0.32, 0.98]}
                key={pillarKeys[index]}
                scale={0.95}
                viewportAmount={0.2}
                y={20}
              >
                <div className="group relative h-full rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-5 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50 md:p-6">
                  <pillar.icon
                    className="mx-auto mb-4 h-10 w-10 text-white/80 transition-colors duration-300 group-hover:text-[#FD105E]"
                    strokeWidth={1.5}
                  />
                  <h3 className="mb-2 text-center font-bold text-base text-white md:text-lg">
                    {pillar.title}
                  </h3>
                  <p className="text-center text-neutral-300 text-sm leading-relaxed">
                    {pillar.description}
                  </p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}