<?php
declare(strict_types=1);
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
/** @var Escaper $escaper */
/** @var Template $block */
?>

<!-- ═══════════════════════════════════════════════════════════
     HERO SLIDER
     Replace src values with your actual slide images from Media Browser
════════════════════════════════════════════════════════════ -->
<section class="hero-slider relative overflow-hidden"
         style="min-height: clamp(420px, 65vh, 760px); background-color: #1A1A2E;"
         x-data="{
            currentSlide: 0,
            slides: [
                { url: '/abbigliamento.html?p_33327927n0_na_family=505', src: '{{media url=wysiwyg/1.jpg}}', title: 'Estate <em>Italiana</em>', sub: 'Nuova collezione estiva — EA7 Emporio Armani' },
                { url: '/abbigliamento.html?p_33327927n0_na_family=506', src: '{{media url=wysiwyg/2.jpg}}', title: 'Stile <em>Senza</em> Confini', sub: 'Abbigliamento sportivo e lifestyle' },
                { url: '/abbigliamento.html?p_33327927n0_na_family=506', src: '{{media url=wysiwyg/3.jpg}}', title: 'La Tua <em>Scelta</em>', sub: 'Marchi premium, prezzi esclusivi' }
            ],
            autoNext() {
                setInterval(() => { this.currentSlide = (this.currentSlide + 1) % this.slides.length; }, 5000);
            }
         }"
         x-init="autoNext()">

    <!-- Slides -->
    <template x-for="(slide, i) in slides" :key="i">
        <div x-show="currentSlide === i"
             x-transition:enter="transition ease-in-out duration-700"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             class="absolute inset-0">
            <a :href="slide.url" class="block w-full h-full">
                <img :src="slide.src" alt="" class="w-full h-full object-cover object-top" loading="lazy" />
            </a>
            <!-- Cinematic gradient overlay (signature element) -->
            <div class="absolute inset-0 pointer-events-none"
                 style="background: linear-gradient(135deg, rgba(10,10,10,0.72) 0%, rgba(26,26,46,0.45) 55%, transparent 100%);"></div>

            <!-- Hero text -->
            <div class="absolute inset-0 z-10 flex flex-col justify-end pointer-events-none"
                 style="padding: clamp(2rem,5vw,5rem) clamp(1.5rem,6vw,6rem) clamp(3rem,7vh,7rem);">
                <p class="fl-eyebrow" style="color:#C8A97E; font-size:0.6875rem; font-weight:700;
                          letter-spacing:0.2em; text-transform:uppercase; margin-bottom:1rem;
                          font-family:'Inter',sans-serif;">
                    Fadelux — Fashion &amp; Lifestyle
                </p>
                <h1 x-html="slide.title"
                    style="font-family:'Playfair Display',serif; font-size:clamp(2.75rem,7vw,6.5rem);
                           font-weight:600; color:#FEFCFA; letter-spacing:-0.03em; line-height:0.95;
                           margin:0 0 1.25rem;"></h1>
                <p x-text="slide.sub"
                   style="font-size:clamp(0.9375rem,1.5vw,1.125rem); color:rgba(245,240,235,0.80);
                          max-width:42ch; margin:0 0 2rem; font-family:'Inter',sans-serif;"></p>
                <div class="pointer-events-auto flex flex-wrap gap-3">
                    <a :href="slide.url"
                       style="background-color:#C8A97E; color:#0A0A0A; font-family:'Inter',sans-serif;
                              font-size:0.8125rem; font-weight:700; letter-spacing:0.1em;
                              text-transform:uppercase; padding:0.875rem 2rem; border-radius:4px;
                              display:inline-flex; align-items:center; gap:0.5rem;
                              transition:background-color 250ms ease, box-shadow 250ms ease;
                              text-decoration:none;"
                       onmouseover="this.style.backgroundColor='#A88A5C'; this.style.boxShadow='0 6px 20px rgba(200,169,126,0.4)'"
                       onmouseout="this.style.backgroundColor='#C8A97E'; this.style.boxShadow='none'">
                        <?= __('Scopri la Collezione') ?>
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                    </a>
                    <a href="/abbigliamento.html"
                       style="background-color:transparent; color:#FEFCFA; border:1.5px solid rgba(245,240,235,0.4);
                              font-family:'Inter',sans-serif; font-size:0.8125rem; font-weight:700;
                              letter-spacing:0.1em; text-transform:uppercase; padding:0.75rem 1.75rem;
                              border-radius:4px; display:inline-flex; align-items:center; gap:0.5rem;
                              transition:border-color 250ms ease; text-decoration:none;"
                       onmouseover="this.style.borderColor='#C8A97E'"
                       onmouseout="this.style.borderColor='rgba(245,240,235,0.4)'">
                        <?= __('Tutto l\'Abbigliamento') ?>
                    </a>
                </div>
            </div>
        </div>
    </template>

    <!-- Slider dots -->
    <div class="absolute bottom-7 right-8 z-20 flex gap-2">
        <template x-for="(s, i) in slides" :key="i">
            <button @click="currentSlide = i"
                    :style="currentSlide === i
                        ? 'width:44px; background-color:#C8A97E;'
                        : 'width:28px; background-color:rgba(255,255,255,0.3);'"
                    style="height:3px; border:none; border-radius:2px; cursor:pointer;
                           padding:0; transition:width 300ms ease, background-color 300ms ease;"
                    :aria-label="'Slide ' + (i+1)"></button>
        </template>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     USP / TRUST BAR
════════════════════════════════════════════════════════════ -->
<div style="background-color:#E8E0D5; border-top:1px solid #D9D0C5; border-bottom:1px solid #D9D0C5;
            display:flex; justify-content:center; flex-wrap:wrap; gap:2rem;
            padding:1.75rem clamp(1rem,4vw,4rem);">

    <div style="display:flex; align-items:center; gap:0.875rem; min-width:180px;">
        <div style="width:40px; height:40px; background-color:#FEFCFA; border-radius:50%;
                    display:flex; align-items:center; justify-content:center;
                    box-shadow:0 2px 8px rgba(10,10,10,0.08); flex-shrink:0;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="#C8A97E" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 8h14M5 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm14 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM5 8l1.2 9.6A2 2 0 0 0 8.18 20h7.64a2 2 0 0 0 1.98-2.4L17 8"/></svg>
        </div>
        <div>
            <h4 style="font-size:0.8125rem; font-weight:700; color:#0A0A0A; margin:0 0 0.2rem; font-family:'Inter',sans-serif;"><?= __('Spedizione Gratuita') ?></h4>
            <p style="font-size:0.6875rem; color:#7A7060; margin:0; line-height:1.4;"><?= __('Da €49.90 (Isole da €299)') ?></p>
        </div>
    </div>

    <div style="display:flex; align-items:center; gap:0.875rem; min-width:180px;">
        <div style="width:40px; height:40px; background-color:#FEFCFA; border-radius:50%;
                    display:flex; align-items:center; justify-content:center;
                    box-shadow:0 2px 8px rgba(10,10,10,0.08); flex-shrink:0;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="#C8A97E" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
        </div>
        <div>
            <h4 style="font-size:0.8125rem; font-weight:700; color:#0A0A0A; margin:0 0 0.2rem; font-family:'Inter',sans-serif;"><?= __('Resi Garantiti') ?></h4>
            <p style="font-size:0.6875rem; color:#7A7060; margin:0; line-height:1.4;"><?= __('Resi 100% garantiti') ?></p>
        </div>
    </div>

    <div style="display:flex; align-items:center; gap:0.875rem; min-width:180px;">
        <div style="width:40px; height:40px; background-color:#FEFCFA; border-radius:50%;
                    display:flex; align-items:center; justify-content:center;
                    box-shadow:0 2px 8px rgba(10,10,10,0.08); flex-shrink:0;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="#C8A97E" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
        </div>
        <div>
            <h4 style="font-size:0.8125rem; font-weight:700; color:#0A0A0A; margin:0 0 0.2rem; font-family:'Inter',sans-serif;"><?= __('24/7 Assistenza') ?></h4>
            <p style="font-size:0.6875rem; color:#7A7060; margin:0; line-height:1.4;"><?= __('Tecnici sempre disponibili') ?></p>
        </div>
    </div>

    <div style="display:flex; align-items:center; gap:0.875rem; min-width:180px;">
        <div style="width:40px; height:40px; background-color:#FEFCFA; border-radius:50%;
                    display:flex; align-items:center; justify-content:center;
                    box-shadow:0 2px 8px rgba(10,10,10,0.08); flex-shrink:0;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="#C8A97E" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="5" width="20" height="14" rx="2"/><path stroke-linecap="round" d="M2 10h20"/></svg>
        </div>
        <div>
            <h4 style="font-size:0.8125rem; font-weight:700; color:#0A0A0A; margin:0 0 0.2rem; font-family:'Inter',sans-serif;"><?= __('Pagamenti Sicuri') ?></h4>
            <p style="font-size:0.6875rem; color:#7A7060; margin:0; line-height:1.4;"><?= __('Visa · MC · PayPal · Bonifico') ?></p>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════
     CATEGORY GRID
════════════════════════════════════════════════════════════ -->
<section style="padding: clamp(3rem,6vw,6rem) clamp(1rem,4vw,3rem); background-color:#F5F0EB;">
    <div style="text-align:center; margin-bottom:2.5rem;">
        <span style="font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:700;
                     letter-spacing:0.18em; text-transform:uppercase; color:#C8A97E;
                     display:block; margin-bottom:0.75rem;"><?= __('Esplora') ?></span>
        <h2 style="font-family:'Playfair Display',serif; font-size:clamp(1.75rem,3.5vw,2.75rem);
                   font-weight:600; color:#0A0A0A; letter-spacing:-0.02em; margin:0;">
            <?= __('Scegli la tua Categoria') ?>
        </h2>
    </div>

    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.25rem;">

        <!-- Abbigliamento -->
        <a href="/abbigliamento.html"
           style="position:relative; overflow:hidden; border-radius:4px; aspect-ratio:3/4;
                  background-color:#E8E0D5; display:block; text-decoration:none;"
           onmouseover="this.querySelector('img').style.transform='scale(1.05)'"
           onmouseout="this.querySelector('img').style.transform='scale(1)'">
            <img src="{{media url=wysiwyg/2.jpg}}" alt="Abbigliamento"
                 style="width:100%; height:100%; object-fit:cover; transition:transform 600ms ease;" />
            <div style="position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,10,0.65) 0%, transparent 55%);
                        display:flex; flex-direction:column; justify-content:flex-end; padding:1.75rem 1.5rem;">
                <h3 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:600;
                           color:#FEFCFA; margin:0 0 0.375rem; letter-spacing:-0.01em;"><?= __('Abbigliamento') ?></h3>
                <span style="font-size:0.75rem; font-weight:600; letter-spacing:0.12em;
                             text-transform:uppercase; color:#C8A97E;"><?= __('Scopri →') ?></span>
            </div>
        </a>

        <!-- Accessori -->
        <a href="/accessori.html"
           style="position:relative; overflow:hidden; border-radius:4px; aspect-ratio:3/4;
                  background-color:#E8E0D5; display:block; text-decoration:none;"
           onmouseover="this.querySelector('img').style.transform='scale(1.05)'"
           onmouseout="this.querySelector('img').style.transform='scale(1)'">
            <img src="{{media url=wysiwyg/3.jpg}}" alt="Accessori"
                 style="width:100%; height:100%; object-fit:cover; transition:transform 600ms ease;" />
            <div style="position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,10,0.65) 0%, transparent 55%);
                        display:flex; flex-direction:column; justify-content:flex-end; padding:1.75rem 1.5rem;">
                <h3 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:600;
                           color:#FEFCFA; margin:0 0 0.375rem; letter-spacing:-0.01em;"><?= __('Accessori') ?></h3>
                <span style="font-size:0.75rem; font-weight:600; letter-spacing:0.12em;
                             text-transform:uppercase; color:#C8A97E;"><?= __('Scopri →') ?></span>
            </div>
        </a>

        <!-- Calzature -->
        <a href="/calzature.html"
           style="position:relative; overflow:hidden; border-radius:4px; aspect-ratio:3/4;
                  background-color:#E8E0D5; display:block; text-decoration:none;"
           onmouseover="this.querySelector('img').style.transform='scale(1.05)'"
           onmouseout="this.querySelector('img').style.transform='scale(1)'">
            <img src="{{media url=wysiwyg/4.jpg}}" alt="Calzature"
                 style="width:100%; height:100%; object-fit:cover; transition:transform 600ms ease;" />
            <div style="position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,10,0.65) 0%, transparent 55%);
                        display:flex; flex-direction:column; justify-content:flex-end; padding:1.75rem 1.5rem;">
                <h3 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:600;
                           color:#FEFCFA; margin:0 0 0.375rem; letter-spacing:-0.01em;"><?= __('Calzature') ?></h3>
                <span style="font-size:0.75rem; font-weight:600; letter-spacing:0.12em;
                             text-transform:uppercase; color:#C8A97E;"><?= __('Scopri →') ?></span>
            </div>
        </a>

    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     NEW PRODUCTS (Magento block)
════════════════════════════════════════════════════════════ -->
<section style="padding: clamp(3rem,6vw,6rem) clamp(1rem,4vw,3rem); background-color:#F5F0EB;">
    <div style="display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:2.5rem; gap:1rem; flex-wrap:wrap;">
        <div>
            <span style="font-family:'Inter',sans-serif; font-size:0.6875rem; font-weight:700;
                         letter-spacing:0.18em; text-transform:uppercase; color:#C8A97E;
                         display:block; margin-bottom:0.75rem;"><?= __('Appena arrivati') ?></span>
            <h2 style="font-family:'Playfair Display',serif; font-size:clamp(1.75rem,3.5vw,2.75rem);
                       font-weight:600; color:#0A0A0A; letter-spacing:-0.02em; margin:0;">
                <?= __('Nuovi <em>Prodotti</em>') ?>
            </h2>
        </div>
        <a href="/catalogsearch/result/?q=new"
           style="font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:700;
                  letter-spacing:0.12em; text-transform:uppercase; color:#C8A97E;
                  display:inline-flex; align-items:center; gap:0.375rem;
                  text-decoration:none; white-space:nowrap; transition:gap 200ms ease;"
           onmouseover="this.style.gap='0.625rem'"
           onmouseout="this.style.gap='0.375rem'">
            <?= __('Vedi tutti') ?> →
        </a>
    </div>
    {{widget type="Magento\CatalogWidget\Block\Product\ProductsList"
             title="Nuovi Prodotti" show_pager="0"
             products_count="8"
             template="Magento_CatalogWidget::product/widget/content/grid.phtml"
             conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]"
             page_var_name="pawi"}}
</section>

<!-- ═══════════════════════════════════════════════════════════
     BRAND STRIP (editorial)
════════════════════════════════════════════════════════════ -->
<div style="background-color:#1A1A2E; padding:2rem clamp(1rem,4vw,4rem);
            display:flex; align-items:center; justify-content:center; gap:0; overflow:hidden;">
    <div style="display:flex; align-items:center; gap:3rem; flex-wrap:wrap; justify-content:center;">
        <?php $brands = ['EA7 EMPORIO ARMANI', 'ARMANI EXCHANGE', 'EMPORIO ARMANI', 'ADIDAS', 'NIKE']; ?>
        <?php foreach ($brands as $b): ?>
        <span style="font-family:'Inter',sans-serif; font-size:0.65rem; font-weight:700;
                     letter-spacing:0.22em; text-transform:uppercase; color:rgba(245,240,235,0.35);
                     white-space:nowrap; transition:color 200ms ease;"
              onmouseover="this.style.color='rgba(200,169,126,0.8)'"
              onmouseout="this.style.color='rgba(245,240,235,0.35)'"><?= $b ?></span>
        <?php endforeach; ?>
    </div>
</div>
