@extends('frontend.layout.app')
@section('content')
    <div class="breadcumb-wrapper " data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">About Us</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{ route('index') }}">Home</a></li>
                        <li>About Us</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--==============================
        Team Area
        ==============================-->
    <section class="space-top">
        <div class="container">
            <div class="row gx-50 ">
                <div class="col-lg-5 col-xxl-auto">
                    <div class="img-box7">
                        <div class="mega-hover about_1">
                            <img class="w-100" src="{{ asset('storage/abouts/' . $abouts->image) }}" alt="teacher">
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 align-self-center">
                    <div class="team-about">
                        <h2 class="team-name">{{ $abouts->heading }}</h2>
                        <div class="title-divider2"></div>
                        <p>{!!$abouts->content1!!}</p>
                    </div>
                </div>
            </div>
            <div class="team-description">
              {!!$abouts->content2!!}

            </div>
        </div>
    </section>

    <section class=" space-extra" data-bg-src="{{ asset('frontend/assets/img/bg/cta-bg-1-1.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="cta-box1">
                        <h2 class="cta-title">{{$visions->heading1}}</h2>
                        <p class="cta-text">{!!$visions->content1!!}</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="cta-box4">
                     <h2 class="cta-title">{{$visions->heading2}}</h2>
                        <p class="cta-text">{!!$visions->content2!!}</p>
                    </div>
                </div>
            </div>


        </div>
    </section>

    <!--==============================
        FAQ Area
        ==============================-->
    <section class="space-top">
        <div class="container">
            <div class="row gx-80">
                <div class="col-lg-6 col-xxl-auto pb-3 pb-xl-0">
                    <div class="img-box3">
                        <div class="img-1 about_2 mega-hover">
                            <img src="{{ asset('frontend/assets/img/product/tinkerbie_kits/1/2.jpg') }}" alt="FAQ">
                            <a href="#" class="play-btn popup-video position-center"><i class="fas fa-play"></i></a>
                        </div>
                        <div class="vs-circle jump"></div>
                    </div>
                </div>
                <div class="col-lg-6 align-self-center">
                    <div class="title-area text-center text-lg-start">
                        <span class="sec-subtitle">Why Choose Us</span>
                        <h2 class="sec-title">Why Choose Lansford Early Childhood Solutions</h2>
                    </div>
                    <div class="accordion accordion-style1" id="faqVersion1">
                        @foreach($faqs as $index => $faq)
                            @php
                                $headingId = 'heading' . $index . 'Faq';
                                $collapseId = 'collapse' . $index . 'Faq';
                            @endphp
                            <div class="accordion-item {{ $index === 0 ? 'active' : '' }}">
                                <div class="accordion-header" id="{{ $headingId }}">
                                    <button class="accordion-button {{ $index === 0 ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#{{ $collapseId }}" aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" aria-controls="{{ $collapseId }}">
                                        {{ $faq->question }}
                                    </button>
                                </div>
                                <div id="{{ $collapseId }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" aria-labelledby="{{ $headingId }}"
                                    data-bs-parent="#faqVersion1">
                                    <div class="accordion-body">
                                        {!! $faq->answer !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div data-bg-src="assets/img/bg/bg-h-1-1.jpg">
        <div class="vs-wave-shape  ">
            <svg viewBox="0 0 1920 295" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="wave-path" fill-rule="evenodd" clip-rule="evenodd"
                    d="M1920 295V202.758C1906.48 131.342 1843.63 77.168 1768.34 77.168C1739.37 77.168 1711.54 85.1814 1687.4 100.128C1650.68 38.4074 1584.56 0 1511.11 0C1412.1 0 1329.2 70.2842 1309.68 163.577C1294.03 136.928 1265.08 119 1232 119C1215.11 119 1198.88 123.673 1184.8 132.389C1163.39 96.397 1124.83 74 1082 74C1022.17 74 972.422 118.018 963.444 175.369C947.459 160.855 926.246 152 903 152C886.11 152 869.88 156.673 855.803 165.389C834.387 129.397 795.832 107 753 107C710.158 107 672.487 129.569 651.251 163.442C635.542 150.075 615.199 142 593 142C576.11 142 559.88 146.673 545.803 155.389C524.387 119.397 485.832 97 443 97C400.012 97 362.23 119.723 341.034 153.789C324.552 132.631 298.841 119 270 119C253.11 119 236.88 123.673 222.803 132.389C201.387 96.397 162.832 74 120 74C53.8333 74 0.000244141 127.833 0.000244141 194C0.000244141 194.41 0.000244141 194.835 0.0152435 195.245L0.000244141 195.248V295H1920Z" />
            </svg>
        </div>
    @endsection