import { motion, useInView } from 'framer-motion';
import { useRef, useState } from 'react';

export default function Newsletter() {
    const ref = useRef<HTMLDivElement>(null);
    const inView = useInView(ref, { once: true, margin: '-100px' });
    const [email, setEmail] = useState('');
    const [submitted, setSubmitted] = useState(false);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (email) setSubmitted(true);
    };

    return (
        <section ref={ref} className="relative overflow-hidden bg-[#0d0d0d] px-6 py-32 md:px-12">
            <div className="pointer-events-none absolute inset-0">
                <div className="absolute bottom-0 left-1/2 h-[400px] w-[600px] -translate-x-1/2 rounded-full bg-red-600/5 blur-[100px]" />
            </div>

            <motion.div
                initial={{ opacity: 0, y: 40 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.8 }}
                className="relative mx-auto max-w-2xl text-center"
            >
                <p className="mb-4 text-xs tracking-[0.5em] text-red-600 uppercase">Inner Circle</p>
                <h2 className="mb-4 text-[clamp(2.5rem,7vw,6rem)] font-black leading-none text-white"
                    style={{ fontFamily: '"Bebas Neue", "Arial Narrow", sans-serif' }}>
                    JOIN THE<br />OBSESSED
                </h2>
                <p className="mb-12 text-sm leading-relaxed text-white/40">
                    First access to drops. Exclusive content. Behind the scenes.
                    <br />No noise. Only signal.
                </p>

                {!submitted ? (
                    <form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:flex-row">
                        <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="your@email.com"
                            required
                            className="flex-1 border border-white/10 bg-white/3 px-6 py-4 text-sm text-white placeholder-white/20 outline-none backdrop-blur-sm focus:border-red-600/50 transition-colors"
                        />
                        <button
                            type="submit"
                            className="border border-red-600/50 bg-red-600/10 px-10 py-4 text-xs tracking-[0.3em] text-white uppercase transition-all hover:bg-red-600"
                        >
                            Join
                        </button>
                    </form>
                ) : (
                    <motion.p
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="text-sm tracking-[0.3em] text-red-600 uppercase"
                    >
                        You're in. Welcome to the obsession.
                    </motion.p>
                )}

                <p className="mt-4 text-[10px] text-white/20">
                    No spam. Unsubscribe anytime. Built for the driven.
                </p>
            </motion.div>
        </section>
    );
}