@extends('layout.app')
@section('title')
<title>About Us</title>
    <meta name="description" content="{{strip_tags($about->sub_description)}}">
    <meta name="robots" content="index, follow" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="{{url('frontend/images/about-banner.png')}}"/>
    <meta property="og:title" content="About Us"/>
    <meta property="og:description" content="{{strip_tags($about->sub_description)}}"/>
@endsection
@section('content')
    <section class="about-header-section">
        <div class="about-banner-header">
            {!!$about->description ?? '' !!}
        </div>
        <div class="about-banner-img">
            <img src="{{url('frontend/images/about-banner.png')}}" class="img-fluid" alt="">
        </div>
    </section>
    <section class="overseas-section">
        {!!$about->sub_description ?? '' !!}
            <div class="overseas-img">
                <img src="{{url('frontend/images/australia-map.png')}}" class="img-fluid" alt="">
            </div>
    </section>
    <section class="why-et">
        <div class="why-et-header">
        {!!$about->bottom_description ?? '' !!}
        </div>
        <div class="et-cards">
            <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/icons/Icons/24-houes.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>24/7</h2>
                    <p>Assistance</p>
                </div>
            </div>
            <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/icons/Icons/rating.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>99%</h2>
                    <p>Success Rate</p>
                </div>
            </div>
            <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/icons/Icons/Institutions.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>100+</h2>
                    <p>Institutions</p>
                </div>
            </div>
            <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/icons/Icons/teams.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>50+</h2>
                    <p>Teams</p>
                </div>
            </div>
        </div>
    </section>
    <section class="our-values-section">
        <h1>What We Value</h1>
        <div class="row gx-5">
            <div class="col-md-6">
                <div class="values-left">
                    <p>
                        We work with you to turn your plan to study overseas into a launch pad for professional success and personal growth. 
                        ET Education combines experience and technology to help you make the most informed decision possible.
                    </p>
                    <div class="values-img">
                        <img src="{{url('frontend/images/about/tranprancy.jpg')}}" class="img-fluid" id="values-img" alt="">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="values-lists">
                    <a onclick="changeImg('{{url('frontend/images/about/tranprancy.jpg')}}','{{1}}')" id="values-link{{1}}" class="link-active">
                        <h2>Transparency</h2> 
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/Commitment.jpg')}}','{{2}}')" id="values-link{{2}}">
                        <h2>Commitment</h2> 
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/professionlaiosn-1.jpg')}}','{{3}}')" id="values-link{{3}}">
                        <h2>Professionalism</h2> 
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/realiability.jpg')}}','{{4}}')" id="values-link{{4}}">
                        <h2>Reliability</h2> 
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/Integrity.jpg')}}','{{5}}')" id="values-link{{5}}">
                        <h2>Integrity</h2> 
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/trusthworthy.jpg')}}','{{6}}')" id="values-link{{6}}">
                        <h2>Trustworthy</h2> 
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="lets-chat-section">
        <h1>Let's Chat</h1>
        <p>Answers to every education & migration query. Talk to our Expert!</p>
        <div class="text-center">
            <a href="contact">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a>
        </div>
    </section>
@endsection
@section('script')
    <script>
        function changeImg(img, id){
            if ($('.link-active').length > 0) {
                pre_id = $('.link-active')[0]['id'];
                myId = document.getElementById(pre_id);
                myId.classList.remove("link-active");
            }
          
            var link = document.getElementById("values-link"+ id);
            link.classList.add("link-active")
            var image = document.getElementById('values-img');
            image.src=img
        }
    </script>
@endsection