import { searchProducts, type ProductSummaryDto } from '@/lib/api';

export const dynamic = 'force-dynamic';

async function getPreviewProducts(): Promise<ProductSummaryDto[]> {
  try {
    return await searchProducts({ limit: 3, offset: 0 });
  } catch {
    return [];
  }
}

export default async function HomePage() {
  const products = await getPreviewProducts();

  return (
    <div className="mx-auto flex max-w-6xl flex-col gap-16 px-6 py-12 md:py-20">
      <section className="grid gap-10 md:grid-cols-[1.15fr_0.85fr] md:items-center">
        <div className="space-y-6">
          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-emerald-700">
            Tienda saludable · Datos claros
          </p>
          <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-emerald-950 md:text-6xl">
            Alimentación ecológica con información transparente desde el primer clic.
          </h1>
          <p className="max-w-2xl text-lg leading-8 text-stone-700">
            mercadodevida une catálogo, marcas y datos nutricionales confiables para que cada compra
            sea simple, consciente y sin sorpresas.
          </p>
          <div className="flex flex-col gap-3 sm:flex-row">
            <a
              href="/products/search"
              className="rounded-full bg-emerald-800 px-6 py-3 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-900"
            >
              Explorar productos
            </a>
            <a
              href="/categoria/ecologico"
              className="rounded-full border border-emerald-800/30 px-6 py-3 text-center text-sm font-semibold text-emerald-950 transition hover:border-emerald-800"
            >
              Ver categorías
            </a>
          </div>
        </div>

        <aside className="rounded-[2rem] border border-emerald-900/10 bg-white p-6 shadow-sm">
          <h2 className="text-lg font-semibold text-emerald-950">Vista previa del catálogo</h2>
          <div className="mt-5 space-y-4">
            {products.length > 0 ? (
              products.map((product) => (
                <a
                  key={product.id}
                  href={product.url}
                  className="block rounded-2xl border border-stone-200 p-4 transition hover:border-emerald-700"
                >
                  <p className="font-semibold text-stone-900">{product.name}</p>
                  <p className="mt-1 line-clamp-2 text-sm text-stone-600">
                    {product.description ?? 'Producto activo del catálogo público.'}
                  </p>
                </a>
              ))
            ) : (
              <div className="rounded-2xl bg-emerald-50 p-4 text-sm leading-6 text-emerald-950">
                El storefront está listo. Cuando el backend esté disponible, este bloque mostrará
                productos desde la API pública tipada.
              </div>
            )}
          </div>
        </aside>
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        {[
          ['Catálogo público', 'Productos activos, marcas y categorías desde la API pública.'],
          ['Server-first', 'La home renderiza en servidor y evita JavaScript cliente innecesario.'],
          [
            'Cliente tipado',
            'El frontend consume contratos propios sin importar internals del backend.',
          ],
        ].map(([title, description]) => (
          <article
            key={title}
            className="rounded-3xl border border-emerald-900/10 bg-white p-6 shadow-sm"
          >
            <h2 className="font-semibold text-emerald-950">{title}</h2>
            <p className="mt-3 text-sm leading-6 text-stone-600">{description}</p>
          </article>
        ))}
      </section>
    </div>
  );
}
