@extends('layouts.app')

@section('title', 'Welcome to Jrcm')

@section('content')
<div class="row align-items-center py-5">
    <div class="col-lg-6 mb-5 mb-lg-0">
        <h1 class="display-3 fw-bold mb-3 display-font" style="background: linear-gradient(to right, #ffffff, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
            Next-Gen Interactive Learning Platform
        </h1>
        <p class="fs-5 text-muted mb-4">
            Master skillsets with production-ready online courses, live interactive Zoom classrooms, granular quizzes, automated attendance, and real-time random peer matching with integrated wallet calling features.
        </p>
        <div class="d-flex flex-wrap gap-3">
            @auth
                <a href="{{ route('student.dashboard') }}" class="btn btn-primary-custom px-4 py-3"><i class="fa-solid fa-gauge me-2"></i>Go to Dashboard</a>
            @else
                <a href="{{ route('register') }}" class="btn btn-primary-custom px-4 py-3">Start Learning Now</a>
                <a href="{{ route('login') }}" class="btn btn-secondary-custom px-4 py-3">Explore Dashboard</a>
            @endauth
        </div>
    </div>
    <div class="col-lg-6">
        <div class="glass-card p-5 text-center">
            <h4 class="mb-4 text-indigo-400" style="color: var(--accent-color);"><i class="fa-solid fa-cubes me-2"></i>Integrated Ecosystem</h4>
            <div class="row g-3">
                <div class="col-6">
                    <div class="p-3 bg-dark bg-opacity-50 rounded-3 border border-secondary border-opacity-50">
                        <i class="fa-solid fa-graduation-cap fs-3 mb-2 text-primary"></i>
                        <h6>Premium Courses</h6>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-3 bg-dark bg-opacity-50 rounded-3 border border-secondary border-opacity-50">
                        <i class="fa-solid fa-circle-question fs-3 mb-2 text-warning"></i>
                        <h6>Rigorous Quizzes</h6>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-3 bg-dark bg-opacity-50 rounded-3 border border-secondary border-opacity-50">
                        <i class="fa-solid fa-wallet fs-3 mb-2 text-success"></i>
                        <h6>Built-in Wallet</h6>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-3 bg-dark bg-opacity-50 rounded-3 border border-secondary border-opacity-50">
                        <i class="fa-solid fa-phone fs-3 mb-2 text-danger"></i>
                        <h6>Random Calling</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection