<script setup>
import { Head, Link } from '@inertiajs/vue3';

defineProps({
    canLogin: {
        type: Boolean,
    },
    canRegister: {
        type: Boolean,
    },
});
</script>

<template>
    <Head title="Gestor de tareas" />

    <div class="landing-shell min-vh-100">
        <div class="container py-4 py-lg-5">
            <header class="hero-card rounded-4 px-3 px-lg-4 py-3 mb-4">
                <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                    <div class="d-flex align-items-center gap-3">
                        <div class="brand-badge">GT</div>
                        <div>
                            <h1 class="h4 mb-1">Gestor de Tareas</h1>
                            <p class="text-muted mb-0 small">Organiza proyectos, prioriza tareas y avanza sin perder el control.</p>
                        </div>
                    </div>

                    <nav v-if="canLogin" class="d-flex flex-wrap gap-2 align-items-center">
                        <template v-if="$page.props.auth.user">
                            <Link :href="route('dashboard')" class="btn btn-primary btn-sm px-3">
                                Ir al panel
                            </Link>
                        </template>
                        <template v-else>
                            <Link :href="route('login')" class="btn btn-outline-primary btn-sm px-3">
                                Iniciar sesión
                            </Link>
                            <Link v-if="canRegister" :href="route('register')" class="btn btn-primary btn-sm px-3">
                                Registrarse
                            </Link>
                        </template>
                    </nav>
                </div>
            </header>

            <main class="row align-items-center g-4">
                <section class="col-lg-7">
                    <div class="hero-card rounded-4 p-4 p-lg-5">
                        <span class="badge rounded-pill text-bg-primary-subtle text-primary mb-3">Productividad clara</span>
                        <h2 class="display-6 fw-bold mb-3">Tu espacio para gestionar proyectos y tareas con calma.</h2>
                        <p class="lead text-secondary mb-4">
                            Crea proyectos, organiza las prioridades, divide cada trabajo en subtareas y lleva un seguimiento visual de cada avance.
                        </p>

                        <div class="d-flex flex-wrap gap-2">
                            <Link v-if="$page.props.auth.user" :href="route('projects.index')" class="btn btn-primary btn-lg">
                                Abrir proyectos
                            </Link>
                            <template v-else>
                                <Link :href="route('register')" class="btn btn-primary btn-lg">
                                    Empieza gratis
                                </Link>
                                <Link :href="route('login')" class="btn btn-outline-primary btn-lg">
                                    Ya tengo cuenta
                                </Link>
                            </template>
                        </div>
                    </div>
                </section>

                <section class="col-lg-5">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="hero-card rounded-4 p-4 h-100">
                                <div class="feature-icon mb-3">
                                    <i class="bi bi-kanban"></i>
                                </div>
                                <h3 class="h5">Tablero visual</h3>
                                <p class="text-secondary mb-0">Mueve tareas entre estados y visualiza el progreso desde una sola vista.</p>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="hero-card rounded-4 p-4 h-100">
                                <div class="feature-icon mb-3">
                                    <i class="bi bi-list-check"></i>
                                </div>
                                <h3 class="h5">Subtareas y prioridades</h3>
                                <p class="text-secondary mb-0">Desglosa cada trabajo y marca lo importante para completar todo sin ruido.</p>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="hero-card rounded-4 p-4 h-100">
                                <div class="feature-icon mb-3">
                                    <i class="bi bi-shield-check"></i>
                                </div>
                                <h3 class="h5">Acceso seguro</h3>
                                <p class="text-secondary mb-0">Tu sesión se mantiene protegida y tu panel está disponible cuando quieras entrar.</p>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>
    </div>
</template>
