<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { ArrowRight } from '@lucide/vue';
import { Button } from '@/components/ui/button';

interface Kategori {
    id: number;
    nama_kategori: string;
    judul: string | null;
    deskripsi: string | null;
    alias: string;
}

interface Ad {
    id: number;
    judul: string;
    url: string;
}

defineProps<{
    kategori: Kategori;
    ad: Ad;
}>();

// Halaman perantara Landing Page (RPD FR-KAT-04, §8.2 langkah 7).
// Layout resolver di app.ts mengembalikan null untuk 'Landing/*' (publik, tanpa AppLayout).
</script>

<template>
    <Head :title="kategori.judul ?? kategori.nama_kategori" />

    <div class="flex min-h-screen flex-col bg-background">
        <!-- Konten lebar penuh ala landing page umum -->
        <main class="flex-1 w-full">
            <div class="mx-auto max-w-5xl px-6 py-10 sm:py-16">
                <div class="space-y-6">
                    <!-- <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ kategori.judul ?? kategori.nama_kategori }}</h1> -->
                    <div
                        v-if="kategori.deskripsi"
                        class="prose prose-lg max-w-none [&_pre]:overflow-x-auto [&_pre]:max-w-full [&_code]:break-words [&_a]:break-all [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg"
                        v-html="kategori.deskripsi"
                    />
                    <div v-if="! kategori.deskripsi" class="text-muted-foreground">
                        Klik tombol di bawah untuk melanjutkan.
                    </div>
                </div>
            </div>
        </main>

        <!-- Tombol tetap di bawah, mengarah ke rotator iklan -->
        <div class="sticky bottom-0 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
            <div class="mx-auto max-w-5xl px-6 py-4">
                <Button as-child size="lg" class="w-full sm:w-auto">
                    <!-- Anchor biasa, bukan Inertia Link: /landing/go redirect ke URL eksternal,
                         XHR visit akan kena CORS block di domain tujuan. -->
                    <a :href="`/landing/go/${ad.id}`">
                        Klik untuk melanjutkan
                        <ArrowRight class="size-4" />
                    </a>
                </Button>
            </div>
        </div>
    </div>
</template>
