<x-layouts.app-layout :page="$page">


    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">@lang('About Us')</h1>
            <nav aria-label="breadcrumb animated slideInDown">
                <!-- <ol class="breadcrumb justify-content-center mb-0">
                    <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                    <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                    <li class="breadcrumb-item text-primary active" aria-current="page">About</li>
                </ol> -->
            </nav>
        </div>
    </div>
    <!-- Page Header End -->


    <!-- About Start -->
    <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="position-relative overflow-hidden ps-5 pt-5 h-100" style="min-height: 400px;">
                        @if ($about->about_image1)
                            <img class="position-absolute w-100 h-100"
                                src="{{ asset('storage/' . $about->about_image1) }}" alt=""
                                style="object-fit: cover;">
                        @endif

                        @if ($about->about_image2)
                            <img class="position-absolute top-0 start-0 bg-white pe-3 pb-3"
                                src="{{ asset('storage/' . $about->about_image2) }}" alt=""
                                style="width: 200px; height: 200px;">
                        @endif


                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="h-100">
                        <h6 class="text-primary text-uppercase mb-2">@lang('About Us')</h6>
                        <h1 class="display-6 mb-4">{{ $about->about_title }}</h1>
                        <p>
                            {{ $about->about }}
                        </p>
                        <div class="row g-2 mb-4 pb-2">
                            @foreach ($about->about_items as $item)
                                <div class="col-sm-6">
                                    <i class="fa fa-check text-primary me-2"></i>{{ $item['item'] }}
                                </div>
                            @endforeach


                        </div>
                        <div class="row g-4">
                            <!-- <div class="col-sm-6">
                                <a class="btn btn-primary py-3 px-5" href="">Read More</a>
                            </div> -->
                            <div class="col-sm-6">
                                <a class="d-inline-flex align-items-center btn btn-outline-primary border-2 p-2"
                                    href="tel:{{ $phone }}">
                                    <span class="flex-shrink-0 btn-square bg-primary">
                                        <i class="fa fa-phone-alt text-white"></i>
                                    </span>
                                    <span class="px-3">{{ $phone }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->


    <!-- Mission and Vision start-->
    <section class="py-5 text-white"
        style="background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url('{{ asset('storage/' . $about->mission_image) }}') center center no-repeat;
    background-size: cover;">
        <div class="container position-relative">
            <!-- Background Overlay -->
            <div class="position-absolute top-0 start-0 w-100 h-100"
                style="background: url('https://via.placeholder.com/1920x1080?text=Abstract+Pattern')
                  no-repeat center center / cover; opacity: 0.1;">
            </div>

            <!-- Mission Content -->
            <div class="position-relative">
                <div class="text-center mb-5">
                    <h1 class="fw-bold display-4 text-shadow">@lang('Our Mission')</h1>
                    <p class="lead mx-auto text-dark" style="max-width: 600px;">
                        {{ $about->mission_description }}
                    </p>
                </div>

                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="card text-center shadow-lg border-0 h-100 p-4 rounded-4">
                            <i class="bi bi-lightbulb fs-1 text-primary mb-3"></i>
                            <h3 class="fw-bold">@lang('Innovation')</h3>
                            <p class="text-muted">{{ $about->innovation }}</p>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card text-center shadow-lg border-0 h-100 p-4 rounded-4">
                            <i class="bi bi-heart fs-1 text-danger mb-3"></i>
                            <h3 class="fw-bold">@lang('Community')</h3>
                            <p class="text-muted">{{ $about->community }}</p>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card text-center shadow-lg border-0 h-100 p-4 rounded-4">
                            <i class="bi bi-globe2 fs-1 text-success mb-3"></i>
                            <h3 class="fw-bold">@lang('Sustainability')</h3>
                            <p class="text-muted">{{ $about->sustainability }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Vision Content -->
            <div class="container-xxl py-6">
                <div class="container">
                    <div class="row g-5">
                        <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                            <div class="position-relative overflow-hidden ps-5 pt-5 h-100" style="min-height: 400px;">
                                <img class="position-absolute w-100 h-100"
                                    src="{{ asset('storage/' . $about->vision_image) }}" alt=""
                                    style="object-fit: cover;">
                            </div>
                        </div>
                        <div class="col-lg-6 wow fadeInUp pt-5" data-wow-delay="0.5s">
                            <div class="h-100">
                                <h3 class="text-primary text-uppercase mb-2 ">@lang(' Our Vision')</h3>
                                <p class="fs-5" style="color: black">
                                    {{ $about->vision_description }}
                                </p>

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

            <!-- <div class="row g-4">
        <div class="col-md-4">
          <div class="card text-center shadow-lg border-0 h-100 p-4 rounded-4">
            <i class="bi bi-eye fs-1 text-danger mb-3"></i>
            <h3 class="fw-bold">Clarity</h3>
            <p class="text-muted">Guiding the future with clear, forward-thinking solutions that inspire progress.</p>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-center shadow-lg border-0 h-100 p-4 rounded-4">
            <i class="bi bi-gear fs-1 text-warning mb-3"></i>
            <h3 class="fw-bold">Technology</h3>
            <p class="text-muted">Leveraging cutting-edge innovations to shape a dynamic, inclusive world.</p>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-center shadow-lg border-0 h-100 p-4 rounded-4">
            <i class="bi bi-globe2 fs-1 text-success mb-3"></i>
            <h3 class="fw-bold">Connection</h3>
            <p class="text-muted text-dark">Creating global networks that empower communities and drive collaboration.</p>
          </div>
        </div>
      </div> -->
        </div>
    </section>
    <!-- Mission and Vision end-->




    <!-- Team Start -->
    <div class="container-xxl py-6">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                <h6 class="text-primary text-uppercase mb-2">@lang('Our board')</h6>
                <h1 class="display-6 mb-4">@lang('We Have Great Experience Of Driving')</h1>
            </div>
            <div class="row g-0 team-items">
                @foreach ($our_boards as $index => $board)
                    <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="{{ 0.1 + $index * 0.1 }}s">
                        <div class="team-item position-relative">
                            <div class="position-relative">
                                <img class="img-fluid" src="{{ asset('storage/' . $board->image) }}" alt="">
                                <!-- <div class="team-social text-center">
                                <a class="btn btn-square btn-outline-primary border-2 m-1" href=""><i class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-square btn-outline-primary border-2 m-1" href=""><i class="fab fa-twitter"></i></a>
                                <a class="btn btn-square btn-outline-primary border-2 m-1" href=""><i class="fab fa-instagram"></i></a>
                            </div> -->
                            </div>
                            <div class="bg-light text-center p-4">
                                <h5 class="mt-2">{{ $board->name }}</h5>
                                <span>{{ $board->job_title }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </div>
    <!-- Team End -->
</x-layouts.app-layout>
