<?php $__env->startSection('title', 'Beranda - Tempe Zhi'); ?>

<?php $__env->startSection('content'); ?>
    
    <section class="relative bg-green-950 py-32 overflow-hidden min-h-[500px] flex items-center" 
        x-data="{ 
            activeSlide: 0,
            images: [
                '<?php echo e(asset('images/slide1.jpeg')); ?>',
                '<?php echo e(asset('images/slide2.png')); ?>',
                '<?php echo e(asset('images/slide3.png')); ?>',
                '<?php echo e(asset('images/slide4.png')); ?>'
            ],
            init() {
                setInterval(() => {
                    this.activeSlide = (this.activeSlide + 1) % this.images.length;
                }, 7000); 
            }
        }">
        
        
        <div class="absolute inset-0 z-0">
            <template x-for="(image, index) in images" :key="index">
                <div class="absolute inset-0 w-full h-full transition-transform duration-1000 ease-in-out"
                     :class="{
                        'translate-x-0 opacity-100 z-10': activeSlide === index,
                        '-translate-x-full opacity-0 z-0': activeSlide > index || (activeSlide === 0 && index === images.length - 1),
                        'translate-x-full opacity-0 z-0': activeSlide < index && !(activeSlide === 0 && index === images.length - 1)
                     }">
                    
                    <img :src="image" alt="Background Tempe Zhi" class="w-full h-full object-cover">
                </div>
            </template>
            
            <div class="absolute inset-0 bg-gradient-to-r from-black/10 via-black-950/70 to-black/80 z-20"></div>
        </div>

        
        <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 relative z-30 w-full text-left">
            <div class="max-w-2xl"> 
                <span class="text-yellow-400 font-black tracking-widest uppercase text-xs sm:text-sm mb-4 block">
                    Tradisi Lokal, Kualitas Global
                </span>
                <h1 class="text-5xl md:text-6xl lg:text-7xl font-black text-white mb-6 leading-tight">
                    TEMPE ZHI <br> 
                    <span class="text-green-400 text-3xl md:text-4xl lg:text-5xl font-light italic">Authentic & Nutritious</span>
                </h1>
                <p class="text-gray-200 mb-10 text-base md:text-lg font-medium leading-relaxed">
                    Menghadirkan kebaikan protein nabati melalui proses pembuatan tradisional yang higienis dan bahan pilihan terbaik.
                </p>
                <div class="flex justify-start">
                    <a href="#produk-unggulan" class="px-8 py-4 bg-green-800 hover:bg-green-700 text-white font-bold rounded-full transition-all shadow-xl active:scale-95">
                        Lihat Produk
                    </a>
                </div>
            </div>
        </div>

        
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-30 flex gap-2">
            <template x-for="(image, index) in images" :key="index">
                <button @click="activeSlide = index" 
                        class="h-2 rounded-full transition-all duration-300"
                        :class="activeSlide === index ? 'w-8 bg-yellow-400' : 'w-2 bg-white/50 hover:bg-white'"></button>
            </template>
        </div>
    </section>

    <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-6 text-center">
            <h2 class="text-green-900 font-black text-3xl uppercase tracking-tighter mb-6">Tentang Kami</h2>
            <p class="text-gray-600 text-lg leading-relaxed mb-8">
                Tempe Zhi hadir dengan ciri khas kedelai tanpa kulit yang diproses secara higienis. Standar kebersihan ini kami jaga untuk memastikan setiap potong tempe yang Anda nikmati memiliki kualitas premium dengan rasa kacang kedelai yang autentik.
            </p>
            
        </div>
    </section>

    <section class="py-24 bg-[#fdfbf7] border-y border-gray-100">
        <div class="max-w-7xl mx-auto px-6">
            <?php $__empty_1 = true; $__currentLoopData = $latestArticles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $article): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
                    <div class="w-full lg:w-1/2">
                        <div class="relative overflow-hidden rounded-lg shadow-2xl">
                            <?php if($article->image): ?>
                                <img src="<?php echo e(asset('storage/' . $article->image)); ?>" alt="<?php echo e($article->title); ?>" class="w-full h-auto object-cover">
                            <?php else: ?>
                                <div class="aspect-video bg-gray-200 flex items-center justify-center text-gray-400 font-bold uppercase italic">Zhi Article</div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 flex flex-col text-center lg:text-left">
                        <h3 class="text-green-900 font-black text-5xl md:text-6xl mb-8 uppercase leading-[0.9] tracking-tighter">
                            <?php echo e($article->title); ?>

                        </h3>
                        <div class="text-gray-600 text-lg leading-relaxed mb-10 font-medium italic">
                            <?php echo Str::limit(strip_tags($article->content), 300); ?>

                        </div>
                        <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-8">
                            <a href="<?php echo e(route('artikel.show', $article->slug)); ?>" class="text-lg font-black text-green-700 border-b-4 border-green-700/20 hover:border-green-700 transition-all pb-1 uppercase tracking-widest">
                                Baca Selengkapnya
                            </a>
                            <a href="<?php echo e(route('artikel.index')); ?>" class="text-sm font-bold text-gray-400 hover:text-green-600 uppercase tracking-widest">
                                Lihat Berita Lainnya
                            </a>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <p class="text-center text-gray-300 font-bold uppercase tracking-widest">Belum ada informasi terbaru</p>
            <?php endif; ?>
        </div>
    </section>

    <section id="produk-unggulan" class="py-24 bg-[#CEE2CE] border-t border-gray-200">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex justify-between items-end mb-12 border-b-2 border-green-800/20 pb-4">
                <h3 class="text-3xl font-black text-yellow-500 uppercase tracking-tighter">Produk Pilihan</h3>
                <a href="<?php echo e(route('produk.index')); ?>" class="text-yellow-500 font-bold text-sm hover:underline uppercase tracking-widest">Lihat Katalog</a>
            </div>

            <?php if(isset($products) && $products->count() > 0): ?>
                <?php $product = $products->first(); ?>
                <div class="flex flex-col lg:flex-row-reverse items-center gap-8 lg:gap-16">
                    <div class="w-full lg:w-5/12">
                        <div class="relative group">
                            <div class="relative aspect-square overflow-hidden rounded-3xl shadow-2xl bg-white">
                                <?php if($product->foto): ?>
                                    <img src="<?php echo e(asset('storage/' . $product->foto)); ?>" alt="<?php echo e($product->nama_produk); ?>" class="w-full h-full object-cover ">
                                <?php else: ?>
                                    <div class="w-full h-full flex flex-col items-center justify-center text-green-800/20">
                                        <svg class="w-20 h-20 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                        <span class="font-black uppercase tracking-tighter text-xl">Zhi Product</span>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>

                    <div class="w-full lg:w-7/12 flex flex-col">
                        <div class="mb-3">
                            <h2 class="text-5xl md:text-5xl font-black text-green-900 uppercase leading-none mb-8 tracking-tighter">
                                <?php echo e($product->nama_produk); ?>

                            </h2>
                            <p class="text-yellow-600 font-bold tracking-wide">Berat Produk <?php echo e($product->berat); ?> <?php echo e($product->satuan); ?></p>
                        </div>
                        <p class="text-green-900/70 text-lg leading-relaxed mb-8 max-w-xl">
                            <?php echo e(Str::limit(strip_tags($product->deskripsi), 160)); ?>

                        </p>
                        <div class="flex items-baseline gap-2 mb-5">
                            <span class="text-4xl font-bold text-green-900 tracking-tighter"> Rp <?php echo e(number_format($product->harga, 0, ',', '.')); ?></span>
                        </div>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <a href="<?php echo e(route('produk.show', $product->id)); ?>" class="flex-1 py-5 bg-green-800 text-white text-center font-black uppercase tracking-widest rounded-2xl hover:bg-green-950 transition-all shadow-lg active:scale-95">
                                Detail Produk
                            </a>
                        </div>
                    </div>
                </div>
            <?php else: ?>
                <div class="py-20 text-center bg-white/50 rounded-[2.5rem] border-2 border-dashed border-green-800/20">
                    <p class="text-green-900 font-bold uppercase tracking-widest opacity-40">Produk Belum Tersedia</p>
                </div>
            <?php endif; ?>
        </div>
    </section>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.frontend', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\TempeZhi\resources\views/welcome.blade.php ENDPATH**/ ?>