import { Head, Link, router } from '@inertiajs/react'; import { ChevronLeft, ChevronRight, Leaf, Package, Search, X, SlidersHorizontal, Coffee, Bean, Droplets, Sprout } from 'lucide-react'; import { useEffect, useState } from 'react'; import EmptyState from '@/components/frontend/EmptyState'; import { Input } from '@/components/ui/input'; import { cn } from '@/lib/utils'; type ProductCard = { id: number; name: string; slug: string; origin: string | null; variety: string | null; fermentation: string | null; fat_content: string | number | null; bean_count: string | null; short_description: string | null; image: string | null; category_name: string | null; category_slug: string | null; }; type PaginationLink = { url: string | null; label: string; active: boolean }; type Paginated = { data: ProductCard[]; links: PaginationLink[]; last_page: number; prev_page_url: string | null; next_page_url: string | null }; type Props = { products: Paginated; categories: { name: string; slug: string }[]; filters: { q?: string; category?: string; fermentation?: string; process?: string }; suggestions: ProductCard[]; locale: string; seo: { title: string; description: string } }; const popularKeywords = ['Sulawesi', 'Flores', 'Forastero', 'Fermented', 'Nibs', 'Powder']; const categoryIcons: Record = { 'cocoa-beans': , 'cocoa-nibs': , 'cocoa-powder': , 'cocoa-butter': , }; const fermentationOptions = [ { value: 'fermented', label: 'Fermented', color: 'bg-emerald-500' }, { value: 'unfermented', label: 'Unfermented', color: 'bg-amber-500' }, { value: 'dried', label: 'Dried', color: 'bg-orange-500' }, { value: 'light-fermented', label: 'Light Fermented', color: 'bg-lime-500' }, ] as const; export default function Products({ products, categories, filters, suggestions, locale, seo }: Props) { const isEn = locale === 'en'; const [q, setQ] = useState(filters.q ?? ''); useEffect(() => { if ((q || '') === (filters.q || '')) { return; } const t = setTimeout(() => { router.get(`/${locale}/produk`, { q: q || undefined, category: filters.category, fermentation: filters.fermentation }, { preserveState: true, preserveScroll: true, replace: true, only: ['products', 'filters'] }); }, 400); return () => clearTimeout(t); // eslint-disable-next-line react-hooks/exhaustive-deps }, [q]); return ( <> {/* Hero editorial — tanpa search */}
{isEn ? 'OUR PRODUCTS' : 'PRODUK KAMI'}

{isEn ? 'Premium Cocoa' : 'Cocoa Berkualitas'}

{seo.description}

{products.data.length ? `${products.data.length} ${isEn ? 'Products' : 'Produk'}` : isEn ? 'Catalog' : 'Katalog'} FOB Makassar • Surabaya
{/* Filter + Grid — sidebar filter layout */}
{/* Search bar — full width */}
setQ(e.target.value)} placeholder={isEn ? 'Search: Sulawesi, Flores, Fermented...' : 'Cari: Sulawesi, Flores, Fermented...'} className="h-12 rounded-2xl border-[#A05A2C]/15 bg-[#FFF9F5] pl-11 text-sm placeholder:text-[#6B5B4F]/40 focus:border-[#A05A2C]/40 focus:ring-[#A05A2C]/20 dark:bg-white/[0.04] dark:border-white/10" /> {q && ( )}
{/* Active filters bar */} {(filters.category || filters.fermentation) && (
{isEn ? 'Active filters:' : 'Filter aktif:'}
{filters.category && ( {categories.find((c) => c.slug === filters.category)?.name ?? filters.category} )} {filters.fermentation && ( {filters.fermentation} )}
{isEn ? 'Clear all' : 'Hapus semua'}
)} {/* Two-column layout: sidebar + grid */}
{/* Sidebar filter */} {/* Product grid */}
{products.data.length ? ( <>
{products.data.map((p) => (
{p.image ? ( {p.name} ) : (
{isEn ? 'No image' : 'Tanpa gambar'}
)}
{p.category_name && {p.category_name}} {p.fat_content && {p.fat_content}% fat}

{p.name}

{[p.origin, p.variety, p.fermentation].filter(Boolean).join(' • ')}

{p.short_description}

{isEn ? 'View details' : 'Lihat detail'}
))}
{products.last_page > 1 && ( )} ) : (
{popularKeywords.map((k) => ( ))}
{suggestions.length > 0 && (

{isEn ? 'Product Recommendations' : 'Rekomendasi Produk'}

{suggestions.map((p) => (
{p.image ? ( {p.name} ) : ( {p.name} )}

{p.name}

{[p.origin, p.variety].filter(Boolean).join(' • ')}

))}
)}
)}
); } function Arrow({ href, disabled, children }: { href: string | null; disabled: boolean; children: React.ReactNode }) { if (disabled || !href) { return {children}; } return ( {children} ); }