@extends('layout.front.master')

@php
    $activeDemo = get_active_demo();
    $isDarkTheme = !in_array($activeDemo, ['demo-law-firm-2', 'demo-urban-development'], true);
    $sectionBg = $isDarkTheme ? 'var(--secondary)' : '#F7F7F7';
    $cardBg = $isDarkTheme ? 'var(--dark)' : '#ffffff';
    $cardBorderColor = $isDarkTheme ? 'var(--primary-rgba-10)' : 'rgba(0, 0, 0, 0.08)';
    $innerCardBg = $isDarkTheme ? 'var(--secondary)' : '#F9F9F9';
    $titleColor = $isDarkTheme ? 'var(--primary)' : 'var(--secondary, #1A325D)';
    $lightTextColor = $isDarkTheme ? 'var(--light)' : 'var(--dark-rgba-90, #212529)';
    $subtextColor = $isDarkTheme ? 'var(--quaternary)' : '#666666';
    $featuredSectionBg = $isDarkTheme ? 'var(--dark)' : '#ffffff';
    
    // Separate references with logos vs without logos
    $logoReferences = $references->filter(fn($r) => !empty($r->logo));
@endphp

@section('title', config('site.modules.references.page_header.title', __('Referencias')))

@section('content')

{{-- Dynamic Header --}}
@include('modules.references.frontend.partials.dynamic-header')

{{-- Featured Logo-Based References Section --}}
@if($logoReferences->isNotEmpty())
<section class="section border-0 m-0 py-5 bg-white">
    <div class="container container-xl-custom">
        <div class="row mb-4">
            <div class="col text-center">
                <h2 class="font-weight-bold text-8 mb-2" style="color: {{ $lightTextColor }};">{{ __('Nuestras Referencias') }}</h2>
                <p class="text-4" style="color: {{ $subtextColor }};">{{ __('Empresas y organizaciones con las que trabajamos con orgullo') }}</p>
            </div>
        </div>
        <div class="row align-items-center justify-content-center text-center">
            @foreach($logoReferences as $index => $reference)
                <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4 d-flex justify-content-center">
                    @php
                        $refLogoSrc = filter_var($reference->logo, FILTER_VALIDATE_URL) ? $reference->logo : asset($reference->logo);
                        $delay = $index < 3 ? (600 - $index * 200) : (($index - 3) * 200 + 200);
                        $animation = $index < 3 ? 'fadeInLeftShorterPlus' : 'fadeInRightShorterPlus';
                    @endphp
                    <div class="p-3 bg-white rounded shadow-sm d-flex justify-content-center align-items-center appear-animation" data-appear-animation="{{ $animation }}" data-appear-animation-delay="{{ $delay }}" style="width: 160px; height: 100px; border: 1px solid #eee; transition: all 0.3s;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 6px rgba(0,0,0,0.05)'">
                        <img src="{{ $refLogoSrc }}" alt="{{ $reference->name }}" class="img-fluid" style="max-height: 100%; max-width: 100%; object-fit: contain;" />
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Organized Text-Based References List Section --}}
<section class="section border-0 m-0 py-5" style="background-color: {{ $sectionBg }};">
    <div class="container container-xl-custom">
        <div class="row mb-4">
            <div class="col text-center">
                <h3 class="font-weight-bold text-7 mb-2" style="color: {{ $lightTextColor }};">{{ __('Listado de Referencias') }}</h3>
                <p class="text-4" style="color: {{ $subtextColor }};">{{ __('Detalle de referencias comerciales y profesionales organizadas por sector') }}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            @php $hasTextRefs = false; @endphp
            @foreach ($categories as $category)
                @php
                    $categoryTextRefs = $category->references->filter(fn($r) => empty($r->logo));
                @endphp
                @if($categoryTextRefs->isNotEmpty())
                    @php $hasTextRefs = true; @endphp
                    <div class="col-lg-6 mb-4 d-flex">
                        <div class="p-4 w-100 shadow-sm" style="background-color: {{ $cardBg }}; border: 1px solid {{ $cardBorderColor }};">
                            <h4 class="font-weight-bold text-5 mb-4 pb-2" style="color: {{ $titleColor }}; border-bottom: 2px solid var(--primary-rgba-20);">
                                {{ $category->name }}
                            </h4>
                            <ul class="list-unstyled mb-0">
                                @foreach($categoryTextRefs as $ref)
                                    <li class="d-flex align-items-start mb-4">
                                        <i class="fas fa-check-circle text-color-primary me-3 mt-1" style="font-size: 1.1rem;"></i>
                                        <div>
                                            <h5 class="font-weight-bold text-4-5 mb-1" style="color: {{ $lightTextColor }};">{{ $ref->name }}</h5>
                                            @if($ref->position || $ref->company)
                                                <p class="text-3 font-weight-semibold text-color-primary mb-1">
                                                    {{ implode(' - ', array_filter([$ref->position, $ref->company])) }}
                                                </p>
                                            @endif
                                            @if($ref->description)
                                                <p class="text-3-5 mb-0 italic text-color-grey" style="line-height: 1.6; color: {{ $subtextColor }}; font-style: italic;">
                                                    "{{ $ref->description }}"
                                                </p>
                                            @endif
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
            @endforeach

            @if(!$hasTextRefs)
                <div class="col-12 text-center py-5">
                    <i class="fas fa-folder-open fa-3x mb-3" style="color: var(--primary); opacity: 0.4;"></i>
                    <h4 class="font-weight-bold text-color-grey">{{ __('No hay referencias de texto disponibles.') }}</h4>
                </div>
            @endif
        </div>
    </div>
</section>

@endsection