<script setup>
    import LandingSiteMenu from '@/features/landing/components/LandingSiteMenu.vue';
    import { usePublicPageMeta } from '@/features/landing/publicPageMeta.js';

    usePublicPageMeta({
        title: 'Guides | Socialize',
        description: 'Reusable guides for content intake, review rounds, approval decisions, and delivery readiness.',
        path: '/guides',
    });
</script>

<template>
    <div class="public-page">
        <LandingSiteMenu />

        <main class="public-page-content">
            <section class="public-page-panel">
                <div class="eyebrow">Guides</div>
                <h1>Reusable guides for managing review and approval work.</h1>
                <p>
                    Guides are coming soon. This area will collect repeatable playbooks for content intake,
                    review rounds, approval decisions, and delivery readiness.
                </p>
            </section>
        </main>
    </div>
</template>

<style scoped>
    .public-page {
        @apply min-h-screen w-full;
    }

    .public-page-content {
        @apply mx-auto flex w-full max-w-7xl flex-col px-5 py-8 md:px-8 md:py-12;
    }

    .public-page-panel {
        @apply rounded-[2rem] p-6 md:p-10;
        background: rgba(255, 255, 255, 0.84);
        border: 1px solid rgba(23, 32, 51, 0.08);
        box-shadow: 0 18px 40px rgba(23, 32, 51, 0.06);
    }

    .eyebrow {
        @apply text-xs font-bold uppercase tracking-[0.26em];
        color: #ff8a3d;
    }

    h1 {
        @apply mt-4 max-w-4xl text-4xl font-black leading-tight md:text-6xl;
        color: #172033;
    }

    p {
        @apply mt-5 max-w-3xl text-base leading-7 md:text-lg;
        color: #44516a;
    }
</style>
