import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowRight, Check, MessageCircle, Package } from 'lucide-react'; import { useState } from 'react'; import ImageLightbox from '@/components/frontend/image-lightbox'; import { Button } from '@/components/ui/button'; import { useSettings } from '@/hooks/useSettings'; type Product = { id: number; name: string; slug: string; origin: string | null; variety: string | null; fermentation: string | null; grade: string | null; fat_content: string | null; bean_size: string | null; bean_count: string | null; moisture: string | null; defect: string | null; harvest_season: string | null; stock_kg: number | null; moq_kg: number | null; short_description: string | null; description: string | null; flavor_notes: string | null; image: string | null; gallery: { id: number; url: string }[]; category_name: string | null; category_slug: string | null; certifications: { id: number; title: string; logo: string | null }[]; }; type Props = { product: Product; related: { id: number; name: string; slug: string; image: string | null }[]; seo: { title: string; description: string; image: string | null } }; export default function ProductDetail({ product, related, seo }: Props) { const { props } = usePage(); const locale = String(props.locale ?? 'id'); const isEn = locale === 'en'; const settings = useSettings(); const [img, setImg] = useState(product.image); const gallery = product.gallery.length ? product.gallery : product.image ? [{ id: 0, url: product.image }] : []; const [lightboxIndex, setLightboxIndex] = useState(null); const waNumber = (settings.social_whatsapp ?? '+62 812-3456-7890').replace(/[^0-9]/g, ''); const waText = encodeURIComponent( isEn ? `Hello Cocoa Elfatih, I'm interested in ${product.name}. Please share quotation.` : `Halo Cocoa Elfatih, saya tertarik dengan ${product.name}. Minta penawaran.`, ); const waLink = `https://wa.me/${waNumber}?text=${waText}`; return ( <> {seo.image && }
{img ? ( ) : (
No image
)}
{gallery.length > 1 && (
{gallery.map((g, idx) => ( ))}
)} ({ id: g.id, url: g.url, alt: product.name }))} openIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} onNavigate={setLightboxIndex} locale={locale} />
{product.category_name && {product.category_name}}

{product.name}

{product.short_description}

{isEn ? 'Price hidden — request quotation via RFQ.' : 'Harga disembunyikan — minta penawaran via RFQ.'}
{product.flavor_notes &&
Flavor: {product.flavor_notes}
}
{product.certifications.length > 0 && (

{isEn ? 'Certifications' : 'Sertifikasi'}

{product.certifications.map((c) => ( {c.title} ))}
)}
{product.description && (
)} {related.length > 0 && (

{isEn ? 'Related Products' : 'Produk Terkait'}

{isEn ? 'View all →' : 'Lihat semua →'}
{related.map((r) => (
{r.image ? ( {r.name} ) : ( {r.name} )}

{r.name}

))}
)}
); } function Spec({ label, value }: { label: string; value: string | null }) { if (!value) { return
{label}: —
; } return (
{label}: {value}
); }