import {
  Badge,
  Button,
  Highlighter,
  Meteors,
  RetroGrid,
  TypingText,
} from "@cronus-ui/ui";
import { ArrowRight, Sparkles } from "lucide-react";

export function AtmosphereHeroBlock() {
  return (
    <RetroGrid className="relative overflow-hidden">
      <Meteors className="px-6 py-24 sm:py-32">
        <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
          <Badge variant="primary" className="gap-1.5">
            <Sparkles aria-hidden="true" className="size-3.5" />
            Now in public beta
          </Badge>
          <h1 className="mt-6 text-balance font-display text-5xl font-semibold leading-[1.05] text-fg sm:text-6xl">
            Ship products your team is <Highlighter>proud of</Highlighter>
          </h1>
          <p className="mt-6 max-w-xl text-balance text-lg text-fg-secondary">
            A product UI system: compose the app, theme it live, and keep the copy-in you can{" "}
            <TypingText className="font-medium text-fg" text={["upgrade.", "restyle.", "ship."]} />
          </p>
          <div className="mt-9 flex flex-col items-center gap-3 sm:flex-row">
            <Button variant="primary" size="lg">
              Start free trial
              <ArrowRight aria-hidden="true" />
            </Button>
            <Button variant="outline" size="lg">
              Book a demo
            </Button>
          </div>
        </div>
      </Meteors>
    </RetroGrid>
  );
}