@extends('layouts.app')

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

@section('content')
    @include('layouts.partials.page_header', [
        'title' => 'FAQs',
        'breadcrumbs' => [
            ['label' => 'Home', 'url' => route('home')],
            ['label' => 'FAQs', 'url' => ''],
        ]
    ])

    <section class="about-one" style="padding: 80px 0 40px;">
        <div class="container">
            <div class="row">
                <div class="col-xl-8">
                    <div class="about-one__right">
                        <div class="section-title text-left sec-title-animation animation-style2">
                            <div class="section-title__tagline-box">
                                <div class="section-title__tagline-shape"></div>
                                <span class="section-title__tagline">Common questions</span>
                            </div>
                            <h2 class="section-title__title title-animation">Answers to the questions students ask most.</h2>
                        </div>

                        <div class="space-y-4">
                            @forelse($faqs as $faq)
                                <details class="group course-grid__single">
                                    <summary class="cursor-pointer list-none d-flex align-items-center justify-content-between gap-3">
                                        <span class="fw-semibold">{{ $faq->question }}</span>
                                        <span class="text-primary group-open:rotate-45">+</span>
                                    </summary>
                                    <div class="mt-3 text-muted">{!! $faq->answer !!}</div>
                                </details>
                            @empty
                                <div class="course-grid__single text-center">
                                    <p class="mb-0">No FAQs available yet.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="course-grid__left">
                        <div class="course-grid__sidebar">
                            <div class="course-grid__search course-grid__single">
                                <div class="course-grid__title-box">
                                    <h3 class="course-grid__title">Need more help?</h3>
                                    <div class="course-grid__title-shape-1">
                                        <img src="{{ asset('images/shapes/course-grid-title-shape-1.png') }}" alt="">
                                    </div>
                                </div>
                                <p class="course-grid__search-text">Our advisors can help with country choice, applications, and scholarships.</p>
                                <ul class="list-unstyled course-grid__list-item">
                                    <li>Email: <a href="mailto:{{ \App\Models\Setting::getValue('contact_email', 'info@insightglobalconsultant.com') }}">{{ \App\Models\Setting::getValue('contact_email', 'info@insightglobalconsultant.com') }}</a></li>
                                    <li>Phone: <a href="tel:{{ \App\Models\Setting::getValue('contact_phone', '+12 (123) 456 78900') }}">{{ \App\Models\Setting::getValue('contact_phone', '+12 (123) 456 78900') }}</a></li>
                                </ul>
                            </div>

                           @include('layouts.components.contact')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection