@push('metadata')
@php
$page_id = 21;
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.faqs');
@endphp

<title>{{ @$mTitle }}</title>
<meta name="keywords" content="{{ @$mKWords }}" />
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="{{ app()->getLocale() }}" />
<meta property=og:type content="{{config('constants.organisation_type_news')}}" />
<meta property="og:site_name" content="Crypto Hindi News" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$mImage }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="{{ @$mTitle }}" />
<meta property="twitter:description" content="{{ @$mDescr }}" />
<meta property="twitter:url" content="{{ @$mUrl }}" />
<meta property="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush
@push('pageId')
<script>
    window.pageId = "{{ $seoData['id'] ?? '' }}";
</script>
@endpush
@push('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getImageObjectSchema('https://cryptohindinews.in/assets/images/logo/hindi-black-logo.webp',$mTitle) !!}
{!! SchemaHelper::getBreadcrumbSchema([['name' => 'Home', 'url' => url('/')],['name' =>$seoData['breadcrumb'] , 'url' => $mUrl]]) !!}
{!! SchemaHelper::getFaqSchema($faqs) !!}
@endpush

<div>
    <section class="bg-darkpink p-2 breadcrumb mb-0">
        <div class="container">
            <div class="row">
                <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex p-0 m-0 list-unstyled align-items-center">
                        <li><a href="{{ URL::to('/') }}" class="text-decoration-none text-white" title="Home">होम</a></li>
                        <li>{{ $seoData['breadcrumb'] ?:'Faqs' }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="faqsection bg-white p-4">
        <div class="container">
            <div class="row">

                <div class="col-xl-12 text-center">
                    {!! @$seoData['top_page_content'] !!}
                </div>

                <div class="col-xl-5 text-center">
                    <img src="/assets/images/faq.png" class="img-fluid mb-3" width="150" height="150" alt="faq">
                    <span class="h3 text-black d-block fw-bold">Explore Our FAQs</span>
                    <p>Find quick answers to commonly asked questions and understand how things work around here.</p>
                </div>

                <div class="col-xl-6 offset-xl-1">
                    <div class="accordion custom-accordion" id="faqAccordion">
                        @foreach ($faqs as $index => $faq)
                        <div class="accordion-item">
                            <div class="accordion-header">
                                <button
                                    class="accordion-button collapsed"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#faq{{ $index }}">
                                    {{ $faq['question'] }}
                                </button>
                            </div>

                            <div
                                id="faq{{ $index }}"
                                class="accordion-collapse collapse"
                                data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    {!! $faq['answer'] !!}
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @if ($limit < $total)
                        <div class="text-center mt-3">
                        <button wire:click="loadMore" class="btn btn-dark">
                            Load More
                        </button>
                </div>
                @endif

            </div>

        </div>
</div>
</section>
<div class="container">
    <div class="row">
        <div class="col-xl-12">
            <div class="content-view">
                {!! $seoData['description'] !!}
            </div>
        </div>
    </div>
</div>

</div>