@extends('frontend.layouts.app')

@section('title', $settings->name)

@section('content')
    {{-- ---------- Hero ---------- --}}
    <section class="fp-hero">
        @if ($sliders->isNotEmpty())
            <div id="heroCarousel" class="carousel slide fp-hero-carousel" data-bs-ride="carousel">
                @if ($sliders->count() > 1)
                    <div class="carousel-indicators">
                        @foreach ($sliders as $i => $slide)
                            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $i }}" class="{{ $i === 0 ? 'active' : '' }}" @if ($i === 0) aria-current="true" @endif></button>
                        @endforeach
                    </div>
                @endif

                <div class="carousel-inner">
                    @foreach ($sliders as $i => $slide)
                        <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                            @if ($slide->url)
                                <a href="{{ $slide->url }}" class="fp-hero-slide" style="background-image: url('{{ $slide->imageUrl() }}')"></a>
                            @else
                                <div class="fp-hero-slide" style="background-image: url('{{ $slide->imageUrl() }}')"></div>
                            @endif
                        </div>
                    @endforeach
                </div>

                @if ($sliders->count() > 1)
                    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                        <span class="fp-hero-arrow"><i class="bi bi-chevron-right"></i></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                        <span class="fp-hero-arrow"><i class="bi bi-chevron-left"></i></span>
                    </button>
                @endif
            </div>

            <div class="fp-hero-overlay-text">
                <div class="container">
                    <div class="fp-hero-text-panel">
                        <span class="fp-hero-eyebrow d-none d-md-inline-flex"><i class="bi bi-building-fill"></i> {{ __('lang.fp_hero_eyebrow') }}</span>
                        <h1 class="fp-hero-title display-5 my-3">
                            <span class="d-md-none">{{ $settings->name }}</span>
                            <span class="d-none d-md-inline">{{ __('lang.fp_hero_title_1') }}</span>
                        </h1>
                        <p class="fp-hero-lead fs-5 mb-0 d-none d-md-block">{{ __('lang.fp_hero_lead') }}</p>
                    </div>
                </div>
            </div>
        @else
            <div class="fp-hero-fallback">
                <div class="container fp-hero-content text-center py-5">
                    <span class="fp-hero-eyebrow"><i class="bi bi-building-fill"></i> {{ __('lang.fp_hero_eyebrow') }}</span>
                    <h1 class="fp-hero-title display-5 my-3">{{ __('lang.fp_hero_title_1') }}</h1>
                    <p class="fp-hero-lead fs-5 mb-4 mx-auto">{{ __('lang.fp_hero_lead') }}</p>
                </div>
            </div>
        @endif
    </section>

    <div class="container fp-hero-search-bar-wrap">
        <div class="fp-hero-search-bar">
            @include('frontend.partials.hero-search')
        </div>
    </div>

    {{-- ---------- Workers ---------- --}}
    <section id="workers" class="container py-5 py-lg-6">
        <div class="text-center mb-5">
            <span class="fp-section-eyebrow">{{ __('lang.fp_workers_eyebrow') }}</span>
            <h2 class="fp-section-title display-6 mt-2 mb-3">{{ __('lang.fp_workers_title') }}</h2>
            <p class="text-muted col-lg-7 mx-auto mb-0">{{ __('lang.fp_workers_lead') }}</p>
        </div>

        <div class="row g-4">
            @forelse ($workers as $worker)
                <div class="col-sm-6 col-lg-3">
                    @include('frontend.partials.worker-card', ['worker' => $worker])
                </div>
            @empty
                <div class="col-12 text-center text-muted py-5">
                    {{ __('lang.fp_no_workers_yet') }}
                </div>
            @endforelse
        </div>

        @if ($workers->isNotEmpty())
            <div class="text-center mt-5">
                <a href="{{ route('workers') }}" class="btn btn-outline-primary btn-lg rounded-pill px-4">
                    {{ __('lang.fp_view_all_workers') }}
                </a>
            </div>
        @endif
    </section>

    {{-- ---------- About ---------- --}}
    <section id="about" class="container py-5 py-lg-6 overflow-hidden">
        <div class="row align-items-center g-5">
            <div class="col-lg-6 order-lg-2">
                <div class="fp-about-visual">
                    @if ($about->imageUrl())
                        <img src="{{ $about->imageUrl() }}" alt="{{ $about->company_name_ar }}">
                    @else
                        <i class="bi bi-building-fill fp-about-icon-lg"></i>
                    @endif

                    <span class="fp-about-icon-float" style="width: 4rem; height: 4rem; font-size: 1.5rem; inset-inline-start: -1rem; inset-block-start: 2rem;">
                        <i class="bi bi-person-badge-fill"></i>
                    </span>
                    <span class="fp-about-icon-float" style="width: 3rem; height: 3rem; font-size: 1.15rem; inset-inline-end: -.5rem; inset-block-end: 2.5rem;">
                        <i class="bi bi-people-fill"></i>
                    </span>
                </div>
            </div>

            <div class="col-lg-6 order-lg-1">
                <span class="fp-section-eyebrow">{{ __('lang.fp_about_eyebrow') }}</span>
                <h2 class="fp-section-title display-6 mt-2 mb-3">{{ $about->company_name_ar }}</h2>
                <p class="text-muted mb-4">{{ $about->short_about_ar ?: __('lang.fp_about_body') }}</p>

                <ul class="list-unstyled fp-about-list mb-0">
                    <li><i class="bi bi-check-circle-fill"></i> <span>{{ __('lang.fp_about_point_1') }}</span></li>
                    <li><i class="bi bi-check-circle-fill"></i> <span>{{ __('lang.fp_about_point_2') }}</span></li>
                    <li><i class="bi bi-check-circle-fill"></i> <span>{{ __('lang.fp_about_point_3') }}</span></li>
                </ul>
            </div>
        </div>
    </section>

    {{-- ---------- CTA ---------- --}}
    <section class="container pb-5 pb-lg-6">
        <div class="fp-cta p-5 text-center">
            <h2 class="fw-bold mb-3">{{ __('lang.fp_cta_title') }}</h2>
            <p class="mb-4 col-lg-7 mx-auto" style="color: rgba(255,255,255,.85);">{{ __('lang.fp_cta_lead') }}</p>
            <a href="#workers" class="btn btn-light btn-lg rounded-pill px-5">{{ __('lang.fp_cta_button') }}</a>
        </div>
    </section>
@endsection