Call to Action

import { Button, Input, Label } from "@cooud-ui/ui";
import { Send } from "lucide-react";

export function CtaBlock() {
  return (
    <section className="px-6 py-20">
      <div className="relative mx-auto max-w-5xl overflow-hidden rounded-2xl bg-gradient-primary px-8 py-16 text-center shadow-glow sm:px-16">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black,transparent_75%)]"
          style={{
            backgroundImage:
              "radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px)",
            backgroundSize: "22px 22px",
          }}
        />
        <div className="relative mx-auto max-w-2xl">
          <h2 className="font-display text-4xl font-semibold tracking-tight text-primary-foreground sm:text-5xl">
            Ready to build something great?
          </h2>
          <p className="mt-4 text-balance text-lg text-primary-foreground/80">
            Join thousands of teams shipping faster. Drop your email and we'll send you a
            free starter kit.
          </p>

          <form
            className="mx-auto mt-8 flex max-w-md flex-col gap-3 sm:flex-row"
            onSubmit={(event) => event.preventDefault()}
          >
            <div className="flex-1 text-left">
              <Label htmlFor="cta-email" className="sr-only">
                Email address
              </Label>
              <Input
                id="cta-email"
                type="email"
                required
                placeholder="you@company.com"
                autoComplete="email"
                className="h-11 border-transparent bg-surface-base text-fg placeholder:text-fg-tertiary"
              />
            </div>
            <Button type="submit" variant="secondary" size="lg">
              Subscribe
              <Send aria-hidden="true" />
            </Button>
          </form>

          <p className="mt-4 text-sm text-primary-foreground/70">
            No spam. Unsubscribe at any time.
          </p>
        </div>
      </div>
    </section>
  );
}