Newsletter

"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";

export function NewsletterBlock() {
  return (
    <section className="px-6 py-16">
      <div className="mx-auto max-w-2xl rounded-2xl border border-border bg-gradient-to-br from-indigo-50 via-background to-sky-50 dark:from-indigo-950/40 dark:via-background dark:to-sky-950/40 p-10 text-center">
        <Badge variant="secondary" className="mb-5">Stay updated</Badge>
        <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-3">
          Subscribe to{" "}
          <span className="font-serif italic font-normal">our newsletter</span>.
        </h2>
        <p className="text-muted-foreground max-w-md mx-auto mb-7">
          Get the latest components, blocks, and tips delivered to your inbox.
          No spam, unsubscribe anytime.
        </p>
        <form className="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
          <Input
            type="email"
            placeholder="you@example.com"
            className="h-11 text-base"
            required
          />
          <Button type="submit" className="h-11 px-6 text-base">
            Subscribe
          </Button>
        </form>
      </div>
    </section>
  );
}