import { notFound } from 'next/navigation';
import { getPublicLead } from '@/lib/funnel/public-queries';
import CanalLlamada from '@/components/funnel/CanalLlamada';
import TenantBrand from '@/components/funnel/TenantBrand';

export const dynamic = 'force-dynamic';

export default async function LlamadaPage({ 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">
            Te llamamos
          </span>
          <h1 className="text-2xl font-black tracking-tight text-black">
            Te llamamos cuando quieras, {lead.nombre.split(' ')[0]}
          </h1>
          <p className="text-sm text-gray-500 leading-relaxed">
            Un asistente de {tenant?.nombreEmpresa ?? 'la empresa'} te llama y te hace unas preguntas
            rápidas sobre tu reforma. Te avisamos antes.
          </p>
        </div>

        <div className="bg-white border border-gray-200 rounded-xl p-6 md:p-8 shadow-sm">
          <CanalLlamada leadId={id} telefono={lead.telefono} email={lead.email} />
        </div>
      </div>
    </>
  );
}
