<script setup>
import { Head, Link } from '@inertiajs/vue3';
import PublicLayout from '@/Layouts/PublicLayout.vue';

defineProps({
    slug: String,
    title: String,
    content: String,
});
</script>

<template>
    <PublicLayout>
        <Head :title="title" />

        <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Back link -->
                <Link 
                    :href="route('home')" 
                    class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mb-6"
                >
                    <svg class="w-5 h-5 mr-2" 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>

                <!-- Page content -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                    <div 
                        class="prose prose-lg dark:prose-invert max-w-none p-8 
                               prose-headings:text-gray-900 dark:prose-headings:text-white
                               prose-p:text-gray-600 dark:prose-p:text-gray-300
                               prose-a:text-indigo-600 dark:prose-a:text-indigo-400
                               prose-strong:text-gray-900 dark:prose-strong:text-white
                               prose-ul:text-gray-600 dark:prose-ul:text-gray-300
                               prose-ol:text-gray-600 dark:prose-ol:text-gray-300
                               prose-li:text-gray-600 dark:prose-li:text-gray-300"
                        v-html="content"
                    />
                </div>

                <!-- Footer navigation -->
                <div class="mt-8 flex flex-wrap justify-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                    <Link :href="route('page.show', 'about')" class="hover:text-indigo-600 dark:hover:text-indigo-400">
                        Quiénes Somos
                    </Link>
                    <span>•</span>
                    <Link :href="route('page.show', 'terms')" class="hover:text-indigo-600 dark:hover:text-indigo-400">
                        Términos
                    </Link>
                    <span>•</span>
                    <Link :href="route('page.show', 'privacy')" class="hover:text-indigo-600 dark:hover:text-indigo-400">
                        Privacidad
                    </Link>
                    <span>•</span>
                    <Link :href="route('page.show', 'cookies')" class="hover:text-indigo-600 dark:hover:text-indigo-400">
                        Cookies
                    </Link>
                    <span>•</span>
                    <Link :href="route('contact')" class="hover:text-indigo-600 dark:hover:text-indigo-400">
                        Contacto
                    </Link>
                </div>
            </div>
        </div>
    </PublicLayout>
</template>
