@extends('layout.front.master')

@section('title', 'Servicios de Construcción | Ejecución de Obra y Obra Llave en Mano | ' . config('site.name'))
@section('description', 'Servicios especializados de Constructora Gama S.A: ejecución de obra, gestión de proyectos, control de calidad y obra llave en mano. Infraestructura vial, pluvial, energética, educativa, estructural, ambiental, hidráulica y sanitaria. Más de 33 años de experiencia en el NOA.')
@section('keywords', config('site.seo.keywords') . ', servicios construcción, ejecución obra, gestión proyectos, control calidad, obra llave en mano, infraestructura vial, infraestructura pluvial, infraestructura energética, infraestructura educativa, infraestructura sanitaria')

{{-- Open Graph Meta Tags --}}
@section('og_title', 'Servicios de Construcción | Ejecución de Obra y Obra Llave en Mano | ' . config('site.name'))
@section('og_description', 'Servicios especializados de Constructora Gama S.A: ejecución de obra, gestión de proyectos, control de calidad y obra llave en mano. Infraestructura vial, pluvial, energética, educativa, estructural, ambiental, hidráulica y sanitaria.')
@section('og_image', asset('cd-project/img/meta-tags/construction/backgrounds/services-bg.jpg'))
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', 'Servicios de Construcción | Ejecución de Obra y Obra Llave en Mano | ' . config('site.name'))
@section('twitter_description', 'Servicios especializados: ejecución de obra, gestión de proyectos, control de calidad y obra llave en mano. Infraestructura vial, pluvial, energética, educativa y sanitaria.')
@section('twitter_image', asset('cd-project/img/meta-tags/construction/backgrounds/services-bg.jpg'))

@section('content')

@php
    $moduleConfig = get_module_page_header_config('services');
    $pageTitle = isset($selectedCategory) ? $selectedCategory->name : $moduleConfig['title'];
    $pageSubtitle = isset($selectedCategory) ? ($selectedCategory->description ?? $moduleConfig['subtitle']) : $moduleConfig['subtitle'];
    $breadcrumbs = get_module_breadcrumbs('services', $pageTitle);
@endphp

@if(should_use_modern_page_header('services'))
    {{-- Modern Page Header (x-page-header) --}}
    <x-page-header
        :title="$pageTitle"
        :subtitle="$pageSubtitle"
        :icon="$moduleConfig['icon']"
        :breadcrumbs="$breadcrumbs"
        background="primary" />
@else
    {{-- Classic Page Header para demo-construction --}}
    @if(view()->exists('modules.services.frontend.partials.dynamic-header'))
        @include('modules.services.frontend.partials.dynamic-header')
    @endif
    {{-- Si no existe el header clásico, no mostrar nada --}}
@endif

{{-- Main Services Section --}}
<section class="section section-height-auto bg-color-grey-scale-1 m-0 border-0 pt-5 pb-0">
    <div class="container container-xl-custom" style="padding-top: 5rem;">

    <!-- Filter Information -->
    @if($selectedCategory)
        <div class="alert alert-info mb-4">
            <div class="d-flex align-items-center">
                <i class="fas fa-filter me-2"></i>
                <span>Mostrando servicios de la categoría: <strong>{{ $selectedCategory->name }}</strong></span>
                <a href="{{ route('frontend.services.index') }}" class="btn btn-sm btn-outline-primary ms-auto">
                    <i class="fas fa-times me-1"></i>Limpiar filtro
                </a>
            </div>
        </div>
    @endif

    {{-- Services Grid --}}
    <div class="row">
        @forelse($services as $index => $service)
            <div class="col-md-6 col-lg-4 mb-4 appear-animation"
                 data-appear-animation="fadeInUpShorterPlus"
                 data-appear-animation-delay="{{ 200 + ($index * 100) }}"
                 data-plugin-animate-viewport="true">
                <article class="card border-0 shadow-modern service-card h-100" itemscope itemtype="https://schema.org/Service">
                    @if($service->image)
                        <div class="card-img-top position-relative overflow-hidden service-image-wrapper" style="height: 200px;">
                            <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none">
                                <img src="{{ filter_var($service->image, FILTER_VALIDATE_URL) ? $service->image : asset($service->image) }}"
                                     alt="{{ $service->title }}"
                                     class="img-fluid w-100 h-100 service-image"
                                     style="object-fit: cover; transition: transform 0.4s ease;">
                            </a>
                            @if($service->is_featured)
                                <div class="position-absolute top-0 start-0 m-3">
                                    <span class="badge bg-secondary text-white">
                                        <i class="fas fa-star me-1"></i>Destacado
                                    </span>
                                </div>
                            @endif
                        </div>
                    @endif
                    <div class="card-body p-4 d-flex flex-column" style="position: relative; z-index: 2;">
                        {{-- Category Badge --}}
                        @if($service->category)
                            <div class="mb-3">
                                <a href="{{ route('frontend.services.index') }}?category={{ $service->category->slug }}"
                                   class="badge bg-color-grey-scale-2 text-color-dark me-1 mb-1 px-2 py-1 text-decoration-none service-badge">
                                    @if($service->category->icon)
                                        <i class="{{ $service->category->icon }} me-1"></i>
                                    @endif
                                    {{ $service->category->name }}
                                </a>
                            </div>
                        @endif

                        <h5 class="card-title font-weight-bold text-color-dark mb-3 flex-grow-1" style="font-size: 1.15rem; line-height: 1.4; min-height: 3rem;" itemprop="name">
                            <a href="{{ route('frontend.services.detail', $service->slug) }}"
                               class="text-decoration-none text-color-dark hover-text-primary">
                                {{ $service->title ?? 'Servicio' }}
                            </a>
                        </h5>

                        @if($service->description)
                            <p class="text-color-grey mb-3 text-3" style="line-height: 1.6;" itemprop="description">
                                {{ \Illuminate\Support\Str::limit($service->description, 120, '...') }}
                            </p>
                        @endif

                        <div class="mt-auto pt-3 border-top border-color-grey-scale-2">
                            <a href="{{ route('frontend.services.detail', $service->slug) }}"
                               class="custom-view-more d-inline-flex align-items-center font-weight-medium text-color-dark text-decoration-none"
                               itemprop="url">
                                Ver Detalles
                                <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </article>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">No se encontraron servicios</h4>
                @if($selectedCategory)
                    <p class="text-muted">No hay servicios disponibles en la categoría "{{ $selectedCategory->name }}"</p>
                    <a href="{{ route('frontend.services.index') }}" class="btn btn-primary">
                        <i class="fas fa-list me-2"></i>Ver todos los servicios
                    </a>
                @else
                    <p class="text-muted">Pronto agregaremos más servicios.</p>
                @endif
            </div>
        @endforelse
    </div>

{{-- Structured Data for SEO --}}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "{{ config('site.name') }}",
    "description": "Servicios inmobiliarios integrales en Tucumán con más de 50 años de experiencia",
    "url": "{{ url('/') }}",
    "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Servicios Inmobiliarios",
        "itemListElement": [
            @foreach($services as $service)
            {
                "@type": "Offer",
                "itemOffered": {
                    "@type": "Service",
                    "name": "{{ $service->title }}",
                    "description": "{{ strip_tags($service->description ?? $service->short_description) }}"
                }
            }@if(!$loop->last),@endif
            @endforeach
        ]
    },
    "areaServed": "Tucumán, Argentina",
    "serviceType": [
        @foreach($services as $service)
        "{{ $service->title }}"@if(!$loop->last),@endif
        @endforeach
    ]
}
</script>

@endsection

<style>
/* Service Cards - Aligned with Projects Style + Enhanced Animations */
.service-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Animated top border on hover - Subtle elegant sliding effect */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-rgba-40), transparent);
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.15) !important;
    border-color: var(--primary-rgba-20);
}

.service-image-wrapper {
    overflow: hidden;
}

.service-image {
    transition: transform 0.4s ease;
}

.service-card:hover .service-image {
    transform: scale(1.08);
}

.service-badge {
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.service-badge:hover {
    background-color: var(--primary-rgba-10) !important;
    border-color: var(--primary-rgba-30);
    transform: translateY(-1px);
}

.hover-text-primary:hover {
    color: var(--primary) !important;
    transition: color 0.3s ease;
}

.custom-view-more {
    transition: all 0.3s ease;
}

.custom-view-more:hover {
    gap: 0.5rem;
    color: var(--primary) !important;
}

.custom-view-more i {
    transition: transform 0.3s ease;
}

.custom-view-more:hover i {
    transform: translateX(3px);
    color: var(--primary);
}

/* Services Stats */
.services-stats-row {
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.stat-item {
    min-width: 120px;
}

.stat-number {
    font-size: 2rem;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-separator {
    color: #dee2e6;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

/* Services Porto Grid - Compact Layout inspirado en Porto Type 1 & 2 */
.services-porto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.service-card-porto {
    position: relative;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    cursor: pointer;
}

.service-card-porto:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 25px var(--primary-rgba-20);
    transform: translateY(-3px);
}

.service-card-porto.featured {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(238, 171, 38, 0.1) 0%, #fff 100%);
}

.service-card-porto.featured:hover {
    border-color: var(--secondary-200);
    box-shadow: 0 8px 25px var(--secondary-rgba-30);
}

/* Featured Star */
.featured-star {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-200));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--secondary-rgba-40);
    animation: starPulse 2s ease-in-out infinite;
}

.featured-star i {
    color: white;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Service Icon */
.service-icon-wrapper {
    text-align: center;
    margin-bottom: 1rem;
}

.service-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.service-icon-fallback {
    font-size: 2.5rem;
    color: var(--primary);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 50%;
    border: 2px solid #e9ecef;
}

/* Service Content */
.service-content-porto {
    flex-grow: 1;
    text-align: center;
    margin-bottom: 1rem;
}

.service-title-porto {
    font-size: 1.1rem;
    line-height: 1.3;
    color: #212529;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.service-description-porto {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6c757d;
    margin-bottom: 0;
}

/* Service Actions */
.service-actions-porto {
    margin-top: auto;
}

.service-btn-compact {
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    font-weight: 500;
    border: none;
    background: var(--primary);
    color: white;
    transition: all 0.3s ease;
}

.service-btn-compact:hover {
    background: var(--primary-100);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-rgba-30);
}

/* Hover Overlay - Mejorado para legibilidad */
.service-hover-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(13, 27, 62, 0.95),
        rgba(27, 38, 80, 0.95));
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.service-card-porto:hover .service-hover-content {
    opacity: 1;
    visibility: visible;
}

.service-hover-inner {
    text-align: center;
    width: 100%;
}

.service-hover-icon {
    text-align: center;
}

.hover-icon-img {
    width: 48px;
    height: 48px;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    object-fit: contain;
}

.hover-icon-fallback {
    font-size: 3rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.featured-label {
    text-align: center;
}

.featured-label .badge {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px var(--secondary-rgba-30);
}

.service-hover-inner h5 {
    font-size: 1.1rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    line-height: 1.3;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.service-quick-info {
    text-align: left;
    max-width: 220px;
    margin: 0 auto;
}

.info-item {
    background: rgba(255,255,255,0.1);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    backdrop-filter: blur(5px);
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item i {
    width: 18px;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.info-item span {
    font-size: 0.85rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.service-hover-inner .d-flex {
    gap: 0.5rem;
    margin-top: 1rem;
}

.service-hover-inner .btn {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.service-hover-inner .btn-white {
    background: white;
    color: #1b2650;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.service-hover-inner .btn-white:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.service-hover-inner .btn-warning {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-200));
    color: #212529;
    box-shadow: 0 2px 8px var(--secondary-rgba-40);
}

.service-hover-inner .btn-warning:hover {
    background: linear-gradient(135deg, var(--secondary-200), var(--secondary));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--secondary-rgba-60);
}

.flex-1 {
    flex: 1;
}

/* CTA Section */
.cta-services-card {
    background: linear-gradient(135deg, var(--quaternary) 0%, var(--quaternary--100) 100%);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.cta-services-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.cta-background-pattern {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 100px;
    opacity: 0.1;
    color: white;
    z-index: 1;
    display: flex;
    gap: 1rem;
    padding: 2rem;
}

.cta-services-card .row {
    position: relative;
    z-index: 2;
}

/* Contact Cards */
.contact-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    height: 100%;
    text-align: center;
}

.contact-card:hover {
    border-color: var(--primary-rgba-30);
    box-shadow: 0 6px 20px var(--primary-rgba-10);
    transform: translateY(-3px);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--tertiary-300) 0%, var(--tertiary-200) 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.contact-card:hover .contact-icon {
    background: linear-gradient(135deg, var(--primary-rgba-10) 0%, var(--primary-rgba-20) 100%);
}

.contact-card h5 {
    color: #212529;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.contact-card p {
    color: #6c757d;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (min-width: 1200px) {
    .services-porto-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .services-porto-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .services-porto-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .service-card-porto {
        min-height: 200px;
    }
}

@media (max-width: 767px) {
    .services-stats-row {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-separator {
        display: none !important;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    .services-porto-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-card-porto {
        padding: 1.25rem;
        min-height: 200px;
    }

    .featured-star {
        width: 28px;
        height: 28px;
        top: 0.5rem;
        right: 0.5rem;
    }

    .featured-star i {
        font-size: 0.8rem;
    }

    .service-icon-img,
    .service-icon-fallback {
        width: 40px;
        height: 40px;
    }

    .service-icon-fallback {
        font-size: 2rem;
    }

    .service-title-porto {
        font-size: 1rem;
    }

    .service-description-porto {
        font-size: 0.85rem;
    }

    .service-hover-content {
        padding: 1rem;
    }

    .service-hover-inner h5 {
        font-size: 1rem;
    }

    .service-quick-info {
        max-width: 180px;
    }

    .info-item {
        padding: 0.3rem 0.5rem;
    }

    .info-item span {
        font-size: 0.8rem;
    }

    .service-hover-inner .btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .cta-services-card {
        padding: 2rem 1.5rem;
        text-align: center;
    }

    .cta-background-pattern {
        display: none;
    }

    .contact-info-cards .col-md-4 {
        margin-bottom: 1.25rem;
    }

    .contact-card {
        padding: 1.25rem;
    }
}

@media (max-width: 576px) {
    .service-card-porto {
        padding: 1rem;
        min-height: 180px;
    }

    .service-hover-content {
        padding: 1rem;
    }

    .service-hover-inner .btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }
}

/* Animation Enhancements */
.service-card-porto.appear-animation {
    opacity: 0;
    transform: translateY(20px);
}

.service-card-porto.appear-animation.appear-animation-visible {
    opacity: 1;
    transform: translateY(0);
}
</style>