@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . config('site.tagline', __('Welcome')))
@section('description', config('site.seo.description') ?? config('site.description', ''))
@section('keywords', config('site.seo.keywords'))

@section('og_title', config('site.og.title'))
@section('og_description', config('site.og.description'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description'))
@section('twitter_image', brand_twitter_image())

@section('content')

{{-- ═══════════════════════════════════════════════════════
    1. CAROUSEL — OWL Carousel full viewport
    Fuente: WelcomeCarousel model ($carouselImages del controller)
    Fallback: hero estático con bg image si no hay carousel
═══════════════════════════════════════════════════════ --}}
@if(isset($carouselImages) && $carouselImages->isNotEmpty())
<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 6000}" style="height: 100vh;">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            @foreach($carouselImages as $item)
            @php $carouselImg = filter_var($item->image_path, FILTER_VALIDATE_URL) ? $item->image_path : asset($item->image_path); @endphp
            <div class="owl-item position-relative" style="background-image: url('{{ $carouselImg }}'); background-color: var(--quaternary); background-size: cover; background-position: center;">
                <div class="container position-relative z-index-1 h-100"></div>
            </div>
            @endforeach
            {{-- Duplicar si solo hay 1 imagen (requerido por OWL) --}}
            @if($carouselImages->count() == 1)
            @php $singleItem = $carouselImages->first(); $singleImg = filter_var($singleItem->image_path, FILTER_VALIDATE_URL) ? $singleItem->image_path : asset($singleItem->image_path); @endphp
            <div class="owl-item position-relative" style="background-image: url('{{ $singleImg }}'); background-color: var(--quaternary); background-size: cover; background-position: center;">
                <div class="container position-relative z-index-1 h-100"></div>
            </div>
            @endif
        </div>
    </div>
    <div class="owl-nav">
        <button type="button" role="presentation" class="owl-prev" aria-label="Previous"></button>
        <button type="button" role="presentation" class="owl-next" aria-label="Next"></button>
    </div>
    <div class="owl-dots mb-5">
        @foreach($carouselImages as $item)
        <button role="button" class="owl-dot {{ $loop->first ? 'active' : '' }}"><span></span></button>
        @endforeach
    </div>
</div>
@else
{{-- Fallback: Hero estático --}}
<section class="section border-0 m-0 p-0 position-relative" style="min-height: 85vh; background: url({{ site_asset_url('hero_background', 'cd-project/img/demos/real-estate/slides/slide-1.jpg') }}); background-size: cover; background-position: center;">
    <div class="overlay overlay-show overlay-op-6" style="background: linear-gradient(135deg, var(--primary) 0%, rgba(0,0,0,0.4) 100%);"></div>
    <div class="container position-relative z-index-2 h-100 d-flex align-items-center" style="min-height: 85vh;">
        <div class="row w-100">
            <div class="col-lg-7 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                <p class="text-color-light text-uppercase font-weight-bold mb-2" style="letter-spacing: 0.2em; font-size: 0.82rem; color: var(--secondary) !important;">{{ config('site.welcome.hero_badge', config('site.tagline', '')) }}</p>
                <h1 class="text-color-light font-weight-bold mb-4" style="font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1;">{{ config('site.name') }}</h1>
                <p class="text-color-light text-4 mb-5" style="opacity: 0.8; max-width: 550px;">{{ config('site.welcome.hero_subtitle', config('site.description')) }}</p>
                <div class="d-flex flex-wrap gap-3">
                    @if(is_module_active('tokko'))
                    <a href="/properties" class="btn btn-primary btn-rounded font-weight-bold px-5 py-3">
                        <i class="fas fa-search me-2"></i>{{ __('Ver Propiedades') }}
                    </a>
                    @endif
                    <a href="{{ route('front.contact') }}" class="btn btn-outline-light btn-rounded font-weight-bold px-5 py-3">{{ __('Contactanos') }}</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    2. QUIÉNES SOMOS — About preview (2 columnas: texto + imágenes)
═══════════════════════════════════════════════════════ --}}
<section class="section section-height-5 bg-light border-0 m-0" id="whoweare">
    <div class="container container-xl-custom">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="overflow-hidden">
                    <span class="d-block text-color-primary custom-font-secondary font-weight-semibold appear-animation" data-appear-animation="maskUp">{{ config('site.welcome.about_badge', __('QUIÉNES SOMOS')) }}</span>
                </div>
                <div class="overflow-hidden mb-3">
                    <h2 class="text-color-dark font-weight-extra-bold text-11 negative-ls-1 line-height-3 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">
                        {{ config('site.welcome.about_title', config('site.about.main_title', __('Innovación y Sostenibilidad en cada Proyecto'))) }}
                    </h2>
                </div>
                <p class="text-4 line-height-9 pe-5 pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">
                    {{ config('site.welcome.about_description', config('site.about.main_subtitle', config('site.description'))) }}
                </p>
                <a href="{{ route('front.about') }}" class="btn btn-dark btn-outline font-weight-extra-bold text-3 px-5 py-3 border-width-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">{{ __('CONOCE MÁS') }}</a>
            </div>
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-6 col-xl-4 order-1">
                        <img src="{{ site_asset_url('welcome_image_1', 'cd-project/img/demos/real-estate/homepage/5.jpg') }}" class="img-fluid appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1900" alt="{{ config('site.name') }}" />
                    </div>
                    <div class="col-12 col-xl-4 order-3 order-xl-2">
                        <div class="h-100 d-flex align-items-center position-relative px-4 py-4 py-xl-0 mt-4 mt-xl-0">
                            <p class="text-color-dark line-height-9 text-4 z-index-1 custom-responsive-text-size-1 mb-0 px-2">
                                {{ config('site.welcome.about_side_text', config('site.about.secondary_text', '')) }}
                            </p>
                        </div>
                    </div>
                    <div class="col-6 col-xl-4 order-2 order-xl-3">
                        <img src="{{ site_asset_url('welcome_image_2', 'cd-project/img/demos/real-estate/homepage/1.jpg') }}" class="img-fluid appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="1900" alt="{{ config('site.name') }}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════
    3. SERVICIOS — Featured boxes con fondo quaternary
═══════════════════════════════════════════════════════ --}}
@if(is_module_active('services') && isset($services) && $services->isNotEmpty())
<section class="section section-height-4 bg-quaternary border-0 m-0 appear-animation" data-appear-animation="fadeIn" id="ourservices">
    <div class="container container-xl-custom">
        <div class="row">
            <div class="col text-center">
                <div class="overflow-hidden">
                    <span class="d-block text-color-primary custom-font-secondary font-weight-semibold appear-animation" data-appear-animation="maskUp">{{ config('site.welcome.services_badge', __('QUÉ HACEMOS')) }}</span>
                </div>
                <div class="overflow-hidden mb-4">
                    <h2 class="text-color-light font-weight-bold mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">{{ config('site.welcome.services_title', __('Nuestros Servicios')) }}</h2>
                </div>
            </div>
        </div>
        <div class="featured-boxes featured-boxes-style-4 custom-featured-boxes-style-1">
            <div class="row mb-2">
                @foreach($services->take(2) as $service)
                <div class="col-md-6 col-xl-6">
                    <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none">
                        <div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 300 + ($loop->index * 400) }}">
                            <div class="box-content">
                                @if($service->icon)
                                <i class="{{ $service->icon }} text-color-light mb-3" style="font-size: 3.5rem;"></i>
                                @endif
                                <h3 class="font-weight-bold text-color-light text-5 text-capitalize ls-0 my-3">{{ $service->title }}</h3>
                                <p class="font-weight-light text-color-light opacity-5 mb-0">
                                    {{ Str::limit(strip_tags($service->description), 180) }}
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        <div class="row">
            <div class="col text-center">
                <a href="{{ route('front.contact') }}" class="btn btn-primary btn-outline custom-btn-color-1 font-weight-extra-bold text-color-light text-3 px-5 py-3 border-width-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">{{ __('CONTÁCTANOS') }}</a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    4. PROPIEDADES DESTACADAS — Condicional Tokko
═══════════════════════════════════════════════════════ --}}
@if(is_module_active('tokko') && isset($properties) && count($properties) > 0)
<section class="section bg-light-5 my-0">
    <div class="container-fluid">
        <div class="row mb-5">
            <div class="col text-center">
                <h1 class="font-weight-bold text-8 mb-0 appear-animation" data-appear-animation="maskUp">{{ __('Propiedades destacadas') }}</h1>
                <p class="mb-4">{{ __('Descubre las propiedades más destacadas en nuestra plataforma.') }}</p>
            </div>
        </div>
        <div class="row">
            @foreach($properties as $property)
            <div class="col-md-4 mb-3 d-flex align-items-stretch">
                <div class="card h-100">
                    <div class="card-img-top-wrapper">
                        <img src="{{ $property['photos'][0]['image'] ?? 'placeholder.jpg' }}" class="card-img-top" alt="{{ $property['publication_title'] }}">
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">{{ $property['publication_title'] }}</h5>
                        <p class="card-text">{{ $property['address'] }}</p>
                        <p class="card-text">${{ $property['operations'][0]['prices'][0]['price'] ?? '' }} {{ $property['operations'][0]['prices'][0]['currency'] ?? '' }}</p>
                        <a href="{{ route('properties_details', ['id' => $property['id']]) }}" class="btn btn-primary mt-auto">{{ __('Ver propiedad') }}</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    5. PROYECTOS — Preview estilo portfolio
═══════════════════════════════════════════════════════ --}}
@if(is_module_active('projects') && isset($featuredProjects) && $featuredProjects->isNotEmpty())
<section class="section border-0 m-0 py-5 bg-quaternary">
    <div class="container container-xl-custom py-4">
        <div class="row mb-4">
            <div class="col text-center">
                <span class="d-block text-color-primary font-weight-semibold mb-2">{{ config('site.welcome.projects_badge', __('Portfolio')) }}</span>
                <h2 class="text-color-light font-weight-bold text-7">{{ config('site.welcome.projects_title', __('Proyectos')) }}</h2>
            </div>
        </div>
        <div class="row">
            @foreach($featuredProjects->take(3) as $project)
            <div class="col-sm-6 col-md-4 mb-4">
                <div class="portfolio-item">
                    <div class="thumb-info thumb-info-no-borders thumb-info-no-borders-rounded thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-dark-linear custom-thumb-info-style-1">
                        <div class="thumb-info-wrapper border-radius-0">
                            @php
                                $projImg = $project->image
                                    ? (filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image))
                                    : asset('cd-project/img/demos/real-estate/generic/generic-1.jpg');
                            @endphp
                            <img src="{{ $projImg }}" class="img-fluid border-radius-0" alt="{{ $project->title }}">
                            <span class="thumb-info-title text-start">
                                <span class="thumb-info-inner font-weight-bold line-height-1 text-4 mb-3">{{ $project->title }}</span>
                                <span class="thumb-info-type text-transform-none font-weight-light text-1 line-height-7 pe-xl-5 me-5">{{ Str::limit(strip_tags($project->description), 100) }}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="text-center mt-3">
            <a href="{{ route('frontend.projects.index') }}" class="btn btn-outline-light font-weight-bold px-5 py-3">{{ __('Ver todos los proyectos') }}</a>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    6. GALERÍA — Preview
═══════════════════════════════════════════════════════ --}}
@if(is_module_active('gallery') && isset($galleryImages) && $galleryImages->count() > 0)
<section class="section border-0 m-0 py-5">
    <div class="container container-xl-custom py-4">
        <div class="row mb-4">
            <div class="col text-center">
                <span class="d-block text-color-primary font-weight-semibold mb-2">{{ config('site.welcome.gallery_badge', __('Galería')) }}</span>
                <h2 class="font-weight-bold text-7">{{ config('site.welcome.gallery_title', __('Nuestra Galería')) }}</h2>
            </div>
        </div>
        <div class="row">
            @foreach($galleryImages->take(6) as $image)
            @php $imgUrl = filter_var($image->img, FILTER_VALIDATE_URL) ? $image->img : asset($image->img); @endphp
            <div class="col-sm-6 col-md-4 col-lg-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 200 + ($loop->index * 100) }}">
                <a href="{{ $imgUrl }}" class="d-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon">
                    <img src="{{ $imgUrl }}" class="img-fluid" alt="{{ $image->title ?? '' }}" style="height: 150px; width: 100%; object-fit: cover;">
                </a>
            </div>
            @endforeach
        </div>
        <div class="text-center mt-3">
            <a href="{{ route('gallery') }}" class="btn btn-outline-primary font-weight-bold px-5 py-3">{{ __('Ver galería completa') }}</a>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    7. BLOG — Preview
═══════════════════════════════════════════════════════ --}}
@if(is_module_active('blog') && isset($recentPosts) && $recentPosts->count() > 0)
<section class="section border-0 m-0 py-5 bg-quaternary">
    <div class="container container-xl-custom py-4">
        <div class="row mb-4">
            <div class="col text-center">
                <span class="d-block text-color-primary font-weight-semibold mb-2">{{ config('site.welcome.blog_badge', __('Blog')) }}</span>
                <h2 class="text-color-light font-weight-bold text-7">{{ config('site.welcome.blog_title', __('Novedades')) }}</h2>
            </div>
        </div>
        <div class="row">
            @foreach($recentPosts->take(3) as $post)
            <div class="col-lg-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 200 + ($loop->index * 200) }}">
                <div class="card border-0 shadow-sm h-100">
                    @if($post->header)
                    <img src="{{ filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : asset($post->header) }}" class="card-img-top" alt="{{ $post->title }}" style="height: 200px; object-fit: cover;">
                    @endif
                    <div class="card-body p-4">
                        @if($post->category)
                        <span class="d-block text-muted text-uppercase text-2 mb-2">{{ $post->category->name }}</span>
                        @endif
                        <h4 class="font-weight-bold text-4 mb-3">{{ $post->title }}</h4>
                        <p class="text-3 text-muted mb-3">{{ Str::limit(strip_tags($post->content ?? ''), 100) }}</p>
                        <a href="{{ route('blog.post', $post->slug) }}" class="text-primary font-weight-bold text-3">{{ __('Leer más') }} <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="text-center mt-3">
            <a href="{{ route('blog.index') }}" class="btn btn-outline-light font-weight-bold px-5">{{ __('Ver todas las novedades') }}</a>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    8. FAQs — Preview
═══════════════════════════════════════════════════════ --}}
@if(is_module_active('faqs') && isset($featuredFaqs) && $featuredFaqs->count() > 0)
<section class="section border-0 m-0 py-5">
    <div class="container container-xl-custom py-4">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="text-center mb-4">
                    <span class="d-block text-color-primary font-weight-semibold mb-2">{{ config('site.welcome.faqs_badge', __('FAQ')) }}</span>
                    <h2 class="font-weight-bold text-7">{{ config('site.welcome.faqs_title', __('Preguntas Frecuentes')) }}</h2>
                </div>
                <div class="toggle toggle-primary toggle-simple" data-plugin-toggle="">
                    @foreach($featuredFaqs->take(5) as $faq)
                    <section class="toggle {{ $loop->first ? 'active' : '' }}">
                        <a class="toggle-title">{{ $faq->question }}</a>
                        <div class="toggle-content">
                            <p>{!! $faq->answer !!}</p>
                        </div>
                    </section>
                    @endforeach
                </div>
                <div class="text-center mt-4">
                    <a href="{{ route('faqs.index') }}" class="btn btn-outline-primary font-weight-bold px-5">{{ __('Ver todas las preguntas') }}</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════
    9. CTA FINAL
═══════════════════════════════════════════════════════ --}}
<section class="section section-height-2 bg-quaternary border-0 m-0">
    <div class="container container-xl-custom">
        <div class="row align-items-center">
            <div class="col-lg-9 text-center text-lg-start mb-4 mb-lg-0">
                <h2 class="mb-4 text-color-light mb-0 appear-animation" data-appear-animation="fadeInUpShorter">{{ config('site.welcome.cta_title', config('site.contact.cta_title', __('¿Buscás tu próximo hogar o inversión?'))) }}</h2>
                <p class="font-weight-semibold text-color-light text-4 opacity-7 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.description') }}</p>
            </div>
            <div class="col-lg-3">
                <div class="d-grid gap-2">
                    <a href="{{ route('front.contact') }}" class="btn btn-primary font-weight-semibold border-0 text-3 text-uppercase mt-4 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Contactanos') }}
                        <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection