@extends('frontend.layouts.app')

@section('title', __('lang.fp_about_page_title'))

@section('content')
    <section class="fp-page-header">
        <div class="container text-center py-5">
            <span class="fp-hero-eyebrow"><i class="bi bi-building-fill"></i> {{ __('lang.fp_about_eyebrow') }}</span>
            <h1 class="fp-hero-title display-6 mt-3 mb-0">{{ __('lang.fp_about_page_title') }}</h1>
        </div>
    </section>

    <section class="container py-5">
        <div class="row align-items-center g-5 mb-5">
            <div class="col-lg-6">
                <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">
                <h2 class="fp-section-title display-6 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>

        @if ($about->about_ar)
            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="fp-about-story">{!! nl2br(e($about->about_ar)) !!}</div>
                </div>
            </div>
        @endif
    </section>

    <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="{{ route('workers') }}" class="btn btn-light btn-lg rounded-pill px-5">{{ __('lang.fp_cta_button') }}</a>
        </div>
    </section>
@endsection