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

defineProps({
    legal: {
        type: Object,
        required: true,
    },
});
</script>

<template>
    <Head title="About" />

    <MobileAppLayout title="About" subtitle="Terms, policy, and platform information">
        <div class="space-y-4">
            <AppCard :title="legal?.terms_title || 'Terms and Conditions'" :subtitle="`Version ${legal?.terms_version || 1}`">
                <div class="rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs text-slate-600">
                    Last updated: {{ legal?.terms_updated_at || 'Not available' }}
                </div>
                <div class="mt-3 whitespace-pre-line text-sm leading-6 text-slate-700">
                    {{ legal?.terms_content }}
                </div>
                <div class="mt-4 border-t border-slate-200 pt-3">
                    <Link :href="route('app.contact.index')" class="text-xs font-semibold text-slate-700 underline underline-offset-4">
                        Need help? Open Contact Us
                    </Link>
                </div>
            </AppCard>
        </div>
    </MobileAppLayout>
</template>
