@extends('web.layouts.app')

@section('content')
<style>
    .hero-sub { 
        min-height: 350px; 
        background: linear-gradient(rgba(10, 25, 55, 0.75), rgba(10, 25, 55, 0.75)), url('{!! asset($settings[151]) !!}') center/cover; 
        display: flex; 
        align-items: center; 
        padding: 60px 0; 
    }

    .hero-sub h1 {
        color: #fff;
        font-size: 2.8rem;
        font-weight: 800;
    }

    .hero-sub p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }

    .value-card {
        padding: 40px 30px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        text-align: center;
        transition: all 0.3s ease;
        border-bottom: 3px solid transparent;
        height: 100%;
    }
    .value-card:hover {
        transform: translateY(-10px);
        border-bottom-color: var(--primary);
    }
    .value-icon {
        width: 70px;
        height: 70px;
        background: rgba(26, 58, 107, 0.1);
        color: var(--primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 1.8rem;
    }

    .mission-vision-box {
        background: var(--primary);
        color: #fff;
        padding: 50px;
        border-radius: 30px;
        position: relative;
        overflow: hidden;
    }
    .mission-vision-box::before {
        content: "";
        position: absolute;
        top: -50px;
        right: -50px;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
    }

    .stats-banner { background: #1a3a6b; padding: 50px 0; }
    .stat-item .num { font-size: 2.8rem; font-weight: 800; color: #fff; }
    .stat-item .lbl { color: rgba(255, 255, 255, 0.7); font-size: .9rem; }
</style>

<!-- Hero Section -->
<section class="hero-sub">
    <div class="container">
            <h1 style="margin-top:20px;">{{ \App\Helpers\TransHelper::get('about_us', $lang) }}</h1>
    </div>
</section>

<!-- Our Story Section -->
<section class="section bg-soft-light">
    <div class="container">
        <div class="row align-items-center g-5">
            {!! $settings[114] !!}
            <div class="col-lg-6">
                <img src="{!! asset($settings[154]) !!}" class="img-fluid rounded-5 shadow-lg" alt="WAHAT AL-BANAA Team">
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision -->
<section class="section bg-soft-white">
    {!! $settings[119] !!}
</section>

<!-- Core Values -->
<section class="section bg-soft-light">

 {!! $settings[115] !!}

</section>

<!-- Stats Banner -->
<div class="stats-banner">
  {!! $settings[116] !!}
</div>

<!-- Why Us / Strategic Approach Section -->
<section class="section bg-soft-white">
    <div class="container">
        <div class="row align-items-center g-5">
        {!! $settings[117] !!}
            <div class="col-lg-6 order-1 order-lg-2">
                <img src="{!! asset($settings[156]) !!}" class="img-fluid rounded-5 shadow" alt="Our Strategy">
            </div>
        </div>
    </div>
</section>

@endsection