feat(search): implement paginated API fetching for large page sizes

- Removed upper limit on page_size validation to support requests >100
- Added automatic pagination logic to fetch from Open Food Facts API in chunks of 1000
- Accumulates products across multiple API pages until desired count is reached
- Updated error messages and product data fields for consistency

app/components/ProductCard.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import Image from "next/image";
+import { OptimizedImage } from "@/components/OptimizedImage";
 import { Product } from "@/lib/openFoodFactsApi";
 import { Heart, AlertTriangle, Zap, Plus, Eye } from "lucide-react";
 import { formatNutritionData } from "@/lib/openFoodFactsApi";
@@ -12,6 +13,9 @@ import { formatNutritionData } from "@/lib/openFoodFactsApi";
 interface ProductCardProps {
   product: Product;
   className?: string;
+  priority?: number; // Posição na lista (0 = primeiro)
+  currentPage?: number; // Página atual para controle de cancelamento
+  variant?: "default" | "mobile"; // Variante de layout
 }
 
 const NUTRI_SCORE_CONFIG = {
@@ -65,7 +69,13 @@ const NOVA_CONFIG = {
   },
 };
 
-export function ProductCard({ product, className = "" }: ProductCardProps) {
+export function ProductCard({
+  product,
+  className = "",
+  priority = 999,
+  currentPage = 1,
+  variant = "default",
+}: ProductCardProps) {
   const router = useRouter();
 
   const getProductImageUrl = (): string => {
@@ -102,21 +112,107 @@ export function ProductCard({ product, className = "" }: ProductCardProps) {
       )
     ) || false;
 
+  // Layout mobile horizontal
+  if (variant === "mobile") {
+    return (
+      <Card
+        className={`product-card group relative overflow-hidden hover:shadow-lg transition-all duration-200 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 ${className}`}
+      >
+        <div className="flex gap-3 p-3">
+          {/* Imagem - tamanho ajustado */}
+          <div className="w-24 h-24 flex-shrink-0 relative bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-lg overflow-hidden">
+            <OptimizedImage
+              src={imageUrl}
+              alt={product.product_name || "Produto"}
+              fill
+              priority={priority}
+              onPageChange={currentPage}
+              className="object-contain p-2"
+              sizes="96px"
+              placeholder="empty"
+            />
+
+            {/* Badges - tamanho ajustado */}
+            {nutritionGrade && (
+              <div className="absolute top-1 right-1">
+                <Badge
+                  className={`${nutritionGrade.className} text-[9px] px-1.5 py-0.5 font-bold`}
+                >
+                  {nutritionGrade.label}
+                </Badge>
+              </div>
+            )}
+
+            {hasCommonAllergens && (
+              <div className="absolute bottom-1 right-1">
+                <div className="bg-yellow-500 text-white rounded-full p-0.5">
+                  <AlertTriangle className="w-2 h-2" />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Conteúdo - melhor espaçamento */}
+          <div className="flex-1 min-w-0 flex flex-col">
+            <div className="flex-1">
+              {/* Nome do produto */}
+              <h3 className="font-semibold text-sm text-gray-900 dark:text-white line-clamp-2 mb-1">
+                {product.product_name || "Produto sem nome"}
+              </h3>
+
+              {/* Marca */}
+              {product.brands && (
+                <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                  {product.brands}
+                </p>
+              )}
+
+              {/* Info nutricional compacta */}
+              <div className="flex gap-2 mt-2 text-xs">
+                {product.nutriments?.energy_100g &&
+                  typeof product.nutriments.energy_100g === "number" && (
+                    <span className="text-gray-600 dark:text-gray-400">
+                      {Math.round(product.nutriments.energy_100g)} kcal
+                    </span>
+                  )}
+                {product.nutriments?.fat_100g &&
+                  typeof product.nutriments.fat_100g === "number" && (
+                    <span className="text-gray-600 dark:text-gray-400">
+                      {product.nutriments.fat_100g.toFixed(1)}g gord.
+                    </span>
+                  )}
+              </div>
+            </div>
+
+            {/* Botão Ver - menor */}
+            <Link
+              href={`/produto/${product.code}`}
+              className="mt-2 inline-flex items-center justify-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-md transition-colors"
+            >
+              <Eye className="w-3 h-3" />
+              Ver
+            </Link>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  // Layout desktop padrão
   return (
     <Card
       className={`product-card group relative overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 ${className}`}
     >
       {/* Imagem do Produto */}
       <div className="relative h-56 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 overflow-hidden">
-        <Image
+        <OptimizedImage
           src={imageUrl}
           alt={product.product_name || "Produto"}
           fill
+          priority={priority}
+          onPageChange={currentPage}
           className="object-contain p-6 group-hover:scale-110 transition-transform duration-500"
-          loading="lazy"
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-          placeholder="blur"
-          blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
         />
 
         {/* Overlay com badges */}