@extends('layouts.app')

@section('content')
    <div class="min-h-screen flex flex-col justify-center items-center px-4">
        <div class="text-center">
            <h1 class="text-2xl sm:text-3xl md:text-3xl lg:text-4xl font-extrabold text-blue-600 dark:text-indigo-400 mb-4">
                {{ trans('siri.title') }}
            <p
                class="text-gray-600 dark:text-gray-300 max-w-xl sm:max-w-2xl md:max-w-3xl lg:max-w-4xl mx-auto text-base sm:text-lg md:text-xl">
                {{ trans('siri.subtitle') }}
            </p>
        </div>
        <div class="container max-w-2xl mx-auto">
            <div
                class="text-center rounded-xl py-10 shadow-lg border border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-800 dark:shadow-none transition-colors">
                <h1 class="text-3xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">{{ trans('main.welcome_dtr') }}</h1>
                <p class="mb-8 text-gray-700 dark:text-gray-300">{{ trans('main.choose_go') }}</p>

                <div class="flex justify-center gap-4">
                    <a href="{{ route('siri.index') }}"
                        class="btn btn-primary inline-flex items-center gap-2 px-6 py-3 rounded-md
                   bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-500 dark:hover:bg-blue-400 dark:text-white
                   focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-400">
                        {{ trans('main.siri') }}
                    </a>

                    <a href="{{ route('cosiri.index') }}"
                        class="btn btn-secondary inline-flex items-center gap-2 px-6 py-3 rounded-md
                   bg-gray-100 hover:bg-gray-200 text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-100
                   border border-transparent dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-700">
                       COSIRI
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection