@extends('layouts.base')

@section('content')
<main id="contenido" class="flex min-h-full flex-col items-center justify-center px-6 py-16">
    <div class="w-full max-w-xl text-center">
        <div class="mx-auto mb-8 grid size-14 grid-cols-2 gap-1.5" aria-hidden="true">
            <span class="rounded-md bg-indigo-600"></span>
            <span class="rounded-md bg-indigo-300"></span>
            <span class="rounded-md bg-indigo-300"></span>
            <span class="rounded-md bg-indigo-600"></span>
        </div>

        <h1 class="text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl">{{ $name }}</h1>

        <p class="mt-4 text-base leading-7 text-slate-600">
            Microaplicaciones para particulares, autónomos y empresas. Crea tu cuenta, organiza a tu equipo
            y prepárate para las primeras aplicaciones.
        </p>

        @if (session('status'))
            <p role="status" class="mx-auto mt-6 max-w-sm rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-800">{{ session('status') }}</p>
        @endif

        <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            @auth
                <a href="{{ route('dashboard') }}" class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-indigo-500">Ir a mi panel</a>
            @else
                <a href="{{ route('register') }}" class="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-indigo-500">Crear cuenta</a>
                <a href="{{ route('login') }}" class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 shadow-xs hover:bg-slate-50">Iniciar sesión</a>
            @endauth
        </div>

        <p class="mt-8">
            <span class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-sm text-slate-600 shadow-sm">
                <span class="size-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
                Versión <span class="font-medium text-slate-900" data-version>{{ $version }}</span>
            </span>
        </p>
    </div>

    <footer class="mt-16 text-xs text-slate-400" x-data="{ year: new Date().getFullYear() }">
        <a href="{{ route('legal.terms') }}" class="hover:text-slate-600">Condiciones de uso</a> ·
        <a href="{{ route('legal.privacy') }}" class="hover:text-slate-600">Privacidad</a> ·
        &copy; <span x-text="year">{{ now()->year }}</span> {{ $name }}
    </footer>
</main>
@endsection