newsletter signup

"use client";

import React, { useState } from "react";
import NewsletterSignup from "@/components/ui/newsletter-signup";

export default function NewsletterPage() {
  const [email, setEmail] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [acceptTerms, setAcceptTerms] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);
  const [error, setError] = useState<{
    field?: string;
    message: string;
  } | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setIsLoading(true);

    // Validate form
    if (!email) {
      setError({ field: "email", message: "Email is required" });
      setIsLoading(false);
      return;
    }

    if (!firstName) {
      setError({ field: "firstName", message: "First name is required" });
      setIsLoading(false);
      return;
    }

    if (!lastName) {
      setError({ field: "lastName", message: "Last name is required" });
      setIsLoading(false);
      return;
    }

    if (!acceptTerms) {
      setError({ field: "acceptTerms", message: "You must accept the terms" });
      setIsLoading(false);
      return;
    }

    // Simulate API call
    setTimeout(() => {
      console.log("Form submitted:", { email, firstName, lastName, acceptTerms });
      setIsLoading(false);
      setShowSuccess(true);
    }, 2000);
  };

  const handleSuccessClose = () => {
    setShowSuccess(false);
    // Reset form
    setEmail("");
    setFirstName("");
    setLastName("");
    setAcceptTerms(false);
  };

  return (
    <div className="min-h-screen w-full relative overflow-hidden">
      {/* Animated gradient background */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-indigo-950 dark:to-purple-950">
        <div className="absolute inset-0 bg-grid-black/[0.02] dark:bg-grid-white/[0.02]" />
        {/* Animated gradient orbs */}
        <div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-70 animate-blob" />
        <div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 dark:bg-yellow-700 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-70 animate-blob animation-delay-2000" />
        <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 dark:bg-pink-700 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-70 animate-blob animation-delay-4000" />
      </div>
      
      {/* Content */}
      <div className="relative min-h-screen flex items-center justify-center p-4">
        <NewsletterSignup
          email={email}
          onEmailChange={setEmail}
          firstName={firstName}
          onFirstNameChange={setFirstName}
          lastName={lastName}
          onLastNameChange={setLastName}
          acceptTerms={acceptTerms}
          onAcceptTermsChange={setAcceptTerms}
          onSubmit={handleSubmit}
          isLoading={isLoading}
          error={error}
          showSuccessDialog={showSuccess}
          onSuccessClose={handleSuccessClose}
          className="shadow-2xl backdrop-blur-sm bg-white/95 dark:bg-gray-900/95"
        />
      </div>
    </div>
  );
}