@extends('layouts.appLayout')

@section('title', 'DailyStudy')

@section('content')
    <div class="container my-5">
        <!-- Card 1: OUR PURPOSE -->
        <div class="row g-0 text-white rounded-4 shadow mb-5 overflow-hidden card_informativo2">
            <div class="col-md-5 p-0">
                <img src="{{ asset('img/dailyStudyPortada.png') }}" alt="About us image"
                    class="img-fluid h-100 w-100 object-fit-cover">
            </div>
            <div class="col-md-7 p-3 p-md-4 d-flex flex-column justify-content-center">
                <h1 class="fw-bold text-uppercase mb-3 mx-4 mx-md-5">Our Purpose</h1>
                <p class="textCardInfo mx-4 mx-md-5">
                    We want to accompany those who are taking their first steps in a new field, as well as those who are
                    looking to professionalize or update their skills. We centralize training programs in one place, with
                    certifications that validate professional growth.
                </p>
            </div>
        </div>

        <!-- Card 2: ABOUT US -->
        <div class="row g-0 text-white rounded-4 shadow mb-5 overflow-hidden card_informativo1">
            <div class="col-md-7 p-3 p-md-4 d-flex flex-column justify-content-center">
                <h1 class="fw-bold text-uppercase mb-3 mx-4 mx-md-5">About Us</h1>
                <p class="textCardInfo mx-4 mx-md-5">
                    We are a group of students with a clear idea: to bring knowledge to more people.
                    We create a platform that connects training, opportunities and real development,
                    both for those who learn and for those who teach or seek talent.
                </p>
                <p class="textOrange fw-semibold textCardInfo mx-4 mx-md-5">
                    We want to be the bridge between those who want to grow and those who can drive it.
                </p>
            </div>
            <div class="col-md-5 p-0">
                <img src="{{ asset('img/basados.png') }}" alt="About us image"
                    class="img-fluid h-100 w-100 object-fit-cover">
            </div>
        </div>
    </div>

    <div class="container my-5">
        <div class="row text-center">
            <div class="col-md-4 mb-4">
                <i class="fa-solid fa-graduation-cap fa-3x mb-3 textBlue"></i>
                <h5>Quality Education</h5>
                <p>Learn from experts in various fields with updated, professional content.</p>
            </div>
            <div class="col-md-4 mb-4">
                <i class="fa-solid fa-laptop-code fa-3x mb-3 textBlue"></i>
                <h5>Interactive Platform</h5>
                <p>Access courses, tutorials, and online resources in a dynamic and simple way.</p>
            </div>
            <div class="col-md-4 mb-4">
                <i class="fa-solid fa-users fa-3x mb-3 textBlue"></i>
                <h5>Active Community</h5>
                <p>Join thousands of students and professionals who share and learn together.</p>
            </div>
        </div>
    </div>

    <!-- Sección de llamada a la acción: Come and Join Us -->
    <div class="container-fluid backgroundBlue text-white py-5">
        <div class="container text-center">
            <h2 class="fw-bold text-uppercase mb-3">Come and Join Us</h2>
            <p class="mb-4">
                Be a part of our growing community and start your journey with DailyStudy.
            </p>
            <a href="{{ route('registerPage') }}" class="btn btn3">
                <i class="fa-solid fa-user-plus"></i> Register Now
            </a>
        </div>
    </div>

    <div class="container my-5">
        <h2 class="text-center fw-bold text-uppercase mb-4">Explore Our Courses</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <h5 class="textBlue">Technology</h5>
                <ul class="list-unstyled">
                    <li>Cybersecurity</li>
                    <li>Networks</li>
                    <li>Web Development</li>
                    <li>Data Science</li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <h5 class="textBlue">Business</h5>
                <ul class="list-unstyled">
                    <li>Entrepreneurship</li>
                    <li>Marketing</li>
                    <li>Management</li>
                    <li>Finance</li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <h5 class="textBlue">Creative Arts</h5>
                <ul class="list-unstyled">
                    <li>Graphic Design</li>
                    <li>Photography</li>
                    <li>Film & Video</li>
                    <li>Music Production</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <h5 class="textBlue">Health & Wellness</h5>
                <ul class="list-unstyled">
                    <li>Fitness</li>
                    <li>Nutrition</li>
                    <li>Mental Health</li>
                    <li>Yoga</li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <h5 class="textBlue">Languages</h5>
                <ul class="list-unstyled">
                    <li>English</li>
                    <li>Spanish</li>
                    <li>French</li>
                    <li>German</li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <h5 class="textBlue">Personal Development</h5>
                <ul class="list-unstyled">
                    <li>Leadership</li>
                    <li>Productivity</li>
                    <li>Mindfulness</li>
                    <li>Time Management</li>
                </ul>
            </div>
        </div>
    </div>

    <div id="register-overlay"></div>
    <div id="register-popup">
        <h4>Join Us Today!</h4>
        <p>Unlock all courses and track your progress—register now.</p>
        <a href="{{ route('registerPage') }}" id="register-now-btn" class="btn btn2">Register Now</a>
        <button id="register-close-btn" class="btn btn-secondary">Maybe Later</button>
    </div>

    <div id="cookie-banner" class="d-none">
        <span>This website uses cookies to ensure you get the best experience on our site.</span>
        <button id="accept-cookies" class="btn btn-sm btn-primary">Got it!</button>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/mainPageAnimations.js') }}" defer></script>
@endpush
