'use client';

import { useActionState } from 'react';
import { signup } from './actions';

export default function SignupPage() {
  const [error, formAction, pending] = useActionState(signup, null);
  return (
    <main className="min-h-screen flex items-center justify-center bg-gray-50 px-6 py-12">
      <form action={formAction} className="w-full max-w-md bg-white border border-gray-200 rounded-xl p-8 flex flex-col gap-4">
        <h1 className="text-xl font-black tracking-tight text-black">Empieza gratis 14 días</h1>
        <p className="text-sm text-gray-500">Sin tarjeta. Configura tu catálogo y recibe leads.</p>
        <input name="nombre" placeholder="Tu nombre" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
        <input name="empresa" placeholder="Nombre de tu empresa" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
        <input name="email" type="email" placeholder="Email" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
        <input name="provincia" placeholder="Provincia" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
        <input name="password" type="password" placeholder="Contraseña (mín. 8)" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
        <label className="flex items-center gap-2 text-xs text-gray-500">
          <input name="optInMarketing" type="checkbox" /> Quiero recibir novedades de Reformix
        </label>
        {error && <p className="text-sm text-red-600">{error}</p>}
        <button type="submit" disabled={pending} className="bg-black text-white rounded-md py-2 font-semibold disabled:opacity-60">
          {pending ? 'Creando cuenta…' : 'Crear cuenta'}
        </button>
        <a href="/login" className="text-xs text-gray-400 text-center hover:text-black">Ya tengo cuenta</a>
      </form>
    </main>
  );
}
