<script setup>
import { Head, Link, usePage } from '@inertiajs/vue3';
import { computed, ref } from 'vue';

const props = defineProps({
    page: Object,
});

const $page = usePage();
const user = computed(() => $page.props.auth?.user);

// Fitness colors
const colors = {
    primary: '#39FF14',
    secondary: '#FF6B35',
    accent: '#00D4FF',
};

const mobileMenuOpen = ref(false);
const userMenuOpen = ref(false);

const navLinks = [
    { href: '/#features', label: 'Características' },
    { href: '/#plans', label: 'Planes' },
    { href: '/#testimonials', label: 'Testimonios' },
    { href: '/blog', label: 'Blog' },
];
</script>

<template>
    <Head>
        <title>{{ page.meta_title || page.title }}</title>
        <meta v-if="page.meta_description" name="description" :content="page.meta_description" />
    </Head>

    <div class="min-h-screen bg-[#0A0A0A]">
        <!-- Navigation -->
        <nav class="fixed top-0 left-0 right-0 z-50 bg-[#0A0A0A]/95 backdrop-blur-md border-b border-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center h-16 md:h-20">
                    <!-- Logo -->
                    <Link href="/" class="flex items-center gap-3">
                        <div class="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center" 
                             :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                            <svg class="w-6 h-6 md:w-7 md:h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 6h2m0 0v12m0-12h2m14 0h2m-2 0v12m0-12h-2M7 6v12m10-12v12M7 12h10" />
                            </svg>
                        </div>
                        <span class="text-xl md:text-2xl font-black text-white">CoachPro</span>
                    </Link>

                    <!-- Desktop Navigation -->
                    <div class="hidden md:flex items-center gap-8">
                        <a v-for="link in navLinks" 
                           :key="link.href"
                           :href="link.href"
                           class="text-gray-400 hover:text-white font-medium transition-colors duration-200">
                            {{ link.label }}
                        </a>
                    </div>

                    <!-- CTA Buttons / User Menu -->
                    <div class="hidden md:flex items-center gap-4">
                        <template v-if="!user">
                            <Link :href="route('login')" class="text-gray-300 hover:text-white font-semibold">
                                Iniciar Sesión
                            </Link>
                            <Link :href="route('register')" 
                                  class="px-6 py-2.5 rounded-full font-bold text-black transition-all hover:scale-105"
                                  :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.accent})` }">
                                Comenzar Gratis
                            </Link>
                        </template>
                        <template v-else>
                            <div class="relative">
                                <button 
                                    @click="userMenuOpen = !userMenuOpen"
                                    class="flex items-center gap-3 px-4 py-2 rounded-full bg-gray-800/50 border border-gray-700 hover:border-gray-600"
                                >
                                    <div class="w-8 h-8 rounded-full overflow-hidden"
                                         :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                                        <img v-if="user.profile_photo_url" :src="user.profile_photo_url" class="w-full h-full object-cover" />
                                        <span v-else class="w-full h-full flex items-center justify-center text-black font-bold text-sm">
                                            {{ user.name?.charAt(0).toUpperCase() }}
                                        </span>
                                    </div>
                                    <span class="text-white font-medium max-w-[120px] truncate">{{ user.name }}</span>
                                </button>
                                <div v-show="userMenuOpen" class="absolute right-0 mt-2 w-56 bg-gray-900 border border-gray-800 rounded-xl shadow-xl z-50">
                                    <div class="p-4 border-b border-gray-800">
                                        <p class="text-white font-medium truncate">{{ user.name }}</p>
                                        <p class="text-sm text-gray-400 truncate">{{ user.email }}</p>
                                    </div>
                                    <div class="py-2">
                                        <Link :href="route('dashboard')" class="block px-4 py-2.5 text-gray-300 hover:text-white hover:bg-gray-800/50">Mi Panel</Link>
                                        <Link :href="route('profile.edit')" class="block px-4 py-2.5 text-gray-300 hover:text-white hover:bg-gray-800/50">Mi Perfil</Link>
                                    </div>
                                    <div class="py-2 border-t border-gray-800">
                                        <Link :href="route('logout')" method="post" as="button" class="block w-full text-left px-4 py-2.5 text-red-400 hover:bg-red-900/20">Cerrar Sesión</Link>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!-- Mobile Menu Button -->
                    <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 text-gray-400 hover:text-white">
                        <svg v-if="!mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                        <svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </nav>

        <!-- Page Content -->
        <main class="pt-24 pb-16">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Back link -->
                <Link 
                    href="/" 
                    class="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-8 transition-colors"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Volver al inicio
                </Link>

                <!-- Content Card -->
                <div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-800 rounded-2xl overflow-hidden">
                    <div 
                        class="prose prose-lg prose-invert max-w-none p-8 md:p-12
                               prose-headings:text-white
                               prose-p:text-gray-300
                               prose-a:text-[#39FF14] hover:prose-a:text-[#00D4FF]
                               prose-strong:text-white
                               prose-ul:text-gray-300
                               prose-ol:text-gray-300
                               prose-li:text-gray-300"
                        v-html="page.content"
                    />
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="border-t border-gray-800 py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col md:flex-row justify-between items-center gap-6">
                    <Link href="/" class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl flex items-center justify-center"
                             :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                            <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 6h2m0 0v12m0-12h2m14 0h2m-2 0v12m0-12h-2M7 6v12m10-12v12M7 12h10" />
                            </svg>
                        </div>
                        <span class="text-xl font-bold text-white">CoachPro</span>
                    </Link>
                    <div class="flex flex-wrap justify-center gap-6 text-sm text-gray-400">
                        <Link href="/about" class="hover:text-white transition-colors">Quiénes Somos</Link>
                        <Link href="/terms" class="hover:text-white transition-colors">Términos</Link>
                        <Link href="/privacy" class="hover:text-white transition-colors">Privacidad</Link>
                        <Link href="/contacto" class="hover:text-white transition-colors">Contacto</Link>
                    </div>
                    <p class="text-sm text-gray-500">
                        © {{ new Date().getFullYear() }} CoachPro. Todos los derechos reservados.
                    </p>
                </div>
            </div>
        </footer>
    </div>
</template>
