@extends('front.layouts.main')
@section('contenido')

<div class="col-12 fondo_subpagina">
    <div class="col-12 espacio_header"></div>
</div>

<div class="col-12 pt-lg-5 pt-3 pb-lg-5 pb-3"
     style="background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('{{ asset($nosotros->hero_bg_image) }}'); background-size: cover; background-attachment: fixed; background-position: center;">
    <div class="container">
        <div class="col-12 text-center text-white">
            <h1>{{ $nosotros->hero_title }}</h1>
            <p class="mb-0">
                <a href="{{ route('principal') }}" class="a_naranja">Inicio</a> / {{ $nosotros->breadcrumb_label }}
            </p>
        </div>
    </div>
</div>

<div class="col-12 pt-lg-5 pt-3 pb-lg-5 pb-3">
    <div class="container">
        <div class="col-12">
            <div class="row g-3">
                <div class="col-lg-4" style="display: flex; align-items: center; justify-content: center;">
                    <div class="col-12">
                        <img src="{{ asset($nosotros->section1_image) }}" class="w-100 rounded" alt="">
                    </div>
                </div>
                <div class="col-lg-8" style="display: flex; align-items: center;">
                    <div class="col-12 p-4">
                        <h3 class="mb-4">
                            {{ $nosotros->section1_title_prefix }}
                            <span class="naranja">{{ $nosotros->section1_title_highlight }}</span>
                        </h3>

                        {!! $nosotros->section1_html !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@php
    // Features como array (ordenadas si existe el accesor features_sorted del modelo)
    $features = property_exists($nosotros, 'features_sorted')
        ? ($nosotros->features_sorted ?? [])
        : (is_array($nosotros->features) ? $nosotros->features : (json_decode($nosotros->features ?? '[]', true) ?: []));
    usort($features, fn($a,$b) => ($a['order'] ?? 0) <=> ($b['order'] ?? 0));
@endphp

<div class="col-12 pb-5">
    <div class="container">
        <div class="col-12">
            <div class="row g-3">
                @foreach($features as $feature)
                    <div class="col-lg-4">
                        <div class="col-12 h-100 p-5 rounded text-center" style="background: #f1f1f1;">
                            <div class="col-12">
                                @if(!empty($feature['icon_path']))
                                    <img src="{{ asset($feature['icon_path']) }}" alt="" style="width: 100px; margin: 0 auto;">
                                @endif
                            </div>
                            <div class="col-12 mt-3">
                                <h3 class="mb-4">{{ $feature['title'] ?? '' }}</h3>
                                <p>{!! $feature['body'] ?? '' !!}</p>

                                {{-- @php
                                    $bullets = $feature['bullets'] ?? [];
                                    usort($bullets, fn($a,$b) => ($a['order'] ?? 0) <=> ($b['order'] ?? 0));
                                @endphp
                                @if(!empty($bullets))
                                    <table class="w-100 mb-3" style="text-align: left;">
                                        @foreach($bullets as $b)
                                            <tr>
                                                <td style="width: 60px;">
                                                    <div style="width: 40px; height: 40px; border: 1px solid #FF5600; color: #FF5600; font-size: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                                        {{ $b['number'] ?? '' }}
                                                    </div>
                                                </td>
                                                <td>{!! $b['text'] ?? '' !!}</td>
                                            </tr>
                                        @endforeach
                                    </table>
                                @endif --}}

                                @if(!empty($feature['footer_text']))
                                    <p class="mb-0">{{ $feature['footer_text'] }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="col-12 pb-5">
    <div class="container">
        <div class="col-12">
            <div class="row g-3">
                <div class="col-lg-6">
                    <div class="col-12 text-center">
                        {{-- <div class="col-12 mb-4 rounded"
                             style="background-image: url('{{ asset($nosotros->mission_image) }}'); background-position: center bottom; background-size: cover; height: 300px;">
                        </div> --}}
                        <h3>{{ $nosotros->mission_title }}</h3>
                        <div class="mb-4" style="width: 50px; border-bottom: 5px solid #FF5600; margin: 0 auto;"></div>
                        <p>{!! $nosotros->mission_text !!}</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="col-12 text-center">
                        {{-- <div class="col-12 mb-4 rounded"
                             style="background-image: url('{{ asset($nosotros->vision_image) }}'); background-position: center top; background-size: cover; height: 300px;">
                        </div> --}}
                        <h3>{{ $nosotros->vision_title }}</h3>
                        <div class="mb-4" style="width: 50px; border-bottom: 5px solid #FF5600; margin: 0 auto;"></div>
                        <p>{!! $nosotros->vision_text !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Bloque de equipo queda igual, comentado --}}
@endsection