"use client";

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

export default function NewsletterSection() {
  const [email, setEmail]       = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [error, setError]       = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Enter a valid email address.");
      return;
    }
    setError("");
    setSubmitted(true);
    setEmail("");
    // TODO: wire up to your email provider (Resend, Mailchimp, etc.)
  };

  return (
    <section className="w-full border-t border-border/80 font-sans">
      <div className="max-w-7xl mx-auto px-6 lg:px-12 py-20 md:py-24">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-16 items-center">

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <div className="flex items-center gap-3 mb-5">
              <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
              <p className="text-xs font-bold text-accent-text uppercase tracking-widest">Newsletter</p>
            </div>
            <h2 className="text-3xl md:text-4xl font-semibold tracking-tight text-white leading-[1.15] mb-4">
              Get deals <span className="text-accent-text">before anyone else.</span>
            </h2>
            <p className="text-content-dim text-sm leading-relaxed max-w-sm">
              Promo codes, new server locations, game updates, and maintenance alerts straight to your inbox.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            {submitted ? (
              <div className="flex items-center gap-3 p-5 rounded-xl bg-emerald-500">
                <div className="p-1.5 rounded-full bg-emerald-500/15 shrink-0">
                  <Check className="w-4 h-4 text-white" />
                </div>
                <div>
                  <p className="text-sm font-semibold text-white">You&apos;re in!</p>
                  <p className="text-xs text-white mt-0.5">We&apos;ll send you the good stuff. No spam, ever.</p>
                </div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="flex flex-col gap-3">
                <div className="flex gap-2">
                  <div className="relative flex-1">
                    <Mail className="absolute left-3.5 inset-y-0 my-auto w-4 h-4 text-content-subtle pointer-events-none" />
                    <input
                      type="email"
                      value={email}
                      onChange={(e) => { setEmail(e.target.value); setError(""); }}
                      placeholder="you@example.com"
                      className="w-full bg-surface border border-border/80 rounded-xl py-3 pl-10 pr-4 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-accent-hover/40 focus:ring-2 focus:ring-accent-hover/20 transition-all"
                    />
                  </div>
                  <button
                    type="submit"
                    className="flex items-center gap-2 px-5 py-3 rounded-xl bg-accent hover:bg-accent-hover text-white text-sm font-semibold shadow-[0_4px_0_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.12)] hover:shadow-[0_6px_0_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.12)] hover:-translate-y-0.5 active:translate-y-1 active:shadow-none transition-all duration-150 shrink-0"
                  >
                    Subscribe
                    <ArrowRight className="w-3.5 h-3.5" />
                  </button>
                </div>
                {error && <p className="text-xs text-red-400">{error}</p>}
                <p className="text-xs text-content-faint">No spam. Unsubscribe anytime.</p>
              </form>
            )}
          </motion.div>

        </div>
      </div>
    </section>
  );
}