"use client";

import { useState } from "react";
import { Mail, ShieldCheck, Sparkles } from "lucide-react";
import { Button, Input, toast } from "@sisyphos-ui/react";

export function Newsletter() {
  const [email, setEmail] = useState("");
  const [busy, setBusy] = useState(false);

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    // Wire to your provider (Buttondown, ConvertKit, etc.) here.
    await new Promise((r) => setTimeout(r, 600));
    setBusy(false);
    setEmail("");
    toast.success("Subscribed");
  };

  return (
    <section className="bg-zinc-50 px-6 py-24">
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-widest text-orange-600">
          <Sparkles className="size-3.5" /> Newsletter
        </span>
        <h2 className="mt-5 text-balance text-4xl font-bold tracking-tight">
          Ship-week digest
        </h2>
        <p className="mt-6 text-zinc-600">
          One short email per Friday — new components, tips, the occasional teardown.
        </p>

        <form onSubmit={onSubmit} className="mx-auto mt-10 flex max-w-md flex-col gap-3 sm:flex-row sm:gap-2">
          <div className="flex-1">
            <Input
              type="email"
              placeholder="you@company.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
            />
          </div>
          <Button type="submit" loading={busy} fullWidth>
            Subscribe
          </Button>
        </form>

        <p className="mt-4 inline-flex items-center justify-center gap-1.5 text-xs text-zinc-400">
          <ShieldCheck className="size-3.5" /> Unsubscribe in one click. No spam.
        </p>
      </div>
    </section>
  );
}
Components used

Used in templates
