<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { Calendar, FileCheck, Mail, Shield, Users } from 'lucide-vue-next';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { dashboard, login, register } from '@/routes';

withDefaults(
    defineProps<{
        canRegister: boolean;
    }>(),
    {
        canRegister: true,
    },
);
</script>

<template>
    <Head :title="`${$page.props.name} — Gestion des déclarations fiscales`" />

    <div class="min-h-screen bg-background">
        <!-- Header -->
        <header
            class="sticky top-0 z-50 border-b border-sidebar-border/70 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
        >
            <div
                class="mx-auto flex h-16 max-w-6xl items-center justify-between px-4"
            >
                <Link href="/" class="flex items-center gap-2 font-semibold">
                    <AppLogoIcon class="size-8 fill-current text-primary" />
                    <span>{{ $page.props.name }}</span>
                </Link>
                <nav class="flex items-center gap-4">
                    <template v-if="$page.props.auth.user">
                        <Button as-child>
                            <Link :href="dashboard()">Tableau de bord</Link>
                        </Button>
                    </template>
                    <template v-else>
                        <Button variant="ghost" as-child>
                            <Link :href="login()">Connexion</Link>
                        </Button>
                        <Button v-if="canRegister" as-child>
                            <Link :href="register()">Créer un compte</Link>
                        </Button>
                    </template>
                </nav>
            </div>
        </header>

        <main>
            <!-- Hero -->
            <section class="px-4 py-20 md:py-28">
                <div class="mx-auto max-w-4xl text-center">
                    <h1
                        class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"
                    >
                        Simplifiez la gestion des
                        <span class="text-primary">déclarations fiscales</span>
                    </h1>
                    <p
                        class="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground"
                    >
                        Plateforme dédiée aux cabinets d'expertise comptable au
                        Maroc. Centralisez les documents, les demandes de pièces
                        et les validations clients en un seul endroit.
                    </p>
                    <div
                        class="mt-10 flex flex-wrap items-center justify-center gap-4"
                    >
                        <template v-if="$page.props.auth.user">
                            <Button size="lg" as-child>
                                <Link :href="dashboard()"
                                    >Accéder au tableau de bord</Link
                                >
                            </Button>
                        </template>
                        <template v-else>
                            <Button size="lg" as-child>
                                <Link :href="register()"
                                    >Commencer gratuitement</Link
                                >
                            </Button>
                            <Button size="lg" variant="outline" as-child>
                                <Link :href="login()">Se connecter</Link>
                            </Button>
                        </template>
                    </div>
                </div>
            </section>

            <Separator />

            <!-- Features -->
            <section class="px-4 py-20">
                <div class="mx-auto max-w-6xl">
                    <div class="mb-16 text-center">
                        <h2
                            class="text-3xl font-bold tracking-tight sm:text-4xl"
                        >
                            Tout ce dont votre cabinet a besoin
                        </h2>
                        <p class="mx-auto mt-4 max-w-2xl text-muted-foreground">
                            Une solution complète pour gérer les échanges de
                            documents fiscaux avec vos clients.
                        </p>
                    </div>
                    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        <Card>
                            <CardHeader>
                                <div
                                    class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
                                >
                                    <Users class="size-6 text-primary" />
                                </div>
                                <CardTitle>Gestion des clients</CardTitle>
                                <CardDescription>
                                    Gérez vos clients et leurs informations
                                    (ICE, IF, RC, CNSS…)
                                </CardDescription>
                            </CardHeader>
                        </Card>
                        <Card>
                            <CardHeader>
                                <div
                                    class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
                                >
                                    <Calendar class="size-6 text-primary" />
                                </div>
                                <CardTitle>Déclarations par type</CardTitle>
                                <CardDescription>
                                    TVA, IS, IR, CNSS, Bilan annuel — créez et
                                    suivez vos déclarations
                                </CardDescription>
                            </CardHeader>
                        </Card>
                        <Card>
                            <CardHeader>
                                <div
                                    class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
                                >
                                    <Mail class="size-6 text-primary" />
                                </div>
                                <CardTitle>Invitations sécurisées</CardTitle>
                                <CardDescription>
                                    Envoyez des liens par email pour que vos
                                    clients déposent leurs documents
                                </CardDescription>
                            </CardHeader>
                        </Card>
                        <Card>
                            <CardHeader>
                                <div
                                    class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
                                >
                                    <FileCheck class="size-6 text-primary" />
                                </div>
                                <CardTitle>Documents centralisés</CardTitle>
                                <CardDescription>
                                    Tous les documents dans un espace unique,
                                    avec historique et téléchargement
                                </CardDescription>
                            </CardHeader>
                        </Card>
                        <!-- <Card>
                            <CardHeader>
                                <div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
                                    <Building2 class="size-6 text-primary" />
                                </div>
                                <CardTitle>Multi-tenant</CardTitle>
                                <CardDescription>
                                    Un workspace par cabinet, isolation complète des données
                                </CardDescription>
                            </CardHeader>
                        </Card> -->
                        <Card>
                            <CardHeader>
                                <div
                                    class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
                                >
                                    <Shield class="size-6 text-primary" />
                                </div>
                                <CardTitle>Validation client</CardTitle>
                                <CardDescription>
                                    Demandez une confirmation avec signature
                                    pour valider vos situations
                                </CardDescription>
                            </CardHeader>
                        </Card>
                    </div>
                </div>
            </section>

            <Separator />

            <!-- CTA -->
            <section class="px-4 py-20">
                <div class="mx-auto max-w-4xl text-center">
                    <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
                        Prêt à simplifier votre quotidien ?
                    </h2>
                    <p class="mt-4 text-muted-foreground">
                        Rejoignez les cabinets qui font confiance à
                        {{ $page.props.name }}.
                    </p>
                    <div class="mt-8">
                        <template v-if="$page.props.auth.user">
                            <Button size="lg" as-child>
                                <Link :href="dashboard()"
                                    >Accéder au tableau de bord</Link
                                >
                            </Button>
                        </template>
                        <template v-else>
                            <Button size="lg" as-child>
                                <Link :href="register()"
                                    >Créer un compte gratuit</Link
                                >
                            </Button>
                        </template>
                    </div>
                </div>
            </section>
        </main>

        <!-- Footer -->
        <footer class="border-t border-sidebar-border/70 py-8">
            <div class="mx-auto max-w-6xl px-4">
                <div
                    class="flex flex-col items-center justify-between gap-4 sm:flex-row"
                >
                    <div class="flex items-center gap-2">
                        <AppLogoIcon
                            class="size-5 fill-current text-muted-foreground"
                        />
                        <span class="text-sm text-muted-foreground">{{
                            $page.props.name
                        }}</span>
                    </div>
                    <p class="text-sm text-muted-foreground">
                        Tous droits réservés © {{ new Date().getFullYear() }}
                        {{ $page.props.name }}.
                    </p>
                </div>
            </div>
        </footer>
    </div>
</template>
