import { useTranslations } from "next-intl";
import Rule from "@/components/ui/Rule";

export default function ProcessXray() {
  const t = useTranslations("ProductionProcessPage.xray");

  return (
    <section className="bg-foreground text-on-inverse-surface">
      <div className="mx-auto max-w-[1440px] px-6 py-[76px] lg:px-16 lg:py-[104px]">
        <div className="grid grid-cols-1 items-center gap-11 lg:grid-cols-2 lg:gap-16">
          <div className="reveal">
            <div className="mb-5 flex items-center gap-4">
              <Rule size="xl" />
              <span className="text-[11px] font-semibold uppercase tracking-[0.26em] text-gold-bright">
                {t("overline")}
              </span>
            </div>
            <h2 className="font-display text-[31px] font-normal leading-[1.18] text-white lg:text-[clamp(32px,3.8vw,46px)] lg:leading-[1.12]">
              {t("title")}
            </h2>
            <p className="mt-6 max-w-[520px] text-base leading-[1.75] text-white/[.72]">
              {t("body")}
            </p>
          </div>

          <div className="reveal">
            <div
              aria-hidden="true"
              className="flex aspect-video border border-white/25 bg-black/40 p-7"
            >
              <div className="flex flex-1 flex-col justify-between border border-gold-bright/30 p-[18px]">
                <div className="flex justify-between text-[9.5px] font-semibold uppercase tracking-[0.2em] text-white/50">
                  <span>{t("hud.scanning")}</span>
                  <span>{t("hud.batch")}</span>
                </div>
                <div className="flex flex-1 items-center justify-center">
                  <div className="pulse-slow flex h-[170px] w-[170px] items-center justify-center rounded-full border-2 border-dashed border-gold-bright/45">
                    <span className="font-display text-[26px] tracking-[0.14em] text-gold-bright">
                      Au
                    </span>
                  </div>
                </div>
                <div className="flex justify-between text-[9.5px] font-semibold uppercase tracking-[0.2em] text-white/50">
                  <span>{t("hud.alloy")}</span>
                  <span>{t("hud.plating")}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}