"use client";

import Image from "next/image";
import { motion } from "motion/react";
import { Container } from "@/components/Container";

type Props = {
  eyebrow: string;
  title: string;
  lede?: string;
  backHref?: string;
  backLabel?: string;
  bannerPhotoUrl?: string;
  bannerPhotoAlt?: string;
};

export function AtlasHero({
  eyebrow,
  title,
  lede,
  backHref,
  backLabel,
  bannerPhotoUrl = "/photos/anatomy/skeleton-upper-body.jpg",
  bannerPhotoAlt = "Anatomical skeleton of the upper body",
}: Props) {
  return (
    <section className="relative overflow-hidden border-b border-[var(--color-line)] bg-gradient-to-b from-[var(--color-mist)]/60 to-white pb-16 pt-16 md:pt-20">
      {bannerPhotoUrl ? (
        <div aria-hidden className="pointer-events-none absolute inset-0">
          <Image
            src={bannerPhotoUrl}
            alt={bannerPhotoAlt}
            fill
            priority
            sizes="100vw"
            className="object-cover opacity-[0.14]"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-white/70 via-white/80 to-white" />
        </div>
      ) : null}
      <div
        aria-hidden
        className="pointer-events-none absolute -left-32 top-0 h-[480px] w-[480px] rounded-full bg-[var(--color-blue)]/10 blur-3xl"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute -right-24 top-16 h-[360px] w-[360px] rounded-full bg-[var(--color-blue)]/5 blur-3xl"
      />
      <Container>
        <div className="relative mx-auto max-w-5xl">
          {backHref ? (
            <motion.a
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.4 }}
              href={backHref}
              className="inline-flex items-center gap-2 text-[13px] font-semibold text-[var(--color-slate)] transition-colors hover:text-[var(--color-blue)]"
            >
              <span>←</span> {backLabel ?? "Back"}
            </motion.a>
          ) : null}
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.05 }}
            className="mt-8"
          >
            <span className="inline-flex items-center rounded-full bg-[var(--color-blue)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-white shadow-sm">
              {eyebrow}
            </span>
          </motion.div>
          <motion.h1
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55, delay: 0.1 }}
            className="mt-6 font-display text-[40px] font-extrabold leading-[1.04] tracking-[-0.025em] text-[var(--color-ink)] md:text-[60px]"
          >
            {title}
          </motion.h1>
          {lede ? (
            <motion.p
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.55, delay: 0.15 }}
              className="mt-6 max-w-3xl text-[20px] leading-[1.55] text-[var(--color-slate)]"
            >
              {lede}
            </motion.p>
          ) : null}
        </div>
      </Container>
    </section>
  );
}
