<?php
/**
 * Homepage (index.php)
 * This file is accessed directly or through router
 * Based on Cartzilla/home-electronics.html - 100% markup preservation
 */

$pageTitle = 'Cartzilla | Magazin Electronice';
$pageDescription = 'Cartzilla - Magazin online de electronice și gadget-uri';

// Get products for homepage
require_once __DIR__ . '/includes/init.php';
require_once __DIR__ . '/includes/B2B.php';
require_once __DIR__ . '/includes/product-card-helper.php';
require_once __DIR__ . '/includes/product-list-item-helper.php';
require_once __DIR__ . '/includes/hero-slider-helper.php';

$product = new Product();
$b2b = new B2B();
$userId = $auth->getUserId();
$b2bGroup = $userId ? $b2b->getUserB2BGroup($userId) : null;

// Get products for different sections
$newArrivals = $product->getFeaturedProducts(8); // New arrivals (8 products for 2 columns)
$trendingProducts = $product->getFeaturedProducts(8); // Trending products (8 products)
$specialOffers = $product->getFeaturedProducts(5); // Special offers (5 products for carousel)

// Include header
require_once __DIR__ . '/includes/header.php';
?>

    <!-- Page content -->
    <main class="content-wrapper">

      <?php echo renderHeroSlider(3); ?>


      <!-- Features -->
      <section class="container pt-5 mt-1 mt-sm-3 mt-lg-4">
        <div class="row row-cols-2 row-cols-md-4 g-4">

          <!-- Item -->
          <div class="col">
            <div class="d-flex flex-column flex-xxl-row align-items-center">
              <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
                <i class="ci-delivery fs-2 m-xxl-1"></i>
              </div>
              <div class="text-center text-xxl-start ps-xxl-3">
                <h3 class="h6 mb-1">Livrare Gratuită &amp; Returnări</h3>
                <p class="fs-sm mb-0">Pentru toate comenzile peste 199.00 RON</p>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="d-flex flex-column flex-xxl-row align-items-center">
              <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
                <i class="ci-credit-card fs-2 m-xxl-1"></i>
              </div>
              <div class="text-center text-xxl-start ps-xxl-3">
                <h3 class="h6 mb-1">Plată Sigură</h3>
                <p class="fs-sm mb-0">Asigurăm plată sigură</p>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="d-flex flex-column flex-xxl-row align-items-center">
              <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
                <i class="ci-refresh-cw fs-2 m-xxl-1"></i>
              </div>
              <div class="text-center text-xxl-start ps-xxl-3">
                <h3 class="h6 mb-1">Garanție Returnare Bani</h3>
                <p class="fs-sm mb-0">Returnare bani în 30 de zile</p>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="d-flex flex-column flex-xxl-row align-items-center">
              <div class="d-flex text-dark-emphasis bg-body-tertiary rounded-circle p-4 mb-3 mb-xxl-0">
                <i class="ci-chat fs-2 m-xxl-1"></i>
              </div>
              <div class="text-center text-xxl-start ps-xxl-3">
                <h3 class="h6 mb-1">Suport Clienți 24/7</h3>
                <p class="fs-sm mb-0">Suport prietenos pentru clienți</p>
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- New arrivals (List) -->
      <section class="container pt-5 mt-1 mt-sm-2 mt-md-3 mt-lg-4">
        <h2 class="h3 pb-2 pb-sm-3">Produse noi</h2>
        <div class="row">

          <!-- Banner -->
          <div class="col-lg-4" data-bs-theme="dark">
            <div class="d-flex flex-column align-items-center justify-content-end h-100 text-center overflow-hidden rounded-5 px-4 px-lg-3 pt-4 pb-5" style="background: #1d2c41 url(assets/img/home/electronics/banner/background.jpg) center/cover no-repeat">
              <div class="ratio animate-up-down position-relative z-2 me-lg-4" style="max-width: 320px; margin-bottom: -19%; --cz-aspect-ratio: calc(690 / 640 * 100%)">
                <img src="assets/img/home/electronics/banner/laptop.png" alt="Laptop">
              </div>
              <h3 class="display-2 mb-2">MacBook</h3>
              <p class="text-body fw-medium mb-4">Fii Pro Oriunde</p>
              <a class="btn btn-sm btn-primary" href="/catalog">
                De la 1.199 RON
                <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
              </a>
            </div>
          </div>

          <!-- Product list -->
          <div class="col-sm-6 col-lg-4 d-flex flex-column gap-3 pt-4 py-lg-4">
            <?php 
            $newArrivalsCol1 = array_slice($newArrivals, 0, 4);
            foreach ($newArrivalsCol1 as $prod): 
              echo renderProductListItem($prod, $b2bGroup);
            endforeach; 
            ?>
          </div>

          <!-- Product list -->
          <div class="col-sm-6 col-lg-4 d-flex flex-column gap-3 pt-3 py-lg-4">
            <?php 
            $newArrivalsCol2 = array_slice($newArrivals, 4, 4);
            foreach ($newArrivalsCol2 as $prod): 
              echo renderProductListItem($prod, $b2bGroup);
            endforeach; 
            ?>
          </div>
        </div>
      </section>


      <!-- Trending products (Grid) -->
      <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4">

        <!-- Heading -->
        <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4">
          <h2 class="h3 mb-0">Produse populare</h2>
          <div class="nav ms-3">
            <a class="nav-link animate-underline px-0 py-2" href="/catalog">
              <span class="animate-target">Vezi toate</span>
              <i class="ci-chevron-right fs-base ms-1"></i>
            </a>
          </div>
        </div>

        <!-- Product grid -->
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4 pt-4">
          <?php foreach ($trendingProducts as $prod): ?>
            <?php echo renderProductCard($prod, $b2bGroup); ?>
          <?php endforeach; ?>
        </div>
      </section>


      <!-- Sale Banner (CTA) -->
      <section class="container pt-5 mt-sm-2 mt-md-3 mt-lg-4">
        <div class="row g-0">
          <div class="col-md-3 mb-n4 mb-md-0">
            <div class="position-relative d-flex flex-column align-items-center justify-content-center h-100 py-5">
              <div class="position-absolute top-0 start-0 w-100 h-100 d-none d-md-block">
                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark" style="background-color: #accbee"></span>
                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark" style="background-color: #1b273a"></span>
              </div>
              <div class="position-absolute top-0 start-0 w-100 h-100 d-md-none">
                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-top-5 d-none-dark" style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
                <span class="position-absolute top-0 start-0 w-100 h-100 rounded-top-5 d-none d-block-dark" style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
              </div>
              <div class="position-relative z-1 display-1 text-dark-emphasis text-nowrap mb-0">
                20
                <span class="d-inline-block ms-n2">
                  <span class="d-block fs-1">%</span>
                  <span class="d-block fs-5">REDUCERE</span>
                </span>
              </div>
            </div>
          </div>
          <div class="col-md-9 position-relative">
            <div class="position-absolute top-0 start-0 h-100 overflow-hidden rounded-pill z-2 d-none d-md-block" style="color: var(--cz-body-bg); margin-left: -2px">
              <svg width="4" height="436" viewBox="0 0 4 436" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 0L1.99998 436" stroke="currentColor" stroke-width="3" stroke-dasharray="8 12" stroke-linecap="round"/>
              </svg>
            </div>
            <div class="position-relative">
              <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
              <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
              <div class="row align-items-center position-relative z-2">
                <div class="col-md-6 mb-3 mb-md-0">
                  <div class="text-center text-md-start py-md-5 px-4 ps-md-5 pe-md-0 me-md-n5">
                    <h3 class="text-uppercase fw-bold ps-xxl-3 pb-2 mb-1">Vânzare săptămânală sezonieră 2024</h3>
                    <p class="text-body-emphasis ps-xxl-3 mb-0">Folosește codul <span class="d-inline-block fw-semibold bg-white text-dark rounded-pill py-1 px-2">Sale 2024</span> pentru cea mai bună ofertă</p>
                  </div>
                </div>
                <div class="col-md-6 d-flex justify-content-center justify-content-md-end pb-5 pb-md-0">
                  <div class="me-xxl-4">
                    <img src="assets/img/home/electronics/banner/camera.png" class="d-block rtl-flip" width="420" alt="Camera">
                    <div class="d-none d-lg-block" style="margin-bottom: -9%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d-none d-lg-block" style="padding-bottom: 3%"></div>
      </section>


      <!-- Special offers (Carousel) -->
      <section class="container pt-5 mt-2 mt-sm-3 mt-lg-4">

        <!-- Heading + Countdown -->
        <div class="d-flex align-items-start align-items-md-center justify-content-between border-bottom pb-3 pb-md-4">
          <div class="d-md-flex align-items-center">
            <h2 class="h3 pe-3 me-3 mb-md-0">Oferte speciale pentru tine</h2>

            <!-- Replace "demoDate" inside data-countdown-date attribute with the real date, ex: "10/15/2025 12:00:00" -->
            <div class="d-flex align-items-center" data-countdown-date="demoDate">
              <div class="btn btn-primary pe-none px-2">
                <span data-days></span>
                <span>z</span>
              </div>
              <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
              <div class="btn btn-primary pe-none px-2">
                <span data-hours></span>
                <span>h</span>
              </div>
              <div class="animate-blinking text-body-tertiary fs-lg fw-medium mx-2">:</div>
              <div class="btn btn-primary pe-none px-2">
                <span data-minutes></span>
                <span>m</span>
              </div>
            </div>
          </div>
          <div class="nav ms-3">
            <a class="nav-link animate-underline px-0 py-2" href="/catalog">
              <span class="animate-target text-nowrap">Vezi toate</span>
              <i class="ci-chevron-right fs-base ms-1"></i>
            </a>
          </div>
        </div>

        <!-- Product carousel -->
        <div class="position-relative mx-md-1">

          <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
          <button type="button" class="offers-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle-y ms-n1 d-none d-sm-inline-flex" aria-label="Anterior">
            <i class="ci-chevron-left fs-lg animate-target"></i>
          </button>
          <button type="button" class="offers-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 end-0 z-2 translate-middle-y me-n1 d-none d-sm-inline-flex" aria-label="Următor">
            <i class="ci-chevron-right fs-lg animate-target"></i>
          </button>

          <!-- Slider -->
          <div class="swiper py-4 px-sm-3" data-swiper='{
            "slidesPerView": 2,
            "spaceBetween": 24,
            "loop": true,
            "navigation": {
              "prevEl": ".offers-prev",
              "nextEl": ".offers-next"
            },
            "breakpoints": {
              "768": {
                "slidesPerView": 3
              },
              "992": {
                "slidesPerView": 4
              }
            }
          }'>
            <div class="swiper-wrapper">
              <?php foreach ($specialOffers as $prod): ?>
              <div class="swiper-slide">
                <?php echo renderProductCard($prod, $b2bGroup); ?>
              </div>
              <?php endforeach; ?>
            </div>
          </div>

          <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
          <div class="d-flex justify-content-center gap-2 mt-n2 mb-3 pb-1 d-sm-none">
            <button type="button" class="offers-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1" aria-label="Anterior">
              <i class="ci-chevron-left fs-lg animate-target"></i>
            </button>
            <button type="button" class="offers-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end" aria-label="Următor">
              <i class="ci-chevron-right fs-lg animate-target"></i>
            </button>
          </div>
        </div>
      </section>


      <!-- Brands -->
      <section class="container pt-4 pt-md-5 pb-5 mt-sm-2 mb-2 mb-sm-3 mb-md-4 mb-lg-5">
        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-3 g-md-4 g-lg-3 g-xl-4">
          <div class="col">
            <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="/catalog">
              <img src="assets/img/shop/electronics/brands/apple-light-mode.svg" class="d-none-dark" alt="Apple">
              <img src="assets/img/shop/electronics/brands/apple-dark-mode.svg" class="d-none d-block-dark" alt="Apple">
            </a>
          </div>
          <div class="col">
            <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="/catalog">
              <img src="assets/img/shop/electronics/brands/motorola-light-mode.svg" class="d-none-dark" alt="Motorola">
              <img src="assets/img/shop/electronics/brands/motorola-dark-mode.svg" class="d-none d-block-dark" alt="Motorola">
            </a>
          </div>
          <div class="col">
            <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="/catalog">
              <img src="assets/img/shop/electronics/brands/canon-light-mode.svg" class="d-none-dark" alt="Canon">
              <img src="assets/img/shop/electronics/brands/canon-dark-mode.svg" class="d-none d-block-dark" alt="Canon">
            </a>
          </div>
          <div class="col">
            <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="/catalog">
              <img src="assets/img/shop/electronics/brands/samsung-light-mode.svg" class="d-none-dark" alt="Samsung">
              <img src="assets/img/shop/electronics/brands/samsung-dark-mode.svg" class="d-none d-block-dark" alt="Samsung">
            </a>
          </div>
          <div class="col">
            <a class="btn btn-outline-secondary w-100 rounded-4 p-3" href="/catalog">
              <img src="assets/img/shop/electronics/brands/sony-light-mode.svg" class="d-none-dark" alt="Sony">
              <img src="assets/img/shop/electronics/brands/sony-dark-mode.svg" class="d-none d-block-dark" alt="Sony">
            </a>
          </div>
          <div class="col">
            <a class="btn btn-outline-secondary w-100 h-100 rounded-4 p-3" href="/categorii">
              Toate brandurile
              <i class="ci-plus-circle fs-base ms-2"></i>
            </a>
          </div>
        </div>
      </section>


      <!-- Subscription form + Vlog -->
      <section class="bg-body-tertiary py-5">
        <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
          <div class="row">
            <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
              <h2 class="h4 mb-2">Abonează-te la newsletter-ul nostru</h2>
              <p class="text-body pb-2 pb-ms-3">Primește cele mai recente actualizări despre produsele și promoțiile noastre</p>
              <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
                <div class="position-relative w-100 me-2">
                  <input type="email" class="form-control form-control-lg" placeholder="Email-ul tău" required>
                </div>
                <button type="submit" class="btn btn-lg btn-primary">Abonează-te</button>
              </form>
              <div class="d-flex gap-3">
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
                  <i class="ci-instagram fs-base"></i>
                </a>
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
                  <i class="ci-facebook fs-base"></i>
                </a>
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
                  <i class="ci-youtube fs-base"></i>
                </a>
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
                  <i class="ci-telegram fs-base"></i>
                </a>
              </div>
            </div>
            <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
              <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
                <li class="nav flex-nowrap align-items-center position-relative">
                  <img src="assets/img/home/electronics/vlog/01.jpg" class="rounded" width="140" alt="Video cover">
                  <div class="ps-3">
                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 Gadget-uri Cool Noi pe Care Trebuie Să Le Vezi pe Cartzilla - Buget Redus</a>
                  </div>
                </li>
                <li class="nav flex-nowrap align-items-center position-relative">
                  <img src="assets/img/home/electronics/vlog/02.jpg" class="rounded" width="140" alt="Video cover">
                  <div class="ps-3">
                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 Gadget-uri Super Utile pe Cartzilla pe Care Trebuie Să Le Ai în 2023</a>
                  </div>
                </li>
                <li class="nav flex-nowrap align-items-center position-relative">
                  <img src="assets/img/home/electronics/vlog/03.jpg" class="rounded" width="140" alt="Video cover">
                  <div class="ps-3">
                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top 5 Gadget-uri Noi Uimitoare pe Cartzilla pe Care Trebuie Să Le Vezi</a>
                  </div>
                </li>
              </ul>
              <div class="nav ps-md-4 ps-lg-0">
                <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
                  <span class="animate-target">Vezi toate</span>
                  <i class="ci-chevron-right fs-base ms-1"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

    </main>

<?php
// Include footer
require_once __DIR__ . '/includes/footer.php';
?>
