import { buttonVariants } from "@/components/ui/button";
import Overline from "@/components/ui/Overline";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { Link } from "@/i18n/navigation";
import HeroImage from "../../../public/home/white-gold-set-advance-manufacturer.webp";

export default function HeroHome() {
  const t = useTranslations("IndexPage.hero");

  return (
    <section
      aria-labelledby="hero-heading"
      className="flex flex-col pt-header lg:min-h-[calc(var(--spacing-hero)+var(--spacing-header-lg))] lg:flex-row lg:pt-header-lg"
    >
      {/* Image half — appears above the text on mobile (source order).
          `object-[35%_center]` keeps the chain (x≈0.02) and the hoop earring
          (x≈0.90) inside the crop: a bare `object-cover` on this 3:2 packshot
          drops 67% of the subject in the ~1:1 mobile frame. Stopgap until the
          client delivers a portrait/square hero asset. */}
      <div className="relative min-h-[46vh] grow basis-120 overflow-hidden bg-surface-dim lg:min-h-0">
        <Image
          alt={t("imageAlt")}
          src={HeroImage}
          fill
          priority
          placeholder="blur"
          sizes="(min-width:1024px) 50vw, 100vw"
          className="object-cover object-[35%_center]"
        />
        {/* Est. badge, bottom-left: gold text on the packshot, no chip (client
            request 2026-08-25 — the scrim chip was dropped, gold hairline + text). */}
        <div className="absolute bottom-6 left-6 flex items-center gap-3.5">
          <span aria-hidden="true" className="h-px w-13 bg-gold" />
          <span className="text-micro font-semibold uppercase tracking-caps-wide text-gold-text">
            {t("badge")}
          </span>
        </div>
      </div>

      {/* Text half — centered on mobile, left-aligned from lg. */}
      <div className="flex grow basis-120 flex-col items-center justify-center bg-background px-6 pb-section-sm pt-16 text-center lg:items-start lg:px-16 lg:py-16 lg:text-left">
        <div className="max-w-140">
          <Overline align="responsive" className="mb-7.5">
            {t("overline")}
          </Overline>
          <h1
            id="hero-heading"
            className="mb-6.5 font-display text-display-sm font-normal text-foreground lg:text-display-lg"
          >
            {t("title")}
          </h1>
          <p className="mx-auto mb-10 max-w-120 text-base leading-body text-on-surface-variant lg:mx-0 lg:text-lg">
            {t("subtitle")}
          </p>
          <div className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-center lg:justify-start">
            <Link
              href="/production-process"
              className={cn(
                buttonVariants({ variant: "cta", size: "cta-lg" }),
                "w-full text-center sm:w-auto",
              )}
            >
              {t("ctaPrimary")}
            </Link>
            <Link
              href="/contact-us"
              className={cn(
                buttonVariants({ variant: "cta-outline", size: "cta-lg" }),
                "w-full text-center sm:w-auto",
              )}
            >
              {t("ctaSecondary")}
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}