@extends('web.layouts.app')

@section('content')
    <!-- Hero Section -->
    <section class="hero"
        style="background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('{!! asset($settings[150]) !!}') center/cover no-repeat;">
        <div class="container hero-content">
            <div class="row">
                <div class="col-lg-9">
                    <h1>{{ \App\Helpers\TransHelper::get('hero_title', $lang) }}</h1>
                    <p>
                        {{ \App\Helpers\TransHelper::get('hero_subtitle', $lang) }}
                    </p>
                    <a href="#about" class="btn-primary-custom">{{ \App\Helpers\TransHelper::get('discover_more', $lang) }}</a>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="section bg-soft-light">
        <div class="container">
            <div class="row align-items-center g-5">
                {!! $settings[101] !!}
                <div class="col-lg-6">
                    <img src="{!! asset($settings[152]) !!}" class="img-fluid rounded-5 shadow" alt="About Us">
                </div>
            </div>
        </div>
    </section>

    <!-- Profile Download Banner — full width, after CEO button -->
    <div class="profile-download-banner">
        <div class="container">
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="banner-icon">
                        <i class="fas fa-file-pdf"></i>
                    </div>
                    <div>
                        <h5 class="banner-title mb-0">{{ \App\Helpers\TransHelper::get('company_profile', $lang) }}</h5>
                        <p class="banner-subtitle mb-0">
                            {{ \App\Helpers\TransHelper::get('download_profile_desc', $lang) }}
                        </p>
                    </div>
                </div>
                <a href="{{ asset('assets/company-profile.pdf') }}" class="btn-download-banner" download>
                    <i class="fas fa-download me-2"></i>{{ \App\Helpers\TransHelper::get('download_pdf', $lang) }}
                </a>
            </div>
        </div>
    </div>

    <!-- Services Section -->
    <section class="section bg-soft-white">
        {!! $settings[138] !!}
    </section>

    <!-- Projects Section -->
    <section id="projects" class="section bg-soft-light">
        <div class="container">
            <h2 class="section-title text-center">{{ \App\Helpers\TransHelper::get('featured_projects', $lang) }}
                <span></span>
            </h2>
            <div class="row">


                @foreach($featuredprojects as $data)

                    <div class="col-md-6 col-lg-4 d-flex" style="margin-bottom:10px;">
                        <div class="project-card">
                            <div class="project-img" style="background-image: url('{!! asset($data->image_lang) !!}')">
                            </div>
                            <div class="project-body">
                                <h5 class="project-title">{!! $data->title_lang !!}</h5>
                                <p>
                                    {!! $data->brief_lang !!}
                                </p>
                            </div>
                        </div>
                    </div>

                @endforeach


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

    <!-- Clients Section -->
    <section class="section bg-soft-white overflow-hidden">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title text-center d-inline-block">
                    {{ \App\Helpers\TransHelper::get('clients_partners', $lang) }} <span></span>
                </h2>
            </div>
            <div class="row g-4 justify-content-center align-items-center">
                @foreach($partners as $data)
                    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                        <div class="client-item" data-bs-toggle="tooltip" title="{{ $data->title_lang }}">
                            <img src="{!! asset($data->images_lang) !!}" alt="{{ $data->title_lang }}" class="img-fluid">
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- ISO Certifications Section -->
    <section class="section bg-soft-light" id="certifications">
        <div class="container">
            <h2 class="section-title text-center">{{ \App\Helpers\TransHelper::get('quality_certifications', $lang) }}
                <span></span>
            </h2>
            <div class="row g-5 align-items-stretch">
                <div class="col-lg-4">
                    <div class="certificate-sidebar">
                        @foreach($isos as $data)
                            <div class="iso-card-item {{ $loop->first ? 'active' : '' }}"
                                onclick="showCertificate('{{ asset($data->image_lang) }}', '{{ $data->title_lang }}', this)">
                                {!! $data->brief_lang !!}
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="certificate-display">
                        <div class="certificate-badge" id="cert-badge"></div>
                        <div class="certificate-img-container">
                            <img src="{!! asset($settings[106]) !!}" alt="ISO Certificate" id="current-certificate"
                                class="show">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Humanitarian Work Section -->
    <section class="section bg-soft-white" id="humanitarian">
        {!! $settings[139] !!}
    </section>

@endsection