@extends('layouts.app')

@section('title', 'Jouwdriedee.nl ✨ Dé 3D Print Webshop voor Fidget Toys & Pokémon')

@section('content')
<!-- Hero Section (Vrolijk, Modern & Niet Lomp) -->
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/70 via-rose-50/40 to-[#FFFDF9] pt-8 pb-14 sm:pt-14 sm:pb-20 border-b border-slate-200/60">
    
    <!-- Subtiele pastel bollen -->
    <div class="absolute top-6 left-6 w-32 h-32 bg-amber-200/40 rounded-full blur-2xl pointer-events-none"></div>
    <div class="absolute top-1/2 right-8 w-48 h-48 bg-rose-200/30 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-4 left-1/3 w-40 h-40 bg-sky-200/30 rounded-full blur-2xl pointer-events-none"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
            
            <!-- Left Hero Content -->
            <div class="lg:col-span-7 space-y-4 sm:space-y-6 text-center lg:text-left">
                
                <!-- Pill Badge -->
                <div class="inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-white/90 border border-amber-200 shadow-2xs text-slate-800 text-xs font-black">
                    <span class="animate-pulse text-sm">✨</span>
                    <span class="tracking-wide">Dé gezelligste 3D print webshop van Nederland!</span>
                </div>

                <h1 class="font-heading text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 leading-[1.18]">
                    Vrolijke 3D prints, <br class="hidden sm:inline">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-rose-500 via-amber-500 to-indigo-600">fidget toys & Pokémon!</span> 🌀⚡
                </h1>

                <p class="text-sm sm:text-base text-slate-600 max-w-xl mx-auto lg:mx-0 font-medium leading-relaxed">
                    Op zoek naar een soepel bewegende kristaldraak, een toffe Pikachu plantenbak of film collectibles? Kies je favoriete printkleur of bestel direct jouw eigen 3D model!
                </p>

                <!-- Action CTA's (Modern, Smooth & Touch Friendly) -->
                <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-2">
                    <a href="{{ route('catalog') }}" class="playful-btn w-full sm:w-auto px-7 py-3.5 rounded-2xl bg-gradient-to-r from-amber-400 via-rose-400 to-rose-500 hover:opacity-95 text-slate-950 font-black text-sm flex items-center justify-center space-x-2 shadow-md shadow-rose-500/20">
                        <span>Ontdek Alle Prints 🎁</span>
                        <i data-lucide="arrow-right" class="w-4 h-4 stroke-[2.5]"></i>
                    </a>
                    <a href="{{ route('custom.request') }}" class="playful-btn w-full sm:w-auto px-7 py-3.5 rounded-2xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-800 font-extrabold text-sm flex items-center justify-center space-x-2 shadow-xs">
                        <span>Eigen Model Bestellen 🚀</span>
                    </a>
                </div>

                <!-- USP badges -->
                <div class="pt-4 grid grid-cols-3 gap-2 sm:gap-3 max-w-md mx-auto lg:mx-0">
                    <div class="p-2.5 sm:p-3 bg-white/90 border border-slate-100 rounded-2xl shadow-xs text-center">
                        <div class="text-base sm:text-xl font-black text-rose-500 font-heading">100% Bio</div>
                        <div class="text-[10px] sm:text-[11px] font-bold text-slate-500">Kindvriendelijk PLA</div>
                    </div>
                    <div class="p-2.5 sm:p-3 bg-white/90 border border-slate-100 rounded-2xl shadow-xs text-center">
                        <div class="text-base sm:text-xl font-black text-amber-500 font-heading">9+ Kleuren</div>
                        <div class="text-[10px] sm:text-[11px] font-bold text-slate-500">Zijdeglans & Mat</div>
                    </div>
                    <div class="p-2.5 sm:p-3 bg-white/90 border border-slate-100 rounded-2xl shadow-xs text-center">
                        <div class="text-base sm:text-xl font-black text-indigo-500 font-heading">PostNL</div>
                        <div class="text-[10px] sm:text-[11px] font-bold text-slate-500">2-3 Dagen in huis</div>
                    </div>
                </div>

            </div>

            <!-- Right Hero Card / Showcase (Verfijnd & Speels) -->
            <div class="lg:col-span-5 relative">
                <div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-100 shadow-xl shadow-slate-200/50">
                    
                    <div class="absolute -top-3 -right-2 bg-gradient-to-r from-rose-500 to-amber-500 text-white font-black text-[11px] px-3 py-1 rounded-full shadow-md z-10 flex items-center space-x-1">
                        <span>🔥</span>
                        <span>Favoriet</span>
                    </div>

                    <div class="relative h-64 sm:h-80 rounded-2xl overflow-hidden bg-slate-100">
                        <img 
                            src="https://images.unsplash.com/photo-1563089145-599997674d42?auto=format&fit=crop&w=1000&q=80" 
                            alt="3D Kristaldraak" 
                            class="w-full h-full object-cover object-center hover:scale-105 transition-transform duration-500"
                        >
                        
                        <div class="absolute bottom-2.5 left-2.5 right-2.5 p-3 rounded-xl bg-white/95 backdrop-blur-xs border border-slate-100 shadow-sm flex items-center justify-between">
                            <div>
                                <span class="text-[10px] font-black uppercase text-amber-600 flex items-center space-x-1">
                                    <span>🌀</span>
                                    <span>Fidget & Sensory</span>
                                </span>
                                <h3 class="font-heading font-black text-slate-900 text-xs sm:text-sm">Articulated Kristaldraak</h3>
                            </div>
                            <div class="bg-amber-100 text-amber-900 px-2.5 py-1 rounded-lg font-heading font-black text-xs sm:text-sm">
                                € 17,95
                            </div>
                        </div>
                    </div>

                    <div class="mt-3 flex items-center justify-between text-[11px] font-bold text-slate-500 px-1">
                        <span class="flex items-center space-x-1">
                            <span>🎨</span>
                            <span>Kies jouw gewenste kleur</span>
                        </span>
                        <span class="flex items-center space-x-1">
                            <span>🌱</span>
                            <span>100% Veilig Bio-materiaal</span>
                        </span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Categorieën Grid (4 Duidelijke en Toegankelijke Blokken) -->
<section class="py-10 sm:py-14 bg-white border-b border-slate-200/60">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row sm:items-end justify-between mb-6 gap-2">
            <div>
                <span class="text-xs font-black uppercase tracking-wider text-rose-500 flex items-center space-x-1">
                    <span>🧸</span>
                    <span>Direct naar categorie</span>
                </span>
                <h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Kies jouw favoriete thema</h2>
            </div>
            <a href="{{ route('catalog') }}" class="text-xs font-bold text-rose-600 hover:text-rose-700 flex items-center space-x-1 self-start sm:self-auto">
                <span>Bekijk alle 3D prints</span>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
            </a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5">
            <!-- 1. Fidget Toys -->
            <a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-indigo-50/80 to-purple-50/80 border border-indigo-100 hover:border-indigo-300 text-left flex flex-col justify-between group shadow-xs">
                <div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
                    🌀
                </div>
                <div>
                    <span class="text-[10px] font-extrabold text-indigo-500 uppercase tracking-wider block">Beweegbaar & ASMR</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-indigo-600 transition">Fidget Toys</h3>
                    <p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Draken, slakken, cubes & spinners</p>
                </div>
            </a>

            <!-- 2. Pokémon -->
            <a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-amber-50/80 to-yellow-50/80 border border-amber-100 hover:border-amber-300 text-left flex flex-col justify-between group shadow-xs">
                <div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
                    ⚡
                </div>
                <div>
                    <span class="text-[10px] font-extrabold text-amber-600 uppercase tracking-wider block">Gotta Print 'Em All</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-amber-600 transition">Pokémon Prints</h3>
                    <p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Pikachu, Charizard, Pokéball & Gengar</p>
                </div>
            </a>

            <!-- 3. Film & Popculture -->
            <a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-rose-50/80 to-pink-50/80 border border-rose-100 hover:border-rose-300 text-left flex flex-col justify-between group shadow-xs">
                <div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
                    🎬
                </div>
                <div>
                    <span class="text-[10px] font-extrabold text-rose-500 uppercase tracking-wider block">Iconische Items</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Film & Gaming</h3>
                    <p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Star Wars Grogu, Thor Mjolnir & meer</p>
                </div>
            </a>

            <!-- 4. Eigen Model Bestellen -->
            <a href="{{ route('custom.request') }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-emerald-50/80 to-teal-50/80 border border-emerald-100 hover:border-emerald-300 text-left flex flex-col justify-between group shadow-xs">
                <div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
                    🚀
                </div>
                <div>
                    <span class="text-[10px] font-extrabold text-emerald-600 uppercase tracking-wider block">Direct Online</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-emerald-600 transition">Eigen Model Printen</h3>
                    <p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Upload STL / 3MF en bestel direct</p>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- Uitgelichte Prints Showcase (Mobile-First 2-koloms / Desktop 3-koloms) -->
<section class="py-12 sm:py-16 bg-[#FFFDF9]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-3">
            <div>
                <span class="text-xs font-black uppercase tracking-wider text-amber-600 flex items-center space-x-1">
                    <span>🌟</span>
                    <span>Populairste Prints</span>
                </span>
                <h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Direct te bestellen in jouw kleur</h2>
                <p class="text-xs text-slate-500 mt-1">Kies je favoriet, selecteer je lievelingskleur en wij starten de printer!</p>
            </div>
            <a href="{{ route('catalog') }}" class="playful-btn px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-800 text-xs font-bold transition flex items-center space-x-1.5 self-start sm:self-auto shadow-2xs">
                <span>Alle prints bekijken</span>
                <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
            </a>
        </div>

        <!-- 2 Kolommen op mobiel, 3 op desktop -->
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-6">
            @foreach($featuredProducts as $product)
                <div class="playful-card rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-xs hover:shadow-lg overflow-hidden flex flex-col justify-between group">
                    
                    <!-- Afbeelding & Badges -->
                    <div class="relative h-40 sm:h-60 overflow-hidden bg-slate-100">
                        <img 
                            src="{{ $product->image_url }}" 
                            alt="{{ $product->name }}" 
                            class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500"
                            loading="lazy"
                        >
                        @if($product->category)
                            <div class="absolute top-2 left-2 sm:top-3 sm:left-3">
                                <span class="px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-lg bg-white/90 backdrop-blur-xs text-slate-900 text-[9px] sm:text-[10px] font-black shadow-2xs">
                                    {{ $product->category->name }}
                                </span>
                            </div>
                        @endif

                        @if($product->print_time_hours)
                            <div class="hidden sm:flex absolute bottom-2.5 left-2.5 px-2 py-0.5 rounded-md bg-slate-900/80 backdrop-blur-xs text-white text-[10px] font-bold items-center space-x-1">
                                <span>⏱️</span>
                                <span>{{ $product->print_time_hours }}u</span>
                            </div>
                        @endif
                    </div>

                    <!-- Inhoud -->
                    <div class="p-3 sm:p-5 flex-1 flex flex-col justify-between space-y-3">
                        <div>
                            <h3 class="font-heading text-xs sm:text-base font-black text-slate-900 group-hover:text-rose-600 transition tracking-tight line-clamp-2">
                                <a href="{{ route('product.show', $product->slug) }}">
                                    {{ $product->name }}
                                </a>
                            </h3>
                            <p class="hidden sm:block text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">
                                {{ $product->short_description }}
                            </p>
                        </div>

                        <!-- Footer met prijs & actieknop -->
                        <div class="pt-2 sm:pt-3 border-t border-slate-100 flex items-center justify-between">
                            <div>
                                <span class="text-[9px] sm:text-[10px] text-slate-400 font-bold uppercase block">Vanaf</span>
                                <span class="font-heading text-sm sm:text-lg font-black text-slate-900">
                                    {{ $product->formatted_price }}
                                </span>
                            </div>

                            <a href="{{ route('product.show', $product->slug) }}" class="playful-btn px-2.5 sm:px-3.5 py-1.5 sm:py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-[10px] sm:text-xs font-black transition flex items-center space-x-1 shadow-2xs">
                                <span>Kleur 🎨</span>
                            </a>
                        </div>
                    </div>

                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Direct Eigen Model Bestellen Banner (Sleek & Duidelijk) -->
<section class="py-12 sm:py-16 bg-gradient-to-r from-rose-500 via-amber-500 to-indigo-600 text-white relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="p-6 sm:p-10 rounded-3xl bg-white/10 backdrop-blur-md border border-white/20 flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8">
            <div class="space-y-3 text-center lg:text-left max-w-2xl">
                <span class="px-3 py-1 rounded-full bg-white/20 text-white text-xs font-black inline-flex items-center space-x-1.5">
                    <span>💡</span>
                    <span>Zelf een gaaf model gevonden op MakerWorld of Printables?</span>
                </span>
                <h2 class="font-heading text-2xl sm:text-4xl font-black tracking-tight">
                    Bestel direct jouw eigen 3D bestand online! 🚀
                </h2>
                <p class="text-xs sm:text-sm text-white/90 leading-relaxed font-medium">
                    Upload jouw .STL, .3MF of .STEP bestand (of plak een MakerWorld link). Kies je formaat, materiaal en lievelingskleur en stop hem direct in je winkelmandje!
                </p>
            </div>
            <a href="{{ route('custom.request') }}" class="playful-btn px-8 py-4 rounded-2xl bg-white text-slate-950 hover:bg-slate-50 font-black text-xs uppercase tracking-wider transition shadow-lg flex items-center space-x-2 flex-shrink-0">
                <i data-lucide="upload-cloud" class="w-4 h-4 text-rose-500"></i>
                <span>Direct Eigen Model Bestellen ✨</span>
            </a>
        </div>
    </div>
</section>
@endsection