"use client";

import React, { useState } from 'react';

export default function LeadCapture() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('loading');
    // Simulated lead capture
    setTimeout(() => setStatus('success'), 1500);
  };

  return (
    <div className="bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-6 shadow-2xl">
      <h3 className="text-xl font-bold bg-gradient-to-r from-[hsl(250,100%,70%)] to-[hsl(330,100%,70%)] bg-clip-text text-transparent mb-2">
        Let's Work Together
      </h3>
      <p className="text-gray-400 text-sm mb-6">
        Drop your details below and I'll get back to you personally.
      </p>

      {status === 'success' ? (
        <div className="text-center py-4 animate-in fade-in zoom-in duration-500">
          <div className="text-4xl mb-2">🎉</div>
          <p className="text-white font-medium">Talk soon!</p>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-4">
          <input
            required
            type="text"
            placeholder="Your Name"
            className="w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-white placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-[hsl(250,100%,50%)] transition-all"
          />
          <input
            required
            type="email"
            placeholder="Email Address"
            className="w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-white placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-[hsl(330,100%,50%)] transition-all"
          />
          <button
            type="submit"
            disabled={status === 'loading'}
            className="w-full bg-white text-black font-bold py-4 rounded-xl hover:bg-opacity-90 active:scale-[0.98] transition-all disabled:opacity-50"
          >
            {status === 'loading' ? 'Sending...' : 'Send Message'}
          </button>
        </form>
      )}
    </div>
  );
}
