import Overline from "@/components/ui/Overline";
import ArrowLink from "@/components/ui/ArrowLink";
import { useTranslations } from "next-intl";
import Image from "next/image";

import Cadcam from "../../../public/design/cadcam.webp";
import Predesign from "../../../public/design/predesign.webp";
import Sampling from "../../../public/design/sampling.webp";
import Building from "../../../public/home/advance-manufacture-building.webp";
import Polishing from "../../../public/production/polishing.webp";
import WaxInjection from "../../../public/production/wax-injection.webp";

const STEPS = [
  { key: "review", img: Predesign, number: "01" },
  { key: "cad", img: Cadcam, number: "02" },
  { key: "sampling", img: Sampling, number: "03" },
  { key: "production", img: WaxInjection, number: "04" },
  { key: "quality", img: Polishing, number: "05" },
  { key: "shipping", img: Building, number: "06" },
] as const;

export default function ProcessSection() {
  const t = useTranslations("IndexPage.process");

  return (
    <section
      aria-labelledby="process-heading"
      className="overflow-clip bg-background py-section-sm lg:py-section"
    >
      <div className="shell">
        <div className="reveal mb-16 text-center lg:mb-18">
          <Overline>{t("overline")}</Overline>
          <h2
            id="process-heading"
            className="mt-4 font-display text-h2 font-normal text-foreground"
          >
            {t("title")}
          </h2>
        </div>

        <div className="reveal-stagger grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-9">
          {STEPS.map(({ key, img, number }) => (
            <div key={key} className="reveal group">
              {/* `sizes` follows the grid above, gutters and gaps included:
                  3 columns inside `shell` from lg — (1312 - 2×24) / 3 = 421px at
                  the 1440 cap, and 0.333×100vw - 59px below it, which 30vw
                  covers; 2 columns with a 16px gap from sm — 0.5×100vw - 32px,
                  which 48vw covers; one full-width column minus the 24px
                  gutters below that. The old `33vw / 50vw / 100vw` ignored every
                  gutter and asked for 634px at 1920 instead of 421. */}
              <div className="relative mb-5.5 aspect-4/3 overflow-hidden bg-surface-container">
                <Image
                  alt={t(`steps.${key}.imageAlt`)}
                  src={img}
                  fill
                  placeholder="blur"
                  sizes="(min-width:1440px) 421px, (min-width:1024px) 30vw, (min-width:640px) 48vw, calc(100vw - 48px)"
                  className="object-cover transition-transform duration-700 ease-out motion-safe:group-hover:scale-105"
                />
              </div>
              <span className="text-label uppercase text-gold-text">
                {t("stepLabel", { number })}
              </span>
              <h3 className="mt-2.5 font-display text-h3 font-normal text-foreground">
                {t(`steps.${key}.title`)}
              </h3>
            </div>
          ))}
        </div>

        <div className="reveal mt-14 text-center">
          <ArrowLink href="/production-process">{t("cta")}</ArrowLink>
        </div>
      </div>
    </section>
  );
}