import { cn } from "~/utils/cn";
import { PageContainer } from "~/ui/PageContainer";
import { DisplayTitle } from "./DisplayTitle";

type Props = {
  title: string;
  lede: string;
  actions?: React.ReactNode;
  /** Optional visual beside the copy (usually a product demo). */
  aside?: React.ReactNode;
};

export function MarketingHero({ title, lede, actions, aside }: Props) {
  return (
    <PageContainer className={cn("grid items-center gap-12 py-14 md:py-20", aside && "lg:grid-cols-2")}>
      <div className={cn("animate-rise space-y-5", !aside && "max-w-3xl")}>
        <DisplayTitle level={1} size="hero" title={title} />
        <p className="max-w-xl text-lg leading-8 text-kumo-subtle">{lede}</p>
        {actions && <div className="flex flex-wrap gap-3 pt-2">{actions}</div>}
      </div>
      {aside && <div className="animate-rise">{aside}</div>}
    </PageContainer>
  );
}