<template>
    <Head :title="`${status} - ${title}`" />

    <div class="home-page">
        <!-- Nav (same as Home) -->
        <nav class="home-nav">
            <a href="/" class="nav-brand">
                <svg class="nav-brand-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="2" width="13" height="13" rx="3" fill="#EA4335"/>
                    <rect x="17" y="2" width="13" height="13" rx="3" fill="#4285F4"/>
                    <rect x="2" y="17" width="13" height="13" rx="3" fill="#FBBC05"/>
                    <rect x="17" y="17" width="13" height="13" rx="3" fill="#34A853"/>
                </svg>
                <span class="nav-brand-name">CRMfic</span>
            </a>
            <a href="/dashboard" class="nav-cta">
                Open App
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width:14px;height:14px"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
            </a>
        </nav>

        <!-- Error hero -->
        <section class="hero error-hero">
            <div class="error-code">{{ status }}</div>

            <h1 class="hero-title error-title">{{ title }}</h1>

            <p class="hero-sub">{{ description }}</p>

            <div class="hero-actions">
                <a href="/dashboard" class="btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>
                    Go to Dashboard
                </a>
                <a href="/" class="error-back-link">
                    ← Back to home
                </a>
            </div>

            <div class="color-chips" style="margin-top: 48px">
                <div class="chip" style="background:#EA4335"></div>
                <div class="chip" style="background:#4285F4"></div>
                <div class="chip" style="background:#FBBC05"></div>
                <div class="chip" style="background:#34A853"></div>
            </div>
        </section>

        <footer class="home-footer">
            &copy; {{ new Date().getFullYear() }} CRMfic. All rights reserved.
        </footer>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { Head } from '@inertiajs/vue3';

const props = defineProps({
    status: {
        type: Number,
        required: true,
    },
});

const title = computed(() => ({
    404: 'Page not found',
    403: 'Access forbidden',
    500: 'Server error',
    503: 'Service unavailable',
}[props.status] ?? 'An error occurred'));

const description = computed(() => ({
    404: "Sorry, the page you're looking for doesn't exist or has been moved.",
    403: "You don't have permission to access this page.",
    500: "Something went wrong on our end. Please try again in a moment.",
    503: "We're down for maintenance. Please check back soon.",
}[props.status] ?? 'An unexpected error occurred. Please try again.'));
</script>
