@extends('layouts.web')

@section('title', '- Bienvenida')

@section('content')
    <!-- Abstract Background Elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
        <div class="absolute -top-[25%] -left-[10%] w-[70%] h-[70%] rounded-full bg-primary/5 blur-[120px] animate-pulse"></div>
        <div class="absolute top-[20%] -right-[5%] w-[50%] h-[50%] rounded-full bg-blue-500/5 blur-[100px]"></div>
    </div>

    <!-- Navigation Header -->
    <header class="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-md">
        <div class="container mx-auto flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
            <div class="flex items-center gap-2">
                <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground overflow-hidden">
                    @if(!empty($settings['web_logo']))
                        <img src="/storage/{{ $settings['web_logo'] }}" alt="{{ $settings['site_name'] ?? 'Base Pro' }}" class="size-full object-cover">
                    @elseif(!empty($settings['site_logo']))
                        <img src="/storage/{{ $settings['site_logo'] }}" alt="{{ $settings['site_name'] ?? 'Base Pro' }}" class="size-full object-cover">
                    @else
                        <svg class="size-5 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
                        </svg>
                    @endif
                </div>
                <span class="text-xl font-bold ">{{ $settings['site_name'] ?? 'Base Pro' }}</span>
            </div>

            <nav class="flex items-center gap-4">
                <a href="{{ route('shop.catalog') }}" class="text-sm font-medium hover:text-primary transition-colors hidden md:block">
                    Catálogo
                </a>

                @if(auth('customer')->check())
                    <a href="{{ route('customer.dashboard') }}" class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
                        <svg class="mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
                        Mi Cuenta
                    </a>
                @elseif(auth('web')->check())
                     <a href="{{ route('dashboard.dashboard') }}" class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
                        Ir al Panel
                    </a>
@else
                    <a href="{{ route('dashboard.login') }}" class="text-sm font-medium hover:text-primary transition-colors">SaaS Login</a>
                    <a href="{{ route('customer.login') }}" class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
                        Soy Cliente
                    </a>
                @endif
                
                <button onclick="toggleTheme()" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                    <svg class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
                    <svg class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
                </button>
            </nav>
        </div>
    </header>

    <main class="relative flex-1 flex flex-col items-center justify-center min-h-[calc(100vh-4rem-4rem)]">
        <!-- Hero Section -->
        <section class="container mx-auto px-4 py-12 text-center sm:px-6 lg:px-8">
            <div class="inline-flex items-center rounded-full border bg-muted/50 px-3 py-1 text-sm font-medium mb-8">
                <span class="relative flex h-2 w-2 mr-2">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
                </span>
                Sistema Listo
            </div>

            <h1 class="text-4xl font-extrabold er sm:text-6xl mb-6 bg-gradient-to-b from-foreground to-foreground/60 bg-clip-text text-transparent">
                Bienvenido a <br class="hidden sm:block">
                <span class="text-primary">Tu Nueva Plataforma</span>
            </h1>

            <p class="mx-auto max-w-[700px] text-lg text-muted-foreground sm:text-xl mb-10 leading-relaxed">
                {{ $settings['site_description'] ?? 'Una base sólida y escalable para construir soluciones digitales de alto impacto.' }}
            </p>

            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
                <a href="{{ route('shop.catalog') }}" class="inline-flex h-12 items-center justify-center rounded-md bg-accent text-accent-foreground border border-input px-8 text-base font-medium transition-colors hover:bg-accent/80 hover:text-accent-foreground">
                    <svg class="mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
                    Explorar Tienda
                </a>

                @auth
                    <a href="{{ route('dashboard.dashboard') }}" class="inline-flex h-12 items-center justify-center rounded-md bg-primary px-8 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90">
                        Ir al Dashboard
                        <svg class="ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                    </a>
                @else
                    <a href="{{ route('dashboard.login') }}" class="inline-flex h-12 items-center justify-center rounded-md bg-primary px-8 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90">
                        Iniciar sesión
                        <svg class="ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                    </a>
                    <a href="{{ route('dashboard.register') }}" class="inline-flex h-12 items-center justify-center rounded-md border border-input bg-background px-8 text-base font-medium transition-colors hover:bg-accent hover:text-accent-foreground">
                        Crear Cuenta
                    </a>
                @endauth
            </div>
        </section>
    </main>

    <!-- Flash Deals Carousel -->
    <section class="bg-muted/30 py-16 overflow-hidden">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-10 flex items-center justify-center gap-2">
                <span class="text-amber-500">⚡</span> Ofertas Flash
            </h2>
            
            <div x-data="{ 
                active: 0,
                items: [
                    { title: 'MacBook Pro M3', price: '$1,999', img: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca4?auto=format&fit=crop&q=80&w=1000' },
                    { title: 'Sony WH-1000XM5', price: '$348', img: 'https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?auto=format&fit=crop&q=80&w=1000' },
                    { title: 'Samsung S24 Ultra', price: '$1,199', img: 'https://images.unsplash.com/photo-1610945265078-386f6d5a508d?auto=format&fit=crop&q=80&w=1000' }
                ],
                next() { this.active = (this.active + 1) % this.items.length },
                prev() { this.active = (this.active - 1 + this.items.length) % this.items.length }
            }" x-init="setInterval(() => next(), 5000)" class="relative max-w-4xl mx-auto">
                
                <!-- Slides -->
                <div class="relative h-[400px] rounded-2xl overflow-hidden hover:shadow-2xl transition-shadow duration-500 group">
                    <template x-for="(item, index) in items" :key="index">
                        <div x-show="active === index" class="absolute inset-0 transition-all duration-700 ease-in-out"
                             x-transition:enter="opacity-0 scale-105"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-95">
                            <img :src="item.img" class="w-full h-full object-cover brightness-75 group-hover:brightness-100 transition-all">
                            <div class="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/80 to-transparent text-white">
                                <h3 class="text-3xl font-bold mb-2" x-text="item.title"></h3>
                                <p class="text-xl font-medium text-amber-400" x-text="item.price"></p>
                                <a href="{{ route('shop.catalog') }}" class="inline-block mt-4 bg-white text-black px-6 py-2 rounded-full font-bold hover:bg-amber-400 transition-colors">
                                    Comprar Ahora
                                </a>
                            </div>
                        </div>
                    </template>
                    
                    <!-- Controls -->
                    <button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/30 p-2 rounded-full text-white hover:bg-black/50 backdrop-blur-sm">
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                    </button>
                    <button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/30 p-2 rounded-full text-white hover:bg-black/50 backdrop-blur-sm">
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                    </button>
                    
                    <!-- Indicators -->
                    <div class="absolute bottom-4 right-4 flex gap-2">
                        <template x-for="(item, index) in items" :key="index">
                            <button @click="active = index" class="w-2 h-2 rounded-full transition-all" 
                                    :class="active === index ? 'bg-white w-6' : 'bg-white/50'"></button>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section (Alpine Accordion) -->
    <section class="container mx-auto px-4 py-16 sm:px-6 lg:px-8 max-w-4xl" x-data="{ selected: null }">
        <h2 class="text-3xl font-bold text-center mb-12">Preguntas Frecuentes</h2>
        
        <div class="space-y-4">
            <!-- Item 1 -->
            <div class="border rounded-lg overflow-hidden bg-card text-card-foreground">
                <button @click="selected !== 1 ? selected = 1 : selected = null" class="flex items-center justify-between w-full p-4 text-left font-medium transition-colors hover:bg-muted/50">
                    <span>¿Cómo funciona la plataforma?</span>
                    <svg class="w-5 h-5 transition-transform duration-200" :class="selected === 1 ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                </button>
                <div x-show="selected === 1" x-collapse x-cloak class="p-4 pt-0 text-muted-foreground border-t bg-muted/20">
                    Nuestra plataforma ofrece una arquitectura modular diseñada para escalar con tu negocio. Simplemente regístrate, configura tu perfil y comienza a administrar tus productos.
                </div>
            </div>

            <!-- Item 2 -->
            <div class="border rounded-lg overflow-hidden bg-card text-card-foreground">
                <button @click="selected !== 2 ? selected = 2 : selected = null" class="flex items-center justify-between w-full p-4 text-left font-medium transition-colors hover:bg-muted/50">
                    <span>¿Es compatible con SEO?</span>
                    <svg class="w-5 h-5 transition-transform duration-200" :class="selected === 2 ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                </button>
                <div x-show="selected === 2" x-collapse x-cloak class="p-4 pt-0 text-muted-foreground border-t bg-muted/20">
                    Absolutamente. Utilizamos Laravel Blade para renderizado en servidor (SSR), lo que garantiza que Google pueda indexar cada palabra de tu sitio al instante.
                </div>
            </div>

            <!-- Item 3 -->
            <div class="border rounded-lg overflow-hidden bg-card text-card-foreground">
                <button @click="selected !== 3 ? selected = 3 : selected = null" class="flex items-center justify-between w-full p-4 text-left font-medium transition-colors hover:bg-muted/50">
                    <span>¿Puedo personalizar el diseño?</span>
                    <svg class="w-5 h-5 transition-transform duration-200" :class="selected === 3 ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                </button>
                <div x-show="selected === 3" x-collapse x-cloak class="p-4 pt-0 text-muted-foreground border-t bg-muted/20">
                    Sí, todo el sistema utiliza TailwindCSS, lo que permite una personalización profunda y mantenible mediante tokens de diseño.
                </div>
            </div>
        </div>
    </section>
    </main>

    <!-- Newsletter Modal (Exit Intent / Timer) -->
    <div x-data="{ open: false }" x-init="setTimeout(() => open = true, 5000)" 
         x-show="open" x-transition.opacity.duration.500ms x-cloak
         class="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
        
        <div @click.away="open = false" 
             class="bg-card border shadow-2xl rounded-xl w-full max-w-md p-6 relative animate-in fade-in zoom-in duration-300">
            
            <button @click="open = false" class="absolute top-4 right-4 text-muted-foreground hover:text-foreground">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>

            <div class="text-center space-y-4">
                <div class="inline-flex p-3 rounded-full bg-primary/10 text-primary mb-2">
                    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                </div>
                <h3 class="text-2xl font-bold">¡Espera! No te vayas sin esto</h3>
                <p class="text-muted-foreground">Suscríbete a nuestro boletín y recibe las últimas novedades del sistema directamente en tu bandeja.</p>
                
                <form class="flex gap-2" @submit.prevent="open = false; alert('¡Suscrito! (Simulación)')">
                    <input type="email" placeholder="tu@email.com" class="flex-1 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" required>
                    <button type="submit" class="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
                        Suscribir
                    </button>
                </form>
                <button @click="open = false" class="text-xs text-muted-foreground underline hover:text-primary">No gracias, prefiero perdérmelo</button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="border-t bg-muted/20">
        <div class="container mx-auto px-4 py-12 flex flex-col md:flex-row items-center justify-between gap-6 sm:px-6 lg:px-8">
            <div class="flex items-center gap-2">
                <svg class="size-5 text-primary" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                <span class="font-bold">{{ $settings['site_name'] ?? 'Base Pro' }}</span>
            </div>

            <p class="text-sm text-muted-foreground">
                Laravel v{{ $laravelVersion }} (PHP v{{ $phpVersion }}) • © 2026 Todos los derechos reservados.
            </p>

            <div class="flex items-center gap-4">
                @if(isset($settings['contact_whatsapp']))
                    <a href="https://wa.me/{{ preg_replace('/\D/', '', $settings['contact_whatsapp']) }}" target="_blank" class="p-2 text-emerald-500 hover:bg-emerald-500/10 rounded-full transition-colors">
                        <svg class="size-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
                    </a>
                @endif
                @if(isset($settings['social_linkedin']))
                    <a href="{{ $settings['social_linkedin'] }}" target="_blank" class="p-2 hover:bg-accent rounded-full text-muted-foreground transition-colors"><svg class="size-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
                @endif
            </div>
        </div>
    </footer>
@endsection