@extends('layouts.shop')

@section('title', 'Bienvenido a la Tienda | BasePro Shop')

@section('content')
<!-- Hero Section -->
<div class="relative bg-muted/30 overflow-hidden">
    <div class="container mx-auto px-4 md:px-8 py-16 md:py-24 flex flex-col items-center text-center">
        <h1 class="text-4xl md:text-6xl font-extrabold  mb-6 text-foreground animate-in fade-in slide-in-from-bottom-5 duration-700">
            Estilo que Define tu <span class="text-primary bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">Identidad</span>
        </h1>
        <p class="text-xl text-muted-foreground max-w-2xl mb-10 animate-in fade-in slide-in-from-bottom-5 duration-700 delay-100">
            Descubre nuestra nueva colección exclusiva. Calidad premium, diseño minimalista y la mejor experiencia de compra.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 animate-in fade-in slide-in-from-bottom-5 duration-700 delay-200">
            <a href="{{ route('shop.catalog') }}" class="inline-flex h-11 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                Explorar Catálogo
            </a>
            <a href="#featured" class="inline-flex h-11 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                Ver Novedades
            </a>
        </div>
    </div>
    
    <!-- Abstract Background Pattern -->
    <div class="absolute inset-0 -z-10 opacity-30 select-none pointer-events-none">
        <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#gradient)" />
            <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:var(--primary); stop-opacity:0.2" />
                    <stop offset="100%" style="stop-color:var(--secondary); stop-opacity:0.2" />
                </linearGradient>
            </defs>
        </svg>
    </div>
</div>

<!-- Featured Categories (Compact) -->
<div class="py-12 border-b">
    <div class="container mx-auto px-4 md:px-8">
        <div class="flex justify-center flex-wrap gap-4 md:gap-8">
            @foreach($categories as $category)
                <a href="{{ route('shop.catalog', ['category' => $category->slug]) }}" class="group flex flex-col items-center gap-2 hover:opacity-80 transition-opacity">
                    <div class="h-16 w-16 rounded-full bg-muted flex items-center justify-center group-hover:bg-primary/10 transition-colors">
                        <!-- Placeholder Icons based on Category Name or generic -->
                         <svg class="w-8 h-8 text-muted-foreground group-hover:text-primary transition-colors" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
                    </div>
                    <span class="text-sm font-medium">{{ $category->name }}</span>
                </a>
            @endforeach
        </div>
    </div>
</div>

<!-- Featured Products Grid -->
<div id="featured" class="container mx-auto px-4 md:px-8 py-16">
    <div class="flex items-center justify-between mb-8">
        <h2 class="text-3xl font-bold ">Últimos Lanzamientos</h2>
        <a href="{{ route('shop.catalog') }}" class="text-primary hover:underline font-medium flex items-center gap-1">
            Ver todo <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
        </a>
    </div>

    @if($featured->isEmpty())
        <div class="text-center py-20 text-muted-foreground">
            Próximamente nuevos productos.
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($featured as $product)
                <div class="group relative block h-full"
                     x-data="{ shown: false }" 
                     x-intersect="shown = true"
                     x-intersect:leave="shown = false"> 
                    <div :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'"
                         :style="{ transitionDelay: ({{ $loop->index }} % 4) * 100 + 'ms' }"
                         class="rounded-lg border bg-card text-card-foreground shadow-sm h-full hover:shadow-lg transition-all duration-1000 ease-out overflow-hidden flex flex-col">
                        <div class="aspect-square bg-muted relative overflow-hidden">
                            <a href="{{ route('shop.show', $product->slug) }}" class="block w-full h-full">
                                @if($product->image_path)
                                    <img 
                                        src="{{ $product->image_path }}" 
                                        alt="{{ $product->name }}" 
                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                                        loading="lazy"
                                    >
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-muted-foreground">Sin Imagen</div>
                                @endif
                            </a>

                            <!-- Offer Badge (Integrated Premium Design) -->
                            @if($product->compare_price && $product->compare_price > 0)
                                @php
                                    $discount = round((($product->compare_price - $product->price) / $product->compare_price) * 100);
                                @endphp
                                <div class="absolute top-3 left-3 transform transition-transform duration-300 hover:scale-110">
                                    <span class="bg-red-600 text-white text-[10px] font-black px-3 py-1.5 rounded-full shadow-lg uppercase  border border-white/10 flex items-center gap-2">
                                        Oferta 
                                        <span class="bg-white/20 px-1.5 py-0.5 rounded-md text-[9px] font-black tracking-normal">
                                            -{{ $discount }}%
                                        </span>
                                    </span>
                                </div>
                            @endif
                        </div>
                        <div class="p-4 flex flex-col flex-1">
                            @if($product->category)
                                <span class="text-xs text-muted-foreground block mb-2">{{ $product->category->name }}</span>
                            @endif
                            <a href="{{ route('shop.show', $product->slug) }}">
                                <h3 class="font-semibold text-sm line-clamp-2 mb-2 hover:text-primary transition-colors" title="{{ $product->name }}">
                                    {{ $product->name }}
                                </h3>
                            </a>
                            <div class="mt-auto flex items-baseline gap-2">
                                <span class="font-bold text-lg">${{ number_format($product->price, 2) }}</span>
                                @if($product->compare_price)
                                    <span class="text-sm text-muted-foreground line-through">
                                        ${{ number_format($product->compare_price, 2) }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
    
    <div class="mt-12 text-center">
        <a href="{{ route('shop.catalog') }}" class="inline-flex h-11 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground">
            Ver Catálogo Completo
        </a>
    </div>
</div>
@endsection