@extends('layouts.app')

@section('title', 'Jouwdriedee.nl | 3D Prints, Fidget Toys, Pokémon & Custom Printservice')

@section('content')
<!-- Hero Section (Professioneel, Helder & Sfeervol) -->
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/60 via-slate-50 to-[#FFFDF9] pt-8 pb-14 sm:pt-14 sm:pb-20 border-b border-slate-200/70">
    <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">
                
                <div class="inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-white border border-slate-200 shadow-2xs text-slate-800 text-xs font-bold">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                    <span>Precisie 3D Printstudio in Nederland</span>
                </div>

                <h1 class="font-heading text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 leading-[1.15]">
                    Gedetailleerde 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 & collectibles.</span>
                </h1>

                <p class="text-sm sm:text-base text-slate-600 max-w-xl mx-auto lg:mx-0 font-normal leading-relaxed">
                    Van soepel bewegende kristaldraken en geometrische Pokémon planters tot filmprops op schaal. Haarscherp geprint in hoogwaardig Bio-PLA, PETG of flexibel TPU — of upload direct jouw eigen 3D bestand.
                </p>

                <!-- Action CTA's -->
                <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-amber-400 hover:bg-amber-300 text-slate-950 font-black text-sm flex items-center justify-center space-x-2 shadow-xs">
                        <span>Bekijk de Collectie</span>
                        <i data-lucide="arrow-right" class="w-4 h-4"></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-bold text-sm flex items-center justify-center space-x-2 shadow-2xs">
                        <i data-lucide="upload-cloud" class="w-4 h-4 text-rose-500"></i>
                        <span>Eigen 3D Model Printen</span>
                    </a>
                </div>

                <!-- Technische specificaties / Kwaliteitsbadges -->
                <div class="pt-4 grid grid-cols-3 gap-2 sm:gap-4 max-w-md mx-auto lg:mx-0">
                    <div class="p-3 bg-white border border-slate-200/80 rounded-2xl shadow-2xs text-center">
                        <div class="text-base sm:text-xl font-black text-slate-900 font-heading">0.12 mm</div>
                        <div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">Minimale laaghoogte</div>
                    </div>
                    <div class="p-3 bg-white border border-slate-200/80 rounded-2xl shadow-2xs text-center">
                        <div class="text-base sm:text-xl font-black text-slate-900 font-heading">Bambu Lab</div>
                        <div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">X1-Carbon Precisie</div>
                    </div>
                    <div class="p-3 bg-white border border-slate-200/80 rounded-2xl shadow-2xs text-center">
                        <div class="text-base sm:text-xl font-black text-slate-900 font-heading">2-3 Dagen</div>
                        <div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">Verzending via PostNL</div>
                    </div>
                </div>

            </div>

            <!-- Right Hero Card / Werkelijke 3D Print Productfoto -->
            <div class="lg:col-span-5 relative">
                <div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-200 shadow-xl shadow-slate-200/60">
                    
                    <div class="absolute top-6 right-6 bg-slate-900/90 backdrop-blur-xs text-white font-bold text-[10px] sm:text-xs px-3 py-1 rounded-full shadow-sm z-10">
                        Meest gekozen print
                    </div>

                    <div class="relative h-64 sm:h-84 rounded-2xl overflow-hidden bg-slate-100">
                        <img 
                            src="/images/products/crystal-dragon.jpg" 
                            alt="Articulated Kristaldraak 3D Print" 
                            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-bold uppercase tracking-wider text-rose-500 block">Fidget & Sensory</span>
                                <h3 class="font-heading font-black text-slate-900 text-xs sm:text-sm">Articulated Kristaldraak</h3>
                            </div>
                            <div class="text-right">
                                <span class="text-[10px] text-slate-400 block font-semibold">Vanaf</span>
                                <span class="font-heading font-black text-slate-900 text-xs sm:text-sm">€ 17,95</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3 flex items-center justify-between text-[11px] text-slate-500 font-semibold px-1">
                        <span class="flex items-center space-x-1">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                            <span>Print-in-place scharnieren</span>
                        </span>
                        <span class="flex items-center space-x-1">
                            <span>Kleur naar keuze selecteerbaar</span>
                        </span>
                    </div>
                </div>
            </div>

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

<!-- Categorieën Grid met Echte Foto's -->
<section class="py-12 sm:py-16 bg-white border-b border-slate-200/70">
    <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-2">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-rose-500">Collecties</span>
                <h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Ontdek per categorie</h2>
                <p class="text-xs text-slate-500 mt-1">Selecteer een categorie voor alle beschikbare modellen, formaten en kleurstalen.</p>
            </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>Alle prints bekijken</span>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            <!-- 1. Fidget Toys -->
            <a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
                <div class="h-44 overflow-hidden bg-slate-100">
                    <img src="/images/categories/fidget-toys.jpg" alt="Fidget Toys 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-4 sm:p-5">
                    <span class="text-[10px] font-bold text-indigo-600 uppercase tracking-wider block">Beweegbare Scharnieren</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Fidget Toys & Sensory</h3>
                    <p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Kristaldraken, wriemel-slakken en compacte folding cubes met soepel klikgeluid.</p>
                </div>
            </a>

            <!-- 2. Pokémon -->
            <a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
                <div class="h-44 overflow-hidden bg-slate-100">
                    <img src="/images/categories/pokemon-3d.jpg" alt="Pokémon 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-4 sm:p-5">
                    <span class="text-[10px] font-bold text-amber-600 uppercase tracking-wider block">Gedetailleerde Figuren</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Pokémon 3D Prints</h3>
                    <p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Low-poly Pikachu planters, beweegbare Charizard, sluitende Pokéballs en Gengar.</p>
                </div>
            </a>

            <!-- 3. Film & Popculture -->
            <a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
                <div class="h-44 overflow-hidden bg-slate-100">
                    <img src="/images/categories/film-popculture.jpg" alt="Film & Gaming 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-4 sm:p-5">
                    <span class="text-[10px] font-bold text-rose-500 uppercase tracking-wider block">Collectibles & Display</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Film, Gaming & Props</h3>
                    <p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Lightsaber standaarden, Thor Mjolnir bureau-organizers en gedetailleerde Grogu busts.</p>
                </div>
            </a>

            <!-- 4. Eigen 3D Bestand Printen -->
            <a href="{{ route('custom.request') }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
                <div class="h-44 overflow-hidden bg-slate-100">
                    <img src="/images/categories/eigen-model.jpg" alt="Eigen STL Model Printen" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-4 sm:p-5">
                    <span class="text-[10px] font-bold text-emerald-600 uppercase tracking-wider block">Direct Online Bestellen</span>
                    <h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Eigen 3D Model Printen</h3>
                    <p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Upload direct jouw STL of 3MF bestand en kies schaal, materiaal en filamentkleur.</p>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- Uitgelichte Prints Showcase -->
<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-bold uppercase tracking-wider text-rose-500">Selectie</span>
                <h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Populaire modellen</h2>
                <p class="text-xs text-slate-500 mt-1">Elk item wordt op bestelling geprint in jouw gewenste kleur en met de hand nagekeken.</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>Volledige catalogus</span>
                <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
            </a>
        </div>

        <!-- 2 Kolommen 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-200/80 shadow-xs hover:shadow-lg overflow-hidden flex flex-col justify-between group">
                    
                    <!-- Afbeelding & Categorie Badge -->
                    <div class="relative h-44 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-md bg-white/90 backdrop-blur-xs text-slate-900 text-[9px] sm:text-[10px] font-bold 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-medium items-center space-x-1">
                                <i data-lucide="clock" class="w-3 h-3 text-sky-400"></i>
                                <span>{{ $product->print_time_hours }}u printtijd</span>
                            </div>
                        @endif
                    </div>

                    <!-- Inhoud -->
                    <div class="p-3.5 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-semibold 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-3 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-bold transition flex items-center space-x-1 shadow-2xs">
                                <span>Configuratie</span>
                                <i data-lucide="chevron-right" class="w-3 h-3"></i>
                            </a>
                        </div>
                    </div>

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

<!-- Direct Eigen Model Bestellen Banner -->
<section class="py-12 sm:py-16 bg-slate-900 text-white relative overflow-hidden border-t border-slate-800">
    <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-slate-800/80 border border-slate-700/80 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-slate-700 text-slate-200 text-xs font-bold inline-flex items-center space-x-1.5">
                    <i data-lucide="file-code" class="w-3.5 h-3.5 text-rose-400"></i>
                    <span>Eigen CAD / STL bestand laten printen</span>
                </span>
                <h2 class="font-heading text-2xl sm:text-4xl font-black tracking-tight text-white">
                    Upload jouw eigen 3D bestand & bestel direct online
                </h2>
                <p class="text-xs sm:text-sm text-slate-300 leading-relaxed font-normal">
                    Heb je een .STL of .3MF bestand gedownload van MakerWorld of Printables? Upload het bestand, selecteer gewenste afmetingen en kies het materiaal. Wij zorgen voor een strakke slice en nette nabewerking.
                </p>
            </div>
            <a href="{{ route('custom.request') }}" class="playful-btn px-8 py-4 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs uppercase tracking-wider transition shadow-md flex items-center space-x-2 flex-shrink-0">
                <i data-lucide="upload-cloud" class="w-4 h-4"></i>
                <span>Direct Model Uploaden & Bestellen</span>
            </a>
        </div>
    </div>
</section>
@endsection