@extends('layouts.app')

@section('content')
    @php
        $modelTypeAccent = [
            'anatomy'    => 'rose',
            'cellular'   => 'emerald',
            'equipment'  => 'sky',
            'person'     => 'amber',
            'place'      => 'indigo',
            'historical' => 'fuchsia',
        ];
    @endphp

    {{-- HERO --}}
    <section class="hero-card mb-10">
        <div class="hero-inner">
            <p class="hero-eyebrow">Immersive Medical Learning</p>
            <h1 class="hero-title">Interactive 3D Study&nbsp;Platform</h1>
            <p class="hero-lede">
                Explore anatomical models, follow guided lessons, and test understanding with integrated quizzes &mdash; built for veterinary and medical students.
            </p>

            <div class="hero-actions">
                <a href="{{ route('models.index') }}" class="hero-btn hero-btn-primary">Browse models</a>
                <a href="{{ route('lessons.index') }}" class="hero-btn hero-btn-ghost">Open lessons</a>
            </div>

            @if(!empty($stats))
                <div class="hero-stats">
                    <div class="hero-stat">
                        <p class="hero-stat-value">{{ $stats['models'] }}</p>
                        <p class="hero-stat-label">Published models</p>
                    </div>
                    <div class="hero-stat">
                        <p class="hero-stat-value">{{ $stats['lessons'] }}</p>
                        <p class="hero-stat-label">Guided lessons</p>
                    </div>
                    <div class="hero-stat">
                        <p class="hero-stat-value">{{ $stats['quizzes'] }}</p>
                        <p class="hero-stat-label">Quizzes ready</p>
                    </div>
                    <div class="hero-stat">
                        <p class="hero-stat-value">{{ $stats['bodySystems'] }}</p>
                        <p class="hero-stat-label">Body systems</p>
                    </div>
                </div>
            @endif
        </div>
    </section>

    {{-- FEATURED MODELS --}}
    <section class="mb-10">
        <div class="section-head">
            <h2 class="section-title">Featured Models</h2>
            <a href="{{ route('models.index') }}" class="section-link">View all &rarr;</a>
        </div>

        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            @forelse($featuredModels as $model)
                @php $accent = $modelTypeAccent[$model->model_type] ?? 'sky'; @endphp
                <a href="{{ route('models.show', $model->slug) }}" class="model-card model-card-{{ $accent }}">
                    @if($model->thumbnail_url)
                        <div class="model-card-thumb">
                            <img src="{{ $model->thumbnail_url }}" alt="" loading="lazy" referrerpolicy="no-referrer">
                        </div>
                    @else
                        <div class="model-card-thumb model-card-thumb-fallback" aria-hidden="true">
                            <span>{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($model->title, 0, 1)) }}</span>
                        </div>
                    @endif
                    <div class="model-card-inner">
                        <span class="model-card-type">{{ ucfirst($model->model_type) }}</span>
                        <h3 class="model-card-title">{{ $model->title }}</h3>
                        <p class="model-card-meta">{{ $model->programme }} &middot; {{ $model->species }}</p>
                        <div class="model-card-foot">
                            <span class="model-card-time">{{ $model->estimated_minutes }} min</span>
                            <span class="model-card-cta">Study model &rarr;</span>
                        </div>
                    </div>
                </a>
            @empty
                <p class="text-sm text-slate-300">No published models yet.</p>
            @endforelse
        </div>
    </section>

    {{-- FEATURED LESSONS --}}
    <section>
        <div class="section-head">
            <h2 class="section-title">Featured Lessons</h2>
            <a href="{{ route('lessons.index') }}" class="section-link">View all &rarr;</a>
        </div>

        <div class="grid gap-4 md:grid-cols-2">
            @forelse($featuredLessons as $lesson)
                <a href="{{ route('lessons.show', $lesson->slug) }}" class="lesson-card">
                    <div class="lesson-card-body">
                        <h3 class="lesson-card-title">{{ $lesson->title }}</h3>
                        <p class="lesson-card-summary">{{ $lesson->summary }}</p>
                        <span class="lesson-card-cta">Open lesson &rarr;</span>
                    </div>
                </a>
            @empty
                <p class="text-sm text-slate-300">No published lessons yet.</p>
            @endforelse
        </div>
    </section>
@endsection