import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowLeft, ArrowRight, ChevronRight, Leaf, Sprout } from 'lucide-react'; import { useState } from 'react'; import ImageLightbox from '@/components/frontend/image-lightbox'; import { Button } from '@/components/ui/button'; import { ServiceIcon } from '@/components/frontend/ServiceIcon'; type Step = { step_number: number; icon: string | null; title: string; slug: string | null; description: string | null; image: string | null; gallery: { id: number; url: string; thumb: string; original: string }[]; }; type OtherStep = { step_number: number; title: string; slug: string | null }; type Props = { step: Step; others: OtherStep[]; seo: { title: string; description: string; image: string | null }; }; export default function ProcessDetail({ step, others, seo }: Props) { const { props } = usePage(); const locale = String(props.locale ?? 'id'); const isEn = locale === 'en'; const [lightboxIndex, setLightboxIndex] = useState(null); const galleryImages = step.gallery && step.gallery.length > 0 ? step.gallery.map((g) => ({ id: g.id, url: g.original, alt: step.title })) : step.image ? [{ id: 0, url: step.image, alt: step.title }] : []; // Find prev/next steps const sortedOthers = [...others].sort((a, b) => a.step_number - b.step_number); const currentIdx = sortedOthers.findIndex((o) => o.step_number === step.step_number); const prevStep = currentIdx > 0 ? sortedOthers[currentIdx - 1] : null; const nextStep = currentIdx < sortedOthers.length - 1 ? sortedOthers[currentIdx + 1] : null; return ( <> {seo.image && } {/* Hero — immersive with image background */}
{/* Breadcrumb */} {/* Title area */}
{step.icon && (
)} {isEn ? 'Step' : 'Langkah'} {step.step_number}

{step.title}

{/* Content — two-column layout */}
{/* Main content */}
{/* Gallery */}
{step.gallery && step.gallery.length > 0 ? ( ) : step.image ? ( ) : (
)}
{step.gallery && step.gallery.length > 1 && (
{step.gallery.map((g, idx) => ( ))}
)} setLightboxIndex(null)} onNavigate={setLightboxIndex} locale={locale} />
{/* Description */} {step.description && (
)} {/* Navigation buttons */}
{nextStep?.slug ? ( ) : ( prevStep?.slug ? ( ) : null )}
{/* Sidebar — other steps */}

{isEn ? 'All Process Steps' : 'Semua Tahapan'}

{/* Current step */}
{step.step_number} {step.title}
{/* Other steps */} {sortedOthers .filter((o) => o.slug && o.step_number !== step.step_number) .map((o) => ( {o.step_number} {o.title} ))}
{/* CTA card */}

{isEn ? 'Interested in our process?' : 'Tertarik dengan proses kami?'}

{isEn ? 'Contact us for more details.' : 'Hubungi kami untuk informasi lebih lanjut.'}

{/* CTA — consistent with process list */}

{isEn ? 'Ready to Be Your Business Partner' : 'Siap Menjadi Mitra Bisnis Anda'}

{isEn ? "Let's collaborate and grow together. Contact us for the best offer and more info about your cocoa needs." : 'Mari berkolaborasi dan tumbuh bersama. Hubungi kami untuk penawaran terbaik dan informasi lebih lanjut tentang kebutuhan cocoa Anda.'}

); }