import type { StoreSiteBlock } from "@alqove/api-client";
import { blockData, bool, safeHref, safeImageUrl, str } from "../block-data";
import { resolveAuthoredHref, type StorefrontRenderContext } from "../links";

interface HeroBlockProps {
  block: StoreSiteBlock;
  ctx: StorefrontRenderContext;
}

export function HeroBlock({ block, ctx }: HeroBlockProps) {
  const data = blockData(block);
  const headline = str(data, "headline") ?? ctx.shell.store?.name ?? "";
  const subhead = str(data, "subhead");
  const image = safeImageUrl(str(data, "image_url"));
  const ctaLabel = str(data, "cta_label");
  const ctaHref = resolveAuthoredHref(safeHref(str(data, "cta_href")), ctx);
  const centered = str(data, "align") !== "left";
  const overlay = bool(data, "overlay", true);

  return (
    <section
      className="relative overflow-hidden"
      style={{ backgroundColor: image ? "#0f172a" : "var(--sf-surface)" }}
    >
      {image && (
        // Seller-supplied hosts vary per store; a plain <img> keeps the image
        // optimizer's allowlist from becoming a per-store deploy step.
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={image}
          alt=""
          aria-hidden="true"
          className="absolute inset-0 h-full w-full object-cover"
        />
      )}
      {image && overlay && (
        <div className="absolute inset-0 bg-black/45" aria-hidden="true" />
      )}

      <div
        className={`relative mx-auto flex max-w-5xl flex-col gap-5 px-6 py-20 sm:py-28 ${
          centered ? "items-center text-center" : "items-start text-left"
        }`}
        style={{ color: image ? "#ffffff" : "var(--sf-text)" }}
      >
        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{headline}</h1>
        {subhead && (
          <p
            className="max-w-2xl text-lg"
            style={{ color: image ? "rgba(255,255,255,0.85)" : "var(--sf-muted)" }}
          >
            {subhead}
          </p>
        )}
        {ctaLabel && ctaHref && (
          <a
            href={ctaHref}
            className="mt-2 inline-flex items-center px-6 py-3 text-sm font-semibold transition-opacity hover:opacity-90"
            style={{
              backgroundColor: "var(--sf-primary)",
              color: "var(--sf-on-primary)",
              borderRadius: "var(--sf-radius)",
            }}
          >
            {ctaLabel}
          </a>
        )}
      </div>
    </section>
  );
}