@extends('layout.front.master')

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

@section('content')

{{-- ─────────── HERO SHOP (estilo Optimum Nutrition / 1stPhorm) ───────────
     Inspiración:
       · optimumnutrition.com — hero con overlay oscuro fuerte (op-6), headline
         uppercase grande, 2 CTAs (SHOP NOW + Learn), trust signals row debajo
       · 1stphorm.com — foto atleta, navy + accent cyan, urgencia comercial
     Diferencias vs demo-medical (clon original):
       · Overlay 0.55 (op-6) vs 0.3 (op-3) — protagonismo del texto
       · 2 CTAs grandes 'COMPRAR AHORA' + 'WhatsApp' (acción comercial directa)
       · Headline uppercase + tamaño clamp (responsive)
       · Trust signals row debajo (envío, ANMAT, asesoramiento)
--}}
@php
    $hasCarousel = isset($carouselImages) && $carouselImages->count() > 0;

    $defaultSlides = collect([
        (object) [
            'image_path' => site_asset_url('hero_background', 'cd-project/img/demos/supplements-shop/slides/slide-supplements-shop-1.jpg'),
            'title'      => config('site.welcome.hero1_headline', 'SUPLEMENTOS QUE FUNCIONAN'),
            'subtitle'   => config('site.welcome.hero1_subheadline', 'Marcas certificadas · Envíos a todo el país'),
            'caption'    => config('site.welcome.hero1_caption', 'Asesoramiento real con criterio nutricional. Sin productos truchos, sin recomendaciones vacías.'),
        ],
        (object) [
            'image_path' => site_asset_url('hero_background_2', 'cd-project/img/demos/supplements-shop/slides/slide-supplements-shop-2.jpg'),
            'title'      => config('site.welcome.hero2_headline', 'POTENCIÁ TU RENDIMIENTO'),
            'subtitle'   => config('site.welcome.hero2_subheadline', 'Whey, creatina, pre-entrenos con evidencia'),
            'caption'    => config('site.welcome.hero2_caption', 'Combos con descuento para tu objetivo. Stack perfecto para hipertrofia, definición o salud general.'),
        ],
    ]);

    $slides = $hasCarousel ? $carouselImages : $defaultSlides;

    $ctaPrimaryLabel   = config('site.welcome.cta_primary_label', 'COMPRAR AHORA');
    $ctaPrimaryUrl     = config('site.welcome.cta_primary_url', '/products-catalogue');
    $ctaSecondaryLabel = config('site.welcome.cta_secondary_label', 'Asesoramiento por WhatsApp');
    $waPhone = preg_replace('/[^0-9+]/', '', config('site.contact.phone', ''));
    $ctaSecondaryUrl = config('site.welcome.cta_secondary_url',
        $waPhone ? 'https://wa.me/' . ltrim($waPhone, '+') : '/contact');
@endphp

<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-vertical-center dots-align-right dots-orientation-portrait custom-dots-style-1 show-dots-hover show-dots-xs nav-style-1 nav-inside nav-inside-plus nav-dark nav-lg nav-font-size-lg show-nav-hover mb-0 hero-shop-supplements" data-plugin-options="{'autoplayTimeout': 7000}" data-dynamic-height="['680px','680px','680px','600px','540px']" style="height: 680px;">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            @foreach($slides as $slide)
                @php
                    $imageUrl = filter_var($slide->image_path, FILTER_VALIDATE_URL)
                        ? $slide->image_path
                        : asset($slide->image_path);
                    $slideTitle    = $slide->title ?? '';
                    $slideSubtitle = $slide->subtitle ?? '';
                    $slideCaption  = $slide->caption ?? ($slide->description ?? '');
                @endphp
                <div class="owl-item position-relative overlay overlay-show overlay-op-6" style="background-image: url('{{ $imageUrl }}'); background-size: cover; background-position: center;">
                    <div class="container position-relative z-index-3 h-100">
                        <div class="row align-items-center h-100">
                            <div class="col-lg-8 col-xl-7 pb-4">
                                @if($slideTitle)
                                    <h1 class="text-color-light font-weight-extra-bold text-uppercase line-height-1 mb-3 appear-animation"
                                        data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300"
                                        style="font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -1px;">
                                        {{ $slideTitle }}
                                    </h1>
                                @endif
                                @if($slideSubtitle)
                                    <h2 class="text-color-light font-weight-normal line-height-2 mb-3 appear-animation opacity-9"
                                        data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600"
                                        style="font-size: clamp(1.1rem, 2vw, 1.5rem);">
                                        {{ $slideSubtitle }}
                                    </h2>
                                @endif
                                @if($slideCaption)
                                    <p class="text-color-light font-weight-light mb-4 appear-animation opacity-8"
                                       data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900"
                                       style="font-size: 1rem; max-width: 540px;">
                                        {{ $slideCaption }}
                                    </p>
                                @endif

                                {{-- 2 CTAs estilo ON/1stPhorm --}}
                                <div class="d-flex flex-wrap gap-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1100">
                                    <a href="{{ $ctaPrimaryUrl }}"
                                       class="btn btn-primary btn-modern font-weight-bold text-uppercase px-4 py-3"
                                       style="font-size: 0.95rem; letter-spacing: 1px; min-width: 200px;">
                                        <i class="fas fa-shopping-bag me-2"></i>{{ $ctaPrimaryLabel }}
                                    </a>
                                    <a href="{{ $ctaSecondaryUrl }}"
                                       target="{{ str_starts_with($ctaSecondaryUrl, 'http') ? '_blank' : '_self' }}"
                                       rel="noopener"
                                       class="btn btn-outline-light btn-modern font-weight-semibold px-4 py-3"
                                       style="font-size: 0.95rem; letter-spacing: 0.5px;">
                                        @if(str_contains($ctaSecondaryUrl, 'wa.me'))
                                            <i class="fab fa-whatsapp me-2"></i>
                                        @endif
                                        {{ $ctaSecondaryLabel }}
                                    </a>
                                </div>

                                {{-- Trust signals (estilo ON "Performance Nutrition Since 1986") --}}
                                <div class="d-flex flex-wrap gap-4 mt-5 appear-animation opacity-8" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1300">
                                    <div class="text-color-light fs-7"><i class="fas fa-truck me-1"></i> {{ config('site.welcome.trust_1', 'Envíos a todo el país') }}</div>
                                    <div class="text-color-light fs-7"><i class="fas fa-check-circle me-1"></i> {{ config('site.welcome.trust_2', 'Productos certificados ANMAT') }}</div>
                                    <div class="text-color-light fs-7"><i class="fas fa-comments me-1"></i> {{ config('site.welcome.trust_3', 'Asesoramiento real') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="owl-dots mb-5">
        @foreach($slides as $i => $slide)
            <button role="button" class="owl-dot {{ $i === 0 ? 'active' : '' }}"><span></span></button>
        @endforeach
    </div>
</div>

{{-- ─────────── FEATURED PRODUCTS (estilo ON "Bestsellers Trusted by Athletes") ───────────
     Reemplaza los 4 boxes médicos por grid de 4 productos destacados.
     Lógica: toma los productos `is_active=1` ordenados por id DESC.
     Fallback: si no hay módulo products o no hay productos, oculta la sección. --}}
@php
    $featuredProducts = collect();
    if (is_module_active('products')) {
        try {
            $featuredProducts = \App\Modules\Products\Models\Product::where('is_active', true)
                ->with('images')
                ->orderBy('id', 'desc')
                ->limit(4)
                ->get();
        } catch (\Throwable $e) {
            $featuredProducts = collect();
        }
    }
    // Shop by Goal — configurable via settings.welcome.goal_{N}_{key}.
    // Fallback al path local cd-project/img/demos/supplements-shop/gallery/.
    $shopByGoals = [
        [
            'title'    => config('site.welcome.goal_1_title', 'AUMENTAR MASA'),
            'subtitle' => config('site.welcome.goal_1_subtitle', 'Hipertrofia y fuerza'),
            'image'    => config('site.welcome.goal_1_image', 'cd-project/img/demos/supplements-shop/gallery/gallery-1.jpg'),
            'url'      => config('site.welcome.goal_1_url', '/products-catalogue/category/proteinas'),
        ],
        [
            'title'    => config('site.welcome.goal_2_title', 'DEFINICIÓN'),
            'subtitle' => config('site.welcome.goal_2_subtitle', 'Pérdida de grasa'),
            'image'    => config('site.welcome.goal_2_image', 'cd-project/img/demos/supplements-shop/gallery/gallery-2.jpg'),
            'url'      => config('site.welcome.goal_2_url', '/products-catalogue/category/proteinas'),
        ],
        [
            'title'    => config('site.welcome.goal_3_title', 'SALUD DIARIA'),
            'subtitle' => config('site.welcome.goal_3_subtitle', 'Vitaminas y bienestar'),
            'image'    => config('site.welcome.goal_3_image', 'cd-project/img/demos/supplements-shop/gallery/gallery-3.jpg'),
            'url'      => config('site.welcome.goal_3_url', '/products-catalogue/category/vitaminas-minerales'),
        ],
        [
            'title'    => config('site.welcome.goal_4_title', 'RENDIMIENTO'),
            'subtitle' => config('site.welcome.goal_4_subtitle', 'Pre-entrenos y energía'),
            'image'    => config('site.welcome.goal_4_image', 'cd-project/img/demos/supplements-shop/gallery/gallery-4.jpg'),
            'url'      => config('site.welcome.goal_4_url', '/products-catalogue/category/pre-entrenos-energizantes'),
        ],
    ];
@endphp

@if($featuredProducts->count() > 0)
<section class="section section-no-border bg-color-light-scale-1 mt-0 mb-0 py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h2 class="font-weight-extra-bold text-uppercase mb-2 appear-animation" data-appear-animation="fadeInUpShorter" style="letter-spacing: -0.5px;">
                    {{ config('site.welcome.featured_heading', 'Productos destacados') }}
                </h2>
                <p class="lead text-muted mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    {{ config('site.welcome.featured_subtitle', 'Los más elegidos por nuestros clientes') }}
                </p>
            </div>
        </div>
        <div class="row g-3">
            @php
                /** Optimiza URL a NxN cuadrado (Unsplash query params o Cloudinary on-the-fly transformation). */
                $squareImg = function(?string $url, int $size = 600) {
                    if (!$url) return null;
                    if (str_contains($url, 'images.unsplash.com')) {
                        return strtok($url, '?') . "?w={$size}&h={$size}&fit=crop&auto=format&q=80";
                    }
                    if (str_contains($url, 'res.cloudinary.com')) {
                        return preg_replace('|/upload/(?!w_)|', "/upload/w_{$size},h_{$size},c_fill,g_auto,q_auto,f_auto/", $url, 1);
                    }
                    return $url;
                };
            @endphp
            @foreach($featuredProducts as $p)
                @php
                    $img = $squareImg($p->images->first()->image_path ?? null, 600);
                    $detailUrl = route('front.products.show', $p->slug);
                @endphp
                <div class="col-6 col-md-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $loop->index * 150 }}">
                    <div class="featured-product-card bg-white h-100 d-flex flex-column" style="border: 1px solid #e8e8e8; transition: all .25s ease;">
                        <a href="{{ $detailUrl }}" class="text-decoration-none position-relative d-block" style="background:#f4f4f4;">
                            @if($img)
                                <img src="{{ $img }}" alt="{{ $p->name }}" class="img-fluid w-100" style="aspect-ratio: 1/1; object-fit: cover;" width="600" height="600">
                            @else
                                <div style="aspect-ratio: 1/1; background:#f4f4f4;"></div>
                            @endif
                            @if($p->created_at && $p->created_at->gt(now()->subDays(30)))
                                <span class="badge bg-success position-absolute" style="top:10px;left:10px;font-size:0.7rem;">NUEVO</span>
                            @endif
                            @if($p->is_digital)
                                <span class="badge bg-info position-absolute" style="top:10px;right:10px;font-size:0.7rem;">DIGITAL</span>
                            @endif
                        </a>
                        <div class="p-3 d-flex flex-column flex-grow-1">
                            @if($p->category)
                                <span class="text-uppercase text-muted fs-8 mb-1" style="letter-spacing:0.5px;">{{ $p->category->name }}</span>
                            @endif
                            <h3 class="fs-6 fw-semibold mb-2 line-height-3">
                                <a href="{{ $detailUrl }}" class="text-color-dark text-decoration-none text-color-hover-primary">{{ \Illuminate\Support\Str::limit($p->name, 55) }}</a>
                            </h3>
                            <div class="mt-auto d-flex align-items-center justify-content-between">
                                <span class="fs-5 fw-bold text-color-dark">${{ number_format($p->price, 0, ',', '.') }}</span>
                                <a href="{{ $detailUrl }}" class="btn btn-sm btn-primary fw-semibold" style="font-size:0.8rem;">
                                    <i class="fas fa-cart-plus"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ url('/products-catalogue') }}" class="btn btn-outline-dark btn-modern fw-bold text-uppercase px-4 py-2" style="letter-spacing:1px;font-size:0.85rem;">
                Ver todos los productos →
            </a>
        </div>
    </div>
</section>
@endif

{{-- ─────────── SHOP BY GOAL (estilo ON "What Are You Training For?" / 1stPhorm "SHOP BY GOALS") ─────────── --}}
<section class="section section-no-border bg-white mt-0 mb-0 py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h2 class="font-weight-extra-bold text-uppercase mb-2 appear-animation" data-appear-animation="fadeInUpShorter" style="letter-spacing: -0.5px;">
                    {{ config('site.welcome.goals_heading', '¿Cuál es tu objetivo?') }}
                </h2>
                <p class="lead text-muted mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    {{ config('site.welcome.goals_subtitle', 'Comprá por categoría según lo que querés lograr') }}
                </p>
            </div>
        </div>
        <div class="row g-3">
            @foreach($shopByGoals as $i => $goal)
                <div class="col-6 col-md-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $i * 150 }}">
                    <a href="{{ url($goal['url']) }}" class="goal-card d-block position-relative text-decoration-none overflow-hidden" style="aspect-ratio: 1/1; background:#191919;">
                        <img src="{{ asset($goal['image']) }}" alt="{{ $goal['title'] }}" class="w-100 h-100" style="object-fit:cover; opacity:0.6; transition: all .3s ease;" width="600" height="600">
                        <div class="position-absolute" style="bottom:0; left:0; right:0; padding: 1.5rem; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);">
                            <h3 class="text-color-light font-weight-extra-bold text-uppercase mb-1" style="font-size:1.4rem;letter-spacing:0.5px;">{{ $goal['title'] }}</h3>
                            <p class="text-color-light opacity-9 mb-0 fs-7">{{ $goal['subtitle'] }} <i class="fas fa-arrow-right ms-1"></i></p>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ─────────── ATHLETE SPOTLIGHT (estilo ON "Train Like the Best — Dan Sheehan") ─────────── --}}
@php
    $athleteEnabled = config('site.welcome.athlete_enabled', true);
    $athleteName    = config('site.welcome.athlete_name', 'Manuel R.');
    $athleteTitle   = config('site.welcome.athlete_title', 'Atleta amateur · Powerlifter');
    $athleteQuote   = config('site.welcome.athlete_quote', '"Llevo 2 años comprando acá. La diferencia es la asesoría: no me venden lo más caro, me venden lo que necesito. Hoy estoy entrenando mejor con un combo de proteína + creatina + multi por menos de lo que pagaba antes."');
    $athleteImage   = config('site.welcome.athlete_image', 'cd-project/img/demos/supplements-shop/gallery/gallery-2.jpg');
    $athleteProductName = config('site.welcome.athlete_product_name', 'Combo Hipertrofia Básico');
    $athleteProductUrl  = config('site.welcome.athlete_product_url', '/products-catalogue/combo-hipertrofia-basico');
@endphp

@if($athleteEnabled)
<section class="section section-no-border bg-dark mt-0 mb-0 py-0 overflow-hidden">
    <div class="row g-0 align-items-stretch">
        {{-- Imagen grande izquierda --}}
        <div class="col-lg-6 position-relative" style="min-height: 480px; background-image: url('{{ asset($athleteImage) }}'); background-size: cover; background-position: center;">
            <div class="position-absolute" style="inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);"></div>
        </div>
        {{-- Quote derecha --}}
        <div class="col-lg-6 d-flex align-items-center justify-content-center p-5 py-lg-6" style="background: #191919;">
            <div style="max-width: 540px;">
                <span class="text-color-light text-uppercase font-weight-bold appear-animation" data-appear-animation="fadeInRightShorter" style="letter-spacing: 2px; font-size: 0.75rem; opacity: 0.6;">
                    Historias reales
                </span>
                <h2 class="text-color-light font-weight-extra-bold text-uppercase mt-2 mb-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200" style="font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.5px;">
                    {{ config('site.welcome.athlete_heading', 'CLIENTES QUE NOS RECOMIENDAN') }}
                </h2>
                <blockquote class="text-color-light mb-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400" style="font-size: 1.1rem; line-height: 1.6; opacity: 0.92; font-weight: 300; border: none; padding-left: 0;">
                    {{ $athleteQuote }}
                </blockquote>
                <div class="d-flex align-items-center mb-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="600">
                    <div class="me-3" style="width: 4px; height: 40px; background: var(--tertiary, #4BB98C);"></div>
                    <div>
                        <div class="text-color-light fw-bold" style="font-size: 1rem;">{{ $athleteName }}</div>
                        <div class="text-color-light opacity-7" style="font-size: 0.85rem;">{{ $athleteTitle }}</div>
                    </div>
                </div>
                @if($athleteProductUrl)
                    <a href="{{ url($athleteProductUrl) }}" class="btn btn-outline-light btn-modern fw-bold text-uppercase px-4 py-2 mt-2 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="800" style="letter-spacing: 1px; font-size: 0.8rem;">
                        Ver {{ $athleteProductName }} <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                @endif
            </div>
        </div>
    </div>
</section>
@endif

{{-- ─────────── BRANDS GALLERY (estilo 1stPhorm brand bar / ON marca-partners) ─────────── --}}
@php
    // brands_list puede venir como array (config nativo) o string JSON (settings DB).
    // Si es string, decode. Si es null/vacío, defaults.
    $brands = config('site.welcome.brands_list', null);
    if (is_string($brands) && $brands !== '') {
        $decoded = json_decode($brands, true);
        if (is_array($decoded)) {
            $brands = $decoded;
        } else {
            // CSV separado por coma o punto y coma: "CETOL; ALBA; COLORIN"
            $sep = str_contains($brands, ';') ? ';' : ',';
            $brands = array_values(array_filter(array_map(
                fn($n) => trim($n) !== '' ? ['name' => trim($n), 'logo' => null] : null,
                explode($sep, $brands)
            )));
        }
    }
    if (!is_array($brands) || empty($brands)) {
        // Defaults: 6 marcas típicas del rubro suplementos. El admin puede
        // sobrescribir vía /admin/site-data?tab=welcome.
        $brands = [
            ['name' => 'Star Nutrition',  'logo' => null],
            ['name' => 'ENA Sport',       'logo' => null],
            ['name' => 'Gentech',         'logo' => null],
            ['name' => 'Universal',       'logo' => null],
            ['name' => 'BSc',             'logo' => null],
            ['name' => 'Pure Nutrition',  'logo' => null],
        ];
    }
@endphp

<section class="section section-no-border bg-white mt-0 mb-0 py-5 border-bottom" style="border-bottom: 1px solid #e8e8e8 !important;">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h2 class="font-weight-extra-bold text-uppercase mb-2 appear-animation" data-appear-animation="fadeInUpShorter" style="letter-spacing: -0.5px; font-size: clamp(1.5rem, 3vw, 2rem);">
                    {{ config('site.welcome.brands_heading', 'Nuestras marcas') }}
                </h2>
                <p class="text-muted mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    {{ config('site.welcome.brands_subtitle', 'Solo trabajamos con distribuidores oficiales y marcas certificadas ANMAT') }}
                </p>
            </div>
        </div>
        <div class="row g-3 align-items-center justify-content-center">
            @foreach($brands as $brand)
                <div class="col-6 col-md-4 col-lg-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $loop->index * 80 }}">
                    <div class="brand-card d-flex align-items-center justify-content-center p-3 h-100" style="background: #f8f9fa; border: 1px solid #e8e8e8; aspect-ratio: 3/2; transition: all 0.3s ease;">
                        @if(!empty($brand['logo']))
                            <img src="{{ filter_var($brand['logo'], FILTER_VALIDATE_URL) ? $brand['logo'] : asset($brand['logo']) }}" alt="{{ $brand['name'] }}" class="img-fluid" style="max-height: 60px; filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.6';">
                        @else
                            {{-- Placeholder: nombre de la marca como texto si no hay logo --}}
                            <span class="text-color-dark fw-bold text-uppercase" style="font-size: 0.95rem; letter-spacing: 1px; opacity: 0.55;">
                                {{ $brand['name'] }}
                            </span>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ─────────── ABOUT PREVIEW (shop-refinado) ─────────── --}}
<section class="section section-no-border bg-color-light-scale-1 mt-0 mb-0 py-5">
    <div class="container">
        <div class="row mt-3 mb-3 pt-3 pb-3 align-items-center">
            <div class="col-md-7 pe-md-5">
                <span class="text-color-primary text-uppercase font-weight-bold appear-animation" data-appear-animation="fadeInUpShorter" style="letter-spacing: 2px; font-size: 0.75rem;">
                    {{ config('site.welcome.about_eyebrow', 'Sobre nosotros') }}
                </span>
                <h2 class="font-weight-extra-bold mb-3 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.5px;">
                    {{ config('site.welcome.about_heading_shop', config('site.welcome.about_heading', 'Pasión por el deporte y la nutrición')) }}
                </h2>
                <p class="lead text-muted mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                    {{ config('site.welcome.about_subtitle', config('site.tagline', 'Suplementos seleccionados con criterio. Asesoramiento real.')) }}
                </p>
                <p class="appear-animation mb-4" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                    {{ config('site.welcome.about_text', 'Somos un equipo apasionado por el deporte y el bienestar. Seleccionamos cada producto con criterio nutricional, científico y de costo-beneficio. No vendemos lo más caro — vendemos lo que funciona.') }}
                </p>
                {{-- 3 pilares con icons (estilo About 1stPhorm) --}}
                <div class="row g-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                    <div class="col-12 col-sm-4">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-check-circle text-color-primary me-2 mt-1" style="font-size: 1.2rem;"></i>
                            <div>
                                <strong class="d-block">Marcas certificadas</strong>
                                <span class="text-muted small">ANMAT + distribuidores oficiales</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-comments text-color-primary me-2 mt-1" style="font-size: 1.2rem;"></i>
                            <div>
                                <strong class="d-block">Asesoramiento real</strong>
                                <span class="text-muted small">Te decimos qué tomar según tu objetivo</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-truck text-color-primary me-2 mt-1" style="font-size: 1.2rem;"></i>
                            <div>
                                <strong class="d-block">Envíos a todo el país</strong>
                                <span class="text-muted small">24-72hs hábiles según zona</span>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="btn btn-primary btn-modern fw-bold text-uppercase px-4 py-2 me-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" href="{{ url('/about') }}" style="letter-spacing: 1px; font-size: 0.85rem;">
                    Conocer la tienda <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
            <div class="col-md-5 mt-4 mt-md-0">
                @php $aboutImg = config('site.welcome.about_image', 'cd-project/img/demos/supplements-shop/gallery/gallery-1.jpg'); @endphp
                <img src="{{ filter_var($aboutImg, FILTER_VALIDATE_URL) ? $aboutImg : asset($aboutImg) }}" alt="{{ __('Sobre nosotros') }}" class="img-fluid w-100 appear-animation" data-appear-animation="fadeInRightShorter" style="aspect-ratio: 4/5; object-fit: cover;" />
            </div>
        </div>
    </div>
</section>

{{-- ─────────── NEWSLETTER CAPTURE (estilo ON/1stPhorm) ─────────── --}}
@php
    $newsletterEnabled = config('site.welcome.newsletter_enabled', true);
@endphp
@if($newsletterEnabled)
<section class="section section-no-border mt-0 mb-0 py-5" style="background: var(--primary, #141F88);">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7 mb-3 mb-lg-0">
                <h2 class="text-color-light font-weight-extra-bold text-uppercase mb-2 appear-animation" data-appear-animation="fadeInLeftShorter" style="font-size: clamp(1.4rem, 2.5vw, 2rem); letter-spacing: -0.5px;">
                    {{ config('site.welcome.newsletter_heading', 'Sumate a la comunidad') }}
                </h2>
                <p class="text-color-light opacity-9 mb-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="200">
                    {{ config('site.welcome.newsletter_subtitle', 'Recibí guías, novedades de productos y descuentos exclusivos para suscriptores.') }}
                </p>
            </div>
            <div class="col-lg-5">
                <form action="{{ url('/newsletter-subscribe') }}" method="POST" data-recaptcha-action="newsletter" class="newsletter-form-shop js-recaptcha-form appear-animation" data-appear-animation="fadeInRightShorter">
                    @csrf
                    <div class="input-group">
                        <input type="email" name="email" class="form-control form-control-lg" placeholder="Tu email" required style="border-radius: 2px 0 0 2px; border: none; padding: 0.85rem 1rem; font-size: 1rem;">
                        <button type="submit" class="btn btn-light btn-modern fw-bold text-uppercase px-4" style="border-radius: 0 2px 2px 0; letter-spacing: 1px; font-size: 0.85rem; color: var(--primary, #141F88);">
                            Suscribirme
                        </button>
                    </div>
                    <small class="text-color-light opacity-7 d-block mt-2" style="font-size: 0.8rem;">
                        <i class="fas fa-lock me-1"></i> No spam. Cancelás cuando quieras.
                    </small>
                </form>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ───────────────────────── SERVICES / DEPARTAMENTOS ───────────────────────── --}}
@if(is_module_active('services') && isset($services) && $services->count() > 0)
<section class="section section-no-border mb-0">
    <div class="container">
        <div class="row pt-3">
            <div class="col">
                <h2 class="font-weight-semibold mb-0">{{ config('site.welcome.services_heading', __('Especialidades')) }}</h2>
                <p class="lead font-weight-normal">{{ config('site.welcome.services_subtitle', __('Nuestras áreas de atención')) }}</p>
            </div>
        </div>
        <div class="row mt-4">
            @foreach($services->take(6) as $index => $service)
                @php
                    $serviceIcon = $service->icon ?? null;
                    $serviceImg  = $service->header ?? null;
                @endphp
                <div class="col-lg-4 mb-4">
                    <div class="feature-box feature-box-style-2 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="{{ 200 + ($index * 100) }}">
                        <div class="feature-box-icon" style="min-width: 4.7rem;">
                            @if($serviceImg && !filter_var($serviceImg, FILTER_VALIDATE_URL) === false)
                                <img src="{{ filter_var($serviceImg, FILTER_VALIDATE_URL) ? $serviceImg : asset($serviceImg) }}" class="img-fluid" alt="{{ $service->title }}" />
                            @elseif($serviceIcon)
                                <i class="{{ $serviceIcon }} text-color-primary text-7"></i>
                            @else
                                <i class="icon-energy text-color-primary text-7"></i>
                            @endif
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-semibold">
                                <a href="{{ url('/services/' . $service->slug) }}" class="text-decoration-none">{{ $service->title }}</a>
                            </h4>
                            <p>{{ \Illuminate\Support\Str::limit(strip_tags($service->description ?? $service->content ?? ''), 120) }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="row mt-2 pb-4">
            <div class="col-lg-12 text-center">
                <a class="btn btn-outline btn-quaternary custom-button text-uppercase mt-4 font-weight-bold" href="{{ url('/services') }}">{{ __('Ver todas las especialidades') }}</a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ───────────────────────── BLOG PREVIEW (RESOURCES STYLE) ───────────────────────── --}}
@php
    // El controller inyecta $featuredPosts o $recentPosts según el demo. Soporto ambos.
    $welcomePosts = $featuredPosts ?? ($recentPosts ?? ($posts ?? collect()));
@endphp
@if(is_module_active('blog') && $welcomePosts->count() > 0)
<section class="section my-0">
    <div class="container">
        <div class="row pt-3">
            <div class="col">
                <h2 class="font-weight-semibold mb-0">{{ config('site.welcome.blog_heading', __('Guía de salud y bienestar')) }}</h2>
                <p class="lead font-weight-normal">{{ config('site.welcome.blog_subtitle', __('Información útil para tu bienestar')) }}</p>
            </div>
        </div>
        <div class="row">
            @foreach($welcomePosts->take(3) as $index => $post)
                @php
                    $postImg = $post->header
                        ?: asset('cd-project/img/demos/medical/blog/blog-' . (($index % 3) + 1) . '.jpg');
                @endphp
                <div class="col-md-4 mb-4">
                    <a href="{{ url('/blog/' . $post->slug) }}" class="text-decoration-none">
                        <span class="thumb-info thumb-info-side-image thumb-info-side-image-custom thumb-info-no-zoom thumb-info-side-image-custom-highlight d-block">
                            <span class="thumb-info-side-image-wrapper">
                                <img alt="{{ $post->title }}" class="img-fluid" src="{{ filter_var($postImg, FILTER_VALIDATE_URL) ? $postImg : asset($postImg) }}">
                            </span>
                            <span class="thumb-info-caption px-4 pb-3">
                                <span class="thumb-info-caption-text p-xl">
                                    <h4 class="font-weight-semibold mb-1">{{ $post->title }}</h4>
                                    <p class="text-3">{{ \Illuminate\Support\Str::limit(strip_tags($post->summary ?? $post->content ?? ''), 110) }}</p>
                                </span>
                            </span>
                        </span>
                    </a>
                </div>
            @endforeach
        </div>
        <div class="row pb-4">
            <div class="col-lg-12 text-center">
                <a class="btn btn-outline btn-quaternary custom-button text-uppercase font-weight-bold" href="{{ url('/blog') }}">{{ __('Ver todas las notas') }}</a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ───────────────────────── PRODUCTS — destacados con slider ───────────────────────── --}}
@if(is_module_active('products'))
    @php
        // Cargamos los 8 productos más recientes activos. Owl Carousel los
        // muestra en slides según breakpoint (4 cols desktop / 2 tablet / 1 mobile).
        $featuredProducts = \App\Modules\Products\Models\Product::where('is_active', true)
            ->with('images', 'category')
            ->orderBy('id', 'desc')
            ->limit(8)
            ->get();
    @endphp
    @if($featuredProducts->count() > 0)
        <section class="section section-no-border my-0 py-5 bg-white">
            <div class="container py-4">
                {{-- Header de sección --}}
                <div class="row mb-4">
                    <div class="col-md-8">
                        <h2 class="font-weight-bold text-color-dark mb-1">
                            Productos destacados
                        </h2>
                        <p class="text-muted text-3">
                            Suplementos formulados con criterio clínico + material educativo y programas digitales.
                        </p>
                    </div>
                    <div class="col-md-4 text-md-end align-self-center">
                        <a href="{{ url('/products-catalogue') }}" class="btn btn-outline-primary btn-modern">
                            Ver todos los productos <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>

                {{-- Slider Owl Carousel: 4 col desktop / 3 lg / 2 md / 1 sm --}}
                <div class="owl-carousel owl-theme nav-style-3 nav-style-3-rounded nav-with-transparency stage-margin nav-inside"
                     data-plugin-options="{'items': 4, 'margin': 16, 'loop': true, 'dots': false, 'nav': true, 'autoplay': true, 'autoplayTimeout': 6000, 'responsive': {'0': {'items': 1}, '576': {'items': 2}, '992': {'items': 3}, '1200': {'items': 4}}}">

                    @foreach($featuredProducts as $product)
                        @php $img = $product->images->first()->image_path ?? null; @endphp
                        <div>
                            <div class="product">
                                <div class="product-thumb-info border-0 mb-3 position-relative">
                                    {{-- Badges --}}
                                    <div class="product-thumb-info-badges-wrapper">
                                        @if($product->created_at && $product->created_at->gt(now()->subDays(30)))
                                            <span class="badge badge-ecommerce text-bg-success">NUEVO</span>
                                        @endif
                                        @if($product->is_digital)
                                            <span class="badge badge-ecommerce text-bg-info">DIGITAL</span>
                                        @endif
                                    </div>

                                    <a href="{{ route('front.products.show', $product->slug) }}">
                                        <div class="product-thumb-info-image">
                                            @if($img)
                                                <img alt="{{ $product->name }}" class="img-fluid" src="{{ $img }}">
                                            @else
                                                <div class="bg-light d-flex align-items-center justify-content-center" style="aspect-ratio: 3 / 2;">
                                                    <i class="fas fa-image text-muted fs-2x"></i>
                                                </div>
                                            @endif
                                        </div>
                                    </a>
                                </div>

                                @if($product->category)
                                    <a href="{{ route('front.products.category', $product->category->slug) }}"
                                       class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">
                                        {{ $product->category->name }}
                                    </a>
                                @endif
                                <h3 class="text-3-5 font-weight-medium line-height-3 mb-1">
                                    <a href="{{ route('front.products.show', $product->slug) }}"
                                       class="text-color-dark text-color-hover-primary text-decoration-none">
                                        {{ \Illuminate\Support\Str::limit($product->name, 50) }}
                                    </a>
                                </h3>
                                <p class="price text-4 mb-0">
                                    <span class="amount text-color-dark font-weight-semi-bold">
                                        ${{ number_format($product->price, 0, ',', '.') }}
                                        @if($product->quantity_label)
                                            <small class="text-muted fw-normal">{{ $product->quantity_label }}</small>
                                        @endif
                                    </span>
                                </p>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
    @endif
@endif

{{-- ───────────────────────── TESTIMONIALS ───────────────────────── --}}
@if(is_module_active('testimonials') && isset($testimonials) && $testimonials->count() > 0)
<section class="section-secondary">
    <div class="container">
        <div class="row pt-5 pb-5">
            <div class="owl-carousel owl-theme nav-bottom rounded-nav" data-plugin-options="{'items': 1, 'loop': true, 'dots': false, 'autoplay': true, 'autoplayTimeout': 7000}">
                @foreach($testimonials as $t)
                    <div class="row justify-content-center">
                        <div class="col-lg-8 pt-4 mt-3">
                            <div class="testimonial testimonial-style-2 testimonial-with-quotes mb-0">
                                <div class="testimonial-quote">"</div>
                                <blockquote>
                                    <p class="font-weight-light">{{ $t->content ?? $t->testimonial }}</p>
                                </blockquote>
                                <div class="testimonial-author">
                                    <p class="text-uppercase">
                                        <strong>{{ $t->author ?? $t->name }}</strong>
                                        @if(!empty($t->position) || !empty($t->title))
                                            <span class="d-block font-weight-light text-3">{{ $t->position ?? $t->title }}</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif

@endsection