import { IconEye, IconGauge, IconRoute } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";

const phaseKeys = [
  { key: "phase1", icon: IconEye },
  { key: "phase2", icon: IconGauge },
  { key: "phase3", icon: IconRoute },
] as const;

export async function CroAuditProcess() {
  const t = await getTranslations("croAuditProcess");

  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("title")}{" "}
            <span className="text-[#FD105E]">{t("titleHighlight")}</span>
          </h2>
          <p className="mx-auto max-w-4xl text-base text-white/70 md:text-lg">
            {t("subtitle")}
          </p>
        </FadeIn>

        {/* Process Steps */}
        <div className="mx-auto max-w-5xl space-y-8">
          {phaseKeys.map((phase, index) => (
            <FadeIn
              className="relative rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm sm:p-6 md:p-8"
              delay={index * 0.2}
              duration={0.6}
              key={phase.key}
              y={0}
            >
              <div className="flex flex-col items-start gap-6 md:flex-row">
                {/* Icon & Phase Number */}
                <div className="flex flex-shrink-0 flex-col items-center gap-3">
                  <div className="flex h-16 w-16 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10">
                    <phase.icon
                      className="h-8 w-8 text-[#FD105E]"
                      strokeWidth={1.5}
                    />
                  </div>
                  <span className="font-semibold text-[#FD105E] text-sm">
                    {t(`${phase.key}Label`)}
                  </span>
                </div>

                {/* Content */}
                <div className="flex-1">
                  <h3 className="mb-4 font-bold text-white text-xl sm:text-2xl md:text-3xl">
                    {t(`${phase.key}Title`)}
                  </h3>
                  <p className="text-base text-neutral-300 leading-relaxed md:text-lg">
                    {t(`${phase.key}Desc`)}
                  </p>
                </div>
              </div>

              {/* Connector Line */}
              {index < phaseKeys.length - 1 && (
                <div className="absolute -bottom-8 left-1/2 hidden h-8 w-0.5 -translate-x-1/2 transform bg-gradient-to-b from-[#FD105E]/50 to-transparent md:block" />
              )}
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}