@extends('layout.front.master')

@section('title', config('site.about.page_title', __('Sobre nosotros')) . ' | ' . config('site.name'))
@section('description', config('site.about.page_subtitle', config('site.seo.description', '')))

@section('content')

{{-- ───────────────────────── PAGE HEADER ───────────────────────── --}}
<section class="page-header page-header-modern bg-color-primary page-header-md">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                <h1>{{ config('site.about.page_title', __('Sobre nosotros')) }}</h1>
                <span class="sub-title">{{ config('site.about.page_tagline', __('Atención médica integral y humana')) }}</span>
            </div>
            <div class="col-md-4 order-1 order-md-2 align-self-center">
                <ul class="breadcrumb d-block text-md-end breadcrumb-light">
                    <li><a href="{{ url('/') }}">{{ __('Inicio') }}</a></li>
                    <li class="active">{{ config('site.about.page_title', __('Sobre nosotros')) }}</li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{-- ───────────────────────── MAIN CONTENT ───────────────────────── --}}
<div class="container">
    <div class="row mt-5">
        <div class="col-lg-8">
            <h2 class="font-weight-semibold mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                {{ config('site.about.main_title', __('Tu salud, nuestra prioridad')) }}
            </h2>
            <p class="lead font-weight-normal appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                {{ config('site.about.main_subtitle', __('Combinamos experiencia clínica, tecnología y atención humana.')) }}
            </p>
            <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                {{ config('site.about.description_1', __('Somos un equipo de profesionales comprometidos con tu salud. Cada paciente recibe una atención personalizada con la mejor evidencia clínica disponible.')) }}
            </p>
            <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                {{ config('site.about.description_2', __('Combinamos las últimas tecnologías diagnósticas con un enfoque humano. Creemos en la importancia de escuchar, explicar y acompañar a cada persona durante todo el proceso.')) }}
            </p>
        </div>
        <div class="col-lg-4">
            @php
                $aboutImg1 = config('site.about.image_1') ?: 'cd-project/img/demos/medical/gallery/gallery-2.jpg';
                $aboutImg2 = config('site.about.image_2') ?: 'cd-project/img/demos/medical/gallery/gallery-3.jpg';
                $aboutImg3 = config('site.about.image_3') ?: 'cd-project/img/demos/medical/gallery/gallery-4.jpg';
            @endphp
            <div class="owl-carousel owl-theme dots-inside mt-2" data-plugin-options="{'items': 1, 'margin': 10, 'animateOut': 'fadeOut', 'autoplay': true, 'autoplayTimeout': 3000}">
                <div><img src="{{ filter_var($aboutImg1, FILTER_VALIDATE_URL) ? $aboutImg1 : asset($aboutImg1) }}" alt="{{ __('Sobre nosotros') }}" class="img-fluid box-shadow-custom" /></div>
                <div><img src="{{ filter_var($aboutImg2, FILTER_VALIDATE_URL) ? $aboutImg2 : asset($aboutImg2) }}" alt="{{ __('Sobre nosotros') }}" class="img-fluid box-shadow-custom" /></div>
                <div><img src="{{ filter_var($aboutImg3, FILTER_VALIDATE_URL) ? $aboutImg3 : asset($aboutImg3) }}" alt="{{ __('Sobre nosotros') }}" class="img-fluid box-shadow-custom" /></div>
            </div>

            {{-- Counters --}}
            <div class="row mt-5 mt-lg-4 mb-4 counters">
                @php
                    $counter1 = config('site.about.counter1_value', '15');
                    $counter1Label = config('site.about.counter1_label', __('Años de trayectoria'));
                    $counter2 = config('site.about.counter2_value', '12');
                    $counter2Label = config('site.about.counter2_label', __('Especialidades'));
                    $counter3 = config('site.about.counter3_value', '5000');
                    $counter3Label = config('site.about.counter3_label', __('Pacientes atendidos'));
                @endphp
                <div class="col-lg-12 mb-4">
                    <div class="counter counter-primary">
                        <strong data-to="{{ $counter1 }}">0</strong>
                        <label>{{ $counter1Label }}</label>
                    </div>
                </div>
                <div class="col-lg-12 mb-4">
                    <div class="counter counter-primary">
                        <strong data-to="{{ $counter2 }}">0</strong>
                        <label>{{ $counter2Label }}</label>
                    </div>
                </div>
                <div class="col-lg-12 mb-4">
                    <div class="counter counter-primary">
                        <strong data-to="{{ $counter3 }}">0</strong>
                        <label>{{ $counter3Label }}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ───────────────────────── FAQs PREVIEW (Accordion) ───────────────────────── --}}
    @if(is_module_active('faqs') && isset($faqs) && $faqs->count() > 0)
    <div class="row mb-5">
        <div class="col">
            <h3 class="font-weight-semibold mb-4">{{ config('site.about.faqs_heading', __('Preguntas frecuentes')) }}</h3>
            <div class="toggle toggle-primary toggle-simple" data-plugin-toggle>
                @foreach($faqs->take(5) as $faq)
                    <section class="toggle">
                        <a class="toggle-title">{{ $faq->question ?? $faq->title }}</a>
                        <div class="toggle-content">
                            <p>{{ $faq->answer ?? $faq->content }}</p>
                        </div>
                    </section>
                @endforeach
            </div>
            @if($faqs->count() > 5)
            <div class="text-center mt-4">
                <a class="btn btn-outline btn-quaternary custom-button text-uppercase font-weight-bold" href="{{ url('/faqs') }}">{{ __('Ver todas las preguntas') }}</a>
            </div>
            @endif
        </div>
    </div>
    @endif
</div>

{{-- ───────────────────────── CALL TO ACTION ───────────────────────── --}}
<section class="call-to-action call-to-action-default call-to-action-big content-align-center mb-0 mt-3">
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-lg-9">
                <div class="call-to-action-content">
                    <h3>{{ config('site.about.cta_heading', __('"Tu salud es lo más importante que tenés"')) }}</h3>
                    <p class="mb-0">{{ config('site.about.cta_text', __('Contactanos para reservar tu turno.')) }}</p>
                </div>
            </div>
            <div class="col-sm-3 col-lg-3">
                <div class="call-to-action-btn">
                    <a target="_self" href="{{ url('/contact') }}" class="btn btn-modern btn-primary custom-button">{{ __('Pedir turno') }}</a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection