@extends('layouts.appLayout')

@section('title', 'Frequently Asked Questions')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/mainStyles.css') }}">
@endpush

@section('content')

    <div class="container mt-5">

        <br>
        <h1 class="text-center mb-4 fw-bold text-white">Frequently Asked Questions (FAQ)</h1>
        <br>

        <div class="accordion" id="faqAccordion">

            <!-- Qué es DailyStudy -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                        ¿What is DailyStudy?
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        DailyStudy is an educational platform that offers free, paid, and premium courses for all types of users: students, teachers, and companies. Its goal is to make modern, accessible, and certified learning easy for everyone.
                    </div>
                </div>
            </div>

            <!-- Tipos de cursos -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                        What types of courses are offered?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        <ul>
                            <li>Free courses</li>
                            <li>Paid courses</li>
                            <li>Premium courses (for companies)</li>
                        </ul>
                        Some courses include downloadable certificates upon completion.
                    </div>
                </div>
            </div>

            <!-- Quién puede usar -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                        Who can use DailyStudy?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        DailyStudy is designed for students, self-learners, professionals, companies, teachers, and administrators.
                    </div>
                </div>
            </div>

            <!-- Funcionalidades -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
                        ¿What features does the platform offer?
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        Registration, profile management, course discovery, personal notes, certificates, exams, progress tracking, and more.
                    </div>
                </div>
            </div>

            <!-- Acceso a cursos -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFive">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive">
                        How do I access a course?
                    </button>
                </h2>
                <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        From the <strong>Explore Courses</strong> section, you can filter and access courses. You can enroll directly or add them to your cart for purchase.
                    </div>
                </div>
            </div>

            <!-- Métodos de pago -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSix">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix">
                        What payment methods are accepted?
                    </button>
                </h2>
                <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        Payments are made through <strong>Stripe</strong> using bank cards. You can also use virtual coins earned on the platform.
                    </div>
                </div>
            </div>

            <!-- Certificados -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSeven">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven">
                        ¿Do I receive a certificate upon completing a course?
                    </button>
                </h2>
                <div id="collapseSeven" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        Yes, some courses include certificates that are automatically generated upon completion. They are valid for students and professionals.
                    </div>
                </div>
            </div>

            <!-- Crear cursos -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingEight">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight">
                        ¿Can I create my own courses?
                    </button>
                </h2>
                <div id="collapseEight" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        Yes. Teachers and companies can create courses from their dashboard, add chapters, exams, and certificates.
                    </div>
                </div>
            </div>

            <!-- Diferencia con Udemy/Coursera -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingNine">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine">
                        ¿What makes DailyStudy different from platforms like Udemy or Coursera?
                    </button>
                </h2>
                <div id="collapseNine" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        DailyStudy focuses on user experience with features like instant certificates and an environment adapted to companies and students.
                    </div>
                </div>
            </div>

            <!-- Ver progreso -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTen">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen">
                        ¿Where can I view my progress?
                    </button>
                </h2>
                <div id="collapseTen" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        You can view your progress from your profile, including active courses, notes, certificates, and earned coins.
                    </div>
                </div>
            </div>

            <!-- Ser profesor -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingEleven">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEleven">
                        ¿How can I be a teacher?
                    </button>
                </h2>
                <div id="collapseEleven" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        If you are a certified teacher or have previous experience teaching in a school, university, or training environment, you can request a role change to become a teacher on our platform. You'll need to submit your CV, a portfolio, and optionally your LinkedIn profile. Our team will review your request and grant you teaching access if approved.<br><br>
                        <p><a href="{{route('teacher.request')}}" class="fw-bold text-decoration-underline" style="color: #6f42c1;">Request teacher access</a>(you have to login first)</p>
                    </div>
                </div>
            </div>

            <!-- Soporte -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwelve">
                    <button class="accordion-button fs-4 collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwelve">
                        ¿How can I contact support?
                    </button>
                </h2>
                <div id="collapseTwelve" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body fs-5" style="color: #6f42c1 !important; margin-left: 5px;">
                        You can contact us from our "Support" page.
                    </div>
                </div>
            </div>

        </div>
    </div>

<br><br>
@endsection