@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 id="values-text">
                        At ET Education, we prioritise transparent communication, fair pricing, and simplified procedures to ensure our students and clients have a stress-free experience as they work towards their educational and immigration aspirations.
                    </p>
                    <div class="values-img">
                        <img src="{{url('frontend/images/about/tranprancy.jpg')}}" class="w-100" 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')}}','At ET Education, we prioritise transparent communication, fair pricing, and simplified procedures to ensure our students and clients have a stress-free experience as they work towards their educational and immigration aspirations.','{{1}}')" id="values-link{{1}}" class="link-active">
                        <h2>Transparency</h2>
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/Commitment.jpg')}}','We are committed to providing exceptional education and visa services to students. With a team of experienced professionals, they ensure personalised guidance to help students achieve their academic and career goals.','{{2}}')" id="values-link{{2}}">
                        <h2>Commitment</h2>
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/professionlaiosn-1.jpg')}}','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.','{{3}}')" id="values-link{{3}}">
                        <h2>Professionalism</h2>
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/realiability.jpg')}}','We are a reliable choice for students seeking assistance with education and visa services.  Our commitment to ethical and transparent practices, combined with expertise and experience, ensures that students can trust us to provide high-quality support throughout their journey.','{{4}}')" id="values-link{{4}}">
                        <h2>Reliability</h2>
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/Integrity.jpg')}}','We believe in conducting ourselves ethically and having integrity in every aspect of our service. We believe in complete transparency in our communication, are committed to our student’s needs, and strive to achieve the best possible outcome in our every endeavour.','{{5}}')" id="values-link{{5}}">
                        <h2>Integrity</h2>
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/about/trusthworthy.jpg')}}','At ET Education, we continuously strive to provide credible and trustworthy counselling to students worldwide to help them further their academic and professional growth in Australia. And in doing so, we always keep our customer’s welfare and satisfaction at the centre.','{{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, para, 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');
            var paragraph = document.getElementById('values-text');
            image.src=img;
            paragraph.innerHTML=para;
        }
    </script>
@endsection