import { Head, Link, usePage } from '@inertiajs/react';
import { ArrowRight, Award, BadgeCheck, ChevronLeft, ChevronRight, Globe, HandHeart, Leaf, ShieldCheck } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import HomeAboutSection from '@/components/frontend/HomeAboutSection';
import { ServiceIcon } from '@/components/frontend/ServiceIcon';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import type { AboutPreview as AboutPreviewData, HeroSlide as HeroSlideData } from '@/types';

type ProcessStep = { id: number; step_number: number; icon: string | null; title: string; slug: string | null; description: string | null };
type FeaturedProduct = { id: number; name: string; slug: string; origin: string | null; variety: string | null; fermentation: string | null; fat_content: string | number | null; short_description: string | null; image: string | null; category_name: string | null };
type Stat = { value: string; label: string; icon: string };
type Cert = { id: number; name: string; title: string; issuer: string | null; logo: string | null };

type Props = {
    heroes: HeroSlideData[];
    about: AboutPreviewData | null;
    services: { id: number; icon: string; name: string; slug: string; short_description: string | null }[];
    processSteps: ProcessStep[];
    featuredProducts: FeaturedProduct[];
    stats: Stat[];
    certifications: Cert[];
};

export default function Home({ heroes, about, services, processSteps, featuredProducts, stats }: Props) {
    const { props } = usePage();
    const locale = String(props.locale ?? 'id');
    const isEn = locale === 'en';
    const [heroIdx, setHeroIdx] = useState(0);
    const hero = heroes[heroIdx] ?? heroes[0];

    // Swipe kiri/kanan di mobile untuk ganti slide hero.
    const touchStart = useRef<{ x: number; y: number } | null>(null);
    const onTouchStart = (e: React.TouchEvent) => {
        touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    };
    const onTouchEnd = (e: React.TouchEvent) => {
        if (!touchStart.current || heroes.length <= 1) {
return;
}

        const dx = e.changedTouches[0].clientX - touchStart.current.x;
        const dy = e.changedTouches[0].clientY - touchStart.current.y;
        touchStart.current = null;

        // Hanya anggap swipe kalau gerakan horizontal dominan & cukup jauh.
        if (Math.abs(dx) < 50 || Math.abs(dx) < Math.abs(dy) * 1.5) {
return;
}

        setHeroIdx((i) => (i + (dx < 0 ? 1 : -1) + heroes.length) % heroes.length);
    };

    const trustItems = isEn
        ? [
              { icon: Leaf, title: 'Premium Quality Cocoa', desc: 'Selected beans from the best local farmers with international quality standards.' },
              { icon: HandHeart, title: 'Sustainable Partnership', desc: 'Building long-term mutually beneficial relationships.' },
              { icon: Globe, title: 'Global Shipping', desc: 'Serving exports to many countries with safe and on-time delivery.' },
              { icon: ShieldCheck, title: 'Guaranteed Process', desc: 'Quality control at every stage to ensure customer satisfaction.' },
          ]
        : [
              { icon: Leaf, title: 'Cocoa Berkualitas Tinggi', desc: 'Biji cocoa pilihan dari petani lokal terbaik dengan standar kualitas internasional.' },
              { icon: HandHeart, title: 'Kemitraan Berkelanjutan', desc: 'Membangun hubungan jangka panjang yang saling menguntungkan.' },
              { icon: Globe, title: 'Pengiriman Global', desc: 'Melayani ekspor ke berbagai negara dengan pengiriman aman dan tepat waktu.' },
              { icon: ShieldCheck, title: 'Proses Terjamin', desc: 'Kontrol kualitas di setiap tahap untuk memastikan kepuasan pelanggan.' },
          ];

    const fallbackSteps = isEn
        ? [
              { id: 1, step_number: 1, icon: 'sprout', title: 'Cultivation', slug: 'cultivation', description: 'Local farmers nurture cocoa with dedication.' },
              { id: 2, step_number: 2, icon: 'cherry', title: 'Harvest & Pod Breaking', slug: 'harvest-pod-breaking', description: 'Ripe cocoa pods are selected and broken to extract beans.' },
              { id: 3, step_number: 3, icon: 'sun', title: 'Fermentation & Drying', slug: 'fermentation-drying', description: '5-6 day fermentation & hygienic drying to ideal moisture.' },
              { id: 4, step_number: 4, icon: 'scale', title: 'Sorting & Grading', slug: 'sorting-grading', description: 'Sorting & grading by bean size, fat content, and defect.' },
              { id: 5, step_number: 5, icon: 'ship', title: 'Global Export', slug: 'global-export', description: 'Indonesia’s best cocoa to the world.' },
          ]
        : [
              { id: 1, step_number: 1, icon: 'sprout', title: 'Budidaya', slug: 'budidaya', description: 'Petani lokal merawat cocoa dengan penuh dedikasi.' },
              { id: 2, step_number: 2, icon: 'cherry', title: 'Panen & Belah Buah', slug: 'panen-belah-buah', description: 'Buah cocoa matang dipilih dan dibelah untuk diambil bijinya.' },
              { id: 3, step_number: 3, icon: 'sun', title: 'Fermentasi & Pengeringan', slug: 'fermentasi-pengeringan', description: 'Fermentasi 5-6 hari & pengeringan higienis hingga kadar air ideal.' },
              { id: 4, step_number: 4, icon: 'scale', title: 'Sortasi & Grading', slug: 'sortasi-grading', description: 'Sortasi & grading berdasarkan ukuran biji, fat content, dan defect.' },
              { id: 5, step_number: 5, icon: 'ship', title: 'Ekspor Global', slug: 'ekspor-global', description: 'Cocoa terbaik Indonesia menuju dunia.' },
          ];

    const fallbackStats = isEn
        ? [
              { value: '500+', label: 'Partner Farmers', icon: 'leaf' },
              { value: '25+', label: 'Destination Countries', icon: 'globe' },
              { value: '100%', label: 'Quality Guaranteed', icon: 'badge' },
              { value: '10+', label: 'Years Experience', icon: 'award' },
          ]
        : [
              { value: '500+', label: 'Petani Mitra', icon: 'leaf' },
              { value: '25+', label: 'Negara Tujuan', icon: 'globe' },
              { value: '100%', label: 'Kualitas Terjamin', icon: 'badge' },
              { value: '10+', label: 'Tahun Pengalaman', icon: 'award' },
          ];

    // Reveal hook — ringan, pakai IntersectionObserver (best practice, tidak lemot)
    function useReveal<T extends HTMLElement>(threshold = 0.15) {
        const ref = useRef<T>(null);
        const [visible, setVisible] = useState(false);
        useEffect(() => {
            const el = ref.current;

            if (!el) {
return;
}

            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                setVisible(true);

                return;
            }

            const obs = new IntersectionObserver(
                ([entry]) => {
                    if (entry.isIntersecting) {
                        setVisible(true);
                        obs.unobserve(entry.target);
                    }
                },
                { threshold },
            );
            obs.observe(el);

            return () => obs.disconnect();
        }, [threshold]);

        return [ref, visible] as const;
    }

    const [servicesRef, servicesVisible] = useReveal<HTMLElement>(0.15);
    const [processRef, processVisible] = useReveal<HTMLElement>(0.15);
    const [statsRef, statsVisible] = useReveal<HTMLElement>(0.15);
    const [ctaRef, ctaVisible] = useReveal<HTMLElement>(0.15);

    useEffect(() => {
        if (heroes.length <= 1) {
return;
}

        const id = setInterval(() => setHeroIdx((i) => (i + 1) % heroes.length), 8000);

        return () => clearInterval(id);
    }, [heroes.length]);

    return (
        <>
            <Head title={isEn ? 'Cocoa Elfatih — Indonesian Cocoa, World Quality' : 'Cocoa Elfatih — Cocoa Indonesia, Kualitas Dunia'} />

            {/* HERO — full 1 layar, image sebagai background + overlay 25% */}
            <section className="relative flex min-h-[100svh] items-center overflow-hidden" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
                {/* Background image slider */}
                <div className="absolute inset-0">
                    <img
                        key={hero?.image ?? heroIdx}
                        src={hero?.image ?? '/assets-elfatih/image-default.png'}
                        alt="Cocoa Elfatih pack"
                        fetchPriority="high"
                        loading="eager"
                        decoding="sync"
                        className="h-full w-full animate-fade-in object-cover"
                    />
                    <div className="absolute inset-0 bg-black/25" />
                    <div className="absolute inset-0 bg-gradient-to-r from-black/40 via-black/10 to-transparent" />
                </div>

                {/* Slider arrows — tetap di atas background */}
                {heroes.length > 1 && (
                    <>
                        <button
                            onClick={() => setHeroIdx((heroIdx - 1 + heroes.length) % heroes.length)}
                            className="absolute top-1/2 left-4 z-20 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/15 text-white backdrop-blur hover:bg-white/25 sm:flex"
                            aria-label="Prev"
                        >
                            <ChevronLeft className="size-5" />
                        </button>
                        <button
                            onClick={() => setHeroIdx((heroIdx + 1) % heroes.length)}
                            className="absolute top-1/2 right-4 z-20 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/15 text-white backdrop-blur hover:bg-white/25 sm:flex"
                            aria-label="Next"
                        >
                            <ChevronRight className="size-5" />
                        </button>
                    </>
                )}

                {/* Content — layout kiri, tipografi disesuaikan */}
                <div className="relative z-10 mx-auto w-full max-w-7xl px-4 py-20 pt-28 sm:px-6 lg:px-8 lg:py-24">
                    <div className="max-w-[620px]">
                        {hero?.badge && (
                            <span className="inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/15 px-3.5 py-1.5 text-[11px] font-semibold tracking-widest text-white uppercase backdrop-blur-md">
                                <span className="size-1.5 rounded-full bg-white shadow-[0_0_8px_rgba(255,255,255,0.8)]" />
                                <span dangerouslySetInnerHTML={{ __html: hero.badge }} />
                            </span>
                        )}
                        <h1 className="mt-4 font-poppins text-[36px] leading-[0.95] font-extrabold tracking-[-0.03em] text-white text-balance drop-shadow-[0_2px_16px_rgba(0,0,0,0.4)] sm:text-[48px] lg:text-[58px]">
                            {hero?.title ?? (isEn ? 'Indonesian Cocoa, World Quality.' : 'Cocoa Indonesia, Kualitas Dunia.')}
                        </h1>
                        <div className="mt-5 max-w-xl border-l-2 border-white/30 pl-4 text-[16px] leading-[1.75] text-white/90 [&_p]:m-0 [&_strong]:font-semibold [&_strong]:text-white">
                            {hero?.subtitle ? (
                                <div dangerouslySetInnerHTML={{ __html: hero.subtitle }} />
                            ) : isEn ? (
                                'Cocoa Elfatih is a trusted cocoa exporter bringing Indonesia’s finest taste to the global market. From selected farms to world-class beans.'
                            ) : (
                                'Cocoa Elfatih adalah eksportir cocoa terpercaya yang menghadirkan cita rasa terbaik Indonesia ke pasar global. Dari kebun pilihan hingga cocoa berkualitas tinggi.'
                            )}
                        </div>
                        {hero?.description && (
                            <div
                                className="mt-3 max-w-xl pl-4 text-sm leading-relaxed text-white/85 [&_p]:m-0"
                                dangerouslySetInnerHTML={{ __html: hero.description }}
                            />
                        )}
                        <div className="mt-8 flex flex-wrap items-center gap-3">
                            <Button asChild size="lg">
                                <Link href={hero?.cta_link ? `/${locale}${hero.cta_link}` : `/${locale}/produk`}>
                                    {hero?.cta_label ?? (isEn ? 'Explore Products' : 'Jelajahi Produk')} <ArrowRight className="size-4" />
                                </Link>
                            </Button>
                            <Button asChild variant="outline" size="lg" className="border-white bg-transparent text-white hover:bg-white hover:text-[#1A120E]">
                                <Link href={hero?.cta_secondary_link ? `/${locale}${hero.cta_secondary_link}` : `/${locale}/tentang`}>
                                    {hero?.cta_secondary_label ?? (isEn ? 'About Us' : 'Tentang Kami')}
                                </Link>
                            </Button>
                        </div>
                        <div className="mt-10 grid max-w-lg grid-cols-3 gap-3 border-t border-white/30 pt-6 sm:gap-5">
                            <div className="flex items-start gap-2.5 text-white">
                                <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-white/15 backdrop-blur">
                                    <Leaf className="size-4 text-white" />
                                </span>
                                <span className="pt-0.5 text-[11px] font-medium leading-tight sm:text-xs">{hero?.usp1 ?? (isEn ? '100% Indonesian Cocoa' : '100% Cocoa Indonesia')}</span>
                            </div>
                            <div className="flex items-start gap-2.5 text-white">
                                <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-white/15 backdrop-blur">
                                    <Award className="size-4 text-white" />
                                </span>
                                <span className="pt-0.5 text-[11px] font-medium leading-tight sm:text-xs">{hero?.usp2 ?? (isEn ? 'Guaranteed Quality' : 'Kualitas Terjamin')}</span>
                            </div>
                            <div className="flex items-start gap-2.5 text-white">
                                <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-white/15 backdrop-blur">
                                    <Globe className="size-4 text-white" />
                                </span>
                                <span className="pt-0.5 text-[11px] font-medium leading-tight sm:text-xs">{hero?.usp3 ?? (isEn ? 'Serving Global Market' : 'Melayani Pasar Global')}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Dots — di tengah bawah hero, cuma dot */}
                {heroes.length > 1 && (
                    <div className="absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2">
                        {heroes.map((_, i) => (
                            <button
                                key={i}
                                onClick={() => setHeroIdx(i)}
                                aria-label={`Slide ${i + 1}`}
                                className={`h-2 rounded-full transition-all ${i === heroIdx ? 'w-7 bg-white' : 'w-2 bg-white/45 hover:bg-white/70'}`}
                            />
                        ))}
                    </div>
                )}
            </section>

            {/* SERVICES — MODERN 2026: Bento + editorial — fade-in-up */}
            <section ref={servicesRef} className={cn('relative overflow-hidden bg-white dark:bg-[#0F0A07] py-16 sm:py-20', servicesVisible ? 'animate-fade-in-up' : 'opacity-0')}>
                <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(160,90,44,0.07),transparent_60%)]" />
                <div className="pointer-events-none absolute -bottom-32 -left-32 size-[36rem] rounded-full bg-[#6B2F0B]/[0.04] blur-3xl" />
                <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    {/* Header editorial — center, pill badge */}
                    <div className="mx-auto max-w-2xl text-center">
                        <span className="inline-flex items-center gap-2 rounded-full border border-[#A05A2C]/15 bg-[#A05A2C]/10 px-4 py-1.5 text-xs font-semibold tracking-widest text-[#A05A2C]">
                            <span className="size-1.5 rounded-full bg-[#A05A2C]" />
                            {isEn ? 'OUR SERVICES' : 'LAYANAN KAMI'}
                        </span>
                        <h2 className="mt-4 font-poppins text-3xl font-bold leading-tight tracking-tight text-[#2B1B12] sm:text-4xl dark:text-white">
                            {isEn ? 'Integrated Cocoa Services' : 'Layanan Cocoa Terintegrasi'}
                        </h2>
                        <p className="mx-auto mt-3 max-w-xl text-sm leading-relaxed text-[#6B5B4F] dark:text-white/60">
                            {isEn
                                ? 'From bean sourcing to global shipment — 6 integrated services trusted from 500+ farmers to 25+ countries.'
                                : 'Dari sourcing biji hingga pengiriman global — 6 layanan terintegrasi dipercaya 500+ petani hingga 25+ negara.'}
                        </p>
                    </div>

                    {/* Bento grid 5 — 1 besar + 4 kecil biar tidak monoton */}
                    <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                        {(services.length ? services.slice(0, 5) : []).map((s, idx) => {
                            const isFeatured = idx === 0;

                            return (
                                <Link
                                    key={s.id}
                                    href={`/${locale}/layanan/${s.slug}`}
                                    className={`group relative flex flex-col overflow-hidden rounded-[24px] border p-6 transition hover:-translate-y-1 hover:shadow-xl sm:p-7 ${
                                        isFeatured
                                            ? 'bg-[#6B2F0B] text-white border-transparent dark:bg-[#6B2F0B]'
                                            : 'bg-[#FFF9F5] border-[#2B1B12]/5 dark:bg-white/[0.04] dark:border-white/10'
                                    } ${idx === 0 ? 'lg:col-span-2' : ''}`}
                                >
                                    {isFeatured && (
                                        <>
                                            <div
                                                className="pointer-events-none absolute inset-0 opacity-[0.10]"
                                                style={{ backgroundImage: 'radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1px)', backgroundSize: '22px 22px' }}
                                            />
                                            <div
                                                className="pointer-events-none absolute inset-0 opacity-[0.05]"
                                                style={{ backgroundImage: 'repeating-linear-gradient(-45deg, rgba(255,255,255,0.6) 0 1px, transparent 1px 14px)' }}
                                            />
                                            <Leaf className="pointer-events-none absolute -top-8 -right-8 size-28 rotate-12 text-white/[0.07]" />
                                        </>
                                    )}
                                    {!isFeatured && <div className="absolute top-0 left-0 h-1 w-full bg-[#A05A2C]/80" />}
                                    <div className="relative flex items-start justify-between gap-3">
                                        <div
                                            className={`flex size-11 shrink-0 items-center justify-center rounded-xl transition-colors ${
                                                isFeatured ? 'bg-white/15 text-white backdrop-blur group-hover:bg-white group-hover:text-[#6B2F0B]' : 'bg-[#A05A2C]/10 text-[#A05A2C] group-hover:bg-[#A05A2C] group-hover:text-white'
                                            }`}
                                        >
                                            <ServiceIcon name={s.icon} className="size-5" />
                                        </div>
                                        <span className={`rounded-full px-2.5 py-1 text-[10px] font-bold tracking-widest ${isFeatured ? 'bg-white/15 text-white/90 backdrop-blur' : 'bg-[#A05A2C]/10 text-[#A05A2C]'}`}>0{idx + 1}</span>
                                    </div>
                                    <h3 className={`relative mt-5 font-poppins text-base font-semibold leading-tight line-clamp-2 ${isFeatured ? 'text-white' : 'text-[#2B1B12] dark:text-white'}`}>{s.name}</h3>
                                    <p className={`relative mt-2 line-clamp-3 flex-1 text-xs leading-relaxed ${isFeatured ? 'text-white/85' : 'text-[#6B5B4F] dark:text-white/60'}`}>{s.short_description}</p>
                                    <span
                                        className={`relative mt-5 inline-flex items-center gap-1.5 text-xs font-semibold transition ${isFeatured ? 'text-white' : 'text-[#A05A2C]'}`}
                                    >
                                        {isEn ? 'Explore' : 'Jelajahi'} <ArrowRight className="size-3.5 transition group-hover:translate-x-0.5" />
                                    </span>
                                    {isFeatured && <Leaf className="pointer-events-none absolute -bottom-6 -right-6 size-32 rotate-12 text-white/[0.06]" />}
                                </Link>
                            );
                        })}
                        {!services.length &&
                            trustItems.slice(0, 5).map((item, idx) => {
                                const isFeatured = idx === 0;

                                return (
                                    <div
                                        key={item.title}
                                        className={`relative flex flex-col overflow-hidden rounded-[24px] border p-6 ${isFeatured ? 'bg-[#6B2F0B] text-white border-transparent sm:col-span-2' : 'bg-[#FFF9F5] border-[#2B1B12]/5 dark:bg-white/[0.04]'}`}
                                    >
                                        <div className="flex size-11 items-center justify-center rounded-xl bg-[#A05A2C]/10 text-[#A05A2C]">
                                            <item.icon className="size-5" />
                                        </div>
                                        <h3 className={`mt-4 font-poppins text-sm font-semibold ${isFeatured ? 'text-white' : 'text-[#2B1B12] dark:text-white'}`}>{item.title}</h3>
                                        <p className={`mt-1.5 text-xs leading-relaxed ${isFeatured ? 'text-white/80' : 'text-[#6B5B4F] dark:text-white/60'}`}>{item.desc}</p>
                                    </div>
                                );
                            })}
                    </div>
                    <div className="mt-8 text-center">
                        <Button asChild>
                            <Link href={`/${locale}/layanan`}>
                                {isEn ? 'View All Services' : 'Lihat Semua Layanan'} <ArrowRight className="size-4" />
                            </Link>
                        </Button>
                    </div>
                </div>
            </section>

            {/* PROCESS — MODERN 2026: light editorial + bento timeline — fade-in */}
            <section ref={processRef} className={cn('relative overflow-hidden bg-[#FFF9F5] dark:bg-[#0F0A07] py-16 sm:py-20', processVisible ? 'animate-fade-in' : 'opacity-0')}>
                <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(160,90,44,0.06),transparent_55%)]" />
                <div className="pointer-events-none absolute -bottom-32 -right-32 size-[32rem] rounded-full bg-[#A05A2C]/[0.04] blur-3xl" />
                <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="mx-auto max-w-2xl text-center">
                        <span className="inline-flex items-center gap-2 rounded-full border border-[#A05A2C]/15 bg-[#A05A2C]/10 px-4 py-1.5 text-xs font-semibold tracking-widest text-[#A05A2C]">
                            <span className="size-1.5 rounded-full bg-[#A05A2C]" />
                            {isEn ? 'OUR PROCESS' : 'PROSES KAMI'}
                        </span>
                        <h2 className="mt-4 font-poppins text-2xl font-bold tracking-tight text-[#2B1B12] sm:text-3xl dark:text-white">
                            {isEn ? 'From Farm to World-class Cocoa' : 'Dari Kebun ke Cocoa Kelas Dunia'}
                        </h2>
                        <p className="mt-2 text-sm leading-relaxed text-[#6B5B4F] dark:text-white/60">
                            {isEn ? '5 integrated steps — traceable, hygienic, and export-ready.' : '5 langkah terintegrasi — traceable, higienis, dan siap ekspor.'}
                        </p>
                    </div>

                    <div className="relative mt-10">
                        <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-5 md:gap-4">
                            {(processSteps.length ? processSteps : fallbackSteps).map((s) => (
                                <Link
                                    key={s.id}
                                    href={`/${locale}/proses-kami/${s.slug ?? ''}`}
                                    className="group relative flex flex-col items-center rounded-2xl border border-[#2B1B12]/5 bg-white p-6 text-center shadow-sm transition hover:-translate-y-1 hover:shadow-md dark:border-white/10 dark:bg-white/[0.04]"
                                >
                                    <div className="relative flex size-14 items-center justify-center rounded-2xl bg-[#6B2F0B] text-white shadow-md shadow-[#6B2F0B]/15 transition group-hover:bg-[#A05A2C]">
                                        <ServiceIcon name={s.icon ?? 'leaf'} className="size-6" />
                                        <span className="absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-[#A05A2C] text-[10px] font-bold text-white shadow">0{s.step_number}</span>
                                    </div>
                                    <h3 className="mt-4 font-poppins text-sm font-semibold text-[#2B1B12] transition group-hover:text-[#A05A2C] dark:text-white dark:group-hover:text-[#A05A2C]">{s.title}</h3>
                                    <p className="mt-1.5 line-clamp-3 max-w-[200px] text-xs leading-relaxed text-[#6B5B4F] dark:text-white/60">{s.description}</p>
                                </Link>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* ABOUT — file terpisah HomeAboutSection.tsx, dinamis dari modul About */}
            <HomeAboutSection about={about} featuredProducts={featuredProducts} locale={locale} isEn={isEn} />

            {/* STATS — biar tidak kaku, ada icon daun + texture halus — fade-in-up */}
            <section ref={statsRef} className={cn('relative overflow-hidden bg-white dark:bg-[#0F0A07] py-12 sm:py-16', statsVisible ? 'animate-fade-in-up' : 'opacity-0')}>
                <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(160,90,44,0.04),transparent_70%)]" />
                <Leaf className="pointer-events-none absolute -top-8 -right-8 size-40 rotate-12 text-[#A05A2C]/[0.04]" />
                <Leaf className="pointer-events-none absolute -bottom-8 -left-8 size-48 -rotate-12 text-[#6B2F0B]/[0.03]" />
                <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        {(stats.length ? stats : fallbackStats).map((s) => (
                            <div
                                key={s.label}
                                className="group relative overflow-hidden rounded-[20px] border border-[#2B1B12]/5 bg-[#FFF9F5] p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-md dark:border-white/10 dark:bg-white/[0.04]"
                            >
                                <div className="pointer-events-none absolute -right-6 -top-6 size-20 rounded-full bg-[#A05A2C]/5 blur-xl opacity-0 transition group-hover:opacity-100" />
                                <div className="flex size-11 items-center justify-center rounded-xl bg-[#6B2F0B] text-white shadow-sm transition group-hover:bg-[#A05A2C] group-hover:scale-105">
                                    {s.icon === 'leaf' && <Leaf className="size-5" />}
                                    {s.icon === 'globe' && <Globe className="size-5" />}
                                    {s.icon === 'badge' && <BadgeCheck className="size-5" />}
                                    {s.icon === 'award' && <Award className="size-5" />}
                                    {s.icon === 'badge-check' && <BadgeCheck className="size-5" />}
                                </div>
                                <p className="mt-4 font-poppins text-3xl font-extrabold tracking-tight text-[#2B1B12] dark:text-white">{s.value}</p>
                                <p className="mt-1 text-sm font-semibold text-[#2B1B12] dark:text-white">{s.label}</p>
                                <p className="mt-1.5 text-xs leading-relaxed text-[#6B5B4F] dark:text-white/60">
                                    {(s.label === 'Petani Mitra' || s.label === 'Partner Farmers') && (isEn ? 'Working with local farmers across regions.' : 'Bekerja sama dengan petani lokal di berbagai daerah.')}
                                    {(s.label === 'Negara Tujuan' || s.label === 'Destination Countries') && (isEn ? 'Our cocoa has been exported to many countries.' : 'Cocoa kami telah diekspor ke berbagai negara.')}
                                    {(s.label === 'Kualitas Terjamin' || s.label === 'Quality Guaranteed') && (isEn ? 'International quality standards at every process.' : 'Standar kualitas internasional di setiap proses.')}
                                    {(s.label === 'Tahun Pengalaman' || s.label === 'Years Experience') && (isEn ? 'Experience in the cocoa industry since 2014.' : 'Pengalaman dalam industri cocoa sejak 2014.')}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA BOTTOM — dengan texture + daun biar tidak kaku — scale-in */}
            <section ref={ctaRef} className={cn('bg-[#FFF9F5] px-4 py-8 sm:px-6 lg:px-8 lg:py-10 dark:bg-[#0F0A07]', ctaVisible ? 'animate-scale-in' : 'opacity-0')}>
                <div className="relative mx-auto max-w-7xl overflow-hidden rounded-[28px] bg-[#6B2F0B] p-8 text-white sm:p-10 lg:p-10 dark:bg-[#2A1A0F]">
                    {/* texture dot grid */}
                    <div
                        className="pointer-events-none absolute inset-0 opacity-[0.10]"
                        style={{ backgroundImage: 'radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1px)', backgroundSize: '22px 22px' }}
                    />
                    <div
                        className="pointer-events-none absolute inset-0 opacity-[0.05]"
                        style={{ backgroundImage: 'repeating-linear-gradient(-45deg, rgba(255,255,255,0.6) 0 1px, transparent 1px 14px)' }}
                    />
                    <Leaf className="pointer-events-none absolute -top-10 -right-10 size-56 rotate-12 text-white/[0.06]" />
                    <Leaf className="pointer-events-none absolute -bottom-14 -left-14 size-64 -rotate-12 text-white/[0.05]" />
                    <div className="pointer-events-none absolute -top-20 -right-20 size-80 rounded-full bg-white/[0.04] blur-3xl" />
                    <div className="pointer-events-none absolute -bottom-20 -left-20 size-96 rounded-full bg-[#A05A2C]/15 blur-3xl" />
                    <div className="relative grid items-center gap-8 lg:grid-cols-5 lg:gap-8">
                        <div className="lg:col-span-3">
                            <p className="text-xs font-semibold tracking-widest text-white/70">{isEn ? 'LET’S COLLABORATE' : 'MARI BERKOLABORASI'}</p>
                            <h2 className="mt-2 font-poppins text-2xl font-bold leading-tight text-white sm:text-3xl">
                                {isEn ? 'Ready to Be Your Business Partner' : 'Siap Menjadi Mitra Bisnis Anda'}
                            </h2>
                            <p className="mt-3 max-w-xl text-sm leading-relaxed text-white/80">
                                {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.'}
                            </p>
                            <Button asChild variant="outline" size="lg" className="mt-6 border-white bg-white text-[#6B2F0B] hover:bg-white/90 hover:text-[#6B2F0B]">
                                <Link href={`/${locale}/kontak`}>
                                    {isEn ? 'Contact Us Now' : 'Hubungi Kami Sekarang'} <ArrowRight className="size-4" />
                                </Link>
                            </Button>
                        </div>
                        <div className="hidden lg:col-span-2 lg:block">
                            <div className="relative ml-auto max-w-sm overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                <div className="grid grid-cols-2 gap-3 text-center text-white">
                                    <div className="rounded-xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                        <p className="font-poppins text-xl font-bold">500+</p>
                                        <p className="text-xs text-white/80">{isEn ? 'Farmers' : 'Petani'}</p>
                                    </div>
                                    <div className="rounded-xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                        <p className="font-poppins text-xl font-bold">25+</p>
                                        <p className="text-xs text-white/80">{isEn ? 'Countries' : 'Negara'}</p>
                                    </div>
                                    <div className="col-span-2 rounded-xl bg-[#A05A2C] p-4 text-white shadow-md">
                                        <p className="text-xs font-semibold tracking-widest">FOB Makassar • Surabaya</p>
                                        <p className="mt-1 text-xs text-white/90">{isEn ? 'Ready stock 1000+ kg' : 'Stok ready 1000+ kg'}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}