@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @include('frontend.layouts.breadcrumb', ['title' => 'FAQ'])

<section class="tv-faq-section style-2 space bg-light">
    <div class="shape-mockup sm-d-none" data-top="12%" data-left="13%"><img src="{{ asset('frontend/images/faq/circle-shape.webp') }}" alt="shape"></div>
    <div class="shape-mockup sm-d-none" data-top="12%" data-right="15%"><img src="{{ asset('frontend/images/faq/question-shape.webp') }}" alt="shape"></div>
    <div class="container">
        <div class="title-wrap text-center three">
            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>FAQ</div>
            <h2 class="sec-title">{{ $heading }}</h2>
            <p>Answers to common questions about Ndarama Technologies, our systems, support, and implementation process.</p>
        </div>
        <div class="row justify-content-center">
            <div class="faq-column col-lg-8">
                <div class="inner-column mt-15 md-mt-0">
                    @if($content)
                        <div class="widget-box bg-white p-30">{!! $content !!}</div>
                    @else
                        <ul class="accordion-box">
                            @foreach($fallbackItems as $item)
                                <li class="accordion {{ $loop->first ? 'active-block' : '' }}">
                                    <div class="acc-btn bg-white {{ $loop->first ? 'active' : '' }}">{{ sprintf('%02d.', $loop->iteration) }} {{ $item['question'] }}<div class="icon"></div></div>
                                    <div class="acc-content {{ $loop->first ? 'active' : '' }}">
                                        <div class="content bg-white"><div class="text">{{ $item['answer'] }}</div></div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<section class="tv-faq-section overflow-hidden mb--75 bg-light">
    <div class="tv-faq-inner space position-relative overflow-hidden br-30 ml-br-0 bg-light2 mx-30 ml-mx-0">
        <div class="container pb-80">
            <div class="row gy-30 align-items-center">
                <div class="col-lg-6">
                    <div class="faq-image-wrapper faq-inner mr-60 lg-mr-30 md-mr-0">
                        <div class="faq-image overlay-anim4 img-anim-left"><img src="{{ asset('frontend/images/cta/cta2-img.webp') }}" alt="FAQ"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="title-wrap">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Get In Touch</div>
                        <h2 class="sec-title">Ready to Discuss Your <br>Digital System?</h2>
                        <p>Tell us what you want to improve, automate, or manage better and we will help you map the right next step.</p>
                    </div>
                    <a href="{{ route('frontend.contact') }}" class="theme-btn br-30">Contact with Us</a>
                </div>
            </div>
        </div>
    </div>
</section>
@include('frontend.partials.newsletter')
@endsection