@extends('layouts.app')

@section('title', 'Welcome - ' . config('app.name'))

@section('content')
<div class="welcome-container">
    <div class="text-center mb-5">
        <img src="{{ asset('storage/images/fullLogo.png') }}" alt="{{ config('app.name') }}" style="height: 60px;" class="mb-4">
        <h1 class="mb-3">Welcome to {{ config('app.name') }}</h1>
        <p class="text-secondary">Discover, watch, and share videos</p>
    </div>
    
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="d-grid gap-3">
                @auth
                    <a href="{{ route('videos.index') }}" class="btn btn-lg" style="background: var(--brand-red); color: white;">
                        <i class="bi bi-play-circle-fill me-2"></i>
                        Browse Videos
                    </a>
                @else
                    <a href="{{ route('login') }}" class="btn btn-lg" style="background: var(--brand-red); color: white;">
                        <i class="bi bi-box-arrow-in-right me-2"></i>
                        Sign In
                    </a>
                    <a href="{{ route('register') }}" class="btn btn-lg btn-outline-light">
                        <i class="bi bi-person-plus me-2"></i>
                        Create Account
                    </a>
                @endauth
                <a href="{{ route('videos.trending') }}" class="btn btn-lg btn-outline-light">
                    <i class="bi bi-fire me-2"></i>
                    Trending Videos
                </a>
            </div>
        </div>
    </div>
    
    <div class="text-center mt-5 pt-4 border-top" style="border-color: var(--border-color) !important;">
        <p class="text-secondary mb-2">Explore our features</p>
        <div class="d-flex justify-content-center gap-4 flex-wrap">
            <div class="text-center">
                <i class="bi bi-play-btn-fill fs-2" style="color: var(--brand-red);"></i>
                <p class="mt-2 mb-0">Watch Videos</p>
            </div>
            <div class="text-center">
                <i class="bi bi-cloud-upload fs-2" style="color: var(--brand-red);"></i>
                <p class="mt-2 mb-0">Upload Content</p>
            </div>
            <div class="text-center">
                <i class="bi bi-people fs-2" style="color: var(--brand-red);"></i>
                <p class="mt-2 mb-0">Build Community</p>
            </div>
        </div>
    </div>
</div>
@endsection