import * as React from "react"

import { cn } from "@/lib/utils"
import { Container } from "@/components/gebos/section"

/**
 * Split hero: copy left (breadcrumb/eyebrow, H1, lead, CTAs, extra),
 * visual right, soft radial glow behind.
 */
function PageHero({
  breadcrumb,
  title,
  lead,
  actions,
  extra,
  visual,
  className,
}: {
  breadcrumb?: React.ReactNode
  title: React.ReactNode
  lead?: React.ReactNode
  actions?: React.ReactNode
  /** slot below the actions (e.g. hint pill) */
  extra?: React.ReactNode
  visual?: React.ReactNode
  className?: string
}) {
  return (
    <div className={cn("bg-hero-glow", className)}>
      {breadcrumb ? (
        <Container className="pt-6 lg:pt-8">{breadcrumb}</Container>
      ) : null}
      <Container
        className={cn(
          "grid items-center gap-10 pb-14 sm:pb-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-6 lg:pb-20",
          /* breadcrumb already provides the top offset */
          breadcrumb ? "pt-5" : "pt-14 sm:pt-16 lg:pt-20"
        )}
      >
        <div className={cn("max-w-xl", breadcrumb && "lg:self-start")}>
          <h1 className="text-4xl font-extrabold tracking-tight text-balance text-navy sm:text-5xl">
            {title}
          </h1>
          {lead ? (
            <p className="mt-4 max-w-lg text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
              {lead}
            </p>
          ) : null}
          {actions ? (
            <div className="mt-7 flex flex-wrap items-center gap-3">
              {actions}
            </div>
          ) : null}
          {extra ? <div className="mt-6">{extra}</div> : null}
        </div>
        {visual ? <div className="relative w-full">{visual}</div> : null}
      </Container>
    </div>
  )
}

export { PageHero }