@extends('frontend::layouts.master')
@section('style')
    <link rel="stylesheet" href="/frontend/assets/css/custom-style.css">
    <link rel="stylesheet" href="{{ mix('css/frontend.css') }}">
    <link rel="stylesheet" href="/frontend/assets/css/stage-style.css">
@endsection
@section('content')
    {{-- <livewire:frontend::component.stage.top-menu /> --}}
    <livewire:frontend::component.stage.top-menu />

    <!-- Start Main Page Wrapper -->
    <main class="main-page-wrapper">

        <!-- faqs -->
        <div class="rn-client-area section-separator" id="clients">
            <div class="container">
                
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-title text-center mt--20">
                            <span class="subtitle"></span>
                            <h2 class="title">คำถามที่พบบ่อย</h2>
                        </div>
                    </div>
                </div>

                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="faq-section">
                            

                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Question 1?
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse show"
                                        aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Answer to question 1.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            Question 2?
                                        </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            Answer to question 2.
                                        </div>
                                    </div>
                                </div>
                                <!-- Add more accordion items as needed -->
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End faqs-->

        <!-- Back to  top Start -->
        <div class="backto-top">
            <div>
                <i data-feather="arrow-up"></i>
            </div>
        </div>
        <!-- Back to top end -->
    </main>

    <livewire:frontend::component.footer />
@endsection
@section('script')
    <script src="{{ mix('js/frontend.js') }}"></script>
@endsection