import type { ReactNode } from "react";
import { RootLines } from "./RootLines";
import safeBg from "@/assets/safe-corporate-bg.jpg";

export function PageHeader({
  eyebrow,
  title,
  highlight,
  description,
  children,
  brandLogo,
  variant,
  backgroundImage,
}: {
  eyebrow?: string;
  title: string;
  highlight?: string;
  description?: string;
  children?: ReactNode;
  brandLogo?: { src: string; alt: string };
  variant?: "safe" | "mind";
  backgroundImage?: { src: string; alt?: string };
}) {
  const gradient = brandLogo
    ? variant === "safe"
      ? "bg-gradient-safe"
      : "bg-gradient-mind"
    : "bg-black";
  const glowA =
    variant === "safe" ? "bg-[color:var(--safe-gold)]/10" : "bg-[color:var(--mind-c)]/10";
  const glowB = variant === "safe" ? "bg-[color:var(--life)]/10" : "bg-[color:var(--mind-b)]/10";
  const border =
    variant === "safe" ? "border-[color:var(--safe)]/10" : "border-[color:var(--mind-a)]/20";
  const heroImage = backgroundImage?.src ?? safeBg;

  return (
    <section className="relative overflow-hidden bg-gradient-life">
      <RootLines className="opacity-60" />
      <div className="container-page relative pt-12 pb-12 sm:pt-20 sm:pb-20 lg:pt-28 lg:pb-28">
        {(brandLogo || backgroundImage) && variant && (
          <div
            className={`relative mb-10 w-full overflow-hidden rounded-3xl border ${border} ${gradient} p-8 shadow-card sm:mb-12 sm:rounded-[2.5rem] sm:p-12 lg:p-16`}
          >
            {variant === "safe" && (
              <>
                <img
                  src={heroImage}
                  alt={backgroundImage?.alt ?? ""}
                  aria-hidden={backgroundImage ? undefined : "true"}
                  loading="lazy"
                  width={1536}
                  height={1024}
                  className={`pointer-events-none absolute inset-0 h-full w-full object-cover ${brandLogo ? "opacity-25 mix-blend-luminosity" : "opacity-100"}`}
                />
                <div
                  className={`pointer-events-none absolute inset-0 ${brandLogo ? "bg-gradient-to-br from-[color:var(--safe)]/80 via-[color:var(--safe)]/50 to-[color:var(--safe-gold)]/40" : "bg-gradient-to-t from-black/60 via-black/20 to-transparent"}`}
                />
                <span className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)]" />
              </>
            )}
            {variant === "mind" && (
              <>
                <img
                  src={heroImage}
                  alt={backgroundImage?.alt ?? ""}
                  aria-hidden={backgroundImage ? undefined : "true"}
                  loading="lazy"
                  width={1536}
                  height={1024}
                  className={`pointer-events-none absolute inset-0 h-full w-full object-cover ${brandLogo ? "opacity-30" : "opacity-100"}`}
                />
                <div
                  className={`pointer-events-none absolute inset-0 ${brandLogo ? "bg-gradient-to-br from-[color:var(--mind-a)]/80 via-[color:var(--mind-b)]/50 to-[color:var(--mind-c)]/40" : "bg-gradient-to-t from-black/60 via-black/20 to-transparent"}`}
                />
              </>
            )}
            <div
              className={`absolute top-0 right-0 h-64 w-64 -translate-y-1/2 translate-x-1/3 rounded-full ${glowA} blur-3xl`}
            />
            <div
              className={`absolute bottom-0 left-0 h-48 w-48 -translate-x-1/3 translate-y-1/3 rounded-full ${glowB} blur-3xl`}
            />
            {brandLogo && (
              <div className="relative z-10 flex items-center justify-center">
                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                  <div className="h-48 w-72 rounded-full bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.65)_0%,rgba(255,255,255,0.25)_45%,transparent_70%)] blur-3xl sm:h-56 sm:w-96 md:h-72 md:w-[28rem]" />
                </div>
                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                  <div
                    className="rounded-full bg-[color:var(--safe-gold)]/25 blur-2xl"
                    style={{ width: "140%", height: "140%" }}
                  />
                </div>
                <div className="relative z-10 rounded-[2rem] border border-white/30 bg-white/80 p-6 shadow-[0_20px_60px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:rounded-[2.5rem] sm:p-8 md:p-10">
                  <img
                    src={brandLogo.src}
                    alt={brandLogo.alt}
                    className="relative z-10 h-24 w-auto max-w-[90%] drop-shadow-[0_8px_24px_rgba(0,0,0,0.25)] sm:h-32 md:h-40"
                  />
                </div>
              </div>
            )}
          </div>
        )}

        {brandLogo && !variant && (
          <img
            src={brandLogo.src}
            alt={brandLogo.alt}
            className="mb-6 h-16 w-auto sm:mb-8 sm:h-20 md:h-24"
          />
        )}

        {eyebrow && (
          <span className="inline-flex items-center gap-2 rounded-full border border-[color:var(--life)]/30 bg-[color:var(--life)]/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-gradient-hero">
            {eyebrow}
          </span>
        )}
        <h1 className="mt-6 max-w-3xl break-words font-display text-4xl font-medium leading-[1.05] tracking-tight sm:text-5xl lg:text-6xl">
          {title} {highlight && <span className="italic text-gradient-hero">{highlight}</span>}
        </h1>
        {description && (
          <p className="mt-5 max-w-2xl text-base whitespace-pre-line text-muted-foreground sm:mt-6 sm:text-lg">
            {description}
          </p>
        )}
        {children && <div className="mt-8">{children}</div>}
      </div>
    </section>
  );
}