@extends('layouts.app')
@section('title', 'Your apps · AGS Account')

@section('content')
  <div style="margin-bottom: 8px;">
    <h1 style="margin-bottom: 4px;">Welcome back{{ $user->name ? ', ' . explode(' ', $user->name)[0] : '' }}.</h1>
    <p class="muted">Pick an app to launch. You're already signed in — no extra step.</p>
  </div>

  @if ($apps->isEmpty())
    <div class="card" style="margin-top: 20px;">
      <p>No apps configured yet. Visit the admin to register Vocab, Math, and Forma.</p>
    </div>
  @else
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px;">
      @foreach ($apps as $app)
        <a href="{{ route('app.launch', $app->slug) }}"
           style="text-decoration: none; color: inherit;">
          <div class="card" style="border-left: 6px solid {{ $app->color }}; transition: transform 120ms;"
               onmouseover="this.style.transform='translateY(-2px)'"
               onmouseout="this.style.transform='none'">
            <div style="font-size: 28px; line-height: 1; margin-bottom: 10px;">
              {{ $app->icon ?: '✦' }}
            </div>
            <h2 style="margin: 0 0 4px 0; font-size: 18px;">{{ $app->name }}</h2>
            <p class="muted" style="margin: 0;">{{ $app->description }}</p>
            <p style="margin: 14px 0 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: {{ $app->color }};">
              LAUNCH →
            </p>
          </div>
        </a>
      @endforeach
    </div>
  @endif
@endsection