import { Container } from "./Container";
import type { Photo } from "@/lib/photos";

type Props = {
  image: Photo;
  eyebrow?: string;
  caption?: string;
};

/**
 * Wide 16:6 image band used between the product hero and the features grid
 * on each product landing page. Pure server component — no client JS — so it
 * renders under the strict CSP without issue.
 */
export function ProductShowcase({ image, eyebrow, caption }: Props) {
  return (
    <section className="border-t border-[var(--color-line)] bg-white">
      <Container className="py-14 md:py-20">
        <div className="relative overflow-hidden rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)] shadow-[0_24px_64px_rgba(10,14,40,0.08)]">
          <div className="relative aspect-[16/6] w-full">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={image.path}
              alt={image.alt}
              loading="lazy"
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-[linear-gradient(to_top,rgba(10,14,40,0.70)_0%,rgba(10,14,40,0.35)_45%,rgba(10,14,40,0.10)_100%)]" />
            <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(30,64,255,0.28),transparent_55%)]" />

            {(eyebrow || caption) && (
              <div className="absolute inset-x-0 bottom-0 p-6 md:p-10">
                <div className="max-w-2xl">
                  {eyebrow ? (
                    <div className="inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/10 px-3 py-1.5 text-[11px] font-bold uppercase tracking-wider text-white backdrop-blur-sm">
                      <span className="h-1.5 w-1.5 rounded-full bg-white" />
                      {eyebrow}
                    </div>
                  ) : null}
                  {caption ? (
                    <p className="mt-4 font-display text-[22px] md:text-[28px] font-extrabold leading-tight tracking-tight text-white drop-shadow-sm">
                      {caption}
                    </p>
                  ) : null}
                </div>
              </div>
            )}
          </div>
        </div>
      </Container>
    </section>
  );
}
