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

<template>
    <AppLayout title="Settings">
        <template #header></template>
        <div class="pt-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                                        <h3 class="text-lg font-semibold mb-2">Segments</h3>
                                        <p class="text-sm text-gray-600 mb-4">Manage segments used across the app.</p>
                                        <Link :href="route('settings.segments')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Segments</Link>
                                    </div>
                                    <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                                        <h3 class="text-lg font-semibold mb-2">Workflow</h3>
                                        <p class="text-sm text-gray-600 mb-4">Configure actions and decisions relationships.</p>
                                        <Link :href="route('settings.workflow')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Workflow</Link>
                                    </div>
                                    <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                                        <h3 class="text-lg font-semibold mb-2">Field Job Settings</h3>
                                        <p class="text-sm text-gray-600 mb-4">Configure segment-based field job rules.</p>
                                        <Link :href="route('settings.fieldjob.index')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Field Job</Link>
                                    </div>
                                </div>
            </div>
        </div>
    </AppLayout>
</template>