import * as React from "react"

import { Eyebrow } from "@/registry/paragon/components/eyebrow"
import { Panel } from "@/registry/paragon/components/panel"
import { TextLink } from "@/registry/paragon/components/text-link"

export function Hero({
  eyebrow = "Sovereign enterprise intelligence",
  title = (
    <>
      Understand every customer.
      <br />
      Act on every cause.
    </>
  ),
  description = "Paragon is building intelligence that hears every customer, traces each problem to its cause, and acts on it inside your systems.",
  action = <TextLink href="#discover">Discover</TextLink>,
}: {
  eyebrow?: React.ReactNode
  title?: React.ReactNode
  description?: React.ReactNode
  action?: React.ReactNode
}) {
  return (
    <Panel
      tone="haze"
      grain
      padding="lg"
      render={<section />}
      className="flex min-h-[min(42rem,85svh)] flex-col justify-center"
    >
      <div className="mx-auto flex w-full max-w-page flex-col gap-8">
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="max-w-4xl text-display font-medium text-balance">{title}</h1>
        <p className="max-w-md text-lead text-pretty text-foreground/75">{description}</p>
        {action}
      </div>
    </Panel>
  )
}