"use client";

import { motion } from "framer-motion";
import { useState } from "react";

export function Hero() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "done" | "error">("idle");

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");
    try {
      const res = await fetch("/api/waitlist", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      if (!res.ok) throw new Error("Failed");
      setStatus("done");
    } catch {
      setStatus("error");
    }
  }

  return (
    <section className="relative grid-bg gradient-bg pt-32 pb-20 px-6 overflow-hidden">
      <div className="max-w-6xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="flex flex-col items-center text-center"
        >
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent-500/10 border border-accent-500/30 text-accent-glow text-xs font-mono mb-6">
            <span className="w-2 h-2 rounded-full bg-accent-500 animate-pulse" />
            Live · 1,247 liquidations tracked today
          </div>

          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-[0.95]">
            Trade <span className="shimmer-text">before</span><br />
            the herd panics.
          </h1>

          <p className="text-lg md:text-xl text-white/60 max-w-2xl mb-10">
            Real-time Telegram alerts on Hyperliquid liquidations, whale moves,
            and smart-money wallets. <span className="text-white">Hit before the chart does.</span>
          </p>

          <form onSubmit={onSubmit} className="flex flex-col sm:flex-row gap-3 w-full max-w-md mb-4">
            <input
              required
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@trader.com"
              className="flex-1 px-4 py-3 rounded-lg bg-ink-800 border border-white/10 focus:border-accent-500 focus:outline-none text-white placeholder-white/30 transition"
            />
            <button
              type="submit"
              disabled={status === "loading" || status === "done"}
              className="bg-accent-500 hover:bg-accent-400 disabled:opacity-50 text-ink-950 font-bold px-6 py-3 rounded-lg animate-glow transition"
            >
              {status === "done" ? "On the list ✓" : status === "loading" ? "Joining..." : "Get early access"}
            </button>
          </form>
          <p className="text-xs text-white/40 font-mono">
            Free tier: 1 alert · 6h delay · Pro $9.99/mo for real-time
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.3 }}
          className="mt-16 max-w-3xl mx-auto"
        >
          <div className="bg-ink-900/80 backdrop-blur border border-white/10 rounded-xl p-6 shadow-2xl">
            <div className="flex items-center gap-2 mb-4 text-xs font-mono text-white/40">
              <span className="w-3 h-3 rounded-full bg-red-500" />
              <span className="w-3 h-3 rounded-full bg-yellow-500" />
              <span className="w-3 h-3 rounded-full bg-green-500" />
              <span className="ml-2">@altsignal_bot — Telegram</span>
            </div>
            <div className="space-y-3 terminal-text text-sm">
              <div>
                <span className="text-white/40">[14:23:11]</span> 🔥 <span className="text-red-400">$2.4M LONG liquidation</span> @ BTC-PERP · entry $94,200 · 25x
              </div>
              <div>
                <span className="text-white/40">[14:23:47]</span> 🐋 Smart-money wallet <span className="text-accent-glow">0x7a3f..d2</span> opened $1.1M SHORT on ETH
              </div>
              <div>
                <span className="text-white/40">[14:24:03]</span> 📊 Token unlock alert: <span className="text-yellow-400">$ARB</span> unlocks 92.7M tokens in 7 days
              </div>
              <div>
                <span className="text-white/40">[14:24:55]</span> 🔥 <span className="text-red-400">$890K SHORT liquidation</span> @ SOL-PERP · cascade incoming
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}