<script setup>
import { Head, Link } from '@inertiajs/vue3';
import { tokens, FONT } from '@/Components/Diabetix/palette.js';

defineProps({
    canLogin: Boolean,
    canRegister: Boolean,
});

const tok = tokens('mint');
</script>

<template>
    <Head title="Diabetix — Coach glycémique IA" />
    <div :style="{ minHeight: '100vh', background: '#eeece8', fontFamily: FONT.body, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '24px' }">
        <div :style="{ maxWidth: '440px', width: '100%', background: tok.bg, borderRadius: '32px', padding: '40px 28px', boxShadow: '0 12px 60px rgba(42,53,51,0.10)' }">
            <div :style="{ width: '72px', height: '72px', borderRadius: '50%', background: tok.light, border: '3px solid ' + tok.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '36px', margin: '0 auto 20px' }">🤖</div>
            <h1 :style="{ fontFamily: FONT.title, fontSize: '32px', fontWeight: 700, color: tok.text, textAlign: 'center', marginBottom: '8px' }">Diabetix</h1>
            <p :style="{ textAlign: 'center', color: tok.muted, fontSize: '14px', marginBottom: '28px', lineHeight: 1.6 }">
                Votre coach glycémique IA, pensé pour vous accompagner au quotidien dans la gestion de votre diabète.
            </p>

            <div style="display:flex;flex-direction:column;gap:10px;">
                <Link v-if="canLogin" :href="route('login')"
                    :style="{ display: 'block', textAlign: 'center', padding: '14px', background: tok.primary, color: '#fff', borderRadius: '16px', textDecoration: 'none', fontWeight: 600, fontSize: '15px' }">
                    Se connecter
                </Link>
                <Link v-if="canRegister" :href="route('register')"
                    :style="{ display: 'block', textAlign: 'center', padding: '14px', background: tok.white, color: tok.primary, border: '1.5px solid ' + tok.primary, borderRadius: '16px', textDecoration: 'none', fontWeight: 600, fontSize: '15px' }">
                    Créer un compte
                </Link>
            </div>

            <div :style="{ marginTop: '28px', fontSize: '11px', color: tok.muted, textAlign: 'center' }">
                Suivi des glycémies · Défis · Coach IA · Statistiques
            </div>
        </div>
    </div>
</template>
