{{-- resources/views/front/home.blade.php --}}
@extends('front.layouts.mainLayout')

@section('content')
    <main class="about">

        <section class="whoWeAre">
            <div class="whoWeAreTop" data-aos="fade-up" data-aos-delay="200">
                <h1 class="titleWhoWeAre">
                    WHO WE ARE
                </h1>
                <div class="containerImage">
                    <span></span>
                    <img src="{{ asset($about->image ?? 'front/images/homeImages/8Artboard12.png') }}" alt="">
                </div>
            </div>
            <div class="whoWeArebottom" data-aos="fade-up" data-aos-delay="200">
                <div class="countersContainer">
                    <p class="description">{{ $about->about }}
                    </p>
                    <div class="counters">


                        <div class="counter">
                            <h1><span id="projects" data-count="{{ $about->projects_number }}">0</span>+</h1>
                            <p>PROJECTS</p>
                        </div>
                        <div class="counter">
                            <h1><span id="experiance" data-count="{{ $about->yrs_experience }}">0</span>+</h1>
                            <p>YEARS EXPERIENCE</p>
                        </div>
                        <div class="counter">
                            <h1><span id="power" data-count="{{ $about->man_power }}">0</span>+</h1>
                            <p>MAN POWER</p>
                        </div>
                        <div class="counter">
                            <h1><span id="workingHours" data-count="{{ $about->working_hours }}">0</span>+</h1>
                            <p>WORKING HOURS
                            </p>
                        </div>
                    </div>
                </div>
                <div class="imagesContainer">
                    <!-- <h1>LEARN MORE</h1> -->
                    <!--<div class="images">-->
                    <!--    <img src="{{ asset($about->image1 ?? 'front/images/homeImages/5Artboard9.jpg') }}" alt="">-->
                    <!--    <img src="{{ asset($about->image2 ?? 'front/images/homeImages/6Artboard10.jpg') }}" alt="">-->
                    <!--    <img src="{{ asset($about->image3 ?? 'front/images/homeImages/7Artboard11.jpg') }}" alt="">-->
                    <!--</div>-->
                </div>

            </div>
            <div class="bottom" data-aos="fade-up" data-aos-delay="200">
                <span></span>
                <p class="description">{{ $about->description2 }}</p>
            </div>
        </section>


        <section class="vission">
            <div class="containerImage">
                <span class="line" id="line"></span>
                <img data-aos="zoom-in" data-aos-delay="200"
                    src="{{ asset($about->vision_image ?? 'front/images/aboutImages/WhatsApp Image 2025-07-06 at 2.37.42 PM.jpeg') }}"
                    alt="صورة المشروع">
            </div>
            <div class="containerContent" data-aos="fade-up" data-aos-delay="200">
                <h1>OUR VISION</h1>
                <p>{{ $about->vision }}</p>
            </div>
        </section>

        <section class="mission">
            <div class="containerImage">
                <div class="borderImage" style="border: none;">

                    <img data-aos="zoom-in" data-aos-delay="200"
                        src="{{ asset($about->mission_image ?? 'front/images/aboutImages/WhatsApp Image 2025-07-06 at 2.37.41 PM.jpeg') }}"
                        alt="صورة المشروع">
                </div>
                <!-- <span></span> -->
            </div>
            <div class="containerContent" data-aos="fade-right" data-aos-delay="200">
                <h1>OUR MISSION</h1>
                <p>{{ $about->mission }}</p>
            </div>
        </section>
        <section class="servicesSection"
            style="background-image: url('{{ asset('front/images/homeImages/2Artboard6.jpg') }}')">
            <div class="filter">
                @foreach ($features as $feature)
                    <div data-aos="fade-zoom-in" data-aos-delay="200">
                        @if (Str::startsWith($feature->icon, 'fa'))
                            <i class="{{ $feature->icon }}"></i>
                        @else
                            <img src="{{ asset($feature->icon) }}" alt="">
                        @endif

                        <h1>{{ $feature->title }}</h1>
                        <p>{{ $feature->description }}</p>
                        <a href="{{ route('about') }}">LEARN MORE</a>
                    </div>
                @endforeach
            </div>

        </section>
        <section class="our-promise">
            <div class="container">
                <h2>OUR PROMISE</h2>
                <p>
                    {{ $about->promise }}
                </p>
            </div>
        </section>

        @php $ceo = $managers->first(); @endphp

        @if($ceo)

            <section class="seoMessage">
                <div class="containerImage" id="containerImage">
                    <span class="rightLine"></span>
                    <img data-aos="zoom-in" data-aos-delay="200" src="{{ asset(  $ceo->image ?? 'front/images/homeImages/emp1.png') }}"
                        alt="صورة المشروع">
                    <!-- <span class="leftLine"></span> -->
                </div>
                <div class="containerContent" data-aos="fade-left" data-aos-delay="200">
                    <h1>{{ $ceo->job_title }}</h1>
                    <h2>The Mind Behind the Movement</h2>
                    {!!  $ceo->about !!}
                </div>
            </section>
        @endif
        <!--<section data-aos="fade-zoom-in" data-aos-delay="200" class="employse">-->
        <!--    <div class="header">-->
        <!--        <p>DISCOVER A NEW STANDARD LIVING</p>-->
        <!--        <p>TAILORED FOR THE ELITE</p>-->
        <!--        <p>TAILORED FOR THE ELITE</p>-->
        <!--        <h1>12.2°24'41"N 26.5°10'2"E</h1>-->
        <!--    </div>-->

        <!--    <div class="centerContainer">-->
        <!--        <h1>L</h1>-->

        <!--        <div class="year25">-->
        <!--            <p class="circle-number">2</p>-->
        <!--            <p class="circle-number">5</p>-->
        <!--        </div>-->

        <!--    </div>-->
        <!--    <div class="containerEmployes">-->
        <!--        <div class="econtainers" style="justify-content: center;">-->
        <!--            @foreach ($managers as $index => $manager)-->
        <!--                @if (!$index)-->
        <!--                    <div class="containerEmplyoe emplyoe1">-->
        <!--                        <div class="cardEmpoye">-->
        <!--                            <img src="{{ asset( $manager->image?? 'front/images/homeImages/emp1.png') }}" alt="">-->
        <!--                            <div class="detialesEmploye">-->
        <!--                                <h1>{{ $manager->name }}</h1>-->
        <!--                                <p>{{ $manager->job_title_2 }}</p>-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <p class="descCard">{{  $manager->short_about }}</p>-->
        <!--                    </div>-->
        <!--                @else-->
                            <!--<div class="containerEmplyoe emplyoe2">-->
                            <!--    <p class="descCard">{{  $manager->short_about }}</p>-->

                            <!--    <div class="cardEmpoye">-->
                            <!--        <img src="{{ asset(  $manager->image??'front/images/homeImages/emp2.png') }}" alt="">-->
                            <!--        <div class="detialesEmploye">-->
                            <!--            <h1>{{ $manager->name }} </h1>-->
                            <!--            <p>  {{ $manager->job_title }}</p>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->
        <!--                @endif-->
        <!--            @endforeach-->
                    <!--<div class="containerEmplyoe emplyoe3">-->
                    <!--    <div class="cardEmpoye">-->
                    <!--        <img src="{{ asset('front/images/homeImages/emp.png') }}" alt="">-->
                    <!--        <div class="detialesEmploye">-->
                    <!--            <h1>OMER</h1>-->
                    <!--            <p>SEO</p>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--    <p class="descCard">IT’S A STATEMENT, CRAFTED FOR THOSE WHO VALUE EXCLUSIVITY, DISCRETION</p>-->
                    <!--</div>-->
                    <!--<div class="containerEmplyoe emplyoe4">-->
                    <!--    <div class="cardEmpoye">-->
                    <!--        <img src="{{ asset('front/images/homeImages/emp.png') }}" alt="">-->
                    <!--        <div class="detialesEmploye">-->
                    <!--            <h1>AHMED</h1>-->
                    <!--            <p>MANAGER</p>-->
                    <!--        </div>-->
                    <!--    </div>-->

                    <!--</div>-->
        <!--        </div>-->
        <!--        <p class="breifotheremploye">STEP INTO A WORLD WHERE ARCHITECTURE MEETS ASPIRATION. OUR PORTFOLIO IS A-->
        <!--            TESTAMENT</p>-->
        <!--        <p class="breifotheremploye2">DISCOVER A NEW STANDARD OF LIVING</p>-->
        <!--        <img class="imgLogo" src="{{ asset('front/images/logowhite.png') }}" alt="">-->

        <!--        <h1 class="nChar">N</h1>-->
        <!--    </div>-->
        <!--</section>-->
        <section class="ourPartners"
            style="position: relative; background-image: url('{{ asset('front/images/homeImages/1Artboard3.jpg') }}'); min-height: 400px; background-size: cover; background-position: center;">

            <div class="filter" data-aos="fade-up" data-aos-delay="200"
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);">
          
                <h1>Welcome to Refined Living — Discover the Art of Residence.  <a href={{route('contact')}}>Contact Us NOW!</span></h1>
            </div>
        </section>
<style>
    .ourPartners div{
display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    .ourPartners div h1{
        color:white;
        font-size:1.3rem;
           font-weight: 900;
    text-align: center;
    }
    .ourPartners div h1 a{
text-decoration: underline;
color:white;
    }
</style>

    </main>
@endsection