'use client';

import Link from 'next/link';
import { useActionState } from 'react';
import { signup } from './actions';
import AuthShell from '@/components/auth/AuthShell';

const inputClass =
  'rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-primary-700 focus:outline-none focus:ring-1 focus:ring-primary-700';

export default function SignupPage() {
  const [error, formAction, pending] = useActionState(signup, null);
  return (
    <AuthShell
      photo="/despues-bano.webp"
      photoAlt="Baño reformado"
      caption="Empieza a recibir leads en minutos."
      captionSub="14 días gratis, sin tarjeta. Configura tu catálogo y comparte tu funnel."
    >
      <form action={formAction} className="flex flex-col gap-4">
        <div>
          <h1 className="font-display text-3xl tracking-tight text-black">Empieza gratis 14 días</h1>
          <p className="mt-1 text-sm text-gray-500">
            Sin tarjeta. Configura tu catálogo y recibe leads.
          </p>
        </div>

        <input name="nombre" placeholder="Tu nombre" required autoComplete="name" className={inputClass} />
        <input
          name="empresa"
          placeholder="Nombre de tu empresa"
          required
          autoComplete="organization"
          className={inputClass}
        />
        <input
          name="email"
          type="email"
          placeholder="Email"
          required
          autoComplete="email"
          className={inputClass}
        />
        <input name="provincia" placeholder="Provincia" required className={inputClass} />
        <input
          name="password"
          type="password"
          placeholder="Contraseña (mín. 8)"
          required
          autoComplete="new-password"
          className={inputClass}
        />
        <label className="flex items-center gap-2 text-xs text-gray-500">
          <input name="optInMarketing" type="checkbox" className="h-4 w-4 accent-[#2f5c46]" /> Quiero
          recibir novedades de Reformix
        </label>

        {error && <p className="text-sm text-red-600">{error}</p>}

        <button type="submit" disabled={pending} className="btn bg-primary-700 text-white hover:bg-primary-900 w-full disabled:opacity-60">
          {pending ? 'Creando cuenta…' : 'Crear cuenta'}
        </button>

        <p className="text-center text-sm text-gray-500">
          ¿Ya tienes cuenta?{' '}
          <Link href="/login" className="font-semibold text-primary-700 hover:underline">
            Entrar
          </Link>
        </p>
      </form>
    </AuthShell>
  );
}