import {
  Snippet,
  SnippetAddon,
  SnippetCopyButton,
  SnippetInput,
  SnippetText,
} from '@/components/ai-elements/snippet';
import { ActionButtons } from '@/components/shared/action-buttons';
import { Container } from '@/components/shared/container';
import { GradientGlow } from '@/components/shared/gradient-glow';

const hero = {
  announcement: { label: 'Vertex Edge is now generally available', href: '#' },
  title: 'Build. Preview. Ship.',
  description:
    'Vertex is the frontend cloud. Give your team the tooling and global infrastructure to build, preview, and ship a faster web — from your first commit to production traffic.',
  primary: { label: 'Start Deploying', href: '#' },
  secondary: { label: 'Get a Demo', href: '#' },
  command: 'vertex deploy --prod',
};

function GridBackdrop() {
  return (
    <div
      aria-hidden="true"
      className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,black,transparent)]"
      style={{
        backgroundImage:
          'linear-gradient(to right, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px)',
        backgroundSize: '56px 56px',
      }}
    />
  );
}

export function HeroSection() {
  return (
    <section className="relative overflow-hidden">
      <GridBackdrop />
      <GradientGlow className="left-1/2 top-[-120px] h-[420px] w-[820px] -translate-x-1/2 opacity-40" />

      <Container className="relative pt-24 pb-20 text-center sm:pt-32">
        <a
          href={hero.announcement.href}
          className="group inline-flex items-center gap-2 rounded-full border border-foreground/15 bg-foreground/5 px-3.5 py-1.5 text-xs text-foreground/70 transition-colors hover:border-foreground/25 hover:text-foreground"
        >
          <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-400" />
          {hero.announcement.label}
          <span className="transition-transform group-hover:translate-x-0.5">
            &rarr;
          </span>
        </a>

        <h1 className="mx-auto mt-8 max-w-4xl bg-gradient-to-b from-foreground to-foreground/60 bg-clip-text text-5xl font-semibold leading-[1.05] tracking-tight text-transparent sm:text-7xl">
          {hero.title}
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-foreground/55">
          {hero.description}
        </p>

        <ActionButtons
          className="mt-10"
          primary={hero.primary}
          secondary={hero.secondary}
        />

        <Snippet
          className="mx-auto mt-14 h-12 max-w-md rounded-xl border-border bg-foreground/[0.03] text-sm"
          code={hero.command}
        >
          <SnippetAddon className="pl-1">
            <SnippetText>$</SnippetText>
          </SnippetAddon>
          <SnippetInput />
          <SnippetAddon align="inline-end" className="pr-2">
            <SnippetCopyButton />
          </SnippetAddon>
        </Snippet>
      </Container>
    </section>
  );
}