@extends('layouts.app')

@section('content')
<!-- Hero Slider Section -->
<section class="relative h-[650px] overflow-hidden bg-slate-900" x-data="{ 
    activeSlide: 0, 
    slides: [
        @forelse($slides as $slide)
        { 
            image: '{{ asset('storage/' . $slide->image) }}', 
            title_en: '{{ addslashes($slide->title_en) }}', 
            title_np: '{{ addslashes($slide->title_np) }}',
            desc_en: '{{ addslashes($slide->description_en) }}',
            desc_np: '{{ addslashes($slide->description_np) }}',
            link: '{{ $slide->link ?: '/products' }}'
        },
        @empty
        { 
            image: '{{ asset('images/hero/slide1.png') }}', 
            title_en: 'Quality Cleanness for Every Home', 
            title_np: 'सफा र स्वच्छ घरको लागि गुणस्तरीय साबुन',
            desc_en: 'Premium laundry soaps crafted for everyday efficiency.',
            desc_np: 'दैनिक दक्षताका लागि बनाइएको प्रिमियम लुगा धुने साबुन।'
        },
        { 
            image: '{{ asset('images/hero/slide2.png') }}', 
            title_en: 'Detergent Powder & Soap Cakes', 
            title_np: 'डिटर्जेन्ट पाउडर र साबुन केक',
            desc_en: 'Advanced formulas for the toughest stains.',
            desc_np: 'कठिन दागहरूका लागि उन्नत सूत्रहरू।'
        },
        { 
            image: '{{ asset('images/hero/slide3.png') }}', 
            title_en: '20+ Tons of Daily Production', 
            title_np: 'दैनिक २० टन भन्दा बढी उत्पादन',
            desc_en: 'Scale and variety in household cleaning products.',
            desc_np: 'घरायसी सरसफाइका उत्पादनहरूमा ठूलो मात्रा र विविधता।'
        }
        @endforelse
    ],
    init() {
        if(this.slides.length > 1) {
            setInterval(() => {
                this.activeSlide = (this.activeSlide + 1) % this.slides.length;
            }, 5000);
        }
    }
}">
    <!-- Slides -->
    <template x-for="(slide, index) in slides" :key="index">
        <div x-show="activeSlide === index" 
             x-transition:enter="transition ease-out duration-1000"
             x-transition:enter-start="opacity-0 transform scale-105"
             x-transition:enter-end="opacity-100 transform scale-100"
             x-transition:leave="transition ease-in duration-1000"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="absolute inset-0">
            <!-- Background Image -->
            <img :src="slide.image" class="w-full h-full object-cover opacity-60" :alt="slide.title_en">
            
            <!-- Overlay Content -->
            <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-transparent flex items-center">
                <div class="container mx-auto px-4">
                    <div class="max-w-3xl">
                        <h1 class="text-5xl md:text-7xl font-black text-white mb-6 font-heading leading-tight" 
                            x-text="{{ app()->getLocale() == 'en' ? 'slide.title_en' : 'slide.title_np' }}"></h1>
                        <p class="text-xl md:text-2xl text-blue-100 mb-10 leading-relaxed" 
                           x-text="{{ app()->getLocale() == 'en' ? 'slide.desc_en' : 'slide.desc_np' }}"></p>
                        
                        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                            <a :href="slide.link || '/products'" class="inline-block bg-white text-blue-700 px-10 py-4 rounded-full font-bold text-lg hover:bg-blue-50 transition shadow-2xl text-center">@lang('Explore Catalog')</a>
                            <a href="/contact" class="inline-block bg-blue-600 text-white border border-blue-400 px-10 py-4 rounded-full font-bold text-lg hover:bg-blue-700 transition text-center">@lang('Request Quote')</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Slider Controls -->
    <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex space-x-3 z-20">
        <template x-for="(slide, index) in slides" :key="index">
            <button @click="activeSlide = index" 
                    :class="activeSlide === index ? 'w-12 bg-white' : 'w-3 bg-white/50'" 
                    class="h-3 rounded-full transition-all duration-500 hover:bg-white"></button>
        </template>
    </div>
</section>

<!-- Company Info -->
<section class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-3xl font-bold text-slate-900 mb-6 font-heading">@lang('Our Vision & Mission')</h2>
                <div class="space-y-6">
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-lg mr-4">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">@lang('Our Vision')</h3>
                            <p class="text-slate-600">{{ $profile->{'vision_' . app()->getLocale()} ?? $profile->vision }}</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-lg mr-4">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-1">@lang('Our Mission')</h3>
                            <p class="text-slate-600">{{ $profile->{'mission_' . app()->getLocale()} ?? $profile->mission }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-blue-50 p-8 rounded-2xl text-center">
                    <div class="text-4xl font-black text-blue-700 mb-2 font-heading">10+</div>
                    <div class="text-sm font-semibold text-slate-600 uppercase tracking-wider">@lang('Years Exp.')</div>
                </div>
                <div class="bg-slate-50 p-8 rounded-2xl text-center">
                    <div class="text-4xl font-black text-slate-800 mb-2 font-heading">50+</div>
                    <div class="text-sm font-semibold text-slate-600 uppercase tracking-wider">@lang('Distributors')</div>
                </div>
                <div class="bg-slate-50 p-8 rounded-2xl text-center">
                    <div class="text-4xl font-black text-slate-800 mb-2 font-heading">100%</div>
                    <div class="text-sm font-semibold text-slate-600 uppercase tracking-wider">@lang('Pure Quality')</div>
                </div>
                <div class="bg-blue-50 p-8 rounded-2xl text-center">
                    <div class="text-4xl font-black text-blue-700 mb-2 font-heading">24/7</div>
                    <div class="text-sm font-semibold text-slate-600 uppercase tracking-wider">@lang('Support')</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="py-20 bg-slate-50">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold mb-4 font-heading">@lang('Our Best Selling Products')</h2>
        <p class="text-slate-600 mb-12 max-w-xl mx-auto">@lang('Explore our range of laundry soaps designed to tackle the toughest stains while being gentle on fabrics.')</p>
        
        <div class="grid md:grid-cols-4 gap-8">
            @forelse($featuredProducts as $item)
            <a href="{{ route('product.detail', $item->slug) }}" class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition group flex flex-col h-full">
                <div class="h-48 bg-slate-200 flex items-center justify-center relative overflow-hidden">
                    <div class="bg-blue-600 text-white absolute top-4 left-4 z-10 px-3 py-1 text-xs font-bold rounded-full uppercase">{{ $item->usage_type }}</div>
                    @if($item->image)
                        <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->{'name_' . app()->getLocale()} ?? $item->name_en }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    @else
                        <span class="text-slate-400 group-hover:scale-110 transition duration-500">
                            <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 20 20"><path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path><path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                        </span>
                    @endif
                </div>
                <div class="p-6 text-left flex-grow flex flex-col">
                    <h3 class="font-bold text-lg mb-2 text-slate-900">{{ $item->{'name_' . app()->getLocale()} ?? $item->name_en }}</h3>
                    <div class="flex justify-between items-center mt-auto">
                        <span class="text-blue-700 font-black text-lg">Rs. {{ $item->price }}</span>
                        <span class="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold rounded uppercase">{{ $item->weight }}</span>
                    </div>
                </div>
            </a>
            @empty
            <div class="col-span-4 py-10 bg-white rounded-xl border-2 border-dashed border-slate-200">
                <p class="text-slate-400 italic">No products available at the moment. Please check back later.</p>
            </div>
            @endforelse
        </div>
        
        <div class="mt-12">
            <a href="/products" class="inline-flex items-center text-blue-700 font-bold hover:underline">
                View All Products
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-20 bg-blue-900 text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-6 font-heading">Ready to boost your business?</h2>
        <p class="text-blue-200 mb-10 text-lg max-w-2xl mx-auto">We are looking for dedicated distributors across Nepal. Join the MYC Sabun family and grow with us.</p>
        <a href="/contact" class="bg-blue-500 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-blue-400 transition shadow-lg">Become a Distributor</a>
    </div>
</section>
@endsection