"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type ValidationState = "idle" | "loading" | "success" | "error";

function validateEmail(email: string): boolean {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function SuccessIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 20 20"
      fill="currentColor"
      className={className}
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function ErrorIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 20 20"
      fill="currentColor"
      className={className}
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function LoadingSpinner({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      className={cn("animate-spin", className)}
      aria-hidden="true"
    >
      <circle
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="2"
        strokeOpacity="0.25"
      />
      <path
        d="M12 2a10 10 0 019.95 9"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function NewsletterCapture() {
  const [email, setEmail] = React.useState("");
  const [state, setState] = React.useState<ValidationState>("idle");
  const [errorMessage, setErrorMessage] = React.useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!email.trim()) {
      setState("error");
      setErrorMessage("Please enter your email address");
      return;
    }

    if (!validateEmail(email)) {
      setState("error");
      setErrorMessage("Please enter a valid email address");
      return;
    }

    setState("loading");
    setErrorMessage("");

    // Simulate API call
    setTimeout(() => {
      setState("success");
    }, 1500);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
    if (state === "error") {
      setState("idle");
      setErrorMessage("");
    }
  };

  return (
    <section className="relative overflow-hidden rounded-3xl border border-border bg-card">
      {/* Background gradient */}
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5" />
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-20 top-0 h-48 w-48 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute -bottom-20 right-0 h-56 w-56 rounded-full bg-secondary/10 blur-3xl" />
      </div>

      <div className="relative px-6 py-12 md:px-12 md:py-16">
        <div className="mx-auto max-w-xl text-center">
          {/* Icon */}
          <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-7 w-7 text-primary"
              aria-hidden="true"
            >
              <rect x="2" y="4" width="20" height="16" rx="2" />
              <path d="M22 6l-10 7L2 6" />
            </svg>
          </div>

          {/* Heading */}
          <h2 className="text-2xl font-semibold text-foreground md:text-3xl">
            Stay in the loop
          </h2>
          <p className="mt-3 text-sm text-muted-foreground md:text-base">
            Get the latest updates, tips, and exclusive content delivered
            straight to your inbox. No spam, unsubscribe anytime.
          </p>

          {/* Form */}
          {state === "success" ? (
            <div className="mt-8 rounded-2xl border border-primary/30 bg-primary/5 p-6">
              <SuccessIcon className="mx-auto h-10 w-10 text-primary" />
              <p className="mt-3 font-semibold text-foreground">
                You are subscribed!
              </p>
              <p className="mt-1 text-sm text-muted-foreground">
                Check your inbox to confirm your subscription.
              </p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="mt-8">
              <div className="flex flex-col gap-3 sm:flex-row">
                <div className="relative flex-1">
                  <input
                    type="email"
                    value={email}
                    onChange={handleInputChange}
                    placeholder="Enter your email"
                    disabled={state === "loading"}
                    className={cn(
                      "w-full rounded-xl border bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50",
                      state === "error"
                        ? "border-destructive focus:ring-destructive"
                        : "border-border focus:ring-primary"
                    )}
                    aria-invalid={state === "error"}
                    aria-describedby={state === "error" ? "email-error" : undefined}
                  />
                  {state === "error" && (
                    <ErrorIcon className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-destructive" />
                  )}
                </div>
                <button
                  type="submit"
                  disabled={state === "loading"}
                  className="inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50"
                >
                  {state === "loading" ? (
                    <>
                      <LoadingSpinner className="h-4 w-4" />
                      <span>Subscribing...</span>
                    </>
                  ) : (
                    <span>Subscribe</span>
                  )}
                </button>
              </div>

              {/* Error message */}
              {state === "error" && errorMessage && (
                <p
                  id="email-error"
                  className="mt-2 flex items-center gap-1 text-sm text-destructive"
                >
                  <ErrorIcon className="h-4 w-4" />
                  {errorMessage}
                </p>
              )}

              {/* Privacy note */}
              <p className="mt-4 text-xs text-muted-foreground">
                By subscribing, you agree to our{" "}
                <a
                  href="/privacy"
                  className="underline underline-offset-2 transition-colors hover:text-foreground"
                >
                  Privacy Policy
                </a>
                . We respect your privacy.
              </p>
            </form>
          )}

          {/* Features */}
          <div className="mt-8 flex flex-wrap items-center justify-center gap-4 text-xs text-muted-foreground">
            <div className="flex items-center gap-1.5">
              <SuccessIcon className="h-4 w-4 text-primary" />
              <span>Weekly insights</span>
            </div>
            <div className="flex items-center gap-1.5">
              <SuccessIcon className="h-4 w-4 text-primary" />
              <span>Early access</span>
            </div>
            <div className="flex items-center gap-1.5">
              <SuccessIcon className="h-4 w-4 text-primary" />
              <span>Exclusive content</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Newsletter Capture

Preview

Stay in the loop

Installation
