@extends('layout.front.master')

@section('title', config('site.about.page_title', __('About Us')) . ' | ' . config('site.name'))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

@section('og_title', config('site.about.page_title', __('About Us')) . ' | ' . config('site.name'))
@section('og_description', config('site.og.description'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@section('content')

{{-- Hero --}}
<section class="section border-0 m-0 p-0 about-hero" style="background: linear-gradient(135deg, var(--primary) 0%, var(--primary--100) 30%, var(--primary--300) 60%, var(--secondary-rgba-20) 150%); position: relative; overflow: hidden;">
    <div class="container position-relative z-index-2 py-5">
        <div class="row align-items-center py-5 mt-3">
            <div class="col-lg-8">
                <p class="font-weight-bold text-uppercase mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="color: var(--secondary); letter-spacing: 0.2em; font-size: 0.82rem;">{{ config('site.about.page_title', __('About Us')) }}</p>
                <h1 class="font-weight-bold text-color-light appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300" style="font-size: clamp(2rem, 4vw + 1rem, 3.5rem); line-height: 1.1; letter-spacing: -0.02em;">
                    {!! config('site.about.hero_heading', config('site.name')) !!}
                </h1>
                <p class="text-color-light text-4 mt-4 mb-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500" style="opacity: 0.7; max-width: 38rem;">{{ config('site.about.hero_subtitle', config('site.description', '')) }}</p>
            </div>
            <div class="col-lg-4 text-end d-none d-lg-flex align-items-center justify-content-end appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                <span style="font-size: 9rem; line-height: 1; color: var(--secondary-rgba-20); font-family: 'Playfair Display', serif;">&#10022;</span>
            </div>
        </div>
    </div>
</section>

{{-- Intro --}}
<section class="section border-0 m-0" style="background: var(--primary--200);">
    <div class="container py-5-5">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-7">
                @if(config('site.about.description_1'))
                <p class="text-4-5 line-height-6 mb-4-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200" style="color: var(--light);">{!! config('site.about.description_1') !!}</p>
                @endif
                @if(config('site.about.description_2'))
                <p class="text-3-5 mb-4-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400" style="color: var(--light); opacity: 0.75;">{{ config('site.about.description_2') }}</p>
                @endif
                @if(config('site.about.description_3'))
                <p class="text-3-5 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600" style="color: var(--light); opacity: 0.75;">{{ config('site.about.description_3') }}</p>
                @endif
            </div>
            <div class="col-sm-9 col-md-7 col-lg-4 offset-lg-1 mt-5 mt-lg-0">
                <img src="{{ filter_var(config('site.about.intro_image', 'cd-project/img/demos/business-consulting/generic/generic-2.jpg'), FILTER_VALIDATE_URL) ? config('site.about.intro_image') : asset(config('site.about.intro_image', 'cd-project/img/demos/business-consulting/generic/generic-2.jpg')) }}" class="img-fluid appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800" alt="{{ config('site.name') }}" style="opacity: 0.9;" />
            </div>
        </div>
    </div>
</section>

{{-- Pillars --}}
@php
    $pillars = config('site.about.pillars', []);
    if (is_string($pillars)) { $pillars = json_decode($pillars, true) ?? []; }
@endphp
@if(!empty($pillars))
<section class="section border-0 m-0" style="background: var(--primary);">
    <div class="container pt-5 pb-4">
        <div class="row">
            <div class="col text-center">
                <p class="font-weight-bold text-uppercase mb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100" style="color: var(--secondary); font-size: 0.82rem; letter-spacing: 0.2em;">{{ config('site.about.pillars_badge', __('Our Pillars')) }}</p>
                <h2 class="text-color-light font-weight-bold text-8 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.about.pillars_heading', __('Why Choose Us')) }}</h2>
            </div>
        </div>
        <div class="row process custom-process justify-content-center mt-4 about-pillars-dark">
            @foreach($pillars as $index => $pillar)
            <div class="process-step col-md-9 col-lg-4 mb-5 mb-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 200 + ($index * 200) }}">
                <div class="process-step-circle border-width-3 mb-3">
                    <strong class="process-step-circle-content">
                        @if(!empty($pillar['image']))
                            <img width="58" height="58" src="{{ asset($pillar['image']) }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': '{{ $pillar['image_class'] ?? 'svg-stroke-color-secondary' }}'}" />
                        @else
                            <i class="{{ $pillar['icon'] ?? 'fas fa-star' }} text-7" style="color: var(--secondary);"></i>
                        @endif
                    </strong>
                </div>
                <div class="process-step-content px-4">
                    <h4 class="font-weight-bold text-6 pb-1 mb-2 text-color-light">{{ $pillar['title'] ?? '' }}</h4>
                    <p class="text-3-5 mb-0" style="color: var(--light); opacity: 0.7;">{{ $pillar['text'] ?? '' }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Mission / Vision / Values + Skills --}}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 p-0" style="background: var(--primary--100);">
            <div class="h-100">
                <div class="row justify-content-end py-5 my-5-5 m-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="350">
                    <div class="col-half-section col-half-section-right ps-4">
                        <p class="font-weight-bold text-uppercase mb-1" style="color: var(--secondary); font-size: 0.82rem; letter-spacing: 0.2em;">{{ config('site.about.essence_badge', __('Our Essence')) }}</p>
                        @if(config('site.about.mission'))
                        <h4 class="font-weight-bold text-color-light text-5-5 mb-2">{{ config('site.about.mission_label', __('Our Mission')) }}</h4>
                        <p class="text-3-5 mb-5-5" style="color: var(--light); opacity: 0.75;">{{ config('site.about.mission') }}</p>
                        @endif
                        @if(config('site.about.vision'))
                        <h4 class="font-weight-bold text-color-light text-5-5 mb-2">{{ config('site.about.vision_label', __('Our Vision')) }}</h4>
                        <p class="text-3-5 mb-5-5" style="color: var(--light); opacity: 0.75;">{{ config('site.about.vision') }}</p>
                        @endif
                        @if(config('site.about.values_text'))
                        <h4 class="font-weight-bold text-color-light text-5-5 mb-2">{{ config('site.about.values_label', __('Our Values')) }}</h4>
                        <p class="text-3-5 mb-0" style="color: var(--light); opacity: 0.75;">{{ config('site.about.values_text') }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 p-0">
            <section class="section section-no-border overlay overlay-show overlay-op-9 h-100 m-0" style="background: url({{ asset('cd-project/img/demos/business-consulting/backgrounds/background-3.jpg') }})">
                <div class="row align-items-center h-100 position-relative z-index-2 py-5-5 m-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300">
                    <div class="col-half-section col-half-section-left ps-xl-5 ms-lg-4-5">
                        @php
                            $skills = config('site.about.skills', []);
                            if (is_string($skills)) { $skills = json_decode($skills, true) ?? []; }
                        @endphp
                        @if(!empty($skills))
                        <p class="font-weight-bold text-uppercase mb-2" style="color: var(--secondary); font-size: 0.82rem; letter-spacing: 0.2em;">{{ config('site.about.skills_badge', __('Experience')) }}</p>
                        <h4 class="font-weight-bold text-color-light text-5-5 mb-5-5">{{ config('site.about.skills_heading', __('Our Capabilities')) }}</h4>
                        <div class="progress-bars custom-progress-bars-style-1">
                            @foreach($skills as $skill)
                            <div class="progress-label d-flex justify-content-between {{ !$loop->first ? 'pt-2' : '' }} mb-1">
                                <span class="text-color-light font-weight-medium text-2-5">{{ $skill['name'] ?? '' }}</span>
                                <span class="font-weight-medium text-2-5" style="color: var(--secondary);">{{ $skill['value'] ?? '0' }}%</span>
                            </div>
                            <div class="progress progress-xs progress-no-border-radius mb-4">
                                <div class="progress-bar" data-appear-progress-animation="{{ $skill['value'] ?? '0' }}%" style="background-color: var(--secondary);"></div>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

{{-- Counters --}}
@php
    $counters = config('site.about.counters', []);
    if (is_string($counters)) { $counters = json_decode($counters, true) ?? []; }
@endphp
@if(!empty($counters))
<section class="section overlay overlay-show overlay-color-primary custom-overlay-opacity-95 border-0 m-0" style="background: url({{ asset('cd-project/img/demos/business-consulting/backgrounds/background-1.jpg') }}); background-size: cover; background-position: center;">
    <div class="container position-relative z-index-2 pt-5">
        <div class="row">
            <div class="col text-center">
                <h3 class="font-weight-bold text-color-light text-4-5 ls-0 mb-2">{{ config('site.name') }}</h3>
                <h2 class="font-weight-bold text-color-light text-11 line-height-3 line-height-md-1 mb-5">{{ config('site.tagline', '') }}</h2>
                <p class="text-color-light text-3-5 line-height-9">{{ config('site.description', '') }}</p>
            </div>
        </div>
        <div class="row counters counters-sm text-6 pb-5 pt-4 mt-5 justify-content-center">
            @foreach($counters as $counter)
            <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0 text-center">
                <div class="counter">
                    <strong class="font-weight-extra-bold text-8 line-height-1" data-to="{{ $counter['value'] ?? 0 }}" data-append="{{ $counter['append'] ?? '' }}" {{ isset($counter['decimals']) ? 'data-decimals=' . $counter['decimals'] : '' }} style="color: var(--secondary);">0</strong>
                    <span class="text-color-light font-weight-normal line-height-1 text-0 mt-0">{{ $counter['label'] ?? '' }}</span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Team --}}
@if(isset($aboutTeam) && $aboutTeam->count() > 0)
<section class="section border-0 m-0" style="background: var(--primary--100);">
    <div class="container py-5 my-3">
        <div class="row">
            <div class="col text-center">
                <p class="font-weight-bold text-uppercase mb-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200" style="color: var(--secondary); font-size: 0.82rem; letter-spacing: 0.2em;">{{ config('site.about.team_badge', __('Meet the Team')) }}</p>
                <h2 class="text-color-light font-weight-bold text-8 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.about.team_heading', __('Our Team')) }}</h2>
            </div>
        </div>
        <div class="row justify-content-center appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">
            @foreach($aboutTeam->take(3) as $member)
            <div class="col-sm-9 col-md-7 col-lg-4 mb-4 mb-lg-0">
                <div class="text-decoration-none d-block about-team-card" style="background: var(--primary--300);">
                    @if($member->photo)
                    <div class="about-team-card-overflow">
                        <img src="{{ filter_var($member->photo, FILTER_VALIDATE_URL) ? $member->photo : asset($member->photo) }}" class="about-team-card-img img-fluid" alt="{{ $member->name }}" />
                    </div>
                    @endif
                    <div class="text-center py-4 px-3">
                        <h4 class="text-color-light font-weight-bold text-5-5 mb-1">{{ $member->name }}</h4>
                        <h5 class="d-block font-weight-semibold line-height-1 positive-ls-2 text-2 mb-3" style="color: var(--secondary);">{{ $member->position ?? '' }}</h5>
                        @if($member->bio)
                        <p class="text-3-5 mb-0" style="color: var(--light); opacity: 0.7;">{{ Str::limit(strip_tags($member->bio), 150) }}</p>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Contact split block --}}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 p-0">
            <section class="section border-0 bg-color-primary h-100 m-0">
                <div class="row justify-content-end py-5-5 m-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="350">
                    <div class="col-half-section col-half-section-right ps-4">
                        <h3 class="font-weight-bold text-color-light line-height-1 text-4 ls-0 mb-1">{{ config('site.about.cta_eyebrow', __('Request a callback')) }}</h3>
                        <h2 class="text-color-light font-weight-bold text-8 ls-0 mb-3">{{ config('site.about.cta_heading', __('We will call you')) }}</h2>
                        <p class="text-color-light opacity-7 font-weight-light text-3-5 line-height-9">{{ config('site.about.cta_subtitle', config('site.description', '')) }}</p>
                        <form class="contact-form form-style-4 form-style-4-border-light-2 form-errors-light pe-lg-5" action="{{ route('front.contact.store') }}" method="POST">
                            @csrf
                            <div class="contact-form-success alert alert-success d-none mt-4">
                                <strong>{{ __('Success!') }}</strong> {{ __('Your message was sent successfully.') }}
                            </div>
                            <div class="contact-form-error alert alert-danger d-none mt-4">
                                <strong>{{ __('Error.') }}</strong> {{ __('Could not send the message.') }}
                                <span class="mail-error-message text-1 mt-2 d-block"></span>
                            </div>
                            <div class="row mb-2 mx-0">
                                <input type="text" class="form-control font-weight-semibold text-color-light px-1 py-3" name="name" placeholder="{{ __('Name') }} *" required />
                            </div>
                            <div class="row mx-0 mb-3">
                                <input type="email" class="form-control font-weight-semibold text-color-light px-1 py-3" name="email" placeholder="{{ __('Email') }} *" required />
                            </div>
                            <div class="row mb-4 mx-0">
                                <textarea name="message" rows="4" class="form-control font-weight-semibold text-color-light px-1 py-3" placeholder="{{ __('Message') }} *"></textarea>
                            </div>
                            <input type="submit" class="btn font-weight-bold text-3 py-2 px-5" style="background-color: var(--secondary); color: var(--dark); border: none; border-radius: 50px; letter-spacing: 1px; transition: all 0.3s ease;" value="{{ __('Send') }}" />
                        </form>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-lg-6 p-0">
            <section class="section section-no-border bg-dark overflow-hidden h-100 m-0">
                <div class="row py-5-5 m-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300">
                    <div class="col-half-section col-half-section-left ps-lg-5">
                        <h3 class="font-weight-bold text-color-light line-height-1 text-4 ls-0 mb-1">{{ config('site.about.contact_eyebrow', __('Talk to us')) }}</h3>
                        <h2 class="text-color-light font-weight-bold text-8 ls-0 mb-3">{{ config('site.about.contact_heading', __('Get in Touch')) }}</h2>
                        <p class="text-color-grey line-height-9 text-3-5 mb-5-5">{{ config('site.about.contact_subtitle', config('site.description', '')) }}</p>
                        @if(config('site.contact.phone'))
                        <div class="d-flex align-items-center">
                            <i class="icons icon-phone text-9 text-color-light position-relative bottom-1"></i>
                            <a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone')) }}" class="text-4-5 font-weight-bold text-color-light opacity-hover-8 text-decoration-none ps-3-5">{{ config('site.contact.phone') }}</a>
                        </div>
                        @endif
                        @if(config('site.contact.email'))
                        <div class="d-flex align-items-center my-5-5">
                            <img width="38" height="38" src="{{ asset('cd-project/img/demos/business-consulting/icons/email.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light'}" />
                            <a href="mailto:{{ config('site.contact.email') }}" class="text-4-5 font-weight-bold text-color-light opacity-hover-8 text-decoration-none ps-3-5">{{ config('site.contact.email') }}</a>
                        </div>
                        @endif
                        @if(config('site.contact.address'))
                        <div class="d-flex align-items-center pe-lg-5 mb-5">
                            <img width="38" height="38" src="{{ asset('cd-project/img/demos/business-consulting/icons/map-pin.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light'}" />
                            <p class="text-color-light font-weight-bold text-4-5 mb-0 ps-3-5 pe-lg-5 me-lg-5">{{ config('site.contact.address') }}</p>
                        </div>
                        @endif
                        <a href="{{ route('front.contact') }}" class="btn font-weight-bold text-3 py-2 px-5" style="background-color: var(--secondary); color: var(--dark); border: none; border-radius: 50px; letter-spacing: 1px; transition: all 0.3s ease;">{{ config('site.about.contact_cta', __('Contact')) }}</a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

@endsection