@extends('layouts.app')

@section('title', 'City10 — Cidade 3D Virtual com Agentes de IA')

@section('content')
<div class="hero" style="text-align:center; padding: 2.5rem 0 1.5rem;">
    <h1 style="font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .75rem; color:#fff; line-height:1.1;">
        City<span style="color: var(--brand);">10</span>
    </h1>
    <p style="color: var(--muted); max-width: 640px; margin: 0 auto 1.5rem; font-size: 1.05rem;">
        {{ __('welcome.tagline') }}
    </p>

    @auth
        <a href="{{ route('dashboard') }}" class="btn btn-primary" style="display:inline-block; padding:.8rem 1.6rem;">{{ __('Dashboard') }}</a>
    @else
        <a href="{{ route('login') }}" class="btn btn-primary" style="display:inline-block; padding:.8rem 1.6rem;">{{ __('Login') }}</a>
        <a href="{{ route('register') }}" class="btn" style="display:inline-block; padding:.8rem 1.6rem;">{{ __('Register') }}</a>
    @endauth
</div>

<div class="grid-3" style="margin-top:1.5rem;">
    <div class="card">
        <h3 style="margin-top:0; color:#fff;">{{ __('welcome.card1.title') }}</h3>
        <p style="color:var(--muted); font-size:.95rem;">{{ __('welcome.card1.desc') }}</p>
    </div>
    <div class="card">
        <h3 style="margin-top:0; color:#fff;">{{ __('welcome.card2.title') }}</h3>
        <p style="color:var(--muted); font-size:.95rem;">{{ __('welcome.card2.desc') }}</p>
    </div>
    <div class="card">
        <h3 style="margin-top:0; color:#fff;">{{ __('welcome.card3.title') }}</h3>
        <p style="color:var(--muted); font-size:.95rem;">{{ __('welcome.card3.desc') }}</p>
    </div>
</div>

<div class="card" style="margin-top:1.5rem;">
    <h3 style="margin-top:0; color:#fff;">{{ __('welcome.city.title') }}</h3>
    <p style="color:var(--muted); font-size:.95rem;">
        {{ __('welcome.city.desc') }}
    </p>
</div>
@endsection

@push('styles')
<style>
    .hero { animation: fadeUp .6s ease both; }
    .grid-3 .card { animation: fadeUp .6s ease both; }
    .grid-3 .card:nth-child(2) { animation-delay: .08s; }
    .grid-3 .card:nth-child(3) { animation-delay: .16s; }
    @keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to {opacity:1; transform:none;} }
</style>
@endpush