import { motion } from "motion/react";
import type { ReactNode } from "react";

type Props = {
  eyebrow?: string;
  title: ReactNode;
  subtitle?: string;
  image: string;
  imageAlt: string;
  height?: "sm" | "md" | "lg";
  children?: ReactNode;
};

export function PageHero({ eyebrow, title, subtitle, image, imageAlt, height = "md", children }: Props) {
  const h = height === "lg" ? "min-h-[92vh]" : height === "sm" ? "min-h-[52vh]" : "min-h-[72vh]";
  return (
    <section className={`relative overflow-hidden ${h}`} style={{ background: "var(--gradient-hero)" }}>
      <div className="absolute inset-0 opacity-70">
        <img src={image} alt={imageAlt} className="h-full w-full object-cover" width={1600} height={900} />
        <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, oklch(0.985 0.012 95 / 0.55) 0%, oklch(0.985 0.012 95 / 0.85) 60%, var(--background) 100%)" }} />
      </div>
      <div className="pointer-events-none absolute inset-0 opacity-[0.15]"
        style={{
          backgroundImage:
            "linear-gradient(oklch(0.4 0.05 240 / 0.3) 1px, transparent 1px), linear-gradient(90deg, oklch(0.4 0.05 240 / 0.3) 1px, transparent 1px)",
          backgroundSize: "56px 56px",
          maskImage: "radial-gradient(ellipse at center, black 40%, transparent 75%)",
        }}
      />
      <div className="relative mx-auto flex max-w-7xl flex-col justify-center px-6 pt-24 pb-20 lg:pt-32 lg:pb-28">
        {eyebrow && (
          <motion.p
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-5 inline-flex w-fit items-center gap-2 rounded-full border border-border bg-background/70 px-3.5 py-1.5 text-xs font-medium uppercase tracking-[0.18em]"
          >
            <span className="h-1.5 w-1.5 rounded-full" style={{ background: "var(--brand-teal-deep)" }} />
            {eyebrow}
          </motion.p>
        )}
        <motion.h1
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.05 }}
          className="max-w-4xl font-display text-5xl font-semibold leading-[1.02] tracking-tight text-balance md:text-6xl lg:text-7xl"
        >
          {title}
        </motion.h1>
        {subtitle && (
          <motion.p
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.15 }}
            className="mt-6 max-w-2xl text-lg text-foreground/70 text-pretty md:text-xl"
          >
            {subtitle}
          </motion.p>
        )}
        {children && (
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.25 }}
            className="mt-10"
          >
            {children}
          </motion.div>
        )}
      </div>
    </section>
  );
}