@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 p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }

    .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; }

    .filter-btn {
        background: #fff;
        border: 1px solid #e2e8f0;
        padding: 10px 25px;
        border-radius: 50px;
        color: #64748b;
        font-weight: 600;
        transition: all 0.3s ease;
        margin: 5px;
        text-decoration: none;
        display: inline-block;
    }
    .filter-btn:hover, .filter-btn.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        box-shadow: 0 4px 15px rgba(26, 58, 107, 0.2);
    }
</style>

<!-- Hero Section -->
<section class="hero-sub">
    <div class="container">
        <p class="lead mb-0">
            {{ \App\Helpers\TransHelper::get('projects_cta_desc', $lang) }}
        </p>
    </div>
</section>

<!-- Filter Section -->
<section class="section pb-0 bg-soft-white">
    <div class="container text-center">
        <div class="mb-4">
            <a href="#" class="filter-btn active">{{ \App\Helpers\TransHelper::get('all_projects', $lang) }}</a>
            <a href="#" class="filter-btn">{{ \App\Helpers\TransHelper::get('oil_gas', $lang) }}</a>
            <a href="#" class="filter-btn">{{ \App\Helpers\TransHelper::get('power', $lang) }}</a>
            <a href="#" class="filter-btn">{{ \App\Helpers\TransHelper::get('infrastructure', $lang) }}</a>
            <a href="#" class="filter-btn">{{ \App\Helpers\TransHelper::get('civil_works', $lang) }}</a>
        </div>
    </div>
</section>

<!-- Projects Grid -->
<section class="section bg-soft-white">
    <div class="container">
        <div class="row g-4">
            <!-- Project 1 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1574689049868-e94ed5301745?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('oil_gas', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('badara_oilfield', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('badara_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 2 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1521618755572-1ee43ebdef52?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('power', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('furaiha_substation', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('furaiha_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 3 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('infrastructure', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('fao_grand_port', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('fao_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 4 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('renewable', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('industrial_solar', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('industrial_solar_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 5 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1510134015309-86927f8a70c7?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('infrastructure', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('southern_bridge', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('southern_bridge_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 6 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1581092921461-eab62e97a780?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('water', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('strategic_water_pipeline', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('strategic_water_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 7 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('civil_works', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('alshaab_residential', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('alshaab_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 8 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1516195851888-6f1a981a862e?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('oil_gas', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('majnoon_field', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('majnoon_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
            <!-- Project 9 -->
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="project-card">
                    <div class="project-img" style="background-image: url('https://images.unsplash.com/photo-1548543604-a87c9909afec?q=80&w=800')"></div>
                    <div class="project-body">
                        <span class="badge bg-primary mb-2">{{ \App\Helpers\TransHelper::get('power', $lang) }}</span>
                        <h5 class="project-title">{{ \App\Helpers\TransHelper::get('regional_grid', $lang) }}</h5>
                        <p>{{ \App\Helpers\TransHelper::get('regional_grid_desc', $lang) }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Banner -->
<div class="stats-banner">
    <div class="container">
        <div class="row text-center g-4">
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="num">50+</div>
                    <div class="lbl">{{ \App\Helpers\TransHelper::get('total_projects', $lang) }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="num">100%</div>
                    <div class="lbl">{{ \App\Helpers\TransHelper::get('health_safety_record', $lang) }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="num">95%</div>
                    <div class="lbl">{{ \App\Helpers\TransHelper::get('on_time_delivery', $lang) }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-item">
                    <div class="num">15+</div>
                    <div class="lbl">{{ \App\Helpers\TransHelper::get('global_partners', $lang) }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CTA Section -->
<section class="section bg-soft-white text-center">
    <div class="container">
        <h2 class="section-title">{{ \App\Helpers\TransHelper::get('ready_to_build', $lang) }} <span></span></h2>
        <p class="lead mb-4">
            {{ \App\Helpers\TransHelper::get('projects_cta_desc', $lang) }}
        </p>
        <a href="{{ url('/contact-us') }}" class="btn-primary-custom px-5 py-3">{{ \App\Helpers\TransHelper::get('inquire_about_services', $lang) }}</a>
    </div>
</section>

@endsection