@extends('layouts.public')
@section('title', 'Olorun WebSec Analyzer — ¿Tu sitio web es hackeable? Descúbrelo gratis')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Hero + Scanner Inline -->
        <section class="py-16 lg:py-28 text-center relative">
            <div class="absolute top-20 left-10 w-72 h-72 bg-brand-500/20 rounded-full blur-3xl float"></div>
            <div class="absolute bottom-10 right-10 w-96 h-96 bg-accent-500/10 rounded-full blur-3xl float"
                style="animation-delay:-3s"></div>

            <div class="relative z-10 slide-up">
                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-300 mb-6">
                    <span class="w-2 h-2 rounded-full bg-green-400 pulse-dot"></span>
                    <span id="scan-counter">2,847</span> sitios analizados este mes
                </div>

                <h1 class="text-4xl md:text-6xl lg:text-7xl font-black leading-tight mb-4">
                    ¿Tu sitio web es<br>
                    <span class="bg-gradient-to-r from-red-400 via-yellow-400 to-green-400 bg-clip-text text-transparent">
                        hackeable?
                    </span>
                </h1>

                <p class="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
                    Descúbrelo en <strong class="text-white">2 minutos</strong>. Análisis gratuito de seguridad + SEO
                    técnico
                    con reporte PDF profesional y plan de acción a 30/60/90 días.
                </p>

                <!-- SCANNER INLINE -->
                <div class="max-w-2xl mx-auto">
                    <div class="glass rounded-2xl p-6 glow">
                        <div class="flex flex-col sm:flex-row gap-3">
                            <div class="flex-1 relative">
                                <i class="fas fa-globe absolute left-4 top-1/2 -translate-y-1/2 text-gray-500"></i>
                                <input type="url" id="quick-url" placeholder="https://tusitio.com"
                                    class="w-full pl-12 pr-4 py-4 bg-dark-900/80 rounded-xl text-white placeholder-gray-500 border border-white/10 focus:border-brand-400 text-lg">
                            </div>
                            <button onclick="startQuickScan()"
                                class="px-8 py-4 bg-gradient-to-r from-brand-600 to-accent-600 rounded-xl text-lg font-bold hover:from-brand-500 hover:to-accent-500 transition-all duration-300 hover:scale-105 transform whitespace-nowrap glow">
                                <i class="fas fa-bolt mr-2"></i> Escanear gratis
                            </button>
                        </div>
                        <div class="flex items-center justify-center gap-6 mt-4 text-xs text-gray-500">
                            <span><i class="fas fa-check text-green-400 mr-1"></i> 100% gratuito</span>
                            <span><i class="fas fa-check text-green-400 mr-1"></i> Sin instalar nada</span>
                            <span><i class="fas fa-check text-green-400 mr-1"></i> Resultados inmediatos</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Trust Bar -->
        <section class="py-8">
            <div class="glass rounded-2xl p-6">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                    <div>
                        <div class="text-3xl font-black text-brand-400">15+</div>
                        <div class="text-xs text-gray-500 mt-1">Años de experiencia</div>
                    </div>
                    <div>
                        <div class="text-3xl font-black text-cyber-400">200+</div>
                        <div class="text-xs text-gray-500 mt-1">Proyectos completados</div>
                    </div>
                    <div>
                        <div class="text-3xl font-black text-accent-400">50+</div>
                        <div class="text-xs text-gray-500 mt-1">Clientes satisfechos</div>
                    </div>
                    <div>
                        <div class="text-3xl font-black text-green-400">24/7</div>
                        <div class="text-xs text-gray-500 mt-1">Soporte técnico</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features -->
        <section id="features" class="py-16">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
                ¿Qué <span class="text-brand-400">analizamos</span>?
            </h2>
            <p class="text-gray-400 text-center mb-12 max-w-xl mx-auto">Nuestro motor ejecuta +15 checks de seguridad y SEO
                técnico sin afectar tu sitio</p>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                    $features = [
                        ['icon' => 'fa-lock', 'color' => 'from-brand-500 to-brand-700', 'title' => 'TLS & HSTS', 'desc' => 'Verificamos conexión SSL y configuración HSTS para tráfico seguro.'],
                        ['icon' => 'fa-shield-halved', 'color' => 'from-accent-500 to-accent-700', 'title' => 'Headers de Seguridad', 'desc' => 'CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy.'],
                        ['icon' => 'fa-cookie-bite', 'color' => 'from-cyber-400 to-cyber-600', 'title' => 'Cookies Seguras', 'desc' => 'Validamos Secure, HttpOnly y SameSite en cookies.'],
                        ['icon' => 'fa-code', 'color' => 'from-yellow-500 to-orange-600', 'title' => 'Mixed Content', 'desc' => 'Detectamos recursos HTTP en páginas HTTPS.'],
                        ['icon' => 'fa-search', 'color' => 'from-green-500 to-emerald-600', 'title' => 'SEO Técnico', 'desc' => 'robots.txt, sitemap, meta tags, canonical, H1.'],
                        ['icon' => 'fa-tachometer-alt', 'color' => 'from-pink-500 to-rose-600', 'title' => 'Performance', 'desc' => 'TTFB, peso HTML, compresión gzip/brotli.'],
                    ];
                @endphp

                @foreach($features as $i => $f)
                    <div class="glass rounded-2xl p-6 hover:bg-white/10 transition-all duration-300 group slide-up"
                        style="animation-delay:{{ $i * 0.1 }}s">
                        <div
                            class="w-12 h-12 rounded-xl bg-gradient-to-br {{ $f['color'] }} flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                            <i class="fas {{ $f['icon'] }} text-xl text-white"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-1">{{ $f['title'] }}</h3>
                        <p class="text-gray-400 text-sm">{{ $f['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </section>

        <!-- Process -->
        <section class="py-16">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">
                Proceso <span class="text-accent-400">simple</span>, resultados potentes
            </h2>
            <div class="grid md:grid-cols-4 gap-6">
                @php
                    $steps = [
                        ['num' => '01', 'icon' => 'fa-globe', 'title' => 'Ingresa tu URL', 'desc' => 'Solo necesitas la URL. Nada que instalar.'],
                        ['num' => '02', 'icon' => 'fa-check-double', 'title' => 'Verifica propiedad', 'desc' => 'DNS TXT o archivo para confirmar que eres el dueño.'],
                        ['num' => '03', 'icon' => 'fa-cogs', 'title' => 'Escaneo automático', 'desc' => '15+ checks de seguridad y SEO en menos de 2 minutos.'],
                        ['num' => '04', 'icon' => 'fa-file-pdf', 'title' => 'Recibe tu reporte', 'desc' => 'PDF con hallazgos, scores y plan de acción.'],
                    ];
                @endphp
                @foreach($steps as $s)
                    <div class="text-center group">
                        <div class="relative inline-block mb-3">
                            <div
                                class="w-16 h-16 rounded-2xl glass flex items-center justify-center group-hover:glow transition-all duration-300">
                                <i class="fas {{ $s['icon'] }} text-2xl text-brand-400"></i>
                            </div>
                            <span
                                class="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-accent-600 text-xs font-bold flex items-center justify-center">{{ $s['num'] }}</span>
                        </div>
                        <h3 class="text-base font-semibold mb-1">{{ $s['title'] }}</h3>
                        <p class="text-gray-400 text-xs">{{ $s['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </section>

        <!-- Testimonials -->
        <section class="py-16">
            <h2 class="text-3xl font-bold text-center mb-10">
                Lo que dicen nuestros <span class="text-brand-400">clientes</span>
            </h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="glass rounded-2xl p-6">
                    <div class="flex items-center gap-1 mb-3">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-gray-300 text-sm mb-4 italic">"Descubrimos 12 vulnerabilidades que no sabíamos que
                        teníamos. El equipo de Olorun las corrigió en 48 horas. Nuestro score pasó de 34 a 96."</p>
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-full bg-gradient-to-br from-brand-500 to-accent-500 flex items-center justify-center text-sm font-bold">
                            CM</div>
                        <div>
                            <p class="text-sm font-semibold">Carlos M.</p>
                            <p class="text-xs text-gray-500">CTO, Coopnectados</p>
                        </div>
                    </div>
                </div>
                <div class="glass rounded-2xl p-6">
                    <div class="flex items-center gap-1 mb-3">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-gray-300 text-sm mb-4 italic">"El reporte PDF es increíblemente detallado. Lo usamos para
                        presentar al board y aprobar la inversión en seguridad. Profesional y claro."</p>
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-cyan-500 flex items-center justify-center text-sm font-bold">
                            AL</div>
                        <div>
                            <p class="text-sm font-semibold">Ana L.</p>
                            <p class="text-xs text-gray-500">Gerente TI, Global Palmenidex</p>
                        </div>
                    </div>
                </div>
                <div class="glass rounded-2xl p-6">
                    <div class="flex items-center gap-1 mb-3">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star-half-alt text-yellow-400"></i>
                    </div>
                    <p class="text-gray-300 text-sm mb-4 italic">"Implementamos el ERP de Olorun y el scan de seguridad de
                        forma integrada. Ahora manejamos facturación y protección desde una sola plataforma."</p>
                    <div class="flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-500 to-red-500 flex items-center justify-center text-sm font-bold">
                            RF</div>
                        <div>
                            <p class="text-sm font-semibold">Roberto F.</p>
                            <p class="text-xs text-gray-500">Director, Canec3D</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Ecosystem Cross-sell -->
        <section class="py-16">
            <h2 class="text-3xl font-bold text-center mb-4">Todo el ecosistema <span class="text-accent-400">Olorun</span>
            </h2>
            <p class="text-gray-400 text-center mb-10">Más que seguridad — soluciones integrales para tu negocio</p>

            <div class="grid md:grid-cols-3 gap-6">
                <a href="https://ciberseguridad.olo.run" target="_blank"
                    class="glass rounded-2xl p-6 hover:bg-white/10 transition-all duration-300 group border border-brand-500/20 hover:border-brand-500/50">
                    <div
                        class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                        <i class="fas fa-shield-halved text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Ciberseguridad</h3>
                    <p class="text-gray-400 text-sm mb-3">Pentesting, ISO 27001, OSINT, Red Team. Planes mensuales desde
                        RD$15,000.</p>
                    <span class="text-brand-400 text-sm font-medium group-hover:underline">Explorar servicios →</span>
                </a>
                <a href="https://site.olo.run" target="_blank"
                    class="glass rounded-2xl p-6 hover:bg-white/10 transition-all duration-300 group border border-accent-500/20 hover:border-accent-500/50">
                    <div
                        class="w-14 h-14 rounded-xl bg-gradient-to-br from-accent-500 to-accent-700 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                        <i class="fas fa-laptop-code text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Desarrollo Seguro</h3>
                    <p class="text-gray-400 text-sm mb-3">Sitios web, apps móviles, APIs y software empresarial con
                        DevSecOps integrado.</p>
                    <span class="text-accent-400 text-sm font-medium group-hover:underline">Ver soluciones →</span>
                </a>
                <a href="https://site.olo.run/#erp" target="_blank"
                    class="glass rounded-2xl p-6 hover:bg-white/10 transition-all duration-300 group border border-cyber-400/20 hover:border-cyber-400/50">
                    <div
                        class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyber-400 to-cyan-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                        <i class="fas fa-chart-line text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">ERP Olorun</h3>
                    <p class="text-gray-400 text-sm mb-3">Facturación e-CF, inventario, nómina, CRM, construcción. Trial 14
                        días gratis.</p>
                    <span class="text-cyber-400 text-sm font-medium group-hover:underline">Probar gratis →</span>
                </a>
            </div>
        </section>

        <!-- Final CTA -->
        <section class="py-16 text-center">
            <div class="glass rounded-3xl p-10 max-w-3xl mx-auto glow-accent relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-brand-600/10 to-accent-600/10"></div>
                <div class="relative z-10">
                    <h2 class="text-3xl md:text-4xl font-bold mb-3">¿Listo para proteger tu sitio?</h2>
                    <p class="text-gray-400 mb-6">Análisis gratuito · Resultados en 2 minutos · Sin compromiso</p>
                    <a href="{{ url('/analizar') }}"
                        class="inline-block px-10 py-4 bg-gradient-to-r from-brand-600 to-accent-600 rounded-xl text-lg font-bold hover:from-brand-500 hover:to-accent-500 transition-all duration-300 hover:scale-105 transform">
                        <i class="fas fa-rocket mr-2"></i> Escanear mi sitio gratis
                    </a>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        function startQuickScan() {
            const url = document.getElementById('quick-url').value.trim();
            if (!url) {
                document.getElementById('quick-url').focus();
                document.getElementById('quick-url').classList.add('border-red-400');
                return;
            }
            // Redirect to full form with pre-filled URL
            window.location.href = '{{ url("/analizar") }}?url=' + encodeURIComponent(url);
        }

        document.getElementById('quick-url').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') startQuickScan();
        });
    </script>
@endsection