import {
  IconArrowRight,
  IconBolt,
  IconCalendar,
  IconGauge,
  IconRocket,
  IconServer,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { FadeIn } from "@/components/ui/fade-in";
import { SecondaryButton } from "@/components/ui/secondary-button";

interface PerformanceAudit {
  deliveryTime: string;
  description: string;
  featured?: boolean;
  highlights: string[];
  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
  price: string;
  title: string;
}

export async function PerformanceAuditsDetails() {
  const tCommon = await getTranslations("common");
  const t = await getTranslations("performanceAuditsDetails");

  const performanceAudits: PerformanceAudit[] = [
    {
      icon: IconGauge,
      title: t("audit1Title"),
      price: t("audit1Price"),
      description: t("audit1Description"),
      deliveryTime: t("audit1DeliveryTime"),
      highlights: [
        t("audit1Highlight1"),
        t("audit1Highlight2"),
        t("audit1Highlight3"),
        t("audit1Highlight4"),
        t("audit1Highlight5"),
      ],
      featured: true,
    },
    {
      icon: IconBolt,
      title: t("audit2Title"),
      price: t("audit2Price"),
      description: t("audit2Description"),
      deliveryTime: t("audit2DeliveryTime"),
      highlights: [
        t("audit2Highlight1"),
        t("audit2Highlight2"),
        t("audit2Highlight3"),
        t("audit2Highlight4"),
        t("audit2Highlight5"),
        t("audit2Highlight6"),
        t("audit2Highlight7"),
        t("audit2Highlight8"),
        t("audit2Highlight9"),
      ],
      featured: true,
    },
    {
      icon: IconServer,
      title: t("audit3Title"),
      price: t("audit3Price"),
      description: t("audit3Description"),
      deliveryTime: t("audit3DeliveryTime"),
      highlights: [
        t("audit3Highlight1"),
        t("audit3Highlight2"),
        t("audit3Highlight3"),
        t("audit3Highlight4"),
        t("audit3Highlight5"),
        t("audit3Highlight6"),
      ],
    },
    {
      icon: IconRocket,
      title: t("audit4Title"),
      price: t("audit4Price"),
      description: t("audit4Description"),
      deliveryTime: t("audit4DeliveryTime"),
      highlights: [
        t("audit4Highlight1"),
        t("audit4Highlight2"),
        t("audit4Highlight3"),
        t("audit4Highlight4"),
        t("audit4Highlight5"),
        t("audit4Highlight6"),
      ],
    },
  ];

  return (
    <section className="relative overflow-hidden py-12 sm:py-24 md: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("titleLine1")}
              <br />
              <span className="text-[#FD105E]">{t("titleLine2")}</span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-lg">
              {t("subtitle")}
            </p>
          </FadeIn>
        </div>

        {/* Audits Grid */}
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2">
          {performanceAudits.map((audit, index) => (
            <FadeIn
              className={`group relative ${
                audit.featured ? "lg:col-span-1" : ""
              }`}
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={audit.title}
              viewportAmount={0.2}
            >
              <div
                className={`relative h-full rounded-2xl border bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:bg-[#1a1a1a] sm:p-6 md:p-8 ${
                  audit.featured
                    ? "border-[#FD105E]/30 hover:border-[#FD105E]/60"
                    : "border-[#333333] hover:border-[#FD105E]/50"
                }`}
              >
                {/* Featured Badge */}
                {audit.featured && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span className="rounded-xl bg-[#E00D54] px-4 py-1 font-semibold text-white text-xs">
                      {t("popular")}
                    </span>
                  </div>
                )}

                {/* Icon and Title */}
                <div className="mb-6 flex items-start">
                  <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 transition-transform duration-300 group-hover:scale-110">
                    <audit.icon
                      className="h-7 w-7 text-[#FD105E]"
                      strokeWidth={1.5}
                    />
                  </div>
                  <div className="mt-2 ml-4 flex-1">
                    <h3 className="mb-1 font-bold text-white text-xl md:text-2xl">
                      {audit.title}
                    </h3>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="font-bold text-[#FD105E] text-xl md:text-2xl">
                        {audit.price}
                      </span>
                      <span className="text-neutral-400">•</span>
                      <span className="text-neutral-400">
                        {audit.deliveryTime}
                      </span>
                    </div>
                  </div>
                </div>

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

                {/* Highlights */}
                <div className="mb-6">
                  <h4 className="mb-3 font-semibold text-neutral-400 text-xs uppercase tracking-wide">
                    {tCommon("whatsIncluded")}
                  </h4>
                  <ul className="space-y-2">
                    {audit.highlights.map((highlight) => (
                      <li
                        className="flex items-start text-neutral-300 text-sm"
                        key={highlight}
                      >
                        <span className="mt-1 mr-2 text-[#FD105E]">✓</span>
                        {highlight}
                      </li>
                    ))}
                  </ul>
                </div>

                {/* CTA Button */}
                <ContactButton
                  className={`inline-flex w-full items-center justify-center gap-2 rounded-xl px-6 py-3 font-semibold transition-all duration-300 hover:scale-105 ${
                    audit.featured
                      ? "bg-[#E00D54] text-white hover:bg-[#E00D54]/90"
                      : "border-2 border-[#FD105E]/50 bg-transparent text-white hover:bg-[#FD105E]/10"
                  }`}
                >
                  <IconCalendar className="h-4 w-4" />
                  {t("bookThisAudit")}
                </ContactButton>
              </div>
            </FadeIn>
          ))}
        </div>

        {/* Bottom CTA */}
        <FadeIn className="mt-16 text-center" delay={0.4}>
          <p className="mb-4 text-neutral-400 text-sm">{t("bottomCtaText")}</p>
          <SecondaryButton href="/contact" icon={IconArrowRight}>
            {t("bottomCtaLabel")}
          </SecondaryButton>
        </FadeIn>
      </div>
    </section>
  );
}