@extends('layout.front.master')

@section('title', config('site.seo.title', config('site.name')))
@section('description', config('site.seo.description', config('site.description')))
@section('keywords', config('site.seo.keywords', ''))

@section('content')

{{-- HERO --}}
<main itemscope itemtype="https://schema.org/WebPage">
<section class="section border-0 m-0 position-relative" role="banner" aria-labelledby="hero-heading" style="background: linear-gradient(135deg, var(--secondary) 0%, var(--dark) 50%, var(--secondary) 100%); height: 100vh; height: 100svh;">
    <div class="container h-100">
        <div class="row justify-content-center h-100">
            <div class="col-lg-8">
                <div class="d-flex flex-column align-items-center justify-content-center text-center h-100">
                    {{-- Badge --}}
                    <div class="appear-animation mb-3" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="200">
                        <span class="badge rounded-pill text-uppercase font-weight-semibold text-2-5 border border-1" style="color: var(--primary); border-color: var(--primary) !important; background-color: var(--primary-rgba-10);">
                            <span class="d-inline-flex py-1 px-2">{{ config('site.tagline', __('Welcome')) }}</span>
                        </span>
                    </div>

                    {{-- Titulo principal --}}
                    <h1 id="hero-heading" class="text-color-light font-weight-extra-bold mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">{{ config('site.name') }}</h1>

                    {{-- Descripcion --}}
                    <p class="text-4-5 font-weight-light mb-4" style="color: var(--quaternary);">{{ config('site.description') }}</p>

                    {{-- Botones de call-to-action --}}
                    <div class="d-flex flex-column flex-sm-row gap-3 appear-animation justify-content-center" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1500">
                        <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary font-weight-bold text-2">{{ __('Contactanos') }}</a>
                        @if(is_module_active('projects'))
                        <a href="{{ route('frontend.projects.portfolio') }}" class="btn btn-outline btn-rounded font-weight-bold text-2" style="color: var(--primary); border-color: var(--primary);">{{ __('Ver portfolio') }}</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Slider de logos de clientes — gestionable desde /admin/company-logos --}}
    @if(isset($companyLogos) && $companyLogos->count() > 0)
    <div class="position-absolute bottom-0 left-0 w-100 pb-4 pb-lg-5">
        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1500">
            <div class="marquee custom-marquee-1" data-duration="30000" data-gap="20" data-duplicated="true" data-startVisible="true">
                <div class="d-flex align-items-center">
                    @foreach($companyLogos as $logo)
                        <div class="px-5 px-lg-8 py-1">
                            @if($logo->url)
                                <a href="{{ $logo->url }}" target="_blank" rel="noopener" class="d-inline-block">
                            @endif
                            <img src="{{ filter_var($logo->image_path, FILTER_VALIDATE_URL) ? $logo->image_path : asset($logo->image_path) }}" alt="{{ $logo->name }}" class="img-fluid" loading="lazy" style="max-width: 120px; max-height: 50px; object-fit: contain; opacity: 0.6; filter: brightness(1.5);">
                            @if($logo->url)
                                </a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @endif
</section>


{{-- SERVICIOS --}}
<section class="section py-5 my-0 border-0" style="background-color: var(--secondary);" aria-labelledby="services-heading" itemscope itemtype="https://schema.org/Service">
    <div class="container container-xl-custom">
        {{-- Header de la seccion --}}
        <div class="row justify-content-center text-center mb-5">
            <div class="col-lg-8">
                <div class="appear-animation mb-3" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="200">
                    <span class="badge rounded-pill font-weight-semibold text-2-5 border border-1" style="color: var(--primary); border-color: var(--primary) !important; background-color: var(--primary-rgba-10);">
                        <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.services_badge', 'SERVICIOS') }}</span>
                    </span>
                </div>
                <h2 id="services-heading" class="mb-2 appear-animation text-color-light text-8" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ config('site.welcome.services_heading', 'Lo que hacemos') }}</h2>
                <p class="text-3-5 appear-animation" style="color: var(--quaternary);" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ config('site.welcome.services_subtitle', 'Cada servicio pensado para que tu negocio tenga presencia digital real, sin complicaciones.') }}</p>
            </div>
        </div>

        {{-- Tarjetas de servicios - 3 columnas --}}
        <div class="row g-3 justify-content-center">
            @if(is_module_active('services') && isset($services) && $services->count() > 0)
                @foreach($services->take(3) as $index => $service)
                    @php
                        $cardClass = 'service-card-0' . (($index % 3) + 1);
                        $number = str_pad($index + 1, 2, '0', STR_PAD_LEFT);
                        $titleWords = explode(' ', $service->title);
                        $firstWord = $titleWords[0] ?? '';
                        $restWords = implode(' ', array_slice($titleWords, 1));
                        $serviceImage = $service->image
                            ? (filter_var($service->image, FILTER_VALIDATE_URL) ? $service->image : asset($service->image))
                            : null;
                    @endphp
                    <div class="col-12 col-sm-6 col-md-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 600 + ($index * 200) }}">
                        <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none">
                            <article class="service-card h-100 position-relative rounded-3 overflow-hidden {{ $cardClass }} service-card-clickable" @if($serviceImage) style="background-image: url('{{ $serviceImage }}');" @endif itemscope itemtype="https://schema.org/Service">
                                {{-- Numero del servicio --}}
                                <div class="position-absolute top-0 start-0 m-3">
                                    <span class="text-white font-weight-extra-bold text-6">{{ $number }}</span>
                                </div>

                                {{-- Flecha --}}
                                <div class="position-absolute top-0 end-0 m-3">
                                    <div class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center service-arrow" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-20);">
                                        <i class="fas fa-arrow-right" style="color: var(--primary);"></i>
                                    </div>
                                </div>

                                {{-- Contenido del servicio --}}
                                <div class="position-absolute bottom-0 start-0 w-100 p-3">
                                    <h3 class="text-white text-5 mb-1 lh-1" itemprop="name">
                                        <span class="fw-normal">{{ $firstWord }}</span><br>
                                        <span class="fw-bold">{{ Str::upper($restWords) }}</span>
                                    </h3>
                                    <p class="text-2 mb-0" style="color: var(--quaternary);" itemprop="description">{{ $service->subtitle ?? Str::limit($service->description, 60) }}</p>
                                </div>
                            </article>
                        </a>
                    </div>
                @endforeach
            @else
                {{-- Fallback: empty state --}}
                <div class="col-12 text-center py-5">
                    <p class="text-4" style="color: var(--quaternary);">{{ config('site.welcome.services_empty', 'Próximamente: nuestros servicios.') }}</p>
                    <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary font-weight-bold text-2">{{ __('Contactanos') }}</a>
                </div>
            @endif
        </div>

        {{-- {{ config('site.welcome.services_cta', 'Ver todos los servicios') }} --}}
        @if(is_module_active('services') && isset($services) && $services->count() > 0)
            <div class="text-center mt-4">
                <a href="{{ route('frontend.services.index') }}" class="btn btn-outline btn-rounded font-weight-bold text-2" style="color: var(--primary); border-color: var(--primary);">
                    {{ config('site.welcome.services_cta', 'Ver todos los servicios') }} <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        @endif
    </div>
</section>

{{-- FEATURES / POR QUE ELEGIRNOS --}}
<section class="section py-5 my-0 border-0 position-relative" style="background-color: var(--secondary);" aria-labelledby="features-heading">
    <div class="container container-xl-custom">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                {{-- Imagen principal --}}
                <div class="px-xl-0 border-radius-2 mb-5 overflow-hidden">
                    <img src="{{ site_asset_url('features_image', 'cd-project/img/homepage/11.png') }}" alt="{{ config('site.name') }}" class="img-fluid w-100" loading="lazy" style="border-radius: 8px; border: 1px solid var(--primary-rgba-10);">
                </div>

                {{-- Heading de la seccion --}}
                <div class="row justify-content-center text-center mb-4">
                    <div class="col-lg-8">
                        <div class="appear-animation mb-3" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">
                            <span class="badge rounded-pill font-weight-semibold text-2-5 border border-1" style="color: var(--primary); border-color: var(--primary) !important; background-color: var(--primary-rgba-10);">
                                <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.features_badge', 'POR QUÉ ELEGIRNOS') }}</span>
                            </span>
                        </div>
                        <h2 id="features-heading" class="mb-0 appear-animation text-color-light text-8" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.features_heading', 'Lo que nos hace diferentes') }}</h2>
                    </div>
                </div>

                @php
                    $features = config('site.welcome.features', []);
                    if (is_string($features)) { $features = json_decode($features, true) ?? []; }
                    if (empty($features)) {
                        $features = [
                            ['icon' => 'cd-project/img/homepage/modular.png', 'title' => 'Hecho a <span class="font-weight-bold">medida</span>', 'text' => 'No es WordPress ni un constructor genérico. Usamos una plataforma profesional con diseños pensados para cada industria.'],
                            ['icon' => 'cd-project/img/homepage/dias.png', 'title' => 'Entrega en <span class="font-weight-bold">2-3 semanas</span>', 'text' => 'Mientras otros tardan meses, nosotros entregamos en semanas. Porque tu negocio no puede esperar.'],
                            ['icon' => 'cd-project/img/homepage/autogestionable.png', 'title' => '<span class="font-weight-bold">Autogestionable</span>', 'text' => 'Editá textos, imágenes y contenido desde un panel pensado para gente que no programa. Sin depender de nadie.'],
                            ['icon' => 'cd-project/img/homepage/icon-automatizaciones.png', 'title' => 'Nos seguimos <span class="font-weight-bold">ocupando</span>', 'text' => 'Tu sitio no queda congelado. La plataforma se actualiza, mejora y se mantiene segura. Vos no hacés nada.'],
                            ['icon' => 'cd-project/img/homepage/idioma.png', 'title' => 'Pensado para <span class="font-weight-bold">tu rubro</span>', 'text' => 'Nos tomamos el tiempo de entender tu negocio para armar algo que hable el idioma de tus clientes.'],
                            ['icon' => 'cd-project/img/homepage/casos.png', 'title' => 'Trayectoria <span class="font-weight-bold">real</span>', 'text' => 'Trayectoria comprobable y clientes reales. No prometemos: mostramos.'],
                        ];
                    }
                @endphp

                {{-- Mobile: tira horizontal compacta --}}
                <div class="d-md-none mb-2">
                    <div class="d-flex overflow-auto gap-3 px-1 py-1" style="scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;">
                        @foreach($features as $feat)
                        <div class="flex-shrink-0 border-radius-2 px-3 py-2" style="min-width: 220px; scroll-snap-align: start; background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                            <div class="d-flex align-items-center gap-2">
                                @if(!empty($feat['icon']))<img src="{{ asset($feat['icon']) }}" alt="" loading="lazy" style="width: 28px; height: 28px;">@endif
                                <div>
                                    <div class="text-3 mb-0" style="color: var(--light);">{!! strip_tags($feat['title'] ?? '', '<span><strong><em>') !!}</div>
                                    <div class="text-1" style="color: var(--quaternary);">{{ Str::limit(strip_tags($feat['text'] ?? ''), 40) }}</div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Desktop/Tablet: grilla --}}
                <div class="row g-4 d-none d-md-flex">
                    @foreach($features as $idx => $feat)
                    <div class="col-md-6 col-lg-4 col-sm-6 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 200 + ($idx * 100) }}">
                        <article class="card border-radius-2 h-100 feature-card" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10); transition: box-shadow 0.3s ease;">
                            <div class="card-body text-center p-4">
                                @if(!empty($feat['icon']))
                                <div class="d-flex justify-content-center mb-3">
                                    <img src="{{ asset($feat['icon']) }}" alt="" loading="lazy" style="width: 48px; height: 48px;">
                                </div>
                                @endif
                                <h4 class="card-title text-5 mb-3 lh-1" style="color: var(--light);">{!! strip_tags($feat['title'] ?? '', '<span><strong><em>') !!}</h4>
                                <p class="card-text mb-0 text-2" style="color: var(--quaternary);">{{ $feat['text'] ?? '' }}</p>
                            </div>
                        </article>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
{{-- OLD FEATURES BLOCK REMOVED - now uses $features loop above --}}
{{-- PROYECTOS / PORTFOLIO --}}
@if(is_module_active('projects') && isset($featuredProjects) && $featuredProjects->count() > 0)
<section class="section py-5 my-0 border-0 position-relative" style="background-color: var(--secondary);" aria-labelledby="projects-heading">
    <div class="container container-xl-custom">
        <div class="row mb-4">
            <div class="col-lg-12">
                <div class="appear-animation mb-3" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">
                    <span class="badge rounded-pill font-weight-semibold text-2-5 border border-1" style="color: var(--primary); border-color: var(--primary) !important; background-color: var(--primary-rgba-10);">
                        <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.portfolio_badge', 'PORTFOLIO') }}</span>
                    </span>
                </div>
                <h2 id="projects-heading" class="font-weight-bold text-8 mb-4 appear-animation text-color-light" data-appear-animation="fadeInUp">{{ config('site.welcome.portfolio_heading', 'Proyectos que hablan por nosotros') }}</h2>

                @php
                    $projectCategories = $featuredProjects->pluck('categories')->flatten()->unique('slug')->filter();
                @endphp

                {{-- Chips de categorias: scroll horizontal en movil, wrap en md+ --}}
                <div class="d-md-none mb-3">
                    <div class="d-flex flex-nowrap overflow-auto gap-2 px-1" style="-webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;">
                        <a href="{{ route('frontend.projects.portfolio') }}" class="btn btn-rounded btn-primary" style="scroll-snap-align: start;">Todos</a>
                        @foreach($projectCategories as $category)
                            <a href="{{ route('frontend.projects.category', $category->slug) }}" class="btn btn-rounded" style="scroll-snap-align: start; background-color: var(--dark); color: var(--quaternary); border: 1px solid var(--primary-rgba-20);">{{ $category->name }}</a>
                        @endforeach
                    </div>
                </div>
                <div class="d-none d-md-flex flex-wrap gap-2">
                    <a href="{{ route('frontend.projects.portfolio') }}" class="btn btn-rounded btn-primary mb-2">Todos</a>
                    @foreach($projectCategories as $category)
                        <a href="{{ route('frontend.projects.category', $category->slug) }}" class="btn btn-rounded mb-2" style="background-color: var(--dark); color: var(--quaternary); border: 1px solid var(--primary-rgba-20);">{{ $category->name }}</a>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Listado compacto en movil (carrusel horizontal) --}}
        <div class="d-md-none mb-3">
            <div class="d-flex flex-nowrap overflow-auto gap-3 px-1" style="-webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;">
                @foreach($featuredProjects->take(4) as $project)
                    <article class="project-card border-radius-2 flex-shrink-0" style="min-width: 260px; scroll-snap-align: start; background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                        @if($project->image)
                            <div class="card-img-top" style="background-image: url('{{ asset($project->image) }}'); background-size: cover; background-position: center; height: 150px; border-radius: 8px 8px 0 0;"></div>
                        @else
                            <div class="card-img-top d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%); height: 150px; border-radius: 8px 8px 0 0;">
                                <span class="font-weight-extra-bold" style="font-size: 3rem; color: var(--primary); opacity: 0.15;">{{ strtoupper(substr($project->title, 0, 2)) }}</span>
                            </div>
                        @endif
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <h5 class="card-title mb-0 font-weight-bold" style="color: var(--light);">{{ $project->title }}</h5>
                                <a href="{{ route('frontend.projects.show', $project->slug) }}" class="btn btn-outline-primary btn-sm rounded-pill">{{ config('site.welcome.project_detail_label', 'Ver más') }}</a>
                            </div>
                            <div class="d-flex align-items-center mt-2">
                                <span class="text-2" style="color: var(--quaternary);">{{ $project->categories->first()->name ?? 'Proyecto' }}</span>
                            </div>
                        </div>
                    </article>
                @endforeach
                {{-- CTA card --}}
                <div class="project-card border-radius-2 flex-shrink-0" style="min-width: 260px; scroll-snap-align: start;">
                    <div class="card border-radius-2 h-100 d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%); border: 1px solid var(--primary-rgba-20); height: 150px;">
                        <div class="text-center p-4">
                            <h3 class="font-weight-bold mb-2 lh-1" style="text-transform: none !important; color: var(--light);">{{ config('site.welcome.cta_heading_short', '¿Listo para tu sitio?') }}</h3>
                            <a href="{{ config('site.booking_url', route('front.contact')) }}" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm rounded-pill px-3">{{ config('site.welcome.cta_begin_label', 'Comenzar') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Grilla original para md+ --}}
        <div class="row d-none d-md-flex">
            @foreach($featuredProjects->take(4) as $index => $project)
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <article class="project-card border-radius-2 h-100 anim-hover-translate-top-10px transition-3ms" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10); transition: box-shadow 0.3s ease, transform 0.3s ease;">
                        @if($project->image)
                            <div class="card-img-top" style="background-image: url('{{ asset($project->image) }}'); background-size: cover; background-position: center; height: 200px; border-radius: 8px 8px 0 0;"></div>
                        @else
                            <div class="card-img-top d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%); height: 200px; border-radius: 8px 8px 0 0;">
                                <span class="font-weight-extra-bold" style="font-size: 4rem; color: var(--primary); opacity: 0.15;">{{ strtoupper(substr($project->title, 0, 2)) }}</span>
                            </div>
                        @endif
                        <div class="card-body p-4">
                            <div class="mb-3">
                                <h4 class="card-title mb-1 font-weight-bold" style="color: var(--light);">{{ $project->title }}</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center">
                                        <span style="color: var(--quaternary);">{{ $project->categories->first()->name ?? 'Proyecto' }}</span>
                                    </div>
                                    <a href="{{ route('frontend.projects.show', $project->slug) }}" class="btn btn-outline-primary btn-sm rounded-pill">{{ config('site.welcome.project_detail_label', 'Ver más') }}</a>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>

                {{-- Insert CTA card after 2nd project (index 1) for desktop layout --}}
                @if($index === 1)
                    <!-- Call-to-Action Card -->
                    <div class="col-lg-4 mb-4 mb-lg-0">
                        <div class="card border-radius-2 h-100 d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 50%, var(--dark) 100%); border: 1px solid var(--primary-rgba-20);">
                            <div class="text-center p-5">
                                <h3 class="font-weight-bold mb-4 lh-1 text-8" style="text-transform: none !important; color: var(--light);">{!! config('site.welcome.cta_heading_break', '¿Listo para <br> tu sitio <br> profesional?') !!}</h3>
                                <p class="mb-4 text-4 lh-1" style="color: var(--quaternary);">{{ config('site.welcome.cta_subtitle', 'En 2-3 semanas tenés tu web funcionando') }}</p>
                                <a href="{{ config('site.booking_url', route('front.contact')) }}" target="_blank" rel="noopener" class="btn btn-outline-primary rounded-pill px-4">{{ config('site.welcome.cta_begin_label', 'Comenzar') }}</a>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach

            {{-- If fewer than 3 projects, still show CTA card --}}
            @if($featuredProjects->take(4)->count() <= 1)
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="card border-radius-2 h-100 d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 50%, var(--dark) 100%); border: 1px solid var(--primary-rgba-20);">
                        <div class="text-center p-5">
                            <h3 class="font-weight-bold mb-4 lh-1 text-8" style="text-transform: none !important; color: var(--light);">{!! config('site.welcome.cta_heading_break', '¿Listo para <br> tu sitio <br> profesional?') !!}</h3>
                            <p class="mb-4 text-4 lh-1" style="color: var(--quaternary);">{{ config('site.welcome.cta_subtitle', 'En 2-3 semanas tenés tu web funcionando') }}</p>
                            <a href="{{ config('site.booking_url', route('front.contact')) }}" target="_blank" rel="noopener" class="btn btn-outline-primary rounded-pill px-4">{{ config('site.welcome.cta_begin_label', 'Comenzar') }}</a>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- {{ config('site.welcome.portfolio_cta', 'Ver portfolio completo') }} --}}
        <div class="text-center mt-4">
            <a href="{{ route('frontend.projects.portfolio') }}" class="btn btn-outline btn-rounded font-weight-bold text-2" style="color: var(--primary); border-color: var(--primary);">
                {{ config('site.welcome.portfolio_cta', 'Ver portfolio completo') }} <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>
@elseif(is_module_active('projects'))
{{-- Projects module active but no featured projects yet --}}
<section class="section py-5 my-0 border-0 position-relative" style="background-color: var(--secondary);" aria-labelledby="projects-heading-empty">
    <div class="container container-xl-custom">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <div class="appear-animation mb-3" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">
                    <span class="badge rounded-pill font-weight-semibold text-2-5 border border-1" style="color: var(--primary); border-color: var(--primary) !important; background-color: var(--primary-rgba-10);">
                        <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.portfolio_badge', 'PORTFOLIO') }}</span>
                    </span>
                </div>
                <h2 id="projects-heading-empty" class="font-weight-bold text-8 mb-3 text-color-light appear-animation" data-appear-animation="fadeInUp">{{ config('site.welcome.portfolio_heading', 'Proyectos que hablan por nosotros') }}</h2>
                <p class="text-4 mb-4" style="color: var(--quaternary);">Estamos sumando casos. Agendá una reunión para ver demos en vivo de lo que podemos hacer por tu negocio.</p>
                <a href="{{ config('site.booking_url', route('front.contact')) }}" target="_blank" rel="noopener" class="btn btn-rounded btn-primary font-weight-bold text-2">{{ config('site.welcome.portfolio_empty_cta', 'Ver demos en vivo') }}</a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- FAQS --}}
<section class="section py-5 my-0 border-0 position-relative" style="background-color: var(--secondary);" aria-labelledby="faqs-heading">
    <div class="container container-xl-custom">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                {{-- Heading de la seccion --}}
                <div class="text-center mb-4">
                    <div class="appear-animation mb-3" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">
                        <span class="badge rounded-pill font-weight-semibold text-2-5 border border-1" style="color: var(--primary); border-color: var(--primary) !important; background-color: var(--primary-rgba-10);">
                            <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.faqs_badge', 'PREGUNTAS FRECUENTES') }}</span>
                        </span>
                    </div>
                    <h2 id="faqs-heading" class="mb-0 appear-animation text-color-light text-8" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.faqs_heading', 'Lo que más nos preguntan') }}</h2>
                </div>

                <div class="toggle toggle-minimal toggle-outline-primary border-0" data-plugin-toggle="" style="--toggle-bg: var(--dark);">
                    @if(is_module_active('faqs') && isset($featuredFaqs) && $featuredFaqs->count() > 0)
                        @foreach($featuredFaqs->take(5) as $faq)
                            <section class="toggle">
                                <a class="toggle-title px-3 border-0 text-4" style="color: var(--light);">{{ $faq->question }}</a>
                                <div class="toggle-content" style="display: none;">
                                    <p style="color: var(--quaternary);">{!! $faq->answer !!}</p>
                                </div>
                            </section>
                        @endforeach
                    @else
                        {{-- Sin FAQs cargadas: el cliente debería sumar preguntas desde /admin/faqs --}}
                        <section class="toggle">
                            <a class="toggle-title px-3 border-0 text-4" style="color: var(--light);">{{ __('Aún no hay preguntas frecuentes cargadas') }}</a>
                            <div class="toggle-content" style="display: none;">
                                <p style="color: var(--quaternary);">{{ __('Sumá preguntas y respuestas desde el panel de administración para que aparezcan en esta sección.') }}</p>
                            </div>
                        </section>
                    @endif
                </div>

                {{-- Link a todas las FAQs --}}
                @if(is_module_active('faqs'))
                    <div class="text-center mt-4">
                        <a href="{{ route('faqs.index') }}" class="btn btn-outline btn-rounded font-weight-bold text-2" style="color: var(--primary); border-color: var(--primary);">
                            {{ config('site.welcome.faqs_cta', 'Ver todas las preguntas') }} <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

{{-- CTA FINAL --}}
<section class="section py-5 my-0 border-0 position-relative" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 50%, var(--dark) 100%);" aria-labelledby="cta-heading">
    <div class="container container-xl-custom">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8 py-5">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    <h2 id="cta-heading" class="text-color-light font-weight-extra-bold text-8 mb-3">{{ config('site.welcome.cta_heading', '¿Listo para tu sitio profesional?') }}</h2>
                    <p class="text-4-5 font-weight-light mb-5" style="color: var(--quaternary);">{{ config('site.welcome.cta_final_subtitle', 'Agendá una reunión de 30 minutos. Sin compromiso, sin humo.') }}</p>
                    <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                        <a href="{{ config('site.booking_url', route('front.contact')) }}" target="_blank" rel="noopener" class="btn btn-rounded btn-primary font-weight-bold text-2 px-5 py-3">{{ config('site.welcome.cta_button_label', 'Agendar reunión') }}</a>
                        @if(config('site.social_media.whatsapp.active'))
                            <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank" rel="noopener" class="btn btn-outline btn-rounded font-weight-bold text-2 px-5 py-3" style="color: var(--primary); border-color: var(--primary);">
                                <i class="fab fa-whatsapp me-2"></i>{{ config('site.welcome.whatsapp_label', 'Escribinos por WhatsApp') }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</main>

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Fix para las animaciones hover y clics en las tarjetas de proyectos
    $('.project-card').each(function() {
        const $card = $(this);
        const $button = $card.find('.btn-outline-primary');

        // Asegurar que el boton sea clickeable
        $button.on('click', function(e) {
            e.stopPropagation();
        });

        // Prevenir que el clic en la tarjeta interfiera con el boton
        $card.on('click', function(e) {
            if (!$(e.target).closest('.btn').length) {
                e.preventDefault();
            }
        });
    });

    // Asegurar que las animaciones hover funcionen correctamente con cyan glow
    $('.anim-hover-translate-top-10px').hover(
        function() {
            $(this).css({'z-index': '10', 'box-shadow': '0 0 20px var(--primary-rgba-20)'});
        },
        function() {
            $(this).css({'z-index': '1', 'box-shadow': 'none'});
        }
    );

    // Feature cards hover glow
    $('.feature-card').hover(
        function() {
            $(this).css('box-shadow', '0 0 20px var(--primary-rgba-20)');
        },
        function() {
            $(this).css('box-shadow', 'none');
        }
    );
});
</script>
@endsection