import type { ReactNode } from 'react';
import { Container } from '@/components/ui/Section';
import { Heading, Kicker, Lead } from '@/components/ui/Heading';
import { cn } from '@/lib/cn';
import { Backdrop } from './Backdrop';

/** Opening section for inner marketing pages (owns the page's single <h1>). */
export function PageHero({
  kicker,
  title,
  lead,
  children,
  aside,
  className,
}: {
  kicker: ReactNode;
  title: ReactNode;
  lead?: ReactNode;
  /** Actions under the lead (buttons, badges). */
  children?: ReactNode;
  /** Optional visual on the right at lg+. */
  aside?: ReactNode;
  className?: string;
}) {
  return (
    <section className={cn('relative isolate overflow-hidden border-b border-line/60', className)}>
      <Backdrop intensity="soft" />
      <Container
        className={cn('relative grid items-center gap-12 py-16 sm:py-24', aside ? 'lg:grid-cols-[1.15fr_1fr] lg:gap-16' : 'max-w-4xl text-center')}
      >
        <div className={cn('flex flex-col gap-5', !aside && 'items-center')}>
          <Kicker>{kicker}</Kicker>
          <Heading as="h1" size="display">
            {title}
          </Heading>
          {lead && <Lead className={cn('max-w-2xl', !aside && 'mx-auto')}>{lead}</Lead>}
          {children && <div className={cn('mt-3 flex flex-wrap gap-3', !aside && 'justify-center')}>{children}</div>}
        </div>
        {aside && <div className="relative">{aside}</div>}
      </Container>
    </section>
  );
}