import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";

interface ServiceHubMethodProps {
  gradientDirection?: string;
  namespace: string;
}

export async function ServiceHubMethod({
  namespace,
  gradientDirection = "bg-gradient-to-bl",
}: ServiceHubMethodProps) {
  const t = await getTranslations(namespace);

  const steps = [1, 2, 3, 4].map((i) => ({
    number: String(i).padStart(2, "0"),
    title: t(`step${i}Title`),
    description: t(`step${i}Description`),
  }));

  return (
    <section
      className={`relative py-12 md:py-24 ${gradientDirection} overflow-hidden from-[#000] to-[#1A2428]`}
    >
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mx-auto mb-8 max-w-4xl text-center md:mb-16">
          <FadeIn>
            <h2 className="mb-6 font-bold text-2xl text-white sm:text-3xl md:text-5xl">
              {t("methodHeading")}
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-lg">
              {t("methodSubtitle")}
            </p>
          </FadeIn>
        </div>

        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-4">
          {steps.map((step, index) => (
            <FadeIn
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={step.number}
              viewportAmount={0.2}
            >
              <div className="h-full rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-6 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50">
                <div className="mb-3 font-semibold text-[#FD105E] text-sm tracking-wider">
                  {step.number}
                </div>
                <h3 className="mb-3 font-bold text-white text-xl">
                  {step.title}
                </h3>
                <p className="text-neutral-300 text-sm leading-relaxed">
                  {step.description}
                </p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}