import { notFound } from 'next/navigation';
import { getPublicLead } from '@/lib/funnel/public-queries';
import { guardarDetallesYFotos } from '../../actions';
import FormularioZonas from '@/components/funnel/FormularioZonas';
import TenantBrand from '@/components/funnel/TenantBrand';

export const dynamic = 'force-dynamic';

export default async function FormularioPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const data = await getPublicLead(id);
  if (!data) notFound();

  const { lead, tenant } = data;

  return (
    <>
      {tenant && <TenantBrand nombreEmpresa={tenant.nombreEmpresa} logoUrl={tenant.logoUrl} />}
      <div className="container py-10 max-w-2xl flex flex-col gap-6">
        <div className="flex flex-col gap-2">
          <span className="text-xs font-semibold uppercase tracking-widest text-gray-400">
            Cuéntanos tu reforma
          </span>
          <h1 className="text-2xl font-black tracking-tight text-black">
            Hola {lead.nombre.split(' ')[0]}, cuéntanos sobre tu reforma
          </h1>
          <p className="text-sm text-gray-500 leading-relaxed">
            Añade cada zona que quieras reformar con sus fotos y detalles. Con eso preparamos tu
            render y un presupuesto orientativo en menos de un minuto.
          </p>
        </div>

        <div className="bg-white border border-gray-200 rounded-xl p-6 md:p-8 shadow-sm">
          <FormularioZonas action={guardarDetallesYFotos.bind(null, id)} />
        </div>
      </div>
    </>
  );
}
