import {
  IconAlertCircle,
  IconCalendar,
  IconChartLine,
  IconClock,
  IconGauge,
  IconRocket,
  IconShieldCheck,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { FadeIn } from "@/components/ui/fade-in";

const guaranteeIcons = [
  IconClock,
  IconShieldCheck,
  IconGauge,
  IconRocket,
  IconChartLine,
  IconAlertCircle,
];

const guaranteeKeys = [
  "pageLoad",
  "uptime",
  "apiResponse",
  "tti",
  "scalability",
  "errorRate",
] as const;

const guaranteeValues = [
  "<1s",
  "99.99%",
  "<150ms",
  "<2s",
  "12x Surge",
  "<0.01%",
];

export async function PerformanceGuarantees() {
  const t = await getTranslations("performanceGuarantees");

  const guarantees = guaranteeKeys.map((key, i) => ({
    icon: guaranteeIcons[i],
    metric: t(`${key}Metric`),
    value: guaranteeValues[i],
    description: t(`${key}Desc`),
    measurement: t(`${key}Measurement`),
  }));

  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">
        {/* Header */}
        <div className="mx-auto mb-8 max-w-4xl text-center md:mb-16">
          <FadeIn>
            <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
              {t("headingPrefix")}
              <br />
              <span className="text-[#FD105E]">{t("headingHighlight")}</span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-lg">
              {t("subtitle")}
            </p>
          </FadeIn>
        </div>

        {/* Guarantees Grid */}
        <div className="mx-auto mb-16 grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {guarantees.map((guarantee, index) => (
            <FadeIn
              className="group relative"
              delay={index * 0.08}
              duration={0.5}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={guaranteeKeys[index]}
              scale={0.95}
              viewportAmount={0.2}
              y={20}
            >
              <div className="relative flex h-full flex-col rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50 hover:bg-[#1a1a1a] sm:p-6 md:p-8">
                <div className="relative flex-1">
                  {/* Icon */}
                  <div className="mb-4 flex items-center justify-between">
                    <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 transition-transform duration-300 group-hover:scale-110">
                      <guarantee.icon
                        className="h-6 w-6 text-[#FD105E]"
                        strokeWidth={1.5}
                      />
                    </div>
                    <div className="text-right">
                      <div className="font-bold text-2xl text-[#FD105E] md:text-3xl">
                        {guarantee.value}
                      </div>
                    </div>
                  </div>

                  {/* Metric name */}
                  <h3 className="mb-3 font-bold text-lg text-white md:text-xl">
                    {guarantee.metric}
                  </h3>

                  {/* Description */}
                  <p className="mb-4 text-neutral-200 text-sm leading-relaxed">
                    {guarantee.description}
                  </p>

                  {/* Measurement */}
                  <div className="mt-auto border-[#333333]/50 border-t pt-4">
                    <p className="text-neutral-400 text-xs leading-relaxed">
                      <span className="font-semibold text-neutral-300">
                        {t("howWeMeasure")}
                      </span>{" "}
                      {guarantee.measurement}
                    </p>
                  </div>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>

        {/* SLA Commitment */}
        <FadeIn className="mx-auto max-w-4xl" delay={0.3} y={20}>
          <div className="relative rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm sm:p-6 md:p-10">
            <div className="relative">
              <div className="mb-6 flex items-center justify-center">
                <IconShieldCheck
                  className="h-12 w-12 text-[#FD105E]"
                  strokeWidth={1.5}
                />
              </div>
              <h3 className="mb-4 text-center font-bold text-2xl text-white md:text-3xl">
                {t("slaTitle")}
              </h3>
              <p className="mb-6 text-center text-base text-neutral-200 leading-relaxed md:text-lg">
                {t("slaDescPrefix")}{" "}
                <span className="font-semibold text-[#FD105E]">
                  {t("slaDescHighlight")}
                </span>
                {t("slaDescSuffix")}
              </p>
              <div className="flex flex-col items-stretch justify-center gap-4 sm:flex-row sm:items-center">
                <ContactButton className="hover:scale-[1.02]">
                  <IconCalendar className="h-4 w-4" />
                  {t("slaCta")}
                </ContactButton>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}