{% macro product_slide(product) %}
<div class="swiper-slide">
  {% set product_card_mode = 'link' %}
  {% include 'catalog/view/template/common/product_card.twig' %}
</div>
{% endmacro %}

{{ header }}

 <!-- Banner -->
<div class="banner-section">
    <div class="container">
        <div class="swiper main_banner_swiper">
            <div class="swiper-wrapper">
                    {% for m_banner in main_banner %}
                    <div class="swiper-slide">
                        <div class="main_banner" style="background-image: url('{{m_banner.thumb}}');">
                            <div class="banner_content_main">
                                <div class="banner_content d-flex flex-column justify-content-center align-items-start">
                                    <h2 class="banner_heading">
                                        <span class="banner_heading_light">Discover Your New</span>
                                        <span class="banner_heading_gold">Signature Scent</span>
                                    </h2>
                                    <p>Perfume Is A Liquid That Gives People, Things And Rooms A Good Smell</p>
                                    <a href="{{best_seller_href}}" class="btn-banner">Shop Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            <div class="swiper-pagination banner-pagination"></div>
        </div>
    </div>
</div>

<!-- Shop By Brands -->
<div class="product_card_main shop_by_brands_section">
    <div class="container">
        <div class="d-flex justify-content-between mb-4 align-items-center">
            <h3 class="heading_third section_title">SHOP BY <span class="gold_color">BRANDS</span></h3>
        </div>
        <div class="swiper product_category_swiper">
            <div class="swiper-wrapper">
                {% for brand in brands %}
                <div class="swiper-slide">
                    <div class="category_card brand_card" style="background-image: url('{{ brand.image }}');">
                        <a href="{{ brand.href }}" class="category_card_link">
                            <div class="category_card_detail">
                                <div class="category_content">
                                    <h2 class="category_name">{{ brand.name }}</h2>
                                    <span class="category_view_all_btn">View All</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Shop By Category -->
<div class="product_card_main">
    <div class="container">
        <div class="d-flex justify-content-between mb-4 align-items-center">
            <h3 class="heading_third section_title">SHOP BY <span class="gold_color">CATEGORY</span></h3>
        </div>
        <div class="swiper product_category_swiper">
            <div class="swiper-wrapper">
                {% for category in categories %}
                <div class="swiper-slide">
                    <div class="category_card" style="background-image: url('{{ category.image }}');">
                        <a href="{{ category.href }}" class="category_card_link">
                            <div class="category_card_detail">
                                <div class="category_content">
                                    <h2 class="category_name">{{ category.name }}</h2>
                                    <span class="category_view_all_btn">View All</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Our Best Seller -->
<div class="product_card_main best_seller_section">
    <div class="container">
        <div class="d-flex justify-content-between mb-4 align-items-center">
            <h3 class="heading_third section_title">OUR BEST <span class="gold_color">SELLER</span></h3>
            <a href="{{best_seller_href}}" class="view_all_btn_solid">View All</a>
        </div>
        <div class="swiper product_swiper">
            <div class="swiper-wrapper">
                {% for product in best_seller_products %}
                {{ _self.product_slide(product) }}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Fragrances for Every Style -->
<section class="fragrances_style_section">
    <div class="fragrances_style_banner" style="background-image: url('catalog/view/custom_assets/images/fragrances_for_every_style.jpg');">
        <div class="container">
            <div class="fragrances_style_content">
                <h2 class="fragrances_style_heading">Fragrances for <span class="gold_color">Every Style</span></h2>
                <p>Explore our exclusive collection of premium perfumes designed for both men and women, crafted to leave a lasting impression.</p>
                <a href="{{ perfumes_href }}" class="btn-banner">Shop Now</a>
            </div>
        </div>
    </div>
</section>

<!-- Our Perfumes -->
<div class="product_card_main">
    <div class="container">
        <div class="d-flex justify-content-between mb-4 align-items-center">
            <h3 class="heading_third section_title">OUR <span class="gold_color">PERFUMES</span></h3>
            <a href="{{perfumes_href}}" class="view_all_btn_solid">View All</a>
        </div>
        <div class="swiper product_swiper">
            <div class="swiper-wrapper">
                {% for product in perfumes_products %}
                {{ _self.product_slide(product) }}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Benefits -->
<div class="section_10 text-white text-center">
    <div class="container">
        <h3 class="heading_third section_title">BENEFITS OF USING ALVIES</h3>
        <div class="row mt-5">
            <div class="col-sm-4">
                <img src="catalog/view/custom_assets/images/benefit_1.png" alt="">
                <h5 class="mt-4">Join Our Reward Club</h5>
            </div>
            <div class="col-sm-4">
                <img src="catalog/view/custom_assets/images/benefit_2.png" alt="">
                <h5 class="mt-4 gold_color">Great Deals Upto 80% Off!</h5>
            </div>
            <div class="col-sm-4">
                <img src="catalog/view/custom_assets/images/benefit_3.png" alt="">
                <h5 class="mt-4">Free Delivery on orders over 50£</h5>
            </div>
        </div>
    </div>
</div>

<!-- Explore Alvies London -->
<section class="explore_alvies_section">
    <div class="container">
        <div class="explore_alvies_inner">
            <div class="explore_alvies_intro">
                <h3 class="explore_alvies_heading">Explore Alvies <span class="gold_color">London</span></h3>
                <p class="explore_alvies_text">Premium Fragrance and more</p>
                <a href="{{ perfumes_href }}" class="view_all_btn_solid">View All</a>
            </div>
            <div class="explore_alvies_cards">
                <div class="swiper explore_alvies_swiper">
                    <div class="swiper-wrapper">
                        {% for item in explore_categories %}
                        <div class="swiper-slide">
                            <div class="category_card explore_category_card" style="background-image: url('{{ item.image }}');">
                                <a href="{{ item.href }}" class="category_card_link">
                                    <div class="category_card_detail">
                                        <div class="category_content">
                                            <h2 class="category_name">{{ item.name }}</h2>
                                            <span class="category_view_all_btn">View All</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Popup Modal -->
<div class="modal fade" id="homePopupModal" tabindex="-1" aria-labelledby="homePopupLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #FFB300;">
        <h5 class="modal-title" id="homePopupLabel">{{popup_title}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>{{popup_description}}</p>
      </div>
    </div>
  </div>
</div>

{{ footer }}