@extends('layouts.public')

@section('title', 'Products - ZentryAuth')

@section('content')

@php
    $WHATSAPP_NUMBER = '51999999999'; // 51 + número sin +
    $DISCORD_INVITE  = 'https://discord.gg/TU_INVITE';

    $waBasic = 'https://wa.me/' . $WHATSAPP_NUMBER . '?text=' . urlencode(
        'Hola, estoy interesado en el plan Basic de ZentryAuth.'
    );

    $waEnterprise = 'https://wa.me/' . $WHATSAPP_NUMBER . '?text=' . urlencode(
        'Hola, quiero una cotización Enterprise de ZentryAuth.'
    );
@endphp

{{-- HEADER / HERO (FULL WIDTH + glow dinámico) --}}
<section
    class="relative overflow-hidden py-10 sm:py-14 -mx-4 sm:-mx-6 lg:-mx-8"
    x-data="productsFx()"
    @mousemove="bgMove($event)"
    @mouseleave="bgReset()"
>
    <div class="absolute inset-0 -z-10">
        {{-- glow fijo base --}}
        <div class="absolute -top-24 left-1/2 -translate-x-1/2 h-72 w-[56rem] rounded-full blur-3xl
                    bg-gradient-to-r from-indigo-200 via-indigo-100 to-transparent
                    dark:from-indigo-900/40 dark:via-indigo-900/20">
        </div>

        {{-- glow dinámico --}}
        <div class="absolute inset-0 pointer-events-none transition-opacity duration-200"
             :style="bgGlow"></div>

        {{-- Soft grid --}}
        <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.10]"
             style="background-image:
                    linear-gradient(to right, rgba(0,0,0,.9) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0,0,0,.9) 1px, transparent 1px);
                    background-size: 52px 52px;">
        </div>
    </div>

    <div class="px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-7xl text-center">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium
                         bg-indigo-50 text-indigo-700 border border-indigo-100
                         dark:bg-indigo-950/40 dark:text-indigo-200 dark:border-indigo-900/40">
                Planes ZentryAuth
            </span>

            <h1 class="mt-4 text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900 dark:text-white">
                Elige el plan para tu app
            </h1>

            <p class="mt-3 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                Sin pasarela de pago: eliges un plan y coordinamos por WhatsApp o correo.
            </p>
        </div>
    </div>
</section>

{{-- PLANS --}}
<section class="pb-12">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {{-- ✅ más aire arriba para que no “toque” el hero --}}
        <div class="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-5">

            {{-- BASIC --}}
            <div class="group relative overflow-hidden p-6 sm:p-7 rounded-2xl border border-gray-200 bg-white
                        dark:bg-gray-900 dark:border-gray-800
                        flex flex-col h-full min-h-[430px]
                        transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
                        hover:border-indigo-200 dark:hover:border-indigo-900/50">
                {{-- glow hover --}}
                <div class="pointer-events-none absolute -inset-16 opacity-0 blur-2xl transition-opacity duration-200
                            group-hover:opacity-100
                            bg-gradient-to-r from-indigo-200 via-indigo-100 to-transparent
                            dark:from-indigo-900/30 dark:via-indigo-900/10"></div>

                <div class="relative flex flex-col h-full">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold text-gray-900 dark:text-white">Basic</div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">Para empezar y validar rápido</div>
                        </div>
                        <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-700
                                     dark:bg-gray-800 dark:text-gray-200">
                            Starter
                        </span>
                    </div>

                    {{-- ✅ Precio con padding/espacio consistente --}}
                    <div class="mt-6 rounded-xl border border-gray-200 bg-gray-50/60 px-4 py-4
                                dark:border-gray-800 dark:bg-gray-950/40">
                        <div class="text-3xl font-semibold text-gray-900 dark:text-white leading-none">
                            S/. —
                        </div>
                        <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Precio a coordinar
                        </div>
                    </div>

                    <ul class="mt-6 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                        <li>• 1 aplicación</li>
                        <li>• Gestión de licencias</li>
                        <li>• Activación por dispositivo (HWID)</li>
                        <li>• Soporte estándar</li>
                    </ul>

                    <div class="mt-7 pt-2 mt-auto">
                        <a href="{{ $waBasic }}" target="_blank" rel="noopener"
                           class="inline-flex w-full items-center justify-center px-5 py-3 rounded-md text-sm font-semibold
                                  border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                                  dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
                            Elegir Basic
                        </a>
                    </div>
                </div>
            </div>

            {{-- PRO --}}
            <div class="group relative overflow-visible p-6 sm:p-7 rounded-2xl bg-white dark:bg-gray-900 flex flex-col h-full
                        border border-indigo-200 dark:border-indigo-900/50 shadow-sm ring-1 ring-indigo-100/60 dark:ring-indigo-900/30
                        min-h-[430px]
                        transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
                {{-- glow hover --}}
                <div class="pointer-events-none absolute -inset-16 opacity-0 blur-2xl transition-opacity duration-200
                            group-hover:opacity-100
                            bg-gradient-to-r from-indigo-200 via-indigo-100 to-transparent
                            dark:from-indigo-900/35 dark:via-indigo-900/12"></div>

                {{-- ✅ Badge no se recorta (overflow-visible + sin top negativo exagerado) --}}
                <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
                    <span class="text-xs font-semibold px-3 py-1 rounded-full bg-indigo-600 text-white shadow">
                        Recomendado
                    </span>
                </div>

                <div class="relative flex flex-col h-full">
                    <div class="flex items-start justify-between gap-3 mt-1">
                        <div>
                            <div class="text-sm font-semibold text-gray-900 dark:text-white">Pro</div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">Para proyectos en crecimiento</div>
                        </div>
                        <span class="text-xs px-2 py-1 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100
                                     dark:bg-indigo-950/40 dark:text-indigo-200 dark:border-indigo-900/40">
                            Popular
                        </span>
                    </div>

                    {{-- ✅ Precio con padding/espacio consistente --}}
                    <div class="mt-6 rounded-xl border border-indigo-200 bg-indigo-50/60 px-4 py-4
                                dark:border-indigo-900/40 dark:bg-indigo-950/25">
                        <div class="text-3xl font-semibold text-gray-900 dark:text-white leading-none">
                            S/. —
                        </div>
                        <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Precio a coordinar
                        </div>
                    </div>

                    <ul class="mt-6 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                        <li>• Hasta 3 aplicaciones</li>
                        <li>• Tokens con expiración</li>
                        <li>• Control y resets desde panel</li>
                        <li>• Soporte prioritario</li>
                    </ul>

                    <div class="mt-7 pt-2 mt-auto">
                        <a href="{{ $DISCORD_INVITE }}" target="_blank" rel="noopener"
                           class="inline-flex w-full items-center justify-center px-5 py-3 rounded-md text-sm font-semibold
                                  bg-indigo-600 text-white hover:bg-indigo-700 transition">
                            Elegir Pro
                        </a>
                    </div>
                </div>
            </div>

            {{-- ENTERPRISE --}}
            <div class="group relative overflow-hidden p-6 sm:p-7 rounded-2xl border border-gray-200 bg-white
                        dark:bg-gray-900 dark:border-gray-800
                        flex flex-col h-full min-h-[430px]
                        transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
                        hover:border-indigo-200 dark:hover:border-indigo-900/50">
                {{-- glow hover --}}
                <div class="pointer-events-none absolute -inset-16 opacity-0 blur-2xl transition-opacity duration-200
                            group-hover:opacity-100
                            bg-gradient-to-r from-indigo-200 via-indigo-100 to-transparent
                            dark:from-indigo-900/30 dark:via-indigo-900/10"></div>

                <div class="relative flex flex-col h-full">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold text-gray-900 dark:text-white">Enterprise</div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">Para equipos y necesidades custom</div>
                        </div>
                        <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-700
                                     dark:bg-gray-800 dark:text-gray-200">
                            Custom
                        </span>
                    </div>

                    {{-- ✅ Precio con padding/espacio consistente --}}
                    <div class="mt-6 rounded-xl border border-gray-200 bg-gray-50/60 px-4 py-4
                                dark:border-gray-800 dark:bg-gray-950/40">
                        <div class="text-3xl font-semibold text-gray-900 dark:text-white leading-none">
                            Cotización
                        </div>
                        <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Según volumen y requerimientos
                        </div>
                    </div>

                    <ul class="mt-6 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                        <li>• Apps ilimitadas (según acuerdo)</li>
                        <li>• Reglas avanzadas y políticas</li>
                        <li>• Asesoría e implementación</li>
                        <li>• Soporte dedicado</li>
                    </ul>

                    <div class="mt-7 pt-2 mt-auto">
                        <a href="{{ $waEnterprise }}" target="_blank" rel="noopener"
                           class="inline-flex w-full items-center justify-center px-5 py-3 rounded-md text-sm font-semibold
                                  border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                                  dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
                            Solicitar cotización
                        </a>
                    </div>
                </div>
            </div>

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

{{-- GUÍA RÁPIDA (full width suave + hover/glow) --}}
<section class="relative -mx-4 sm:-mx-6 lg:-mx-8 py-12 bg-gray-50/60 dark:bg-gray-950/40 border-y border-gray-200 dark:border-gray-800">
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-7xl">
            <div class="text-center">
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium
                             bg-white text-gray-700 border border-gray-200
                             dark:bg-gray-900 dark:text-gray-200 dark:border-gray-800">
                    Guía rápida
                </span>

                <h2 class="mt-4 text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white">
                    ¿Qué plan te conviene?
                </h2>
                <p class="mt-3 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    Elige según la etapa de tu producto y el volumen de uso.
                </p>
            </div>

            <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
                {{-- Basic --}}
                <div class="group relative overflow-hidden p-5 rounded-2xl border border-gray-200 bg-white
                            dark:bg-gray-900 dark:border-gray-800
                            transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
                    <div class="pointer-events-none absolute -inset-16 opacity-0 blur-2xl transition-opacity duration-200
                                group-hover:opacity-100
                                bg-gradient-to-r from-indigo-200 via-indigo-100 to-transparent
                                dark:from-indigo-900/25 dark:via-indigo-900/10"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold text-gray-900 dark:text-white">Basic</div>
                            <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200">
                                Start
                            </span>
                        </div>
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                            Ideal para pruebas, demos y validación inicial del sistema de licencias.
                        </p>
                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            Ejemplo: MVP / beta / pocos usuarios
                        </div>
                    </div>
                </div>

                {{-- Pro --}}
                <div class="group relative overflow-hidden p-5 rounded-2xl border border-indigo-200 bg-white
                            dark:bg-indigo-950/20 dark:border-indigo-900/50
                            transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
                    <div class="pointer-events-none absolute -inset-16 opacity-0 blur-2xl transition-opacity duration-200
                                group-hover:opacity-100
                                bg-gradient-to-r from-indigo-200 via-indigo-100 to-transparent
                                dark:from-indigo-900/35 dark:via-indigo-900/12"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold text-gray-900 dark:text-white">Pro</div>
                            <span class="text-xs font-semibold px-2 py-1 rounded-full bg-indigo-600 text-white">
                                Recomendado
                            </span>
                        </div>
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                            Para apps en producción con usuarios reales y necesidad de control continuo.
                        </p>
                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            Ejemplo: ventas activas / soporte frecuente
                        </div>
                    </div>
                </div>

                {{-- Enterprise --}}
                <div class="group relative overflow-hidden p-5 rounded-2xl border border-gray-200 bg-white
                            dark:bg-gray-900 dark:border-gray-800
                            transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
                    <div class="pointer-events-none absolute -inset-16 opacity-0 blur-2xl transition-opacity duration-200
                                group-hover:opacity-100
                                bg-gradient-to-r from-indigo-200 via-indigo-100 to-transparent
                                dark:from-indigo-900/25 dark:via-indigo-900/10"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold text-gray-900 dark:text-white">Enterprise</div>
                            <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200">
                                Custom
                            </span>
                        </div>
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                            Para empresas, alto volumen, reglas avanzadas y requerimientos especiales.
                        </p>
                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            Ejemplo: múltiples apps / gran cantidad de licencias
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-10 flex flex-col sm:flex-row gap-3 justify-center">
                <a href="{{ route('support') }}"
                   class="inline-flex items-center justify-center px-5 py-3 rounded-md text-sm font-semibold
                          border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                          dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 hover:-translate-y-0.5">
                    Ver documentación
                </a>

                <a href="{{ route('home') }}"
                   class="inline-flex items-center justify-center px-5 py-3 rounded-md text-sm font-semibold
                          bg-indigo-600 text-white hover:bg-indigo-700 transition hover:-translate-y-0.5">
                    Volver al inicio
                </a>
            </div>
        </div>
    </div>
</section>

{{-- ✅ Alpine logic solo para glow del header --}}
<script>
function productsFx() {
    return {
        bgGlow: '',

        isDark() {
            return document.documentElement.classList.contains('dark');
        },

        bgMove(e) {
            const rect = e.currentTarget.getBoundingClientRect();
            const x = ((e.clientX - rect.left) / rect.width) * 100;
            const y = ((e.clientY - rect.top) / rect.height) * 100;

            const color = this.isDark()
                ? 'rgba(99,102,241,0.20)'
                : 'rgba(99,102,241,0.18)';

            this.bgGlow =
                `background: radial-gradient(900px circle at ${x}% ${y}%, ${color}, transparent 60%);`;
        },

        bgReset() {
            this.bgGlow = '';
        },
    }
}
</script>

@endsection