"use client";

import { useState } from "react";
import { ArrowRight, Mail } from "lucide-react";

import type { BlogPageCopy } from "@/data/blogs.data";
import { errorAlert, successAlert } from "@/lib/alerts";

export default function NewsletterCTA({ copy }: { copy: BlogPageCopy }) {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setMessage(copy.invalidEmail);
      void errorAlert(copy.invalidEmail);
      return;
    }
    setMessage(copy.newsletterReady);
    void successAlert(copy.newsletterReady);
  }
  return (
    <section className="mx-auto max-w-[1360px] px-6 pb-14 xl:px-8">
      <div className="relative overflow-hidden rounded-[26px] bg-gradient-to-r from-[#5666ec] via-[#6261eb] to-[#7755eb] p-6 text-white shadow-[0_16px_36px_rgba(91,87,231,0.2)] sm:p-8">
        <div className="pointer-events-none absolute -right-16 -top-20 h-56 w-56 rounded-full bg-white/10 blur-2xl" />
        <div className="relative grid items-center gap-6 lg:grid-cols-[1fr_0.85fr]">
          <div><Mail size={24} /><h2 className="mt-3 text-2xl font-extrabold tracking-[-0.04em]">{copy.newsletterTitle}</h2><p className="mt-2 text-[13px] leading-6 text-[#e4e6ff]">{copy.newsletterDescription}</p></div>
          <form onSubmit={handleSubmit}>
            <div className="flex flex-col gap-2 sm:flex-row"><label className="sr-only" htmlFor="newsletter-email">{copy.emailPlaceholder}</label><input id="newsletter-email" type="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder={copy.emailPlaceholder} className="h-12 min-w-0 flex-1 rounded-lg border border-white/20 bg-white px-4 text-[13px] text-[#253052] outline-none placeholder:text-[#98a3b7]" /><button type="submit" className="inline-flex h-12 items-center justify-center gap-2 rounded-lg bg-[#202c64] px-5 text-[12px] font-bold text-white shadow-lg">{copy.subscribe}<ArrowRight size={15} /></button></div>
            {message ? <p aria-live="polite" className="mt-2 text-[11px] leading-5 text-[#edf0ff]">{message}</p> : null}
          </form>
        </div>
      </div>
    </section>
  );
}