@extends('theme::layouts.web')

@section('title', 'Padangos, ratlankiai, akumuliatoriai — PadanguParduotuvė.lt')
@section('description', 'Didžiausias padangų, ratlankių ir akumuliatorių pasirinkimas Lietuvoje. Pristatymas per 1–2 d.d.')

@section('content')
{{-- ============================================================
     HOMEPAGE CONTENT
     Hardcoded sections from design reference:
       - Hero (size-picker)
       - Feature strip (4 trust highlights)
       - Categories grid (8 tiles)
       - Info blocks (2 paragraphs)
       - Popular products (6 cards)
       - Brand carousel (infinite loop)
     Wiring DB-driven content comes after Products module lands.
============================================================ --}}
  <!-- ===================== Hero ===================== -->
  <section class="container mt-4">
    <div class="hero p-4 p-md-5">
      <div class="row g-4 align-items-center position-relative">
        <div class="col-lg-6">
          <span class="badge-soft mb-3 d-inline-block">🔥 Sezono akcija — iki -30%</span>
          <h1 class="mb-3">Padangos, ratlankiai, akumuliatoriai — <span style="color:#fecaca">tiesiai iš sandėlio</span>.</h1>
          <p class="lead mb-4">Didžiausias pasirinkimas Lietuvoje. Pristatymas per 1–2 d.d. Montavimo partneriai visoje šalyje.</p>
          {{-- Hero CTA group — Frontend/task-4 mobile polish: data-hero-cta
               marker switches to vertical stack + full-width buttons <sm. --}}
          <div class="hero-cta" data-hero-cta>
            <a href="#kategorijos" class="btn-brand">Rinktis padangas</a>
            <a href="/akcijos" class="btn btn-outline-light">Žiūrėti akcijas</a>
          </div>

          {{-- Hero stats — Frontend/task-4 mobile polish: data-hero-stats
               drives CSS grid; 3 cols >=sm, 2 cols <sm (3rd wraps to row 2). --}}
          <div class="mt-4 hero-stats" data-hero-stats>
            <div class="hero-stat"><div class="fw-bold fs-4">10&nbsp;000+</div><small class="text-white-50">padangų modelių</small></div>
            <div class="hero-stat"><div class="fw-bold fs-4">98%</div><small class="text-white-50">užsakymų laiku</small></div>
            <div class="hero-stat"><div class="fw-bold fs-4">30+</div><small class="text-white-50">ratlankių prekės ženklų</small></div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="picker-card">
            <div class="picker-tabs" role="tablist">
              <button class="active" data-target="byCar">Pagal automobilį</button>
              <button data-target="bySize">Pagal dydį</button>
            </div>

            <div id="byCar">
              <h3 class="h6 fw-bold mb-1">Rasti padangas pagal automobilį</h3>
              <p class="text-muted small mb-3">Pasirinkite markę, modelį, metus.</p>
              <div class="row g-2">
                <div class="col-12 col-sm-6">
                  <select class="form-select"><option selected disabled>Markė</option><option>Audi</option><option>BMW</option><option>Toyota</option><option>Volkswagen</option></select>
                </div>
                <div class="col-12 col-sm-6">
                  <select class="form-select"><option selected disabled>Modelis</option></select>
                </div>
                <div class="col-12 col-sm-6">
                  <select class="form-select"><option selected disabled>Metai</option></select>
                </div>
                <div class="col-12 col-sm-6">
                  <select class="form-select"><option selected disabled>Modifikacija</option></select>
                </div>
                <div class="col-12">
                  <button class="btn-brand w-100 mt-1"><i class="bi bi-search me-1"></i> Rasti padangas</button>
                </div>
              </div>
            </div>

            <div id="bySize" style="display:none;">
              <h3 class="h6 fw-bold mb-1">Rasti padangas pagal dydį</h3>
              <p class="text-muted small mb-3">Įveskite plotį, profilį, skersmenį.</p>
              <div class="row g-2">
                <div class="col-4"><input class="form-control" placeholder="205" aria-label="Plotis" /></div>
                <div class="col-4"><input class="form-control" placeholder="55" aria-label="Profilis" /></div>
                <div class="col-4"><input class="form-control" placeholder="R16" aria-label="Skersmuo" /></div>
                <div class="col-12">
                  <select class="form-select"><option selected disabled>Sezonas</option><option>Vasarinės</option><option>Žieminės</option><option>Universalios</option></select>
                </div>
                <div class="col-12">
                  <button class="btn-brand w-100 mt-1"><i class="bi bi-search me-1"></i> Rasti padangas</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== Feature strip ===================== -->
  <section class="container mt-4">
    <div class="feature-strip">
      <div class="row g-0">
        <div class="col-12 col-md-3"><div class="feature-item">
          <div class="ico"><i class="bi bi-truck"></i></div>
          <div><strong>Greitas pristatymas</strong><span>per 1–2 d.d.</span></div>
        </div></div>
        <div class="col-12 col-md-3"><div class="feature-item">
          <div class="ico"><i class="bi bi-shield-check"></i></div>
          <div><strong>Garantija</strong><span>visoms prekėms</span></div>
        </div></div>
        <div class="col-12 col-md-3"><div class="feature-item">
          <div class="ico"><i class="bi bi-arrow-repeat"></i></div>
          <div><strong>14 d. grąžinimas</strong><span>be paaiškinimų</span></div>
        </div></div>
        <div class="col-12 col-md-3"><div class="feature-item">
          <div class="ico"><i class="bi bi-credit-card"></i></div>
          <div><strong>Saugūs mokėjimai</strong><span>Paysera, pavedimas</span></div>
        </div></div>
      </div>
    </div>
  </section>

  <!-- ===================== Categories ===================== -->
  <section class="container mt-5" id="kategorijos">
    <div class="d-flex align-items-end justify-content-between mb-3 flex-wrap gap-2">
      <div>
        <h2 class="section-title mb-1">Kategorijos</h2>
        <p class="section-sub mb-0">Viskas Jūsų automobiliui vienoje vietoje</p>
      </div>
      <a href="/katalogas" class="text-decoration-none fw-semibold" style="color: var(--brand);">
        Visos kategorijos <i class="bi bi-arrow-right ms-1"></i>
      </a>
    </div>

    <div class="row g-3">
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/lengvuju-automobiliu-padangos" class="cat-tile">
          <span class="count-pill">10&nbsp;000+</span>
          <div class="icon"><i class="bi bi-car-front-fill"></i></div>
          <h3>Lengvųjų automobilių padangos</h3>
          <p>Vasarinės, žieminės, universalios</p>
          <span class="arrow">Rinktis <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/lieti-ratlankiai" class="cat-tile">
          <span class="count-pill">R13–R23</span>
          <div class="icon"><i class="bi bi-disc-fill"></i></div>
          <h3>Lieti ratlankiai</h3>
          <p>Europiniai ir Azijos gamintojai</p>
          <span class="arrow">Rinktis <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/motociklu-padangos" class="cat-tile">
          <div class="icon"><i class="bi bi-bicycle"></i></div>
          <h3>Motociklų padangos</h3>
          <p>Sport, touring, enduro, moped</p>
          <span class="arrow">Rinktis <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/akumuliatoriai" class="cat-tile">
          <div class="icon"><i class="bi bi-battery-charging"></i></div>
          <h3>Akumuliatoriai</h3>
          <p>12V, AGM, EFB, Start-Stop</p>
          <span class="arrow">Rinktis <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/sunkveziminiu-padangos" class="cat-tile">
          <div class="icon"><i class="bi bi-truck-front-fill"></i></div>
          <h3>Sunkvežimių padangos</h3>
          <p>Komerciniam transportui</p>
          <span class="arrow">Rinktis <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/aksesuarai" class="cat-tile">
          <div class="icon"><i class="bi bi-tools"></i></div>
          <h3>Aksesuarai</h3>
          <p>Varžtai, centrai, dangteliai</p>
          <span class="arrow">Rinktis <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/padangu-utilizavimas" class="cat-tile">
          <div class="icon"><i class="bi bi-recycle"></i></div>
          <h3>Padangų utilizavimas</h3>
          <p>Rūpinamės aplinka</p>
          <span class="arrow">Sužinoti <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <a href="/montavimo-partneriai" class="cat-tile">
          <div class="icon"><i class="bi bi-geo-alt-fill"></i></div>
          <h3>Montavimo partneriai</h3>
          <p>Servisai visoje Lietuvoje</p>
          <span class="arrow">Žemėlapis <i class="bi bi-arrow-right"></i></span>
        </a>
      </div>
    </div>
  </section>

  <!-- ===================== Info blocks ===================== -->
  <section class="container mt-5">
    <div class="row g-3">
      <div class="col-lg-6">
        <div class="info-card">
          <h3>PadanguParduotuve.lt</h3>
          <p>Pirkti padangas internetu pigiau — padangų pristatymas ir montavimas visoje Lietuvoje. Žymiausių gamintojų padangos internetu visada pigiau. Mūsų e-padangų parduotuvėje rasite akcijų padangoms, o kainos — vienos iš geriausių rinkoje.</p>
          <a href="/apie-mus" class="btn-outline-brand mt-2 d-inline-block">Plačiau apie mus</a>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="info-card">
          <h3>Padangos internetu pigiau</h3>
          <p>Padangos internetu ne tik pigiau, bet patogiau ir greičiau. Sutaupykite laiko ir pinigų rinkdamiesi iš didžiausio asortimento. Prekių pasiūlą, kiekius ir kainas atnaujiname kelis kartus per dieną. 98 iš 100 užsakymų įvykdomi sutartu laiku.</p>
          <a href="/duk" class="btn-outline-brand mt-2 d-inline-block">D.U.K</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ===================== Popular products ===================== -->
  <section class="container mt-5">
    <div class="d-flex align-items-end justify-content-between mb-3 flex-wrap gap-2">
      <div>
        <h2 class="section-title mb-1">Populiariausios prekės</h2>
        <p class="section-sub mb-0">Tai, ką renkasi mūsų pirkėjai šiomis dienomis</p>
      </div>
      <a href="/akcijos" class="text-decoration-none fw-semibold" style="color: var(--brand);">
        Visos akcijos <i class="bi bi-arrow-right ms-1"></i>
      </a>
    </div>

    <div class="row g-3">
      <!-- ============ CARD 1: Goodyear Vector 4Seasons (real photo) ============ -->
      <div class="col-6 col-md-4 col-lg-4 col-xxl-3">
        <article class="product-card">
          <div class="media">
            <span class="tag">-8%</span>
            <span class="season all" title="Universalios"><i class="bi bi-cloud-sun-fill"></i></span>
            <button class="fav" aria-label="Įdėti į mėgstamiausius"><i class="bi bi-heart"></i></button>
            {{-- task-116b: image moved to va-themes/protera, published to
                 public/vendor/va-themes/protera/images/ — reference it directly
                 (theme_asset() still resolved the legacy themes/Web/Protera path). --}}
            <img src="{{ asset('vendor/va-themes/protera/images/goodyear-vector4seasons.png') }}" alt="Goodyear Vector 4Seasons Gen-3" style="max-width:85%; max-height:85%;" />
            <div class="eu-labels">
              <span class="eu-lbl grade-b"><span class="eu-ico fuel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v18"/><path d="M3 22h13"/><path d="M16 8h2a2 2 0 0 1 2 2v8a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2v-8"/><circle cx="6" cy="8" r="1.5" fill="currentColor"/></svg></span>B</span>
              <span class="eu-lbl grade-a"><span class="eu-ico wet"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2s-7 8-7 13a7 7 0 0 0 14 0c0-5-7-13-7-13z"/></svg></span>A</span>
              <span class="eu-lbl grade-b"><span class="eu-ico db"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon fill="currentColor" points="3,9 3,15 7,15 12,20 12,4 7,9"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg></span>70</span>
            </div>
          </div>
          <div class="body">
            <div class="d-flex justify-content-between align-items-start">
              <span class="brand-name">Goodyear</span>
              <span class="origin"><span class="flag de" title="Vokietija"></span> Pagaminta 2025</span>
            </div>
            <a href="#" class="title">Goodyear 215/55 R17 98V XL Vector 4Seasons Gen-3</a>
            <span class="stock"><span class="dot"></span> Likutis sandėlyje: <strong style="color:var(--ink); margin-left:3px;">8+ vnt.</strong></span>

            <div class="chip-row">
              <span class="chip"><i class="bi bi-shield-check"></i> 24 mėn. garantija</span>
              <span class="chip"><i class="bi bi-arrow-repeat"></i> 14 d. grąžinimas</span>
            </div>

            <div class="delivery-info">
              <div class="row-item">
                <i class="bi bi-shop pickup"></i>
                <span><strong>Atsiimk Vilniuje</strong><br /><span class="date">rytoj, 2026.04.24</span></span>
              </div>
              <div class="row-item">
                <i class="bi bi-truck"></i>
                <span><strong>DPD</strong> <span class="free">nemokamai nuo 4 vnt.</span><br /><span class="date">pirmadienį, 2026.04.27</span></span>
              </div>
            </div>

            <div class="foot">
              <div>
                <span class="price">135,00 €</span>
                <span class="price-old">147,00 €</span>
              </div>
              <button class="btn-cart" aria-label="Į krepšelį"><i class="bi bi-bag-plus"></i></button>
            </div>
          </div>
        </article>
      </div>

      <!-- ============ CARD 2: Nexen ============ -->
      <div class="col-6 col-md-4 col-lg-4 col-xxl-3">
        <article class="product-card">
          <div class="media">
            <span class="tag">-4%</span>
            <span class="season summer" title="Vasarinės"><i class="bi bi-sun-fill"></i></span>
            <button class="fav" aria-label="Įdėti į mėgstamiausius"><i class="bi bi-heart"></i></button>
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:75%; height:75%;">
              <circle cx="50" cy="50" r="45" fill="#1e293b"/>
              <circle cx="50" cy="50" r="22" fill="#cbd5e1"/>
              <circle cx="50" cy="50" r="14" fill="#94a3b8"/>
              <g stroke="#475569" stroke-width="1.5">
                <line x1="50" y1="8" x2="50" y2="22"/>
                <line x1="50" y1="78" x2="50" y2="92"/>
                <line x1="8" y1="50" x2="22" y2="50"/>
                <line x1="78" y1="50" x2="92" y2="50"/>
              </g>
            </svg>
            <div class="eu-labels">
              <span class="eu-lbl grade-a"><span class="eu-ico fuel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v18"/><path d="M3 22h13"/><path d="M16 8h2a2 2 0 0 1 2 2v8a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2v-8"/><circle cx="6" cy="8" r="1.5" fill="currentColor"/></svg></span>A</span>
              <span class="eu-lbl grade-a"><span class="eu-ico wet"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2s-7 8-7 13a7 7 0 0 0 14 0c0-5-7-13-7-13z"/></svg></span>A</span>
              <span class="eu-lbl grade-b"><span class="eu-ico db"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon fill="currentColor" points="3,9 3,15 7,15 12,20 12,4 7,9"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg></span>69</span>
            </div>
          </div>
          <div class="body">
            <div class="d-flex justify-content-between align-items-start">
              <span class="brand-name">Nexen</span>
              <span class="origin"><span class="flag kr" title="Pietų Korėja"></span> Pagaminta 2025</span>
            </div>
            <a href="#" class="title">Nexen 205/55 R16 91V N*blue S</a>
            <span class="stock"><span class="dot"></span> Likutis sandėlyje: <strong style="color:var(--ink); margin-left:3px;">4+ vnt.</strong></span>

            <div class="chip-row">
              <span class="chip"><i class="bi bi-shield-check"></i> 24 mėn. garantija</span>
              <span class="chip"><i class="bi bi-arrow-repeat"></i> 14 d. grąžinimas</span>
            </div>

            <div class="delivery-info">
              <div class="row-item">
                <i class="bi bi-shop pickup"></i>
                <span><strong>Atsiimk Vilniuje</strong><br /><span class="date">rytoj, 2026.04.24</span></span>
              </div>
              <div class="row-item">
                <i class="bi bi-truck"></i>
                <span><strong>DPD</strong> <span class="free">nemokamai nuo 4 vnt.</span><br /><span class="date">pirmadienį, 2026.04.27</span></span>
              </div>
            </div>

            <div class="foot">
              <div>
                <span class="price">65,00 €</span>
                <span class="price-old">68,00 €</span>
              </div>
              <button class="btn-cart" aria-label="Į krepšelį"><i class="bi bi-bag-plus"></i></button>
            </div>
          </div>
        </article>
      </div>

      <!-- ============ CARD 2: Firestone ============ -->
      <div class="col-6 col-md-4 col-lg-4 col-xxl-3">
        <article class="product-card">
          <div class="media">
            <span class="season summer"><i class="bi bi-sun-fill"></i></span>
            <button class="fav"><i class="bi bi-heart"></i></button>
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:75%; height:75%;">
              <circle cx="50" cy="50" r="45" fill="#1e293b"/>
              <circle cx="50" cy="50" r="22" fill="#cbd5e1"/>
              <circle cx="50" cy="50" r="14" fill="#94a3b8"/>
            </svg>
            <div class="eu-labels">
              <span class="eu-lbl grade-a"><span class="eu-ico fuel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v18"/><path d="M3 22h13"/><path d="M16 8h2a2 2 0 0 1 2 2v8a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2v-8"/><circle cx="6" cy="8" r="1.5" fill="currentColor"/></svg></span>A</span>
              <span class="eu-lbl grade-a"><span class="eu-ico wet"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2s-7 8-7 13a7 7 0 0 0 14 0c0-5-7-13-7-13z"/></svg></span>A</span>
              <span class="eu-lbl grade-b"><span class="eu-ico db"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon fill="currentColor" points="3,9 3,15 7,15 12,20 12,4 7,9"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg></span>71</span>
            </div>
          </div>
          <div class="body">
            <div class="d-flex justify-content-between align-items-start">
              <span class="brand-name">Firestone</span>
              <span class="origin"><span class="flag us" title="JAV"></span> Pagaminta 2025</span>
            </div>
            <a href="#" class="title">Firestone 235/60 R18 107V XL Roadhawk 2</a>
            <span class="stock"><span class="dot"></span> Likutis sandėlyje: <strong style="color:var(--ink); margin-left:3px;">8+ vnt.</strong></span>

            <div class="chip-row">
              <span class="chip"><i class="bi bi-shield-check"></i> 24 mėn. garantija</span>
              <span class="chip"><i class="bi bi-arrow-repeat"></i> 14 d. grąžinimas</span>
            </div>

            <div class="delivery-info">
              <div class="row-item">
                <i class="bi bi-shop pickup"></i>
                <span><strong>Atsiimk Vilniuje</strong><br /><span class="date">rytoj, 2026.04.24</span></span>
              </div>
              <div class="row-item">
                <i class="bi bi-truck"></i>
                <span><strong>DPD</strong> <span class="free">nemokamai nuo 4 vnt.</span><br /><span class="date">pirmadienį, 2026.04.27</span></span>
              </div>
            </div>

            <div class="foot">
              <span class="price">125,00 €</span>
              <button class="btn-cart"><i class="bi bi-bag-plus"></i></button>
            </div>
          </div>
        </article>
      </div>

      <!-- ============ CARD 3: Sailun ============ -->
      <div class="col-6 col-md-4 col-lg-4 col-xxl-3">
        <article class="product-card">
          <div class="media">
            <span class="tag tag-green">Naujiena</span>
            <span class="season summer"><i class="bi bi-sun-fill"></i></span>
            <button class="fav"><i class="bi bi-heart"></i></button>
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:75%; height:75%;">
              <circle cx="50" cy="50" r="45" fill="#1e293b"/>
              <circle cx="50" cy="50" r="22" fill="#cbd5e1"/>
              <circle cx="50" cy="50" r="14" fill="#94a3b8"/>
            </svg>
            <div class="eu-labels">
              <span class="eu-lbl grade-b"><span class="eu-ico fuel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v18"/><path d="M3 22h13"/><path d="M16 8h2a2 2 0 0 1 2 2v8a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2v-8"/><circle cx="6" cy="8" r="1.5" fill="currentColor"/></svg></span>B</span>
              <span class="eu-lbl grade-a"><span class="eu-ico wet"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2s-7 8-7 13a7 7 0 0 0 14 0c0-5-7-13-7-13z"/></svg></span>A</span>
              <span class="eu-lbl grade-b"><span class="eu-ico db"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon fill="currentColor" points="3,9 3,15 7,15 12,20 12,4 7,9"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg></span>69</span>
            </div>
          </div>
          <div class="body">
            <div class="d-flex justify-content-between align-items-start">
              <span class="brand-name">Sailun</span>
              <span class="origin"><span class="flag" style="background:#de2910; position:relative;"></span> Pagaminta 2024</span>
            </div>
            <a href="#" class="title">Sailun 225/50 R17 98W XL Atrezzo ZSR 2</a>
            <span class="stock"><span class="dot"></span> Likutis sandėlyje: <strong style="color:var(--ink); margin-left:3px;">12+ vnt.</strong></span>

            <div class="chip-row">
              <span class="chip"><i class="bi bi-shield-check"></i> 24 mėn. garantija</span>
              <span class="chip"><i class="bi bi-arrow-repeat"></i> 14 d. grąžinimas</span>
            </div>

            <div class="delivery-info">
              <div class="row-item">
                <i class="bi bi-shop pickup"></i>
                <span><strong>Atsiimk Vilniuje</strong><br /><span class="date">šiandien, 2026.04.23</span></span>
              </div>
              <div class="row-item">
                <i class="bi bi-truck"></i>
                <span><strong>DPD</strong> <span class="free">nemokamai nuo 4 vnt.</span><br /><span class="date">rytoj, 2026.04.24</span></span>
              </div>
            </div>

            <div class="foot">
              <span class="price">75,00 €</span>
              <button class="btn-cart"><i class="bi bi-bag-plus"></i></button>
            </div>
          </div>
        </article>
      </div>

      <!-- ============ CARD 4: Kumho (winter) ============ -->
      <div class="col-6 col-md-4 col-lg-4 col-xxl-3">
        <article class="product-card">
          <div class="media">
            <span class="season winter"><i class="bi bi-snow"></i></span>
            <button class="fav"><i class="bi bi-heart"></i></button>
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:75%; height:75%;">
              <circle cx="50" cy="50" r="45" fill="#1e293b"/>
              <circle cx="50" cy="50" r="22" fill="#cbd5e1"/>
              <circle cx="50" cy="50" r="14" fill="#94a3b8"/>
            </svg>
            <div class="eu-labels">
              <span class="eu-lbl grade-c"><span class="eu-ico fuel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v18"/><path d="M3 22h13"/><path d="M16 8h2a2 2 0 0 1 2 2v8a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2v-8"/><circle cx="6" cy="8" r="1.5" fill="currentColor"/></svg></span>C</span>
              <span class="eu-lbl grade-a"><span class="eu-ico wet"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2s-7 8-7 13a7 7 0 0 0 14 0c0-5-7-13-7-13z"/></svg></span>A</span>
              <span class="eu-lbl grade-c"><span class="eu-ico db"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon fill="currentColor" points="3,9 3,15 7,15 12,20 12,4 7,9"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg></span>72</span>
            </div>
          </div>
          <div class="body">
            <div class="d-flex justify-content-between align-items-start">
              <span class="brand-name">Kumho</span>
              <span class="origin"><span class="flag kr" title="Pietų Korėja"></span> Pagaminta 2025</span>
            </div>
            <a href="#" class="title">Kumho 215/55 R17 98W XL Ecsta HS52</a>
            <span class="stock low"><span class="dot"></span> Likutis sandėlyje: <strong style="color:var(--ink); margin-left:3px;">4 vnt.</strong></span>

            <div class="chip-row">
              <span class="chip"><i class="bi bi-shield-check"></i> 24 mėn. garantija</span>
              <span class="chip"><i class="bi bi-arrow-repeat"></i> 14 d. grąžinimas</span>
            </div>

            <div class="delivery-info">
              <div class="row-item">
                <i class="bi bi-shop pickup"></i>
                <span><strong>Atsiimk Vilniuje</strong><br /><span class="date">rytoj, 2026.04.24</span></span>
              </div>
              <div class="row-item">
                <i class="bi bi-truck"></i>
                <span><strong>DPD</strong> <span class="free">nemokamai nuo 4 vnt.</span><br /><span class="date">pirmadienį, 2026.04.27</span></span>
              </div>
            </div>

            <div class="foot">
              <span class="price">96,00 €</span>
              <button class="btn-cart"><i class="bi bi-bag-plus"></i></button>
            </div>
          </div>
        </article>
      </div>

      <!-- ============ CARD 5: Kormoran ============ -->
      <div class="col-6 col-md-4 col-lg-4 col-xxl-3">
        <article class="product-card">
          <div class="media">
            <span class="tag">-4%</span>
            <span class="season all"><i class="bi bi-cloud-sun-fill"></i></span>
            <button class="fav active"><i class="bi bi-heart-fill"></i></button>
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:75%; height:75%;">
              <circle cx="50" cy="50" r="45" fill="#1e293b"/>
              <circle cx="50" cy="50" r="22" fill="#cbd5e1"/>
              <circle cx="50" cy="50" r="14" fill="#94a3b8"/>
            </svg>
            <div class="eu-labels">
              <span class="eu-lbl grade-b"><span class="eu-ico fuel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v18"/><path d="M3 22h13"/><path d="M16 8h2a2 2 0 0 1 2 2v8a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2v-8"/><circle cx="6" cy="8" r="1.5" fill="currentColor"/></svg></span>B</span>
              <span class="eu-lbl grade-b"><span class="eu-ico wet"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2s-7 8-7 13a7 7 0 0 0 14 0c0-5-7-13-7-13z"/></svg></span>B</span>
              <span class="eu-lbl grade-b"><span class="eu-ico db"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon fill="currentColor" points="3,9 3,15 7,15 12,20 12,4 7,9"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg></span>71</span>
            </div>
          </div>
          <div class="body">
            <div class="d-flex justify-content-between align-items-start">
              <span class="brand-name">Kormoran</span>
              <span class="origin"><span class="flag" style="background:linear-gradient(to bottom,#fff 50%,#dc143c 50%);"></span> Pagaminta 2025</span>
            </div>
            <a href="#" class="title">Kormoran 205/55 R17 95V XL Summer 3</a>
            <span class="stock"><span class="dot"></span> Likutis sandėlyje: <strong style="color:var(--ink); margin-left:3px;">6+ vnt.</strong></span>

            <div class="chip-row">
              <span class="chip"><i class="bi bi-shield-check"></i> 24 mėn. garantija</span>
              <span class="chip"><i class="bi bi-arrow-repeat"></i> 14 d. grąžinimas</span>
            </div>

            <div class="delivery-info">
              <div class="row-item">
                <i class="bi bi-shop pickup"></i>
                <span><strong>Atsiimk Vilniuje</strong><br /><span class="date">rytoj, 2026.04.24</span></span>
              </div>
              <div class="row-item">
                <i class="bi bi-truck"></i>
                <span><strong>DPD</strong> <span class="free">nemokamai nuo 4 vnt.</span><br /><span class="date">pirmadienį, 2026.04.27</span></span>
              </div>
            </div>

            <div class="foot">
              <div>
                <span class="price">69,00 €</span>
                <span class="price-old">72,00 €</span>
              </div>
              <button class="btn-cart"><i class="bi bi-bag-plus"></i></button>
            </div>
          </div>
        </article>
      </div>

      <!-- ============ CARD 6: Varta battery ============ -->
      <div class="col-6 col-md-4 col-lg-4 col-xxl-3">
        <article class="product-card">
          <div class="media">
            <button class="fav"><i class="bi bi-heart"></i></button>
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:70%; height:70%;">
              <rect x="15" y="25" width="70" height="55" rx="4" fill="#1e293b"/>
              <rect x="15" y="25" width="70" height="10" fill="#334155"/>
              <rect x="25" y="18" width="10" height="8" fill="#1e293b"/>
              <rect x="65" y="18" width="10" height="8" fill="#1e293b"/>
              <text x="50" y="62" font-family="Arial" font-size="10" fill="#fbbf24" text-anchor="middle" font-weight="bold">VARTA</text>
            </svg>
          </div>
          <div class="body">
            <div class="d-flex justify-content-between align-items-start">
              <span class="brand-name">Varta</span>
              <span class="origin"><span class="flag de" title="Vokietija"></span> 60 Ah · 540 A</span>
            </div>
            <a href="#" class="title">Varta Blue Dynamic D24 60 AH 540 EN</a>
            <span class="stock low"><span class="dot"></span> Likutis sandėlyje: <strong style="color:var(--ink); margin-left:3px;">1+ vnt.</strong></span>

            <div class="chip-row">
              <span class="chip"><i class="bi bi-shield-check"></i> 24 mėn. garantija</span>
              <span class="chip"><i class="bi bi-arrow-repeat"></i> 14 d. grąžinimas</span>
            </div>

            <div class="delivery-info">
              <div class="row-item">
                <i class="bi bi-shop pickup"></i>
                <span><strong>Atsiimk Vilniuje</strong><br /><span class="date">rytoj, 2026.04.24</span></span>
              </div>
              <div class="row-item">
                <i class="bi bi-truck"></i>
                <span><strong>DPD</strong> 6,90 €<br /><span class="date">pirmadienį, 2026.04.27</span></span>
              </div>
            </div>

            <div class="foot">
              <span class="price">89,00 €</span>
              <button class="btn-cart"><i class="bi bi-bag-plus"></i></button>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ===================== Brand carousel ===================== -->
  <section class="container mt-5">
    <div class="d-flex align-items-end justify-content-between mb-3">
      <div>
        <h2 class="section-title mb-1">Prekės ženklai</h2>
        <p class="section-sub mb-0">Dirbame tik su patikimiausiais gamintojais</p>
      </div>
    </div>
    <div class="brand-row">
      <div class="brand-track" id="brandTrack">
        <a href="#" class="brand-logo">Michelin</a>
        <a href="#" class="brand-logo">Continental</a>
        <a href="#" class="brand-logo">Bridgestone</a>
        <a href="#" class="brand-logo">Goodyear</a>
        <a href="#" class="brand-logo">Pirelli</a>
        <a href="#" class="brand-logo">Nokian</a>
        <a href="#" class="brand-logo">Dunlop</a>
        <a href="#" class="brand-logo">Hankook</a>
        <a href="#" class="brand-logo">Nexen</a>
        <a href="#" class="brand-logo">Yokohama</a>
        <a href="#" class="brand-logo">Toyo</a>
        <a href="#" class="brand-logo">Firestone</a>
        <!-- duplicate for infinite loop -->
        <a href="#" class="brand-logo">Michelin</a>
        <a href="#" class="brand-logo">Continental</a>
        <a href="#" class="brand-logo">Bridgestone</a>
        <a href="#" class="brand-logo">Goodyear</a>
        <a href="#" class="brand-logo">Pirelli</a>
        <a href="#" class="brand-logo">Nokian</a>
        <a href="#" class="brand-logo">Dunlop</a>
        <a href="#" class="brand-logo">Hankook</a>
        <a href="#" class="brand-logo">Nexen</a>
        <a href="#" class="brand-logo">Yokohama</a>
        <a href="#" class="brand-logo">Toyo</a>
        <a href="#" class="brand-logo">Firestone</a>
      </div>
    </div>
  </section>

  {{-- ============================================================
       THEME PAGE BUILDER sections (admin-managed, appended after the
       hardcoded storefront blocks). No-op until an admin places sections
       in /admin/temos/protera/builder/home: ThemePageBuilder::render()
       returns an empty HtmlString when the page has no enabled sections,
       so this is a cheap indexed lookup with zero visual impact by default.
       The active web Theme is resolved here because HomeController renders
       `theme::pages.home` without passing one.
  ============================================================ --}}
  @php($builderTheme = app(\ViartasCore\Themes\Services\ThemeManager::class)->getActive('web'))
  @if($builderTheme)
    {!! app(\ViartasCore\Themes\ThemeBuilder\ThemePageBuilder::class)->render($builderTheme, 'home') !!}
  @endif

@endsection
