import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { User, Mail, Phone, ChevronRight } from 'lucide-react';

export default function FormPage() {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({ nome: '', email: '', whatsapp: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    localStorage.setItem('currentLead', JSON.stringify(formData));
    navigate('/curso');
  };

  return (
    <div className="glass-panel animate-fade-in delay-100">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold mb-2">Garanta sua Vaga</h2>
        <p className="text-muted text-sm">Preencha rápido para liberar o quiz e concorrer aos prêmios!</p>
      </div>

      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
        <div className="form-group">
          <label className="form-label flex items-center gap-2">
            <User size={16} /> Nome Completo
          </label>
          <input 
            type="text" 
            required 
            className="form-input" 
            placeholder="Como quer ser chamado em campo?"
            value={formData.nome}
            onChange={(e) => setFormData({...formData, nome: e.target.value})}
          />
        </div>

        <div className="form-group">
          <label className="form-label flex items-center gap-2">
            <Phone size={16} /> WhatsApp
          </label>
          <input 
            type="tel" 
            required 
            className="form-input" 
            placeholder="(11) 99999-9999"
            value={formData.whatsapp}
            onChange={(e) => setFormData({...formData, whatsapp: e.target.value})}
          />
        </div>

        <div className="form-group mb-6">
          <label className="form-label flex items-center gap-2">
            <Mail size={16} /> E-mail
          </label>
          <input 
            type="email" 
            required 
            className="form-input" 
            placeholder="seu.melhor@email.com"
            value={formData.email}
            onChange={(e) => setFormData({...formData, email: e.target.value})}
          />
        </div>

        <button type="submit" className="btn-primary" style={{ width: '100%' }}>
          Continuar <ChevronRight size={20} />
        </button>
      </form>
    </div>
  );
}
