import ProductCard from '@/components/home/ProductCard';
import CartDrawer from '@/components/home/CartDrawer';
import ProductModal from '@/components/home/ProductModal';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useCart } from '@/contexts/cart-context';
import { formatRupiah } from '@/lib/rupiah';
import type { Category, HomepageData, Paginated, Product, ProductPrice } from '@/types/homepage';
import { Head, InfiniteScroll, Link, router } from '@inertiajs/react';
import {
    ArrowRight,
    Check,
    ChevronRight,
    Facebook,
    Info,
    Instagram,
    LogIn,
    Mail,
    MapPin,
    Phone,
    Plus,
    Search,
    ShoppingBag,
    Star,
} from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';

function TiktokIcon({ className }: { className?: string }) {
    return (
        <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
            <path d="M16.6 5.82c-.7-.77-1.09-1.77-1.09-2.82h-3.13v13.14c0 1.53-1.24 2.77-2.77 2.77a2.77 2.77 0 0 1-2.77-2.77 2.77 2.77 0 0 1 2.77-2.77c.29 0 .56.04.82.12v-3.17a5.9 5.9 0 0 0-.82-.06A5.9 5.9 0 0 0 3.75 16.1a5.9 5.9 0 0 0 5.86 5.9 5.9 5.9 0 0 0 5.9-5.9V9.13a7.83 7.83 0 0 0 4.58 1.47V7.47a4.85 4.85 0 0 1-3.49-1.65z" />
        </svg>
    );
}

type Props = {
    appName: string;
    aboutApp: string | null;
    contactEmail: string | null;
    contactPhone: string | null;
    contactAddress: string | null;
    instagramUrl: string | null;
    facebookUrl: string | null;
    tiktokUrl: string | null;
    homepage: HomepageData;
    categories: Category[];
    products: Paginated<Product>;
    filters: { search: string; category: string };
    seo: { title: string; description: string; image: string; url: string };
};

export default function Welcome({
    appName,
    aboutApp,
    contactEmail,
    contactPhone,
    contactAddress,
    instagramUrl,
    facebookUrl,
    tiktokUrl,
    homepage,
    categories,
    products,
    filters,
}: Props) {
    const [searchInput, setSearchInput] = useState(filters.search);
    const [selectedCategory, setSelectedCategory] = useState(filters.category);
    const [activeProduct, setActiveProduct] = useState<Product | null>(null);
    const [activeSection, setActiveSection] = useState('hero');
    const [cartOpen, setCartOpen] = useState(false);
    const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
    const { totalItems } = useCart();

    useEffect(() => {
        const sections = ['hero', 'catalog', 'gallery', 'order-guide', 'about', 'contact'];
        const observers: IntersectionObserver[] = [];

        sections.forEach((id) => {
            const el = document.getElementById(id);
            if (!el) return;

            const observer = new IntersectionObserver(
                ([entry]) => {
                    if (entry.isIntersecting) {
                        setActiveSection(id);
                    }
                },
                { rootMargin: '-40% 0px -55% 0px' },
            );
            observer.observe(el);
            observers.push(observer);
        });

        return () => observers.forEach((o) => o.disconnect());
    }, []);

    const FALLBACK_IMAGE = 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&auto=format&fit=crop&q=80';

    const getProductImage = (product: Product): string => {
        for (const variant of product.product_variants) {
            if (variant.photo_urls && variant.photo_urls.length > 0) {
                return variant.photo_urls[0];
            }
        }
        return FALLBACK_IMAGE;
    };

    const getProductPriceRange = (product: Product): string => {
        const prices = product.product_variants.flatMap((v) =>
            v.product_prices
                .filter((p: ProductPrice) => p.type === 'retail')
                .map((p: ProductPrice) => p.price),
        );

        if (prices.length === 0) {
            const fallbackPrices = product.product_variants.flatMap((v) =>
                v.product_prices.map((p: ProductPrice) => p.price),
            );
            if (fallbackPrices.length === 0) return 'Rp 0';
            const min = Math.min(...fallbackPrices);
            const max = Math.max(...fallbackPrices);
            return min === max ? `Rp ${formatRupiah(min)}` : `Rp ${formatRupiah(min)} - Rp ${formatRupiah(max)}`;
        }

        const min = Math.min(...prices);
        const max = Math.max(...prices);
        return min === max ? `Rp ${formatRupiah(min)}` : `Rp ${formatRupiah(min)} - Rp ${formatRupiah(max)}`;
    };

    const fetchProducts = useCallback(
        (search: string, category: string) => {
            const params = new URLSearchParams();
            if (search) params.set('search', search);
            if (category) params.set('category', category);
            const url = `/${params.toString() ? `?${params.toString()}` : ''}`;

            router.visit(url, {
                only: ['products', 'filters'],
                reset: ['products'],
                preserveState: true,
                preserveScroll: true,
            });
        },
        [],
    );

    const handleSearchChange = useCallback(
        (value: string) => {
            setSearchInput(value);
            if (searchTimeoutRef.current) {
                clearTimeout(searchTimeoutRef.current);
            }
            searchTimeoutRef.current = setTimeout(() => {
                fetchProducts(value, selectedCategory);
            }, 400);
        },
        [selectedCategory, fetchProducts],
    );

    const handleCategoryChange = useCallback(
        (slug: string | null) => {
            const newCategory = slug ?? '';
            setSelectedCategory(newCategory);
            fetchProducts(searchInput, newCategory);
        },
        [searchInput, fetchProducts],
    );

    const handleResetFilters = useCallback(() => {
        setSearchInput('');
        setSelectedCategory('');
        fetchProducts('', '');
    }, [fetchProducts]);

    const featuredProducts = products.data.slice(0, 3);

    return (
        <>
            <Head title={appName}>
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
            </Head>

            <div className="min-h-screen bg-gradient-to-tr from-amber-50/20 via-[#FDFDFC] to-yellow-50/30 text-slate-800 transition-colors duration-300 font-sans scroll-smooth">
                {/* Sticky Header */}
                <header className="sticky top-0 z-40 bg-white/70 backdrop-blur-lg border-b border-amber-100/50 transition-all">
                    <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
                        <Link href="/" className="flex items-center">
                            <img src="/assets/logo.png" alt={appName} className="h-12 w-auto" />
                        </Link>

                        <nav className="hidden lg:flex items-center space-x-8 text-xs font-semibold uppercase tracking-widest text-slate-600">
                            {[
                                { id: 'hero', label: 'Beranda' },
                                { id: 'catalog', label: 'Produk' },
                                { id: 'about', label: 'Tentang Kami' },
                                { id: 'order-guide', label: 'Cara Pesan' },
                                { id: 'contact', label: 'Hubungi Kami' },
                            ].map((item) => (
                                <a
                                    key={item.id}
                                    href={`#${item.id}`}
                                    className={`transition-colors ${activeSection === item.id ? 'text-amber-600' : 'hover:text-amber-600'}`}
                                >
                                    {item.label}
                                </a>
                            ))}
                        </nav>

                        <div className="flex items-center gap-2">
                            <Button variant="ghost" size="icon" onClick={() => setCartOpen(true)} className="relative">
                                <ShoppingBag className="w-4.5 h-4.5 text-amber-600" />
                                {totalItems > 0 && (
                                    <span className="absolute -top-1 -right-1 w-4.5 h-4.5 bg-amber-600 text-white text-[9px] font-bold rounded-full flex items-center justify-center">
                                        {totalItems}
                                    </span>
                                )}
                            </Button>
                            <Button variant="ghost" size="icon" asChild>
                                <a href="/admin/dashboard" aria-label="Login">
                                    <LogIn className="w-4.5 h-4.5 text-amber-600" />
                                </a>
                            </Button>
                        </div>
                    </div>
                </header>

                {/* Hero Section */}
                <section id="hero" className="relative min-h-[calc(100vh-80px)] flex flex-col justify-between overflow-hidden">
                    <div className="absolute inset-0 grid grid-cols-1 lg:grid-cols-2 pointer-events-none z-0">
                        <div className="bg-white/40/30" />
                        <div className="bg-gradient-to-tr from-amber-100/30 via-yellow-100/20 to-orange-50/30 border-l border-amber-100/20" />
                    </div>

                    <div className="max-w-7xl mx-auto px-6 w-full lg:grow grid grid-cols-1 lg:grid-cols-12 gap-8 items-center py-12 z-10">
                        {/* Left Column */}
                        <div className="lg:col-span-5 flex flex-col justify-center space-y-6 lg:pr-6">
                            <Badge variant="secondary" className="w-fit bg-amber-500/10 text-amber-700 uppercase tracking-widest font-bold px-3 py-1 shadow-sm">
                                Hadir dengan Gaya Terbaru
                            </Badge>

                            <h1 className="text-5xl md:text-6xl font-serif leading-[1.1] tracking-tight font-light select-none text-slate-800">
                                Nyaman<br />
                                dalam setiap{' '}
                                <span className="font-normal italic text-amber-600 bg-amber-100/20 px-2 rounded-lg">
                                    Penampilan
                                </span>
                            </h1>

                            <p className="text-sm text-slate-500 max-w-md leading-relaxed font-light">
                                Koleksi fashion wanita dengan sentuhan elegan, material berkualitas, dan kenyamanan yang dapat Anda rasakan di setiap pemakaian.
                            </p>

                            <div className="flex items-center space-x-4 pt-4">
                                <Button asChild className="bg-amber-600 text-white px-8 py-3.5 text-xs font-semibold uppercase tracking-widest rounded-xl shadow-lg shadow-amber-200/50 hover:bg-amber-500 hover:-translate-y-0.5 transition-all duration-300 group">
                                    <a href="#catalog">
                                        Beli Sekarang
                                        <ArrowRight className="w-3.5 h-3.5 ml-2 transform group-hover:translate-x-1 transition-transform" />
                                    </a>
                                </Button>
                                <Button variant="outline" asChild className="border-amber-200 text-xs font-semibold uppercase tracking-widest px-8 py-3.5 rounded-xl hover:bg-amber-500/5 hover:border-amber-400 transition-all">
                                    <a href="#about">Tentang Kami</a>
                                </Button>
                            </div>
                        </div>

                        {/* Center Column: Visual */}
                        <div className="lg:col-span-7 relative flex justify-center items-center h-[500px] lg:h-[650px] w-full">
                            <div className="absolute inset-0 -z-10 flex justify-center items-center pointer-events-none select-none">
                                <div className="absolute w-[350px] h-[350px] rounded-full bg-gradient-to-tr from-amber-400/25 via-yellow-400/20 to-orange-300/20 blur-3xl" />
                                <div className="absolute w-[400px] h-[400px] rounded-full bg-gradient-to-br from-rose-300/20 via-amber-200/20 to-orange-300/20 blur-3xl" />
                            </div>

                            <div className="absolute inset-0 flex justify-center items-center pointer-events-none select-none z-0">
                                <div className="text-[14vw] lg:text-[120px] font-serif font-bold leading-none tracking-tight flex text-amber-200">
                                    <span className="text-amber-600">DST</span>
                                    <span className="text-slate-900">Collection</span>
                                </div>
                            </div>

                            <div className="relative w-[310px] h-[440px] lg:w-[390px] lg:h-[540px] rounded-[2rem] overflow-hidden z-10 transition-transform duration-500 hover:scale-[1.02]">
                                <img
                                    src={homepage.hero_image_url || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&auto=format&fit=crop&q=80'}
                                    alt={appName}
                                    className="w-full h-full object-cover"
                                />
                            </div>

                            {/* Floating Tag 1 */}
                            {featuredProducts[0] && (
                                <div
                                    onClick={() => setActiveProduct(featuredProducts[0])}
                                    className="absolute top-10 left-4 md:-left-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all"
                                >
                                    <img
                                        src={getProductImage(featuredProducts[0])}
                                        alt="Preview Produk"
                                        className="w-10 h-10 object-cover rounded-lg"
                                    />
                                    <div className="text-left">
                                        <h4 className="text-[9px] font-bold text-amber-600 uppercase tracking-widest">Terpopuler</h4>
                                        <p className="text-[11px] font-semibold truncate max-w-[100px]">{featuredProducts[0].name}</p>
                                        <span className="text-[11px] font-bold text-amber-600">{getProductPriceRange(featuredProducts[0])}</span>
                                    </div>
                                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-amber-50/50 text-amber-600">
                                        <Plus className="w-3.5 h-3.5" />
                                    </div>
                                </div>
                            )}

                            {/* Floating Tag 2 */}
                            {featuredProducts[1] && (
                                <div
                                    onClick={() => setActiveProduct(featuredProducts[1])}
                                    className="absolute top-28 right-4 md:-right-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all"
                                >
                                    <img
                                        src={getProductImage(featuredProducts[1])}
                                        alt="Preview Produk"
                                        className="w-10 h-10 object-cover rounded-lg"
                                    />
                                    <div className="text-left">
                                        <div className="flex items-center text-amber-400 space-x-0.5 mb-0.5">
                                            {[1, 2, 3, 4, 5].map((i) => (
                                                <Star key={i} className="w-2.5 h-2.5 fill-current" />
                                            ))}
                                        </div>
                                        <p className="text-[11px] font-semibold truncate max-w-[100px]">{featuredProducts[1].name}</p>
                                        <span className="text-[10px] font-semibold text-emerald-500">Stok Tersedia</span>
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Scroll Indicator */}
                    <div className="max-w-7xl mx-auto px-6 w-full flex items-center justify-between pb-8 z-10 text-xs font-semibold text-slate-500">
                        <div className="flex items-center space-x-3">
                            <span className="text-amber-600">#DSTCollection</span>
                            <span className="w-1 h-1 rounded-full bg-amber-300" />
                            <span>Bahan Adem & Lembut</span>
                        </div>
                        <Button
                            variant="ghost"
                            onClick={() => {
                                document.getElementById('catalog')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                            }}
                            className="flex items-center space-x-2 hover:text-amber-600 transition-colors cursor-pointer text-xs font-semibold uppercase tracking-widest text-slate-500"
                        >
                            <span>Lihat katalog lengkap</span>
                            <ChevronRight className="w-3.5 h-3.5 rotate-90 text-amber-600" />
                        </Button>
                    </div>
                </section>

                {/* Catalog Section */}
                <section id="catalog" className="max-w-7xl mx-auto px-6 py-20 border-t border-amber-100/30">
                    <div className="space-y-6 mb-12">
                        <div className="text-center space-y-2">
                            <Badge variant="secondary" className="bg-amber-500/10 text-amber-700 uppercase tracking-[0.3em] font-bold px-3 py-1">
                                Katalog Eksklusif
                            </Badge>
                            <h3 className="text-3xl font-serif text-slate-800">Koleksi Busana Pilihan</h3>
                            <p className="text-sm text-slate-500 max-w-lg mx-auto font-light">Gunakan kategori dan filter di bawah untuk menyesuaikan pencarian busana idaman Anda dengan mudah.</p>
                        </div>

                        {/* Filters */}
                        <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-amber-100/30 flex flex-col md:flex-row items-center gap-4 justify-between">
                            <div className="relative w-full md:w-80">
                                <Input
                                    value={searchInput}
                                    onChange={(e) => handleSearchChange(e.target.value)}
                                    type="text"
                                    placeholder="Cari produk..."
                                    className="w-full bg-slate-50 border-slate-200 text-xs px-4 py-3 pr-10 rounded-xl focus:border-amber-500 text-slate-700 transition-all"
                                />
                                <Search className="absolute right-3 top-3.5 w-4 h-4 text-slate-400" />
                            </div>

                            <div className="flex flex-wrap gap-2 w-full md:w-auto">
                                <Button
                                    variant={!selectedCategory ? 'default' : 'outline'}
                                    size="sm"
                                    onClick={() => handleCategoryChange(null)}
                                    className={`shrink-0 text-[11px] font-semibold uppercase tracking-wider rounded-xl transition-all whitespace-nowrap ${!selectedCategory
                                        ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/50'
                                        : 'bg-transparent text-slate-600 border-slate-200 hover'
                                        }`}
                                >
                                    Semua
                                </Button>
                                {categories.map((category) => (
                                    <Button
                                        key={category.id}
                                        variant={selectedCategory === category.slug ? 'default' : 'outline'}
                                        size="sm"
                                        onClick={() => handleCategoryChange(selectedCategory === category.slug ? null : category.slug)}
                                        className={`shrink-0 text-[11px] font-semibold uppercase tracking-wider rounded-xl transition-all whitespace-nowrap ${selectedCategory === category.slug
                                            ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/50'
                                            : 'bg-transparent text-slate-600 border-slate-200 hover'
                                            }`}
                                    >
                                        {category.name}
                                    </Button>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Product Grid with Infinite Scroll */}
                    <InfiniteScroll
                        data="products"
                        onlyNext
                        buffer={300}
                        loading={() => (
                            <div className="col-span-full flex justify-center py-8">
                                <div className="flex items-center space-x-3 text-sm text-slate-400">
                                    <div className="w-5 h-5 border-2 border-amber-400 border-t-transparent animate-spin rounded-full" />
                                    <span>Memuat produk lainnya...</span>
                                </div>
                            </div>
                        )}
                    >
                        {products.data.length > 0 ? (
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
                                {products.data.map((product) => (
                                    <ProductCard
                                        key={product.id}
                                        product={product}
                                        onQuickView={setActiveProduct}
                                        contactPhone={contactPhone}
                                    />
                                ))}
                            </div>
                        ) : (
                            <div className="text-center py-20 space-y-3">
                                <Info className="w-12 h-12 text-amber-300 mx-auto" />
                                <h3 className="text-lg font-medium text-slate-700">Produk Tidak Ditemukan</h3>
                                <p className="text-sm text-slate-400">
                                    Mohon maaf, kami tidak menemukan pakaian yang cocok dengan kata kunci pencarian Anda.
                                </p>
                                <Button variant="ghost" onClick={handleResetFilters} className="mt-2 text-xs font-bold uppercase tracking-widest text-amber-600 underline underline-offset-4">
                                    Reset Pencarian
                                </Button>
                            </div>
                        )}
                    </InfiniteScroll>
                </section>

                {/* Gallery Section */}
                <section id="gallery" className="w-full bg-gradient-to-br from-amber-50/40 via-yellow-50/20 to-orange-50/30 py-24 border-t border-b border-amber-100/30">
                    <div className="max-w-7xl mx-auto px-6 space-y-12">
                        <div className="text-center space-y-3 max-w-lg mx-auto">
                            <Badge variant="secondary" className="bg-amber-500/10 text-amber-700 uppercase tracking-[0.3em] font-bold px-3 py-1">
                                Galeri Kami
                            </Badge>
                            <h3 className="text-4xl font-serif leading-tight">Koleksi Lookbook</h3>
                            <p className="text-sm text-slate-500 leading-relaxed font-light">Intip koleksi lookbook kami untuk inspirasi gaya sehari-hari. Padu padan pakaian modern yang nyaman untuk berbagai suasana.</p>
                        </div>

                        {homepage.gallery_images.length > 0 ? (
                            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                                {homepage.gallery_images.map((image, index) => (
                                    <div
                                        key={index}
                                        className="group relative aspect-[3/4] rounded-2xl overflow-hidden shadow-md border-2 border-white cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                    >
                                        <img
                                            src={image}
                                            alt={`Lookbook ${index + 1}`}
                                            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                        />
                                        <div className="absolute inset-0 bg-gradient-to-t from-amber-950/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div className="text-center py-12">
                                <p className="text-sm text-slate-400">Belum ada foto lookbook yang ditambahkan.</p>
                            </div>
                        )}
                    </div>
                </section>

                {/* Order Guide Section */}
                <section id="order-guide" className="max-w-7xl mx-auto px-6 py-20 border-b border-amber-100/30">
                    <div className="text-center space-y-3 mb-16">
                        <Badge variant="secondary" className="bg-amber-500/10 text-amber-700 uppercase tracking-[0.3em] font-bold px-3 py-1">
                            Langkah Pemesanan
                        </Badge>
                        <h4 className="text-3xl font-serif">Cara Melakukan Pemesanan</h4>
                        <p className="text-sm text-slate-500 max-w-md mx-auto font-light">Sistem pemesanan kami sangat mudah dan terhubung langsung via WhatsApp untuk pelayanan cepat dan personal.</p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                        {[
                            { title: 'Pilih Produk', description: 'Jelajahi pakaian favorit Anda, lalu ketuk "Lihat Detail" untuk memeriksa varian.' },
                            { title: 'Pilih Varian & Harga', description: 'Tentukan varian yang diinginkan dan pilih jenis harga (Eceran, Grosir, Agen, dll.).' },
                            { title: 'Masukkan Keranjang', description: 'Masukkan ke Keranjang Belanja untuk menampung seluruh daftar pakaian yang ingin Anda beli.' },
                            { title: 'Kirim ke WhatsApp', description: 'Klik tombol kirim pesanan, admin kami akan merespons rincian transfer bank dan pengiriman kurir.' },
                        ].map((step, index) => (
                            <div
                                key={index}
                                className="bg-white/50 p-6 rounded-2xl border border-amber-100/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform"
                            >
                                <div className="absolute -top-4 -right-4 w-16 h-16 bg-amber-100/50 rounded-full flex items-center justify-center text-amber-600 font-bold text-xl font-serif">
                                    {index + 1}
                                </div>
                                <div className="w-12 h-12 rounded-xl bg-amber-100/30 text-amber-600 flex items-center justify-center mx-auto mb-4">
                                    {index === 0 && <ShoppingBag className="w-5 h-5" />}
                                    {index === 1 && <Star className="w-5 h-5" />}
                                    {index === 2 && <Plus className="w-5 h-5" />}
                                    {index === 3 && <Phone className="w-5 h-5" />}
                                </div>
                                <h5 className="font-bold text-base mb-2">{step.title}</h5>
                                <p className="text-xs text-slate-400 leading-relaxed font-light">{step.description}</p>
                            </div>
                        ))}
                    </div>
                </section>

                {/* About Section */}
                <section id="about" className="max-w-7xl mx-auto px-6 py-20 border-b border-amber-100/30">
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                        <div className="lg:col-span-6 relative aspect-square max-w-md mx-auto lg:max-w-none rounded-3xl overflow-hidden shadow-lg border-2 border-white">
                            <img
                                src={homepage.about_image_url || 'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80'}
                                alt="Tentang Kami"
                                className="w-full h-full object-cover"
                            />
                        </div>
                        <div className="lg:col-span-6 space-y-6">
                            <Badge variant="secondary" className="bg-amber-500/10 text-amber-700 uppercase tracking-[0.3em] font-bold px-3 py-1">
                                Tentang Kami
                            </Badge>
                            <h3 className="text-3xl font-serif">DST Collection</h3>
                            <p className="text-sm text-slate-500 leading-relaxed font-light whitespace-pre-line">
                                {aboutApp || 'Kami adalah rumah produksi busana lokal berkualitas tinggi. Berfokus pada keindahan motif, ketepatan detail jahitan, dan pemilihan kain adem yang mengedepankan aspek fungsionalitas dan estetika.'}
                            </p>
                            {['Kain Rayon Super Tebal & Menyerap Keringat', 'Motif Eksklusif & Tidak Pasaran', 'Dukungan Penuh Layanan Admin Via WhatsApp'].map((feature, index) => (
                                <div key={index} className="flex items-center space-x-3 text-xs text-slate-500 font-semibold">
                                    <Check className="w-4 h-4 text-emerald-500" />
                                    <span>{feature}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Contact Section */}
                <section id="contact" className="max-w-7xl mx-auto px-6 py-20">
                    <div className="bg-white/60 backdrop-blur-md border border-amber-100/30 rounded-3xl overflow-hidden shadow-sm grid grid-cols-1 lg:grid-cols-2">
                        <div className="p-8 space-y-6 flex flex-col justify-center">
                            <Badge variant="secondary" className="bg-amber-500/10 text-amber-700 uppercase tracking-[0.3em] font-bold px-3 py-1 w-fit">
                                Kontak Kami
                            </Badge>
                            <h3 className="text-3xl font-serif">Ada Pertanyaan? Hubungi Kami</h3>
                            <p className="text-sm text-slate-500 leading-relaxed font-light">Kami sangat senang mendengarkan pertanyaan Anda terkait spesifikasi produk, ketersediaan grosir, atau kemitraan. Hubungi tim admin kami melalui media di bawah.</p>

                            <div className="space-y-3">
                                {contactPhone && (
                                    <div className="flex items-center space-x-3 text-sm">
                                        <div className="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                            <Phone className="w-4 h-4" />
                                        </div>
                                        <span>{contactPhone}</span>
                                    </div>
                                )}
                                {contactEmail && (
                                    <div className="flex items-center space-x-3 text-sm">
                                        <div className="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                            <Mail className="w-4 h-4" />
                                        </div>
                                        <span>{contactEmail}</span>
                                    </div>
                                )}
                                {contactAddress && (
                                    <div className="flex items-center space-x-3 text-sm">
                                        <div className="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                            <MapPin className="w-4 h-4" />
                                        </div>
                                        <span>{contactAddress}</span>
                                    </div>
                                )}
                            </div>
                        </div>
                        <div className="h-80 lg:h-auto">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d304.913429094586!2d107.58352379265978!3d-6.414270414938328!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e696bd874fdab6d%3A0x12de5546c3d8eac4!2sAGEN%20JNE%20DEESTEPABUARAN!5e1!3m2!1sen!2sid!4v1786611903455!5m2!1sen!2sid"
                                width="100%"
                                height="100%"
                                style={{ border: 0 }}
                                allowFullScreen
                                loading="lazy"
                                referrerPolicy="no-referrer-when-downgrade"
                                className="w-full h-full min-h-[320px]"
                            />
                        </div>
                    </div>
                </section>

                {/* Footer */}
                <footer className="bg-white text-slate-600 py-16 border-t border-amber-100/30">
                    <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
                        <div className="space-y-4">
                            <img src="/assets/logo.png" alt={appName} className="h-10 w-auto" />
                            <p className="text-xs text-slate-400 leading-relaxed font-light">
                                Galeri resmi {appName}. Pilihan busana lokal premium berpotongan modern dengan kenyamanan menyejukkan.
                            </p>
                        </div>

                        <div className="space-y-3">
                            <h4 className="text-xs uppercase font-bold text-slate-800 tracking-widest">Koleksi Kami</h4>
                            <ul className="space-y-2 text-xs">
                                {categories.slice(0, 4).map((cat) => (
                                    <li key={cat.id}>
                                        <a href="#catalog" className="hover transition-colors">{cat.name}</a>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        <div className="space-y-3">
                            <h4 className="text-xs uppercase font-bold text-slate-800 tracking-widest">Tautan</h4>
                            <ul className="space-y-2 text-xs">
                                <li><a href="#about" className="hover transition-colors">Tentang Kami</a></li>
                                <li><a href="#order-guide" className="hover transition-colors">Cara Pemesanan</a></li>
                                <li><a href="#contact" className="hover transition-colors">Hubungi Kami</a></li>
                            </ul>
                        </div>

                        <div className="space-y-3">
                            <h4 className="text-xs uppercase font-bold text-slate-800 tracking-widest">Sosial Media</h4>
                            <p className="text-xs text-slate-400 font-light">Ikuti sosial media kami untuk mendapatkan update produk terbaru.</p>
                            <div className="flex items-center space-x-3">
                                {instagramUrl && (
                                    <a
                                        href={instagramUrl}
                                        target="_blank"
                                        rel="noreferrer"
                                        aria-label="Instagram"
                                        className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
                                    >
                                        <Instagram className="w-4 h-4" />
                                    </a>
                                )}
                                {facebookUrl && (
                                    <a
                                        href={facebookUrl}
                                        target="_blank"
                                        rel="noreferrer"
                                        aria-label="Facebook"
                                        className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
                                    >
                                        <Facebook className="w-4 h-4" />
                                    </a>
                                )}
                                {tiktokUrl && (
                                    <a
                                        href={tiktokUrl}
                                        target="_blank"
                                        rel="noreferrer"
                                        aria-label="TikTok"
                                        className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
                                    >
                                        <TiktokIcon className="w-4 h-4" />
                                    </a>
                                )}
                            </div>
                        </div>
                    </div>

                    <div className="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-amber-100/30 flex flex-col sm:flex-row justify-between items-center text-[10px] text-slate-400 font-light space-y-4 sm:space-y-0">
                        <p>&copy; {new Date().getFullYear()} {appName}. Hak Cipta Dilindungi.</p>
                    </div>
                </footer>

                {/* Product Modal */}
                <ProductModal product={activeProduct} onClose={() => setActiveProduct(null)} contactPhone={contactPhone} />
                <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} contactPhone={contactPhone} />
            </div>
        </>
    );
}