@extends('layout.front.master')

@section('title', ($service->title ?? 'Servicio') . ' | Servicios de Construcción | ' . config('site.name'))
@section('description', strip_tags(\Illuminate\Support\Str::limit($service->description ?? 'Servicio de construcción especializado de Constructora Gama S.A. Más de 33 años de experiencia en obras públicas y privadas en el NOA.', 160)))
@section('keywords', config('site.seo.keywords') . ', ' . strtolower($service->title ?? 'servicio') . ', servicio construcción, Constructora Gama')

{{-- Open Graph Meta Tags --}}
@php
    $serviceImage = $service->image ? (filter_var($service->image, FILTER_VALIDATE_URL) ? $service->image : asset($service->image)) : asset('cd-project/img/meta-tags/construction/backgrounds/services-bg.jpg');
@endphp
@section('og_title', ($service->title ?? 'Servicio') . ' | Servicios de Construcción | ' . config('site.name'))
@section('og_description', strip_tags(\Illuminate\Support\Str::limit($service->description ?? 'Servicio de construcción especializado de Constructora Gama S.A. Más de 33 años de experiencia en obras públicas y privadas en el NOA.', 200)))
@section('og_image', $serviceImage)
@section('og_type', 'article')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', ($service->title ?? 'Servicio') . ' | Servicios de Construcción | ' . config('site.name'))
@section('twitter_description', strip_tags(\Illuminate\Support\Str::limit($service->description ?? 'Servicio de construcción especializado de Constructora Gama S.A. Más de 33 años de experiencia en el NOA.', 200)))
@section('twitter_image', $serviceImage)

@section('content')

@php
    $moduleConfig = get_module_page_header_config('services');
    $pageTitle = $service->title ?? $moduleConfig['title'];
    $pageSubtitle = $service->description ? \Illuminate\Support\Str::limit(strip_tags($service->description), 100) : $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 Content Section --}}
<section class="section pt-0 section-height-3 bg-color-grey-scale-1 border-0 m-0 ">
    <div class="container container-xl-custom" itemscope itemtype="https://schema.org/Service" style="padding-top: 5rem;">
        <div class="row py-5">
        <!-- Main Content -->
        <div class="col-lg-8 mb-5 mb-lg-0">
            <!-- Service Content usando Porto -->
            <div class="card border-0 custom-box-shadow-1">
                <div class="card-body p-4">
                    <h1 class="text-color-dark font-weight-bold text-5 mb-3" itemprop="name">
                        {{ $service->title }}
                    </h1>

                    <div class="text-4 mb-5" itemprop="description">
                        {!! nl2br(e($service->description)) !!}
                    </div>

                    <!-- Key Benefits Section -->
                    @if(!empty($service->benefits) && count($service->benefits) > 0)
                    <section class="service-benefits-section mb-5">
                        <h3 class="text-color-dark font-weight-bold text-5 mb-4">
                            {{ __('¿Por qué elegir nuestro servicio?') }}
                        </h3>

                        <div class="benefits-grid">
                            @foreach($service->benefits as $benefit)
                            <div class="benefit-card">
                                <div class="benefit-icon">
                                    @if(!empty($benefit['icon']))
                                        <i class="{{ $benefit['icon'] }} text-color-primary"></i>
                                    @else
                                        <i class="fas fa-check-circle text-color-primary"></i>
                                    @endif
                                </div>
                                <div class="benefit-content">
                                    <h4 class="benefit-title">{{ $benefit['title'] }}</h4>
                                    <p class="benefit-description">
                                        {{ $benefit['description'] }}
                                    </p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </section>
                    @endif

                    <!-- Process Timeline -->
                    @if(!empty($service->process_steps) && count($service->process_steps) > 0)
                    <section class="service-process-section mb-5">
                        <h3 class="text-color-dark font-weight-bold text-5 mb-4">
                            {{ __('Nuestro Proceso de Trabajo') }}
                        </h3>

                        <div class="process-timeline">
                            @foreach($service->process_steps as $index => $step)
                            <div class="process-step">
                                <div class="step-number">{{ str_pad($step['order'] ?? ($index + 1), 2, '0', STR_PAD_LEFT) }}</div>
                                <div class="step-content">
                                    <h4 class="step-title">{{ $step['title'] }}</h4>
                                    <p class="step-description">
                                        {{ $step['description'] }}
                                    </p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </section>
                    @endif

                    <!-- FAQ Section -->
                    @if(!empty($service->faq) && count($service->faq) > 0)
                    <section class="service-faq-section">
                        <h3 class="text-color-dark font-weight-bold text-5 mb-4">
                            {{ __('Preguntas Frecuentes sobre') }} {{ $service->title }}
                        </h3>

                        <div class="faq-service-specific">
                            @foreach($service->faq as $faq)
                            <div class="faq-item-service">
                                <h4 class="faq-question-service">
                                    {{ $faq['question'] }}
                                </h4>
                                <p class="faq-answer-service">
                                    {{ $faq['answer'] }}
                                </p>
                            </div>
                            @endforeach
                        </div>
                    </section>
                    @endif

                    <!-- Features Section -->
                    @if(!empty($service->features) && count($service->features) > 0)
                    <section class="service-features-section mb-5">
                        <h3 class="text-color-dark font-weight-bold text-5 mb-4">
                            {{ __('Características del Servicio') }}
                        </h3>

                        <div class="features-list">
                            @foreach($service->features as $feature)
                            <div class="feature-item d-flex align-items-start mb-3">
                                <div class="feature-icon me-3">
                                    <i class="fas fa-check-circle text-color-primary"></i>
                                </div>
                                <div class="feature-content">
                                    <h5 class="feature-title text-color-dark font-weight-semibold mb-1">
                                        {{ $feature['title'] }}
                                    </h5>
                                    @if(!empty($feature['description']))
                                    <p class="feature-description text-3 mb-0">
                                        {{ $feature['description'] }}
                                    </p>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </section>
                    @endif
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <aside class="col-lg-4 order-1 order-lg-2">
            <div class="sticky-top" style="top: 2rem;">
                {{-- Direct Contact --}}
                {{-- <div class="card border-0 shadow-modern rounded-lg mb-4 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="300">
                    <div class="card-body p-4 text-center">
                        <a href="https://wa.me/5493813674900?text=Hola! Me interesa obtener información sobre: {{ urlencode($service->title ?? 'Servicio') }}"
                           target="_blank"
                           class="btn btn-success btn-modern w-100 py-3 font-weight-semibold mb-3">
                            <i class="fab fa-whatsapp me-2"></i>Contactar por WhatsApp
                        </a>
                        <a href="tel:{{ str_replace(' ', '', config('site.contact.phone', '+5493814567890')) }}"
                           class="btn btn-outline-dark btn-modern w-100 py-2 font-weight-semibold">
                            <i class="fas fa-phone me-2"></i>{{ config('site.contact.phone', '+54 381 456-7890') }}
                        </a>
                    </div>
                </div> --}}

                {{-- Other Services --}}
                @if($allServices && $allServices->count() > 0)
                    <div class="card border-0 shadow-modern rounded-lg appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500">
                        <div class="card-header bg-color-light border-0 p-4">
                            <h5 class="mb-0 text-color-dark font-weight-bold">
                                Otros Servicios
                            </h5>
                        </div>
                        <div class="card-body p-4">
                            <ul class="list-unstyled mb-0">
                                @foreach($allServices->take(6) as $otherService)
                                    <li class="mb-2 {{ !$loop->last ? 'pb-2 border-bottom border-color-grey-scale-2' : '' }}">
                                        <a href="{{ route('frontend.services.detail', $otherService->slug) }}"
                                           class="text-decoration-none text-color-dark d-flex align-items-center">
                                            <i class="fas fa-chevron-right text-color-grey me-2" style="font-size: 0.75rem;"></i>
                                            <span class="flex-grow-1">{{ $otherService->title }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                            @if($allServices->count() > 6)
                                <div class="mt-3 pt-3 border-top border-color-grey-scale-2">
                                    <a href="{{ route('frontend.services.index') }}" class="btn btn-outline-dark btn-sm w-100">
                                        Ver Todos
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </aside>
        </div>
    </div>
</section>

{{-- Call to Action Section --}}
@if(!empty($service->cta_config))
<section class="section bg-color-quaternary border-0 m-0">
    <div class="container container-xl-custom py-5">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h3 class="text-color-dark font-weight-bold text-6 mb-3">
                    {{ $service->cta_config['title'] ?? '¿Interesado en ' . $service->title . '?' }}
                </h3>
                <p class="text-4 text-color-dark mb-0">
                    {{ $service->cta_config['subtitle'] ?? 'Contáctenos para más información sobre este servicio. Nuestro equipo de expertos está disponible para ayudarle con su proyecto de construcción.' }}
                </p>
            </div>
            <div class="col-lg-4 text-lg-end">
                @if(!empty($service->cta_config['button_text']))
                <a href="{{ route('front.contact') }}?service={{ $service->slug }}"
                   class="btn btn-{{ $service->cta_config['button_color'] ?? 'primary' }} btn-modern py-3 px-5 mb-2 me-3">
                    <i class="fas fa-calendar-alt me-2"></i>{{ $service->cta_config['button_text'] }}
                </a>
                @endif
                @if(!empty($service->cta_config['whatsapp_text']))
                <a href="https://wa.me/5493813674900?text={{ urlencode($service->cta_config['whatsapp_text']) }}"
                   class="btn btn-success py-3 px-5 mb-2 me-3" target="_blank">
                    <i class="fab fa-whatsapp me-2"></i>{{ __('WhatsApp') }}
                </a>
                @endif
                <a href="tel:{{ config('site.contact.phone.number') }}"
                   class="btn btn-outline-primary py-3 px-5 mb-2">
                    <i class="fas fa-phone me-2"></i>{{ __('Llamar Ahora') }}
                </a>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Structured Data for SEO -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Service",
    "name": "{{ $service->title }}",
    "description": "{{ strip_tags($service->description) }}",
    "provider": {
        "@type": "Organization",
        "name": "{{ config('site.name') }}",
        "url": "{{ url('/') }}",
        "telephone": "{{ config('site.contact.phone.number') }}",
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "Tucumán",
            "addressCountry": "AR"
        }
    },
    "areaServed": "Argentina",
    "serviceType": "{{ $service->title }}",
    "offers": {
        "@type": "Offer",
        "description": "Consulta inicial gratuita para {{ $service->title }}",
        "price": "0",
        "priceCurrency": "ARS"
    }
}
</script>

@endsection