import Image from "next/image";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { text } from "@/lib/site-text";
import { HeroButtons } from "./hero-buttons";

type Props = {
  title: string;
  subtitle: string;
  imageUrl?: string | null;
};

export async function Hero({ title, subtitle, imageUrl }: Props) {
  const siteText = await getResolvedSiteText();
  const heroTitle = title.replace(/\\n/g, "\n");

  return (
    <section className="reveal-soft relative overflow-hidden rounded-[2.3rem] border border-[#ffe2e2] bg-[linear-gradient(130deg,#fffafa_0%,#fff1f1_42%,#ffeaea_100%)] px-6 py-12 shadow-[0_26px_56px_rgba(49,18,18,0.12)] md:px-10 md:py-16">
      <div className="pointer-events-none absolute -right-14 -top-16 h-56 w-56 rounded-full bg-[#f5505036] blur-3xl" />
      <div className="pointer-events-none absolute -left-12 bottom-8 h-44 w-44 rounded-full bg-[#ff8e8e33] blur-3xl" />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-[#ffffff] to-transparent" />

      <div className="grid items-center gap-10 md:grid-cols-2">
        <div className="space-y-6">
          <p className="inline-flex rounded-full border border-[var(--accent-3)] bg-white/80 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-3)]">
            {text(siteText, "shop.eyebrow")}
          </p>

          <h1 className="whitespace-pre-line font-serif text-5xl leading-[0.95] text-[var(--foreground)] md:text-7xl">{heroTitle}</h1>
          <p className="max-w-xl text-[15px] leading-relaxed text-[var(--muted)]">{subtitle}</p>

          <HeroButtons
            primaryText={text(siteText, "home.favoriteCta")}
            secondaryText={text(siteText, "home.experienceSecondary")}
          />
        </div>

        <div className="relative mx-auto aspect-[5/4] w-full max-w-lg overflow-hidden rounded-[1.9rem] border border-[var(--accent-3)] bg-[var(--accent-3)] shadow-[0_26px_54px_rgba(53,20,20,0.2)]">
          {imageUrl ? (
            <Image
              src={imageUrl}
              alt={title}
              fill
              priority
              fetchPriority="high"
              quality={70}
              sizes="(max-width: 420px) calc(100vw - 5rem), (max-width: 768px) 24rem, 50vw"
              className="object-cover"
            />
          ) : (
            <div className="h-full w-full bg-gradient-to-br from-[#ffb1b1] to-[#f55050]" />
          )}
        </div>
      </div>
    </section>
  );
}