@extends('layout.front.master')

@section('title', $seoData['title'] ?? config('site.name'))
@section('description', $seoData['description'] ?? config('site.seo.description', ''))
@section('keywords', $seoData['keywords'] ?? config('site.seo.keywords', ''))
@section('og_title', $seoData['og_title'] ?? config('site.name'))
@section('og_description', $seoData['og_description'] ?? config('site.seo.description', ''))

@section('content')
@php
    use App\Models\TenantProject;
    use App\Modules\Products\Models\Product;
    use App\Modules\Products\Models\ProductCategory;

    // Si el user está logueado como Client, cargamos sus proyectos para mostrar
    // el ClientHub al principio (versión "logged" del home — enfocada en gestión).
    $isClient = auth()->check() && auth()->user()->hasRole('Client');
    $clientProjects = collect();
    $clientOpenTickets = 0;
    if ($isClient) {
        $clientProjects = auth()->user()->tenantProjects()
            ->orderByDesc('created_at')
            ->get();
        try {
            $clientOpenTickets = \App\Modules\Support\Models\SupportTicket::where('user_id', auth()->id())
                ->whereIn('status', ['open', 'waiting_staff', 'waiting_client'])
                ->count();
        } catch (\Throwable $e) { /* support module puede no estar */ }
    }

    $hasCarouselImage = isset($carouselImages) && $carouselImages->count() > 0;
    $heroBg = $hasCarouselImage
        ? (filter_var($carouselImages->first()->image_path, FILTER_VALIDATE_URL)
            ? $carouselImages->first()->image_path
            : asset($carouselImages->first()->image_path))
        : null;

    $siteName        = config('site.name', '');
    $siteTagline     = config('site.tagline', '');
    $siteDescription = config('site.description', '');
    $whatsappUrl     = config('site.social_media.whatsapp.url', '');

    // Datos del marketplace para las nuevas secciones (Featured + Industrias)
    try {
        $featuredProducts = Product::with('category')
            ->where('is_active', true)
            ->orderByDesc('updated_at')
            ->limit(8)
            ->get();
        $industries = ProductCategory::withCount(['products' => fn($q) => $q->where('is_active', true)])
            ->get()
            ->where('products_count', '>', 0)
            ->sortByDesc('products_count')
            ->values();
        $totalActive = Product::where('is_active', true)->count();
    } catch (\Throwable $e) {
        $featuredProducts = collect();
        $industries = collect();
        $totalActive = 0;
    }

    // Mapping industria → icon FA (matchea visualmente con el mega-menu)
    $industryIcons = [
        'professional' => 'fa-briefcase', 'corporate' => 'fa-building',
        'services' => 'fa-cogs', 'personal' => 'fa-user-tie',
        'events' => 'fa-calendar-star', 'art' => 'fa-palette',
        'health-and-wellness' => 'fa-heart', 'petite-website' => 'fa-feather',
        'e-commerce' => 'fa-shopping-cart', 'crafts' => 'fa-paint-brush',
        'design' => 'fa-pencil-ruler', 'standard-web-app' => 'fa-window-maximize',
        'home-deco' => 'fa-couch',
    ];
@endphp

{{-- ============================================================
     0. CLIENT HUB — Solo visible si User logueado con rol Client.
     Bloque de bienvenida + acceso rápido a sus proyectos. Reemplaza
     visualmente al hero genérico cuando estás logueado como cliente.
     ============================================================ --}}
@if($isClient)
<section class="py-5" style="background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-100) 100%); border-bottom: 1px solid var(--primary-rgba-10);">
    <div class="container container-xl-custom py-3">
        <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
            <div class="d-flex align-items-center justify-content-center rounded-circle bg-color-primary"
                 style="width: 56px; height: 56px; flex-shrink: 0;">
                <span class="text-color-light fw-bold custom-text-7">{{ strtoupper(substr(auth()->user()->first_name ?: auth()->user()->email, 0, 1)) }}</span>
            </div>
            <div>
                <h1 class="text-color-light font-weight-bold custom-text-9 mb-1">Hola {{ auth()->user()->first_name ?: explode('@', auth()->user()->email)[0] }} 👋</h1>
                <p class="text-color-light opacity-7 text-3-5 mb-0">
                    @if($clientProjects->count() === 0)
                        Bienvenido a tu plataforma BewPro. Lanzá tu primer proyecto en minutos.
                    @elseif($clientProjects->count() === 1)
                        Gestionás <strong class="text-color-primary">1 proyecto</strong> en BewPro.
                    @else
                        Gestionás <strong class="text-color-primary">{{ $clientProjects->count() }} proyectos</strong> en BewPro.
                    @endif
                </p>
            </div>
        </div>

        {{-- Quick action cards --}}
        <div class="row g-3 mb-4">
            {{-- Card 1: Mis Proyectos --}}
            <div class="col-md-4">
                <a href="{{ route('client.projects.index') }}" class="text-decoration-none d-block h-100 client-hub-card">
                    <div class="d-flex align-items-start gap-3 p-4 h-100" style="background: var(--secondary-200); border: 1px solid var(--primary-rgba-10);">
                        <div class="d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: var(--primary-rgba-20); border-radius: 8px; flex-shrink: 0;">
                            <i class="fas fa-folder-open text-color-primary text-5"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h5 class="text-color-light fw-bold custom-text-5 mb-1">Mis Proyectos</h5>
                            <p class="text-2 mb-0" style="color: var(--grey-800);">
                                @php
                                    $activeCount = $clientProjects->where('pipeline_status', 'active')->count();
                                    $devCount    = $clientProjects->where('pipeline_status', 'on_development')->count();
                                @endphp
                                @if($activeCount + $devCount === 0 && $clientProjects->count() === 0)
                                    Tu primer sitio te está esperando
                                @else
                                    {{ $activeCount }} {{ $activeCount === 1 ? 'activo' : 'activos' }}@if($devCount > 0), {{ $devCount }} en desarrollo @endif
                                @endif
                            </p>
                            <span class="text-color-primary text-2 fw-semibold mt-2 d-inline-block">
                                Ver dashboard <i class="fas fa-arrow-right text-1 ms-1"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 2: Lanzar nuevo proyecto --}}
            <div class="col-md-4">
                <a href="{{ url('/products-catalogue') }}" class="text-decoration-none d-block h-100 client-hub-card">
                    <div class="d-flex align-items-start gap-3 p-4 h-100" style="background: var(--secondary-200); border: 1px solid var(--primary-rgba-10);">
                        <div class="d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: var(--primary-rgba-20); border-radius: 8px; flex-shrink: 0;">
                            <i class="fas fa-plus-circle text-color-primary text-5"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h5 class="text-color-light fw-bold custom-text-5 mb-1">Lanzar nuevo proyecto</h5>
                            <p class="text-2 mb-0" style="color: var(--grey-800);">Sumá otro sitio a tu cuenta. Online en minutos.</p>
                            <span class="text-color-primary text-2 fw-semibold mt-2 d-inline-block">
                                Ver catálogo <i class="fas fa-arrow-right text-1 ms-1"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>

            {{-- Card 3: Soporte --}}
            <div class="col-md-4">
                <a href="{{ route('client.support.index') }}" class="text-decoration-none d-block h-100 client-hub-card">
                    <div class="d-flex align-items-start gap-3 p-4 h-100" style="background: var(--secondary-200); border: 1px solid var(--primary-rgba-10);">
                        <div class="d-flex align-items-center justify-content-center position-relative" style="width: 48px; height: 48px; background: var(--primary-rgba-20); border-radius: 8px; flex-shrink: 0;">
                            <i class="fas fa-life-ring text-color-primary text-5"></i>
                            @if($clientOpenTickets > 0)
                                <span class="position-absolute top-0 end-0 translate-middle bg-danger text-color-light rounded-circle d-flex align-items-center justify-content-center fw-bold"
                                      style="width: 22px; height: 22px; font-size: 11px;">{{ $clientOpenTickets }}</span>
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <h5 class="text-color-light fw-bold custom-text-5 mb-1">Soporte</h5>
                            <p class="text-2 mb-0" style="color: var(--grey-800);">
                                @if($clientOpenTickets === 0)
                                    Estamos para ayudarte. Abrí un ticket cuando lo necesites.
                                @elseif($clientOpenTickets === 1)
                                    Tenés <strong>1 ticket</strong> abierto.
                                @else
                                    Tenés <strong>{{ $clientOpenTickets }} tickets</strong> abiertos.
                                @endif
                            </p>
                            <span class="text-color-primary text-2 fw-semibold mt-2 d-inline-block">
                                @if($clientOpenTickets > 0) Ver tickets @else Abrir ticket @endif
                                <i class="fas fa-arrow-right text-1 ms-1"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        {{-- Lista compacta de proyectos --}}
        @if($clientProjects->isNotEmpty())
        <div class="mt-4 p-4" style="background: rgba(0,0,0,0.2); border: 1px solid var(--primary-rgba-10);">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <h6 class="text-color-light fw-bold custom-text-4 mb-0">Tus proyectos</h6>
                <a href="{{ route('client.projects.index') }}" class="text-color-primary text-2 fw-semibold text-decoration-none">
                    Ver todos <i class="fas fa-arrow-right text-1 ms-1"></i>
                </a>
            </div>
            <div class="row g-2">
                @foreach($clientProjects->take(6) as $project)
                @php
                    [$badgeLabel, $badgeClass] = $project->status_badge;
                    $isReachable = method_exists($project, 'isReachable') ? $project->isReachable() : ($project->pipeline_status === 'active');
                @endphp
                <div class="col-md-6 col-lg-4">
                    <a href="{{ route('client.projects.show', $project) }}" class="text-decoration-none d-block client-hub-project">
                        <div class="d-flex align-items-center gap-3 p-2" style="background: var(--secondary-200); border: 1px solid var(--primary-rgba-10);">
                            <i class="fas fa-globe text-color-primary text-3 flex-shrink-0"></i>
                            <div class="flex-grow-1 min-w-0">
                                <span class="text-color-light fw-semibold d-block text-truncate text-3">{{ $project->project_name }}</span>
                                @if($project->domain)
                                    <span class="text-2 d-block text-truncate" style="color: var(--grey-800);">{{ $project->domain }}</span>
                                @endif
                            </div>
                            <span class="badge {{ $badgeClass }} fs-8 flex-shrink-0">{{ $badgeLabel }}</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</section>
@endif

{{-- ============================================================
     1. HERO SECTION (solo se muestra si NO logueado como Client)
     ============================================================ --}}
@unless($isClient)
<section class="section custom-circles-container bg-dark border-0 m-0 hero-gradient">
    <span class="custom-circle custom-circle-1 bg-color-light custom-circle-blur appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="100" data-plugin-options="{'forceAnimation': true}"></span>
    <span class="custom-circle custom-circle-2 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="200" data-plugin-options="{'forceAnimation': true}"></span>
    <span class="custom-circle custom-circle-3 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="300" data-plugin-options="{'forceAnimation': true}"></span>
    <span class="custom-circle custom-circle-1 bg-color-light custom-circle-blur appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400" data-plugin-options="{'forceAnimation': true}"></span>
    <span class="custom-circle custom-circle-2 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="500" data-plugin-options="{'forceAnimation': true}"></span>
    <span class="custom-circle custom-circle-3 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="600" data-plugin-options="{'forceAnimation': true}"></span>
    <div class="h-100">
        <div class="container container-xl-custom pt-md-4 pb-md-3 mt-3">
            <div class="row pt-md-3 pb-md-2 align-items-center">
                <div class="col-lg-6 pt-5 pt-md-0 pb-lg-5 mt-5 mb-md-5">
                    {{-- Pretitle badge tech style --}}
                    <div class="d-inline-flex align-items-center gap-2 px-3 py-2 mb-4 rounded-pill appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="500" style="background: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">
                        <span class="rounded-circle bg-color-primary" style="width: 8px; height: 8px;"></span>
                        <span class="text-color-primary font-weight-semibold text-2" style="letter-spacing: 0.08em;">{{ $siteTagline ?: 'PLATAFORMA DE SITIOS WEB PROFESIONALES' }}</span>
                    </div>

                    {{-- Headline punchy: orientado a beneficio (no al brand) --}}
                    <h1 class="text-color-light font-weight-extra-bold custom-text-12 line-height-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="850">
                        Tu sitio web profesional<br>
                        <span class="text-color-primary">en minutos</span>, no en meses.
                    </h1>

                    @if($siteDescription)
                        <p class="text-color-light opacity-9 custom-text-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1000">{{ $siteDescription }}</p>
                    @endif
                    <div class="d-flex flex-wrap gap-3 mt-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1100">
                        <a href="{{ config('site.welcome.cta_url', url('/products-catalogue')) }}" class="btn btn-primary font-weight-semibold custom-btn-with-arrow text-4 btn-px-4 py-3">
                            {{ __(config('site.welcome.cta_label', 'Comenzá tu proyecto digital')) }}
                        </a>
                        <a href="#how-it-works" class="btn btn-outline custom-btn-outline btn-light rounded-0 font-weight-semibold text-color-light text-4 btn-px-4 py-3">
                            {{ __('¿Cómo funciona?') }}
                        </a>
                    </div>

                    {{-- Hero stats reales: catálogo + industrias + tiempo de setup --}}
                    @php
                        $heroStats = config('site.welcome.hero_stats', []);
                        if (is_string($heroStats)) { $heroStats = json_decode($heroStats, true) ?? []; }
                        // Defaults dinámicos basados en datos reales del catálogo BewPro
                        if (empty($heroStats)) {
                            $heroStats = [
                                ['icon' => 'fas fa-layer-group', 'text' => __(':count modelos profesionales', ['count' => 250])],
                                ['icon' => 'fas fa-th-large',    'text' => __(':count industrias',             ['count' => 13])],
                                ['icon' => 'fas fa-bolt',        'text' => __('Online en minutos')],
                            ];
                        }
                    @endphp
                    <div class="d-flex flex-wrap gap-3 mt-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1200">
                        @foreach($heroStats as $stat)
                        <span class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-0" style="background: var(--light-rgba-10); border: 1px solid var(--light-rgba-10);">
                            @if(!empty($stat['icon']))<i class="{{ $stat['icon'] }} text-color-primary text-3"></i>@endif
                            <span class="text-color-light font-weight-semibold custom-text-3">{{ __($stat['text'] ?? '', isset($stat['count']) ? ['count' => $stat['count']] : []) }}</span>
                        </span>
                        @endforeach
                    </div>
                </div>
                @if($heroBg)
                    <div class="col-lg-6 d-none d-lg-flex justify-content-center align-items-center mt-5 mb-md-5">
                        <div class="hero-illustration appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="800">
                            <img src="{{ $heroBg }}" alt="{{ $siteName }}" class="img-fluid hero-illustration-img">
                        </div>
                    </div>
                @endif
            </div>
            @if(!$heroBg)
                <div class="spacer py-5 mt-lg-5 mb-md-5"></div>
            @endif
        </div>
    </div>
</section>
@endunless {{-- /isClient guard del hero --}}

{{-- ============================================================
     1.B FEATURED PRODUCTS — Modelos destacados (carrusel/grid)
     ============================================================ --}}
@if($featuredProducts->isNotEmpty())
<section class="py-5" style="background: var(--secondary);">
    <div class="container container-xl-custom">
        <div class="d-flex align-items-end justify-content-between flex-wrap gap-2 mb-4">
            <div>
                <span class="text-color-primary font-weight-semibold custom-text-3 d-block mb-1">
                    <i class="fas fa-fire me-1"></i> Modelos destacados
                </span>
                <h2 class="text-color-light font-weight-bold custom-text-9 mb-0">Empezá con uno de estos modelos</h2>
                <span class="text-color-light opacity-7 text-3-5 d-block mt-2">Diseño profesional + módulos listos. Personalizá en minutos.</span>
            </div>
            <a href="{{ url('/products-catalogue') }}" class="btn btn-outline-light rounded-0 px-4 py-2">
                Explorar catálogo completo <i class="fas fa-arrow-right text-1 ms-1"></i>
            </a>
        </div>

        <div class="row g-3">
            @foreach($featuredProducts as $product)
            @php
                $hasImg = $product->images?->isNotEmpty();
            @endphp
            <div class="col-6 col-md-4 col-lg-3">
                <a href="{{ route('front.products.show', $product->slug) }}" class="text-decoration-none d-block h-100 catalogue-card">
                    <div class="d-flex flex-column h-100" style="background: var(--secondary-100); border: 1px solid var(--primary-rgba-10);">
                        <div class="position-relative" style="height: 160px; overflow: hidden;">
                            @if($hasImg)
                                <img src="{{ $product->images->first()->image_path }}" alt="{{ $product->name }}" class="w-100 h-100" style="object-fit: cover;">
                            @else
                                <div class="w-100 h-100 d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--secondary-200) 0%, var(--secondary) 100%);">
                                    <i class="fas fa-globe text-color-primary" style="font-size: 2.2rem; opacity: 0.3;"></i>
                                </div>
                            @endif
                            @if($product->category)
                                <span class="position-absolute top-0 start-0 text-1 font-weight-semibold text-uppercase px-2 py-1 m-2"
                                      style="background: var(--primary-rgba-20); color: var(--primary); letter-spacing: 0.04em;">
                                    {{ $product->category->name }}
                                </span>
                            @endif
                        </div>
                        <div class="p-3 d-flex flex-column flex-grow-1">
                            <h5 class="font-weight-bold text-3-5 text-color-light mb-1">{{ $product->name }}</h5>
                            @if($product->tagline)
                                <p class="text-2 mb-0 mt-auto" style="color: var(--grey-800); line-height: 1.4;">{{ Str::limit($product->tagline, 70) }}</p>
                            @endif
                        </div>
                        <div class="px-3 py-2 d-flex align-items-center justify-content-between" style="border-top: 1px solid var(--primary-rgba-10);">
                            <div>
                                <span class="text-color-primary font-weight-bold text-4">${{ number_format($product->price, 0) }}</span>
                                <span class="text-2" style="color: var(--grey-700);">{{ $product->quantity_label ?? '/mes' }}</span>
                            </div>
                            <span class="text-color-primary text-2 font-weight-semibold">{{ __('Comenzar') }} <i class="fas fa-arrow-right text-1 ms-1"></i></span>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ============================================================
     1.C BROWSE BY INDUSTRY — Cards visuales de las 13 industrias
     ============================================================ --}}
@if($industries->isNotEmpty())
<section class="py-5" style="background: var(--secondary-100);">
    <div class="container container-xl-custom">
        <div class="d-flex align-items-end justify-content-between flex-wrap gap-2 mb-4">
            <div>
                <span class="text-color-primary font-weight-semibold custom-text-3 d-block mb-1">
                    <i class="fas fa-th-large me-1"></i> Por industria
                </span>
                <h2 class="text-color-light font-weight-bold custom-text-9 mb-0">Modelos pensados para cada rubro</h2>
                <span class="text-color-light opacity-7 text-3-5 d-block mt-2">No usamos templates genéricos. Cada industria tiene sus módulos, copy y SEO específicos.</span>
            </div>
        </div>

        <div class="row g-3">
            @foreach($industries as $cat)
            @php $icon = $industryIcons[$cat->slug] ?? 'fa-th-large'; @endphp
            <div class="col-6 col-md-4 col-lg-3">
                <a href="{{ url('/products-catalogue?category=' . $cat->slug) }}" class="text-decoration-none d-block h-100 industry-card">
                    <div class="d-flex flex-column h-100 p-4 text-center" style="background: var(--secondary); border: 1px solid var(--primary-rgba-10);">
                        <div class="industry-card-icon mx-auto mb-3 d-flex align-items-center justify-content-center"
                             style="width: 64px; height: 64px; background: var(--primary-rgba-10); border-radius: 50%;">
                            <i class="fas {{ $icon }} text-color-primary text-6"></i>
                        </div>
                        <h5 class="font-weight-bold text-3-5 text-color-light mb-1">{{ $cat->name }}</h5>
                        <span class="text-2 mt-auto" style="color: var(--grey-800);">
                            {{ $cat->products_count }} {{ __('modelo:plural', ['plural' => $cat->products_count === 1 ? '' : 's']) }}
                        </span>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ============================================================
     1.D OFFICIAL RESELLERS · CD as Partner (oculto para Clients)
     ============================================================ --}}
@unless($isClient)
<section class="py-4" style="background: var(--secondary);">
    <div class="container container-xl-custom text-center">
        <div class="d-inline-flex align-items-center gap-3 px-4 py-3 rounded-pill" style="background: var(--secondary-100); border: 1px solid var(--primary-rgba-20);">
            <i class="fas fa-shield-alt text-color-primary text-4"></i>
            <div class="text-start">
                <span class="text-color-primary font-weight-semibold text-2 d-block" style="letter-spacing: 0.05em;">{{ __('PARTNER OFICIAL') }}</span>
                <span class="text-color-light fw-semibold">{{ __('Powered by Compañía Digital — Reseller oficial BewPro') }}</span>
            </div>
            <a href="https://lacompaniadigital.com" target="_blank" rel="noopener" class="text-color-primary text-decoration-none ms-2 d-none d-md-inline">
                {{ __('Conocé más') }} <i class="fas fa-external-link-alt text-1 ms-1"></i>
            </a>
        </div>
    </div>
</section>

@endunless {{-- /isClient guard del Partner section --}}

{{-- ============================================================
     2. SOCIAL PROOF STATS (solo no-Client)
     ============================================================ --}}
@unless($isClient)
@php
    $counters = config('site.welcome.stats', []);
    if (is_string($counters)) { $counters = json_decode($counters, true) ?? []; }
@endphp
@if(!empty($counters))
<section class="bg-color-dark border-0 m-0 p-0">
    <div class="container container-xl-custom py-5">
        <div class="row counters py-3">
            @foreach($counters as $index => $counter)
            <div class="col-6 col-lg-{{ intval(12 / max(count($counters), 1)) }} mb-4 mb-lg-0">
                <div class="counter counter-light text-center" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 200 + ($index * 200) }}">
                    <strong data-to="{{ $counter['value'] ?? 0 }}" data-append="{{ $counter['append'] ?? '' }}" class="mb-2">0</strong>
                    <label class="custom-font-tertiary text-color-light custom-text-5 opacity-7 font-weight-normal">{{ $counter['label'] ?? '' }}</label>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endunless {{-- /isClient guard del Social Proof Stats --}}

{{-- ============================================================
     3. HOW IT WORKS
     ============================================================ --}}
@php
    $steps = config('site.welcome.how_it_works_steps', []);
    if (is_string($steps)) { $steps = json_decode($steps, true) ?? []; }
@endphp
@if(!empty($steps))
<section id="how-it-works" class="py-5 my-4">
    <div class="container container-xl-custom py-3">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <span class="text-color-primary font-weight-semibold custom-text-4 d-block mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">{{ config('site.welcome.how_it_works_badge', __('Cómo Funciona')) }}</span>
                <h3 class="font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.how_it_works_heading', __('Tu sitio en 3 simples pasos')) }}</h3>
            </div>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($steps as $index => $step)
            <div class="col-md-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($index * 150) }}">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-color-primary rounded-circle mb-4" style="width: 80px; height: 80px;">
                        <span class="text-color-light font-weight-extra-bold custom-text-10">{{ $index + 1 }}</span>
                    </div>
                    <h4 class="font-weight-bold custom-text-6 mb-3">{{ $step['title'] ?? '' }}</h4>
                    <p class="custom-text-4 mb-0">{{ $step['description'] ?? '' }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ============================================================
     4. PRODUCTS / MODELS GALLERY
     ============================================================ --}}
@if(is_module_active('products') && isset($featuredProducts) && $featuredProducts->count() > 0)
<section class="py-5 my-4 bg-color-grey">
    <div class="container container-xl-custom py-3">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <span class="text-color-primary font-weight-semibold custom-text-4 d-block mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">{{ config('site.welcome.products_badge', __('Productos')) }}</span>
                <h3 class="font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.products_heading', __('Nuestro Catálogo')) }}</h3>
            </div>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($featuredProducts->take((int) config('site.welcome.products_per_page', 8)) as $index => $product)
                @php
                    $productImage = ($product->images && $product->images->count() > 0)
                        ? (filter_var($product->images->first()->image_path, FILTER_VALIDATE_URL) ? $product->images->first()->image_path : asset($product->images->first()->image_path))
                        : null;
                    $productUrl = Route::has('front.products.show') ? route('front.products.show', $product->slug) : '#';
                @endphp
                <div class="col-6 col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + (($index % 4) * 100) }}">
                    <a href="{{ $productUrl }}" class="text-decoration-none d-block product-card-home">
                        <div class="card border-0 rounded-0 overflow-hidden h-100">
                            <div class="position-relative overflow-hidden" style="height: 200px;">
                                @if($productImage)
                                    <img src="{{ $productImage }}" alt="{{ $product->name }}" class="w-100 h-100" style="object-fit: cover;">
                                @else
                                    <div class="w-100 h-100 d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--secondary-200) 0%, var(--secondary) 100%);">
                                        <i class="fas fa-globe text-color-primary" style="font-size: 2.5rem; opacity: 0.3;"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="card-body bg-color-dark p-3 d-flex align-items-center justify-content-between">
                                <h5 class="text-color-light font-weight-semibold custom-text-3 mb-0">{{ $product->name }}</h5>
                                @if($product->price)<span class="text-color-primary font-weight-bold custom-text-3">${{ number_format($product->price, 0) }}<span class="custom-text-2 font-weight-normal opacity-7">/mes</span></span>@endif
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        @if(Route::has('front.products.index'))
            <div class="row mt-5">
                <div class="col text-center">
                    <a href="{{ route('front.products.index') }}" class="btn btn-primary rounded-0 font-weight-semibold custom-btn-with-arrow text-4 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ config('site.welcome.products_cta', __('Ver todos los modelos')) }}</a>
                </div>
            </div>
        @endif
    </div>
</section>
@endif

{{-- ============================================================
     5. SERVICES / FEATURES
     ============================================================ --}}
@if(is_module_active('services') && isset($services) && $services->count() > 0)
<section class="py-5 my-4">
    <div class="container container-xl-custom py-3">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <span class="text-color-primary font-weight-semibold custom-text-4 d-block mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">{{ config('site.welcome.services_badge', __('Características')) }}</span>
                <h3 class="font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.services_heading', __('Todo lo que necesitás')) }}</h3>
            </div>
        </div>
        @if(config('site.welcome.services_style', 'features') === 'features')
            {{-- SaaS-style: icon + title + description grid --}}
            <div class="row g-4">
                @foreach($services->take(6) as $index => $service)
                @php $iconClass = $service->icon ?? 'fas fa-check-circle'; @endphp
                <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($index * 100) }}">
                    <div class="d-flex p-4 h-100">
                        <div class="flex-shrink-0 me-4">
                            <div class="d-flex align-items-center justify-content-center rounded-circle bg-color-dark" style="width: 56px; height: 56px;">
                                <i class="{{ $iconClass }} text-color-primary custom-text-6"></i>
                            </div>
                        </div>
                        <div>
                            <h5 class="font-weight-bold custom-text-5 mb-2">{{ $service->title }}</h5>
                            <p class="custom-text-3 text-color-grey mb-0">{{ $service->subtitle ?? Str::limit(strip_tags($service->description), 150) }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            {{-- Legacy: big colored cards --}}
            <div class="row">
                @foreach($services->take(3) as $index => $service)
                    @php
                        $bgClass   = ($index % 2 === 0) ? 'bg-color-primary' : 'bg-color-dark';
                        $iconClass = $service->icon ?? 'fas fa-cogs';
                        $serviceUrl = Route::has('frontend.services.detail') ? route('frontend.services.detail', $service->slug) : '#';
                    @endphp
                    <div class="col-lg-4 col-custom-cards">
                        <a href="{{ $serviceUrl }}" class="text-decoration-none d-block">
                            <div class="card border-0 {{ $bgClass }} rounded-0 z-index-1 p-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="{{ 100 + ($index * 100) }}">
                                <div class="card-body d-flex flex-column justify-content-center align-items-center p-0 my-3">
                                    <i class="{{ $iconClass }} text-color-light custom-text-11 mb-4"></i>
                                    <h4 class="card-title custom-text-8 font-weight-bold text-color-light text-center mb-3">{{ $service->title }}</h4>
                                    <p class="card-text text-center custom-text-4 font-weight-lighter text-color-light">{{ $service->subtitle ?? Str::limit(strip_tags($service->description), 120) }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            @if($services->count() > 3 && Route::has('frontend.services.index'))
                <div class="row mt-4">
                    <div class="col text-center">
                        <a href="{{ route('frontend.services.index') }}" class="btn btn-outline custom-btn-outline btn-dark rounded-0 font-weight-semibold custom-btn-with-arrow text-4 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Ver todos los servicios') }}</a>
                    </div>
                </div>
            @endif
        @endif
    </div>
</section>
@endif

{{-- ============================================================
     6. BLOG / INSIGHTS SECTION
     ============================================================ --}}
@if(is_module_active('blog') && isset($featuredPosts) && $featuredPosts->count() > 0)
<section class="py-5 my-4 bg-color-grey">
    <div class="container container-xl-custom py-3">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <span class="text-color-primary font-weight-semibold custom-text-4 d-block mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">{{ config('site.welcome.blog_badge', 'Blog') }}</span>
                <h3 class="font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.blog_heading', __('Últimas Publicaciones')) }}</h3>
            </div>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($featuredPosts->take(3) as $index => $post)
                @php
                    $postUrl = Route::has('frontend.blog.show') ? route('frontend.blog.show', $post->slug) : '#';
                @endphp
                <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($index * 150) }}">
                    <div class="card border-0 rounded-0 overflow-hidden h-100">
                        <div class="position-relative overflow-hidden" style="min-height: 200px;">
                            @include('modules.blog.frontend.partials.homepage-post-media', [
                                'post' => $post,
                                'mediaMinHeight' => '200px',
                                'imageClass' => '',
                            ])
                            @if($post->category)
                                <span class="position-absolute top-0 end-0 bg-color-primary text-color-light font-weight-semibold custom-text-2 px-3 py-1 mt-3 me-3">{{ $post->category->name }}</span>
                            @endif
                        </div>
                        <div class="card-body bg-color-light p-4">
                            <span class="text-color-default custom-text-2 d-block mb-2">{{ $post->created_at->format('d M, Y') }}</span>
                            <h5 class="font-weight-bold custom-text-5 mb-0">
                                <a href="{{ $postUrl }}" class="text-decoration-none text-color-dark text-color-hover-primary">{{ $post->title }}</a>
                            </h5>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        @if(Route::has('frontend.blog.index'))
            <div class="row mt-5">
                <div class="col text-center">
                    <a href="{{ route('frontend.blog.index') }}" class="btn btn-outline custom-btn-outline btn-dark rounded-0 font-weight-semibold custom-btn-with-arrow text-4 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Ver todas las publicaciones') }}</a>
                </div>
            </div>
        @endif
    </div>
</section>
@endif

{{-- ============================================================
     7. FAQS SECTION
     ============================================================ --}}
@if(is_module_active('faqs') && isset($featuredFaqs) && $featuredFaqs->count() > 0)
<section class="py-5 my-4">
    <div class="container container-xl-custom py-3">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <span class="text-color-primary font-weight-semibold custom-text-4 d-block mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">{{ config('site.welcome.faq_badge', 'FAQ') }}</span>
                <h3 class="font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.faq_heading', __('Preguntas Frecuentes')) }}</h3>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion custom-accordion-style-1" id="faqAccordion">
                    @foreach($featuredFaqs->take(5) as $index => $faq)
                        <div class="card border-0 rounded-0 mb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($index * 100) }}">
                            <div class="card-header bg-color-dark rounded-0 border-0 py-0" id="faqHeading{{ $faq->id }}">
                                <h5 class="mb-0">
                                    <button class="btn btn-link text-color-light font-weight-semibold custom-text-4 w-100 text-start text-decoration-none py-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse{{ $faq->id }}" aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" aria-controls="faqCollapse{{ $faq->id }}">
                                        {{ $faq->question }}
                                        <i class="fas fa-chevron-down float-end mt-1 custom-text-3"></i>
                                    </button>
                                </h5>
                            </div>
                            <div id="faqCollapse{{ $faq->id }}" class="collapse {{ $index === 0 ? 'show' : '' }}" aria-labelledby="faqHeading{{ $faq->id }}" data-bs-parent="#faqAccordion">
                                <div class="card-body custom-text-3 bg-color-light p-4">
                                    {!! $faq->answer !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ============================================================
     8. PROJECTS / PORTFOLIO (conditional, secondary)
     ============================================================ --}}
@if(is_module_active('projects') && isset($featuredProjects) && $featuredProjects->count() > 0)
<section class="py-5 my-4 bg-color-grey">
    <div class="container container-xl-custom py-3">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <span class="text-color-primary font-weight-semibold custom-text-4 d-block mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">{{ config('site.welcome.projects_badge', __('Portfolio')) }}</span>
                <h3 class="font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.projects_heading', __('Nuestros Proyectos')) }}</h3>
            </div>
        </div>
        <div class="row g-4">
            @foreach($featuredProjects->take(4) as $index => $project)
                @php
                    $projectImage = $project->featured_image
                        ? (filter_var($project->featured_image, FILTER_VALIDATE_URL) ? $project->featured_image : asset($project->featured_image))
                        : null;
                    $projectUrl = Route::has('frontend.projects.show') ? route('frontend.projects.show', $project->slug) : '#';
                    $projectCategory = $project->categories->first()->name ?? '';
                @endphp
                <div class="col-md-6 col-lg-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($index * 100) }}">
                    <a href="{{ $projectUrl }}" class="text-decoration-none d-block">
                        <div class="card border-0 rounded-0 overflow-hidden h-100">
                            <div class="position-relative overflow-hidden" style="height: 250px;">
                                @if($projectImage)
                                    <img src="{{ $projectImage }}" alt="{{ $project->title }}" class="w-100 h-100" style="object-fit: cover;">
                                @else
                                    <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-color-secondary">
                                        <i class="fas fa-laptop-code text-color-primary" style="font-size: 2.5rem; opacity: 0.4;"></i>
                                    </div>
                                @endif
                                @if($projectCategory)
                                    <span class="position-absolute bottom-0 start-0 bg-color-primary text-color-light font-weight-semibold custom-text-2 px-3 py-1">{{ $projectCategory }}</span>
                                @endif
                            </div>
                            <div class="card-body bg-color-dark p-4">
                                <h5 class="text-color-light font-weight-bold custom-text-5 mb-0">{{ $project->title }}</h5>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        @if(Route::has('frontend.projects.index'))
            <div class="row mt-5">
                <div class="col text-center">
                    <a href="{{ route('frontend.projects.index') }}" class="btn btn-outline custom-btn-outline btn-dark rounded-0 font-weight-semibold custom-btn-with-arrow text-4 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Ver todos los proyectos') }}</a>
                </div>
            </div>
        @endif
    </div>
</section>
@endif

{{-- ============================================================
     9. GALLERY (conditional, secondary)
     ============================================================ --}}
@if(is_module_active('gallery') && isset($galleryImages) && $galleryImages->count() > 0)
<section class="py-5 my-4">
    <div class="container container-xl-custom py-3">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <span class="text-color-primary font-weight-semibold custom-text-4 d-block mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="100">{{ config('site.welcome.gallery_badge', __('Galería')) }}</span>
                <h3 class="font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.gallery_heading', __('Nuestro Trabajo')) }}</h3>
            </div>
        </div>
        <div class="row g-3">
            @foreach($galleryImages->take(6) as $index => $image)
                @php
                    $imgSrc = filter_var($image->image_path, FILTER_VALIDATE_URL) ? $image->image_path : asset($image->image_path);
                @endphp
                <div class="col-6 col-md-4 col-lg-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 100 + ($index * 50) }}">
                    <a href="{{ $imgSrc }}" class="d-block overflow-hidden" data-plugin-lightbox data-plugin-options='{"type":"image"}'>
                        <div style="height: 180px; overflow: hidden;">
                            <img src="{{ $imgSrc }}" alt="{{ $image->title ?? $siteName }}" class="w-100 h-100" style="object-fit: cover; transition: transform 0.3s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        @if(Route::has('frontend.gallery.index'))
            <div class="row mt-4">
                <div class="col text-center">
                    <a href="{{ route('frontend.gallery.index') }}" class="btn btn-outline custom-btn-outline btn-dark rounded-0 font-weight-semibold custom-btn-with-arrow text-4 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Ver galería completa') }}</a>
                </div>
            </div>
        @endif
    </div>
</section>
@endif

{{-- ============================================================
     10. CTA / GET IN TOUCH SECTION
     ============================================================ --}}
<section class="get-in-touch bg-color-after-secondary overlay overlay-color-primary overlay-show p-relative overflow-hidden cta-gradient">
    <span class="custom-circle custom-circle-1 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
    <span class="custom-circle custom-circle-2 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
    <div class="container container-xl-custom">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <p class="mb-2 text-color-tertiary custom-text-7 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">{{ config('site.welcome.cta_badge', __('Hablemos')) }}</p>
                <h4 class="text-color-light font-weight-bold custom-text-10 mb-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                    {{ config('site.welcome.cta_title', __('Estamos listos para ayudarte')) }}
                </h4>
                @if(config('site.welcome.cta_subtitle'))
                <p class="text-color-light custom-text-4 opacity-7 mb-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500">{{ config('site.welcome.cta_subtitle') }}</p>
                @endif
            </div>
            <div class="col-lg-5 d-flex align-items-center justify-content-start justify-content-lg-end mt-5 mt-lg-0 gap-3 flex-wrap">
                @if($whatsappUrl)
                    <a href="{{ $whatsappUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-outline custom-btn-outline btn-light border-white rounded-0 px-4 py-3 text-color-light text-color-hover-dark bg-color-hover-light custom-text-6 line-height-6 font-weight-semibold custom-btn-with-arrow appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600">
                        <i class="fab fa-whatsapp me-2"></i>WhatsApp
                    </a>
                @endif
                <a href="{{ config('site.welcome.cta_url', route('front.contact')) }}" class="btn btn-outline custom-btn-outline btn-light border-white rounded-0 px-4 py-3 text-color-light text-color-hover-dark bg-color-hover-light custom-text-6 line-height-6 font-weight-semibold custom-btn-with-arrow appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600">{{ config('site.welcome.cta_final_label', __('Contacto')) }}</a>
            </div>
        </div>
    </div>
</section>
@endsection