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

export const dynamic = 'force-dynamic';

const CANALES = [
  {
    slug: 'llamada',
    icon: '📞',
    titulo: 'Que te llamemos',
    descripcion:
      'Un asistente te llama y te hace unas preguntas rápidas. Lo más cómodo: no escribes nada.',
    cta: 'Quiero que me llamen',
  },
  {
    slug: 'whatsapp',
    icon: '💬',
    titulo: 'Por WhatsApp',
    descripcion:
      'Seguimos por chat a tu ritmo. Puedes mandar fotos y notas cuando quieras.',
    cta: 'Seguir por WhatsApp',
  },
  {
    slug: 'formulario',
    icon: '📝',
    titulo: 'Rellenar un formulario',
    descripcion:
      'Tú lo cuentas zona por zona y subes las fotos. Recibes el presupuesto al instante.',
    cta: 'Rellenar el formulario',
  },
] as const;

export default async function ChooserPage({ 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">
            Elige cómo seguir
          </span>
          <h1 className="text-2xl font-black tracking-tight text-black">
            ¿Cómo prefieres contarnos tu reforma, {lead.nombre.split(' ')[0]}?
          </h1>
          <p className="text-sm text-gray-500 leading-relaxed">
            Tú eliges. Por cualquiera de las tres nos das lo que necesitamos para preparar tu render
            y tu presupuesto.
          </p>
        </div>

        <div className="flex flex-col gap-3">
          {CANALES.map((c) => (
            <Link
              key={c.slug}
              href={`/solicitud/${id}/${c.slug}`}
              className="group bg-white border border-gray-200 rounded-xl p-5 shadow-sm flex items-center gap-4 transition-all hover:border-black hover:shadow-md"
            >
              <span className="text-3xl shrink-0" aria-hidden="true">
                {c.icon}
              </span>
              <div className="flex flex-col gap-0.5 min-w-0">
                <span className="text-base font-bold text-black">{c.titulo}</span>
                <span className="text-sm text-gray-500 leading-snug">{c.descripcion}</span>
                <span className="text-sm font-semibold text-[color:var(--brand,#0a0a0a)] mt-1">
                  {c.cta} →
                </span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </>
  );
}