@extends('layouts.app')

@section('title','Savero — Home')

@section('content')
    {{-- HERO (slides din admin/slides) --}}
    <section class="hero-section-3">
        <div class="arrow-button">
            <button class="array-prev"><i class="fa-light fa-chevron-left"></i></button>
            <button class="array-next"><i class="fa-light fa-chevron-right"></i></button>
        </div>
        <div class="swiper hero-slider">
            <div class="swiper-wrapper">
                @forelse($slides ?? collect() as $slide)
                    <div class="swiper-slide">
                        <div class="hero-3">
                            <div class="hero-bg bg-cover" style="background-image:url('{{ asset('storage/'.$slide->image_path) }}');"></div>
                            <div class="container">
                                <div class="row g-4">
                                    <div class="col-lg-10">
                                        <div class="hero-content">
                                            @if($slide->subtitle)
                                                <p data-animation="fadeInUp" data-delay="1.3s">{{ $slide->subtitle }}</p>
                                            @endif
                                            @if($slide->title)
                                                <h1 data-animation="fadeInUp" data-delay="1.5s">{!! nl2br(e($slide->title)) !!}</h1>
                                            @endif
                                            @if($slide->button_url)
                                                <div class="hero-button" data-animation="fadeInUp" data-delay="1.7s">
                                                    <a href="{{ $slide->button_url }}" class="theme-btn">
                                                        {{ $slide->button_text ?? 'Shop Now' }}
                                                        <i class="fa-regular fa-arrow-right"></i>
                                                    </a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="swiper-slide">
                        <div class="hero-3">
                            <div class="hero-bg bg-cover" style="background:#111;"></div>
                            <div class="container"><h1 class="text-white py-5">Adaugă slide-uri </h1></div>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- Feature-Section (static) --}}
    <section class="feature-section fix">
        <div class="container">
            <div class="feature-wrapper">
                <div class="feature-item style-2 wow fadeInUp" data-wow-delay=".2s">
                    <div class="icon">
                        <img src="assets/img/icon/01.svg" alt="icona spedizione rapida">
                    </div>
                    <div class="content">
                        <h6>Spedizione rapida</h6>
                        <p>Consegna veloce e tracciabile.</p>
                    </div>
                </div>
                <div class="feature-item wow fadeInUp" data-wow-delay=".4s">
                    <div class="icon">
                        <img src="assets/img/icon/02.svg" alt="icona resi facili">
                    </div>
                    <div class="content">
                        <h6>Resi facili</h6>
                        <p>Procedura di reso semplice e senza stress.</p>
                    </div>
                </div>
                <div class="feature-item wow fadeInUp" data-wow-delay=".6s">
                    <div class="icon">
                        <img src="assets/img/icon/03.svg" alt="icona pagamenti sicuri">
                    </div>
                    <div class="content">
                        <h6>Pagamenti sicuri</h6>
                        <p>Transazioni protette e affidabili.</p>
                    </div>
                </div>
                <div class="feature-item wow fadeInUp" data-wow-delay=".8s">
                    <div class="icon">
                        <img src="assets/img/icon/04.svg" alt="icona assistenza clienti">
                    </div>
                    <div class="content">
                        <h6>Assistenza clienti</h6>
                        <p>Supporto dedicato quando serve.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @foreach(($sections ?? collect()) as $s)
        <section class="product-store-section section-padding fix">
            <div class="container">

                {{-- Header bloc --}}
                @if($s->title || $s->subtitle)
                    <div class="section-title-area {{ $s->layout==='slider' ? '' : 'text-center' }}">
                        <div class="section-title {{ $s->layout==='slider' ? '' : 'text-center' }}">
                            @if($s->subtitle)
                                <h6 class="sub-title wow fadeInUp">{{ $s->subtitle }}</h6>
                            @endif
                            @if($s->title)
                                <h2 class="wow fadeInUp" data-wow-delay=".2s">{{ $s->title }}</h2>
                            @endif
                        </div>

                        {{-- butoane navigație pentru slider --}}
                        @if($s->layout === 'slider' && ($s->items->count() > 0))
                            <div class="array-buttons">
                                <button class="array-prev"><i class="fa-solid fa-arrow-left"></i></button>
                                <button class="array-next"><i class="fa-solid fa-arrow-right"></i></button>
                            </div>
                        @endif
                    </div>
                @endif

                {{-- Conținut bloc --}}
                @if($s->items->count())
                    @if($s->layout === 'slider')
                        {{-- IMPORTANT: .js-home-swiper + data-rows pentru grid pe mai multe rânduri --}}
                        <div class="swiper js-home-swiper pt-1"
                             data-rows="{{ max(1,(int)$s->rows) }}"
                             data-space="24"
                             data-per-sm="2"
                             data-per-md="3"
                             data-per-lg="4"
                             data-loop="false"
                             data-speed="600">
                            <div class="swiper-wrapper">
                                @foreach($s->items as $p)
                                    <div class="swiper-slide">
                                        @include('partials.product-card', ['p' => $p])
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <div class="row g-3">
                            @foreach($s->items as $p)
                                <div class="col-6 col-md-4 col-lg-3">
                                    @include('partials.product-card', ['p' => $p])
                                </div>
                            @endforeach
                        </div>
                    @endif

                    @if(optional($s->resolved_category)->slug)
                        <div class="text-center mt-4">
                            <a href="{{ route('category.show', $s->resolved_category->slug) }}" class="theme-btn theme-btn-2">
                                Vedi tutto <i class="fa-regular fa-arrow-right"></i>
                            </a>
                        </div>
                    @endif
                @else
                    <div class="text-center text-secondary py-4">Al momento non ci sono prodotti in questo blocco.</div>
                @endif
            </div>
        </section>
    @endforeach

    <section class="testimonial-section section-padding section-bg fix">
        <div class="shape"><img src="assets/img/testimonial/circle.png" alt="img"></div>
        <div class="container">
            <div class="swiper testimonial-slider-2">
                <div class="swiper-wrapper">

                    {{-- 1 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Spedizione rapida e imballo perfetto. Il prodotto è esattamente come descritto. Consigliato!”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Giulia Rossi</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 2 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <p>“Ottimo rapporto qualità/prezzo. Servizio clienti gentile, tempi di risposta migliorabili.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Marco Bianchi</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 3 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Ho ordinato di sera e il giorno dopo era già in consegna. Davvero sorprendente.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Alessia Conti</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 4 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <p>“Prodotto valido e ben confezionato. Manca una guida rapida in italiano nella scatola.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Lorenzo Greco</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 5 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Assistenza impeccabile: mi hanno aiutata a scegliere e a seguire l’ordine passo passo.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Chiara Esposito</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 6 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <p>“Tutto ok, solo il corriere è arrivato in ritardo di un giorno. Per il resto, soddisfatto.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Matteo Ricci</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 7 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Design bellissimo e materiali ottimi. Comprerò di nuovo sicuramente.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Sofia Gallo</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 8 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <p>“Prezzo competitivo e sito facile da usare. Packaging migliorabile, ma prodotto intatto.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Federico Lombardi</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 9 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Arrivato prima del previsto. Funziona perfettamente e manuale chiaro.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Martina De Luca</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 10 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <p>“Buon prodotto nel complesso. Piccolo difetto estetico, risolto con un coupon di scusa.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Andrea Ferraro</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 11 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Navigazione semplice e check-out veloce. Esperienza d’acquisto perfetta.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Valentina Moretti</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 12 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <p>“Prodotto come da foto. Consegna ok. Do 4 stelle perché mancava il tracking iniziale.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Luca Romano</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 13 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Servizio rapido, cortese e preciso. Ho già consigliato il sito agli amici.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Elisa Marchetti</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 14 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-regular fa-star"></i>
                                </div>
                                <p>“Buona qualità generale. Il colore è leggermente diverso dalla foto, ma resta molto bello.”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Davide Rinaldi</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 15 --}}
                    <div class="swiper-slide">
                        <div class="testimonial-card-item">
                            <div class="testimonial-content">
                                <h4>Le recensioni parlano</h4>
                                <div class="star">
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                                    <i class="fa-solid fa-star"></i>
                                </div>
                                <p>“Esperienza d’acquisto eccellente, dal primo clic alla consegna. Bravissimi!”</p>
                                <div class="info-item">
                                    <div class="text">
                                        <h6>Francesca Puglisi</h6><span>Cliente verificato</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div> {{-- /.swiper-wrapper --}}
            </div> {{-- /.swiper --}}
        </div>
    </section>



@endsection
@push('styles')
    <style>
        .testimonial-section { position: relative; }

        .testimonial-section .array-buttons {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            gap: .5rem;
            z-index: 5;            /* peste text și carduri */
            pointer-events: auto;  /* clicurile merg pe butoane */
        }

        .testimonial-section .array-buttons .array-prev,
        .testimonial-section .array-buttons .array-next {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px; height: 40px;
            border: 1px solid var(--bs-border-color, #e5e7eb);
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        }

        .testimonial-section .array-buttons .array-prev:hover,
        .testimonial-section .array-buttons .array-next:hover {
            transform: translateY(-1px);
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
            border-color: rgba(13,110,253,.4);
        }

        /* Prevenim ca textul din carduri să „se bage” în butoane */
        .testimonial-card-item { position: relative; z-index: 1; }

        /* Mică protecție dacă tema are poziționări ciudate */
        .testimonial-section .swiper { position: relative; z-index: 1; }
    </style>
@endpush
@push('scripts')
    {{-- Inițializare sliders cu suport pentru grid / rows --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sliders = Array.from(document.querySelectorAll('.js-home-swiper'));

            function findNav(el){
                const scope =
                    el.closest('.section-title-area')?.parentElement ||
                    el.closest('section') ||
                    el.parentElement ||
                    document;
                const prev = scope.querySelector('.array-prev') || el.querySelector('.array-prev');
                const next = scope.querySelector('.array-next') || el.querySelector('.array-next');
                return { prev, next };
            }

            function initSwiper(el){
                if (!window.Swiper) return;
                if (el.dataset.swiperInited === '1') return;

                const rows  = parseInt(el.dataset.rows  || '1', 10);
                const space = parseInt(el.dataset.space || '24', 10);
                const perSm = parseInt(el.dataset.perSm || '2', 10);
                const perMd = parseInt(el.dataset.perMd || '3', 10);
                const perLg = parseInt(el.dataset.perLg || '4', 10);
                const loop  = (el.dataset.loop === '1' || el.dataset.loop === 'true');
                const speed = parseInt(el.dataset.speed || '500', 10);

                const gridCfg = rows > 1 ? { rows: rows, fill: 'row' } : undefined;
                const nav = findNav(el);

                const swiper = new Swiper(el, {
                    speed: speed,
                    loop: loop,
                    slidesPerView: perLg,
                    spaceBetween: space,
                    grid: gridCfg,
                    navigation: (nav.prev && nav.next) ? { prevEl: nav.prev, nextEl: nav.next } : undefined,
                    keyboard: { enabled: true },
                    watchSlidesProgress: true,
                    observer: true,
                    observeParents: true,
                    breakpoints: {
                        0:   { slidesPerView: perSm, spaceBetween: 12, grid: gridCfg },
                        576: { slidesPerView: perSm, spaceBetween: 12, grid: gridCfg },
                        768: { slidesPerView: perMd, spaceBetween: 16, grid: gridCfg },
                        992: { slidesPerView: perLg, spaceBetween: space, grid: gridCfg }
                    }
                });

                el.dataset.swiperInited = '1';
                el._swiper = swiper;
            }

            const io = ('IntersectionObserver' in window)
                ? new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            initSwiper(entry.target);
                            io.unobserve(entry.target);
                        }
                    });
                }, { rootMargin: '200px' })
                : null;

            sliders.forEach(el => { if (io) io.observe(el); else initSwiper(el); });

            document.addEventListener('shown.bs.tab', () => {
                document.querySelectorAll('.js-home-swiper').forEach(el => {
                    if (el._swiper) { el._swiper.update(); }
                    else { initSwiper(el); }
                });
            });
        });
    </script>
@endpush