Stars

import { Eyebrow } from "@/components/editorial/eyebrow"
import { Heading } from "@/components/editorial/heading"
import {
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { Stars } from "@/components/glow/stars"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  eyebrow: "After hours",
  title: "A little room for wonder.",
  body: "A quiet sky behind whatever comes next.",
} as const

export default function StarsDemo({
  animated = false,
}: {
  animated?: boolean
}) {
  return (
    <div
      className="dark relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground"
      data-stars-demo
    >
      <Stars animated={animated} arrival={false} density={1.8} />
      <SectionHeader align="center" size="sm" className="relative">
        <SectionTitleGroup>
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription variant="muted">{COPY.body}</SectionDescription>
      </SectionHeader>
    </div>
  )
}