import Link from "next/link";
import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import { ArrowRight } from "lucide-react";
import { FadeIn } from "@/components/magicui/fade-in";
import { getLocalizedProcessSteps } from "@/data/localized-data";

function Process() {
  const locale = useLocale();
  const t = useTranslations("process");
  const steps = getLocalizedProcessSteps(locale);

  return (
    <section id="process" className="bg-cream py-20 sm:py-28">
      <div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
        <FadeIn>
          <div className="mb-14 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
            <div>
              <p className="mb-2 text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("label")}
              </p>
              <h2 className="font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("title")}
              </h2>
            </div>
            <Link
              href={`/${locale}/process`}
              className="flex items-center gap-1.5 text-xs font-bold tracking-wider text-muted transition-colors hover:text-gold"
            >
              {t("viewAll")} <ArrowRight className="h-3.5 w-3.5" />
            </Link>
          </div>
        </FadeIn>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {steps.map((step, index) => (
            <FadeIn key={step.title} delay={index * 100}>
              <div className="group relative overflow-hidden rounded-2xl bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                {/* Image */}
                <div className="relative aspect-[4/3] overflow-hidden">
                  <Image
                    src={step.image}
                    alt={step.title}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-105"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-ink/60 via-transparent to-transparent" />
                  {/* Step number */}
                  <div className="absolute left-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-gold text-sm font-bold text-white shadow">
                    {step.step}
                  </div>
                </div>
                {/* Content */}
                <div className="p-5">
                  <h3 className="font-serif text-base font-bold text-gold">{step.title}</h3>
                  <p className="mt-1.5 text-xs leading-relaxed text-muted">{step.description}</p>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

export { Process };