<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>

        <!-- ====================================================== -->
        <!-- 1. HOME PAGE (Inherits and Replaces Default Home)      -->
        <!-- ====================================================== -->
        <template id="custom_homepage" inherit_id="website.homepage" name="Chennora Homepage" priority="1000">
            <xpath expr="//div[@id='wrap']" position="replace">
                <t t-set="pop_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True), ('sale_ok', '=', True), ('is_popular_deal', '=', True), ('website_id', 'in', [False, website.id])], limit=10, order='website_sequence asc')"/>
                <div id="wrap" class="oe_structure">
    <section class="s_carousel_wrapper" data-vxml="001" data-snippet="s_carousel" data-name="Carousel">
        <div class="s_carousel carousel s_carousel_rounded slide" data-bs-interval="10000" id="myCarouselChennora" data-bs-ride="carousel">
            
            <ol class="carousel-indicators o_we_no_overlay">
                <li data-bs-target="#myCarouselChennora" class="active" data-bs-slide-to="0" aria-current="true"/>
                <li data-bs-target="#myCarouselChennora" data-bs-slide-to="1"/>
                <li data-bs-target="#myCarouselChennora" data-bs-slide-to="2"/>
              </ol>
            
            <div class="carousel-inner">
                
                <!-- Slide 1 -->
                <div class="carousel-item o_colored_level pt256 pb256 active oe_img_bg o_bg_img_center" style="background-color: #04121D; background-image: url('/dine360_theme_chennora/static/src/img/chen-banner-2.webp'); min-height: 85vh; background-size: cover; background-position: center;" data-name="Slide">
                    <div class="container">
                        <!-- Target format SVG Floating Shapes -->
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_3.svg" class="hero-half-tomato-left d-none d-lg-block" alt="Half Tomato"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_5.svg" class="hero-sketches-left d-none d-lg-block" alt="Sketches"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_4.svg" class="hero-lettuce-left d-none d-lg-block" alt="Lettuce"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_1.svg" class="hero-tomato-right d-none d-lg-block" alt="Tomato Slice"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_2.svg" class="hero-leaf-right d-none d-lg-block" alt="Leaf"/>
                        
                        <div class="row align-items-center">
                            <div class="col-lg-6 o_colored_level o_animate o_anim_fade_in_up">
                                <h6 style="color: #2BB1A5; font-weight: 700; letter-spacing: 2px;">WELCOME TO CHENNORA</h6>
                                <h1 class="display-3-fs" style="color: white; font-weight: 800; font-size: 4rem; line-height: 1.1; margin-bottom: 25px;">Flavors Of India In Brampton</h1>
                                <div class="mt-5">
                                    <a href="/shop" class="btn btn-lg flat" style="background-color: #FECD4F; color: black; font-weight: 700; padding: 12px 35px; border-radius: 0; text-transform: uppercase;">ORDER NOW <span class="fa fa-long-arrow-right ms-2"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div class="carousel-item o_colored_level pt256 pb256 oe_img_bg o_bg_img_center" style="background-color: #04121D; background-image: url('/dine360_theme_chennora/static/src/img/chen-banner-3.webp'); min-height: 85vh; background-size: cover; background-position: center;" data-name="Slide">
                    <div class="container">
                        <!-- Target format SVG Floating Shapes -->
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_3.svg" class="hero-half-tomato-left d-none d-lg-block" alt="Half Tomato"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_5.svg" class="hero-sketches-left d-none d-lg-block" alt="Sketches"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_4.svg" class="hero-lettuce-left d-none d-lg-block" alt="Lettuce"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_1.svg" class="hero-tomato-right d-none d-lg-block" alt="Tomato Slice"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_2.svg" class="hero-leaf-right d-none d-lg-block" alt="Leaf"/>
                        
                        <div class="row align-items-center">
                            <div class="col-lg-6 o_colored_level o_animate o_anim_fade_in_up">
                                <h6 style="color: #FECD4F; font-weight: 700; letter-spacing: 2px;">AUTHENTIC TASTE</h6>
                                <h1 class="display-3-fs" style="color: white; font-weight: 800; font-size: 4rem; line-height: 1.1; margin-bottom: 25px;">Traditional South Indian Cuisine</h1>
                                <div class="mt-5">
                                    <a href="/shop" class="btn btn-lg flat" style="background-color: #2BB1A5; color: white; font-weight: 700; padding: 12px 35px; border-radius: 0; text-transform: uppercase;">ORDER NOW <span class="fa fa-long-arrow-right ms-2"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slide 3 (Was 2, swapped to maintain balance) -->
                <div class="carousel-item o_colored_level pt256 pb256 oe_img_bg o_bg_img_center" style="background-color: #04121D; background-image: url('/dine360_theme_chennora/static/src/img/chen-banner-1.webp'); min-height: 85vh; background-size: cover; background-position: center;" data-name="Slide">
                    <div class="container">
                        <!-- Target format SVG Floating Shapes -->
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_3.svg" class="hero-half-tomato-left d-none d-lg-block" alt="Half Tomato"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_5.svg" class="hero-sketches-left d-none d-lg-block" alt="Sketches"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_4.svg" class="hero-lettuce-left d-none d-lg-block" alt="Lettuce"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_1.svg" class="hero-tomato-right d-none d-lg-block" alt="Tomato Slice"/>
                        <img src="https://chennora.metatronnest.com/assets/img/shape/bannerShape2_2.svg" class="hero-leaf-right d-none d-lg-block" alt="Leaf"/>
                        <div class="row align-items-center">
                            <div class="col-lg-6 o_colored_level o_animate o_anim_fade_in_up">
                                <h6 style="color: #2BB1A5; font-weight: 700; letter-spacing: 2px;">EXPERIENCE QUALITY</h6>
                                <h1 class="display-3-fs" style="color: white; font-weight: 800; font-size: 4rem; line-height: 1.1; margin-bottom: 25px;">Best Indian Food Experience</h1>
                                <div class="mt-5">
                                    <a href="/shop" class="btn btn-lg flat" style="background-color: #FECD4F; color: black; font-weight: 700; padding: 12px 35px; border-radius: 0; text-transform: uppercase;">ORDER NOW <span class="fa fa-long-arrow-right ms-2"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
            <a class="carousel-control-prev o_not_editable o_we_no_overlay" role="img" aria-label="Previous" title="Previous" href="#myCarouselChennora" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"/>
                <span class="visually-hidden o_default_snippet_text">Previous</span>
            </a>
            <a class="carousel-control-next o_not_editable o_we_no_overlay" role="img" aria-label="Next" title="Next" href="#myCarouselChennora" data-bs-slide="next">
                <span class="carousel-control-next-icon"/>
                <span class="visually-hidden o_default_snippet_text">Next</span>
            </a>
        </div>
    </section>    
    <section class="s_premium_cards_section pt48 o_colored_level" data-snippet="s_premium_cards" data-name="Premium Cards" style="background-color: rgb(244, 241, 234);">
        <div class="container-fluid">
            <div class="row row-cols-1 row-cols-lg-3 g-4">
                <!-- Card 1 -->
                <div class="col o_colored_level o_animate o_anim_fade_in_up" data-name="Card 1">
                    <div class="card h-100 border-0 shadow-lg" style="background-color: #04121D; color: white; border-radius: 12px; overflow: hidden; transition: transform .3s ease;">
                        <div class="d-flex align-items-center p-4">
                            <div class="flex-grow-1">
                                <h6 style="font-size: 11px; font-weight: 700; color: #FECD4F; letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase;">MUST-TRY DELIGHT</h6>
                                <h2 class="h4 fw-bold mb-2" style="color: white;">CRISPY GOBI 65</h2>
                                <p class="small mb-4 text-white-50">Irresistible South Indian Appetizer</p>
                                <a href="/shop" class="btn btn-sm" style="background-color: #FECD4F; color: black; font-weight: 700; border-radius: 4px; padding: 8px 20px; text-transform: uppercase; font-size: 11px;">ORDER NOW</a>
                            </div>
                            <div class="ms-3 flex-shrink-0">
                                <img src="/dine360_theme_chennora/static/src/img/crispy-gobi-65.png" style="width: 250px; height: 250px; object-fit: cover;" class="img-fluid" alt="Crispy Gobi 65"/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="col o_colored_level o_animate o_anim_fade_in_up" style="animation-delay: 0.2s;" data-name="Card 2">
                    <div class="card h-100 border-0 shadow-lg" style="background-color: #04121D; color: white; border-radius: 12px; overflow: hidden; transition: transform .3s ease;">
                        <div class=" d-flex align-items-center p-4">
                            <div class="flex-grow-1">
                                <h6 style="font-size: 11px; font-weight: 700; color: #FECD4F; letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase;">STAY TUNED</h6>
                                <h2 class="h4 fw-bold mb-2" style="color: white;">UNLIMITED THALI</h2>
                                <p class="small mb-4 text-white-50">Coming Soon</p>
                                <a href="/shop" class="btn btn-sm" style="background-color: #FECD4F; color: black; font-weight: 700; border-radius: 4px; padding: 8px 20px; text-transform: uppercase; font-size: 11px;">ORDER NOW</a>
                            </div>
                            <div class="ms-3 flex-shrink-0">
                                <img src="/dine360_theme_chennora/static/src/img/unlimited-thali.png" style="width: 250px; height: 250px; object-fit: cover;" class="img-fluid" alt="Unlimited Thali"/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="col o_colored_level o_animate o_anim_fade_in_up" style="animation-delay: 0.4s;" data-name="Card 3">
                    <div class="card h-100 border-0 shadow-lg" style="background-color: #04121D; color: white; border-radius: 12px; overflow: hidden; transition: transform .3s ease;">
                        <div class="d-flex align-items-center p-4">
                            <div class="flex-grow-1">
                                <h6 style="font-size: 11px; font-weight: 700; color: #FECD4F; letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase;">COASTAL CRAVINGS</h6>
                                <h2 class="h4 fw-bold mb-2" style="color: white;">FIERY FISH CURRY</h2>
                                <p class="small mb-4 text-white-50">Ocean-Spiced Perfection</p>
                                <a href="/shop" class="btn btn-sm" style="background-color: #FECD4F; color: black; font-weight: 700; border-radius: 4px; padding: 8px 20px; text-transform: uppercase; font-size: 11px;">ORDER NOW</a>
                            </div>
                            <div class="ms-3 flex-shrink-0">
                                <img src="/dine360_theme_chennora/static/src/img/fiery-fish-curry.png" style="width: 250px; height: 250px; object-fit: cover;" class="img-fluid" alt="Fiery Fish Curry"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- New Banner Below 3 Card Section -->
    <!-- <section class="s_banner pt96 pb96 o_colored_level" data-snippet="s_banner" data-name="Promo Banner" style="background-image: url('/dine360_theme_chennora/static/src/img/chen-banner-2.webp'); background-size: cover; background-position: center; position: relative;">
        <div class="o_we_bg_filter bg-black-50"/>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7 o_colored_level">
                    <h6 style="color: #FECD4F; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">Experience the Taste of India</h6>
                    <h2 class="display-4" style="color: white; font-weight: 800; line-height: 1.2; margin-top: 15px;">Authentic South Indian Flavors in Brampton</h2>
                    <p class="lead mt-4" style="color: white; opacity: 0.9;">We serve the most delicious and traditional Indian dishes made with passion and fresh ingredients. Visit us today for a truly aromatic experience!</p>
                    <div class="mt-5">
                        <a href="/shop" class="btn btn-lg flat" style="background-color: #2BB1A5; color: white; font-weight: 700; padding: 15px 40px; border-radius: 0; text-transform: uppercase;">ORDER ONLINE NOW <span class="fa fa-long-arrow-right ms-2"/></a>
                    </div>
                </div>
            </div>
        </div>
    </section> -->
    <!-- Premium About Section -->
    <section class="s_about_premium o_colored_level pt96 pb96" data-snippet="s_about_premium" data-name="Premium About">
        <!-- Floating Elements -->
        <img src="/dine360_theme_chennora/static/src/img/about-lemon.png" class="floating-lemon d-none d-lg-block" alt=""/>
        <img src="/dine360_theme_chennora/static/src/img/about-leaves.png" class="floating-leaves d-none d-lg-block" alt=""/>
        <img src="/dine360_theme_chennora/static/src/img/about-bellpepper.png" class="floating-bellpepper d-none d-lg-block" alt=""/>

        <div class="container">
            <div class="row align-items-center">
                <!-- Left Image Side -->
                <div class="col-lg-6 mb-5 mb-lg-0 o_colored_level">
                    <div class="about-image-wrapper o_animate o_anim_fade_in">
                        <img src="/dine360_theme_chennora/static/src/img/about-platter.png" class="img img-fluid mx-auto" alt="South Indian Food Platter"/>
                    </div>
                </div>

                <!-- Right Content Side -->
                <div class="col-lg-6 ps-lg-5 o_colored_level">
                    <div class="about-content">
                        <h6 class="d-flex align-items-center mb-3" style="color: #2BB1A5; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                            <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
                            ABOUT US
                            <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
                        </h6>
                        <h2 class="display-4 fw-bold mb-4" style="color: #04121D; line-height: 1.2;">Experience Authentic South Indian Flavors</h2>
                        <p class="text-muted mb-5" style="font-size: 16px; line-height: 1.8;">
                           Welcome to Chennora – one of the best Indian restaurants in Brampton! We proudly serve authentic South Indian dishes, mouth-watering dosas, rich biryanis, and delicious curries made with traditional spices. If you're searching for "Indian restaurant Brampton" or "best dosa in Brampton," your search ends here. Visit us today and experience the vibrant flavors of India, right here in Brampton, Ontario.
                        </p>

                        <!-- Feature Boxes -->
                        <div class="row mb-5">
                            <div class="col-sm-6 mb-4 mb-sm-0">
                                <div class="feature-item">
                                    <div class="feature-icon-wrapper">
                                        <img src="https://chennora.com/assets/img/icon/about-icon1-1.svg" class="img-fluid" alt=""/>
                                    </div>
                                    <div class="feature-text">
                                        <h5>Super Quality Food</h5>
                                        <p>Where tradition meets taste, and every meal feels like home.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="feature-item">
                                    <div class="feature-icon-wrapper">
                                        <img src="https://chennora.com/assets/img/icon/about-icon1-2.svg" class="img-fluid" alt=""/>
                                    </div>
                                    <div class="feature-text">
                                        <h5>Qualified Chef</h5>
                                        <p>Skilled hands create vibrant dishes, served with heartfelt hospitality.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- CTA Button -->
                        <div class="pt-2">
                            <a href="/about" class="btn btn-lg flat d-inline-flex align-items-center" style="background-color: #FECD4F; color: #04121D; font-weight: 700; padding: 15px 35px; border-radius: 5px; text-transform: uppercase; font-size: 14px; border: none;">
                                ABOUT US <i class="fa fa-long-arrow-right ms-2"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Why Choose Chennora Section -->
    <section class="s_why_choose_premium o_colored_level pt96 pb96" data-snippet="s_why_choose_premium" data-name="Why Choose Premium">
        <!-- Floating Accents -->
        <img src="/dine360_theme_chennora/static/src/img/choose-left-accent.png" class="choose-left-accent d-none d-lg-block" alt=""/>
        <img src="/dine360_theme_chennora/static/src/img/choose-right-accent.png" class="choose-right-accent d-none d-lg-block" alt=""/>
        <img src="/dine360_theme_chennora/static/src/img/choose-pepper-float.png" class="choose-pepper-float d-none d-lg-block o_animate o_anim_fade_in" alt=""/>

        <div class="container">
            <div class="row align-items-center">
                <!-- Left Content -->
                <div class="col-lg-6 mb-5 mb-lg-0 o_colored_level choose-content">
                    <h6 class="mb-2" style="color: #FECD4F; font-size: 14px; text-transform: uppercase;">Fresh &amp; Flavorful</h6>
                    <h2 class="display-3 fw-bold text-white mb-4">WHY CHOOSE CHENNORA?</h2>
                    <p class="text-white mb-5" style="font-size: 15px; opacity: 0.85;">
                        At Chennora, we blend traditional Indian cooking techniques with the freshest local ingredients. Rated among the top Indian restaurants in Brampton, we offer a fine dining experience perfect for families, food lovers, and anyone craving real Indian flavors. From crispy dosas to flavorful biryanis, every dish reflects our passion for Indian cuisine. Discover why we're considered one of the best Indian restaurants near Brampton Downtown.
                    </p>
                    
                    <div class="pt-2">
                        <a href="/shop" class="btn btn-lg flat d-inline-flex align-items-center" style="background-color: #FECD4F; color: #04121D; font-weight: 800; padding: 15px 40px; border-radius: 4px; text-transform: uppercase; font-size: 13px; border: none;">
                            ORDER NOW <span class="fa fa-long-arrow-right ms-3" style="background: #04121D; color: #FECD4F; padding: 5px; border-radius: 2px; font-size: 10px;"/>
                        </a>
                    </div>
                </div>

                <!-- Right Image -->
                <div class="col-lg-6 o_colored_level">
                    <div class="choose-main-dish-wrapper text-center o_animate o_anim_zoom_in">
                        <img src="/dine360_theme_chennora/static/src/img/choose-main-dish.png" class="img img-fluid" alt="Signature Fried Rice"/>
                    </div>
                </div>
            </div>
        </div>
    </section>    <section class="s_title o_colored_level pb24 pt64" data-vcss="001" data-snippet="s_title" data-name="Title" style="background-color: rgb(244, 241, 234); background-image: none;">
        <div class="s_allow_columns container">
            <h6 style="text-align: center;">
                <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" loading="lazy"/>
                <span style="color: rgb(43, 177, 165); font-weight: 700; letter-spacing: 2px;">POPULAR DISHES</span>
                <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" loading="lazy"/>
            </h6>
            <h2 class="display-4 fw-bold" style="text-align: center; color: #04121D;">Our Feature Category</h2>
        </div>
    </section>

    <!-- Category Slider Section -->
    <section class="s_category_slider o_colored_level" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: rgb(244, 241, 234);">
        <t t-set="shop_categories" t-value="request.env['product.public.category'].sudo().search([('website_id', 'in', [False, website.id]), ('parent_id', '=', False)], order='sequence asc')"/>
        <div class="container-fluid overflow-hidden">
            <div class="category-track d-flex flex-nowrap">
                <t t-foreach="shop_categories" t-as="categ">
                    <div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
                        <a t-attf-href="/shop?category=#{categ.id}" class="d-block text-decoration-none p-2">
                            <div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
                                <img t-att-src="website.image_url(categ, 'image_1920')" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" t-att-alt="categ.name" loading="lazy"/>
                            </div>
                            <h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;" t-field="categ.name"/>
                            <small class="text-muted"><t t-esc="categ.product_tmpl_ids and len(categ.product_tmpl_ids) or 0"/>+ Varieties</small>
                        </a>
                    </div>
                </t>
            </div>
        </div>
    </section>

    <!-- Marquee Text Section -->
    <section class="quee-container o_colored_level" data-snippet="s_marquee" data-name="Marquee Text">
        <div class="quee-content">
            <h1>DRY/SEMI-DRY &amp;nbsp; INDO-CHINESE RICE &amp;amp; NOODLES &amp;nbsp; AUTHENTIC BIRIYANI &amp;nbsp; TRADITIONAL CURRIES &amp;nbsp; </h1>
            <h1>DRY/SEMI-DRY &amp;nbsp; INDO-CHINESE RICE &amp;amp; NOODLES &amp;nbsp; AUTHENTIC BIRIYANI &amp;nbsp; TRADITIONAL CURRIES &amp;nbsp; </h1>
        </div>
    </section>    <section class="s_title o_colored_level pt64 pb0" data-vcss="001" data-snippet="s_title" data-name="Title" style="background-color: white;">
        <div class="s_allow_columns container">
            <h6 style="text-align: center;">
                <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" loading="lazy"/>
                <span style="color: rgb(43, 177, 165); font-weight: 700; letter-spacing: 2px;">POPULAR DISHES</span>
                <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" loading="lazy"/>
            </h6>
            <h2 class="display-4 fw-bold" style="text-align: center; color: #04121D;">Our Most Popular Deals</h2>
        </div>
    </section>

    <section class="s_popular_deals_premium o_colored_level pb80 pt32">
        <div class="container">
            <div class="row align-items-center">
                <!-- Left Deals -->
                <div class="col-lg-4">
                    <t t-foreach="pop_products[:5]" t-as="product">
                        <div t-attf-class="deal-item #{'active' if product_index == 0 else ''}" t-att-data-deal-img="website.image_url(product, 'image_1024')">
                            <div class="deal-img-wrapper">
                                <img t-att-src="website.image_url(product, 'image_128')" t-att-alt="product.name" loading="lazy"/>
                            </div>
                            <div class="deal-details">
                                <h6 t-field="product.name"/>
                                <p t-field="product.description_sale"/>
                            </div>
                            <div t-attf-class="deal-price">
                                <span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
                            </div>
                        </div>
                    </t>
                </div>

                <!-- Center Large Image -->
                <div class="col-lg-4 text-center">
                    <div class="deal-center-image">
                        <t t-if="pop_products">
                            <img t-att-src="website.image_url(pop_products[0], 'image_1024')" id="dealCenterImg" class="img img-fluid" alt="Main Popular Dish" style="transition: opacity 0.3s ease-in-out;"/>
                        </t>
                        <t t-else="">
                            <img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" id="dealCenterImg" class="img img-fluid" alt="Main Popular Dish" style="transition: opacity 0.3s ease-in-out;"/>
                        </t>
                    </div>
                </div>

                <!-- Right Deals -->
                <div class="col-lg-4">
                    <t t-foreach="pop_products[5:10]" t-as="product">
                        <div class="deal-item" t-att-data-deal-img="website.image_url(product, 'image_1024')">
                            <div class="deal-img-wrapper">
                                <img t-att-src="website.image_url(product, 'image_128')" t-att-alt="product.name" loading="lazy"/>
                            </div>
                            <div class="deal-details">
                                <h6 t-field="product.name"/>
                                <p t-field="product.description_sale"/>
                            </div>
                            <div t-attf-class="deal-price">
                                <span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
                            </div>
                        </div>
                    </t>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Premium Testimonials Section -->
    <section class="s_testimonials_premium o_colored_level" data-snippet="s_testimonials_premium" data-name="Premium Testimonials">
        <div class="container-fluid p-0">
            <div class="row g-0 align-items-stretch">
                <!-- Left Video/Image Side -->
                <div class="col-lg-6 o_colored_level">
                    <div class="testimonial-main-image-wrapper h-100">
                        <img src="/dine360_theme_chennora/static/src/img/testimonial-main.jpg" class="img img-fluid h-100" alt="Cooking Video"/>
                        <!-- Video Play Button -->
                        <div class="video-btn-wrapper">
                            <a href="https://youtu.be/hqkleSxppB0?si=NyZJC4Ohk0mpxWjW" target="_blank" class="play-btn text-decoration-none">
                                <div class="play-icon">
                                    <i class="fa fa-play"/>
                                </div>
                                <div class="rotating-text text-white">
                                    <svg viewBox="0 0 100 100" width="150" height="150">
                                        <defs>
                                            <path id="circlePath" d="M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0 "/>
                                        </defs>
                                        <text font-size="8" font-weight="bold" fill="white">
                                            <textPath href="#circlePath">
                                                PLAY VIDEO &#8226; PLAY VIDEO &#8226; PLAY VIDEO &#8226; PLAY VIDEO &#8226; 
                                            </textPath>
                                        </text>
                                    </svg>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Right Content Side -->
                <div class="col-lg-6 testimonial-content-side d-flex flex-column justify-content-center">
                    <!-- Accent Image -->
                    <img src="/dine360_theme_chennora/static/src/img/testimonial-accent-right.png" class="testimonial-accent-right d-none d-lg-block" alt=""/>

                    <div class="content-wrapper ps-lg-5 pe-lg-5">
                        <h6 class="d-flex align-items-center mb-3" style="color: #2BB1A5; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                            <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
                            TESTIMONIALS
                            <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
                        </h6>
                        <h2 class="display-4 fw-bold text-white mb-4">What Our Clients Say</h2>
                        
                        <!-- Google Reviews Branding -->
                        <div class="google-reviews-info mb-5">
                            <img src="https://www.vectorlogo.zone/logos/google/google-ar21.svg" class="google-reviews-logo" alt="Google" style=" height: 80px; margin-bottom: 5px;"/>
                            <div class="stars" style="color: #FECD4F; font-size: 14px;">
                                Reviews 
                                <i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
                            </div>
                        </div>

                        <!-- Testimonial Slider -->
                        <div id="testimonialCarousel" class="carousel slide testimonial-carousel" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <p>"Authentic South Indian flavor right here in Brampton! The biryani was fragrant and the dosa was perfectly crispy. Definitely our new favorite spot for Indian food."</p>
                                    <div class="author-info d-flex align-items-center mt-4">
                                        <div class="ms-0">
                                            <h6 class="text-white fw-bold mb-0">Arun Kumar</h6>
                                            <small class="text-white-50">Local Guide</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <p>"Amazing hospitality and even better food. The Chicken Kothu is a must-try. The staff is very friendly and the atmosphere is vibrant and welcoming."</p>
                                    <div class="author-info d-flex align-items-center mt-4">
                                        <div class="ms-0">
                                            <h6 class="text-white fw-bold mb-0">Sarah Thompson</h6>
                                            <small class="text-white-50">Regular Customer</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Custom Controls -->
                            <div class="testimonial-controls">
                                <button class="control-btn" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
                                    <i class="fa fa-arrow-left"/>
                                </button>
                                <button class="control-btn next-btn" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
                                    <i class="fa fa-arrow-right"/>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Premium FAQ Section -->
    <section class="s_faq_premium o_colored_level pt80 pb80" data-snippet="s_faq_premium" data-name="Premium FAQ">
        <div class="container">
            <div class="row">
                <!-- Left: FAQ Accordion -->
                <div class="col-lg-6">
                    <h6 class="d-flex align-items-center mb-3" style="color: #2BB1A5; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                        <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
                        CHENNORA
                        <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
                    </h6>
                    <h2 class="display-4 fw-bold mb-5" style="color: #04121D;">Frequently Asked Questions</h2>
                    
                    <div class="accordion faq-accordion" id="faqAccordionPremium">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    Why Chennora Is The Best Indian Restaurant In Brampton?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordionPremium">
                                <div class="accordion-body">
                                    Chennora is rated among the best Indian restaurants in Brampton, offering authentic South Indian flavors, traditional curries, biryanis, and a warm dining atmosphere.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    Does Chennora Offer South Indian Food In Brampton?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordionPremium">
                                <div class="accordion-body">
                                    Yes, we specialize in authentic South Indian cuisine, including a wide variety of Dosas, Idlis, and our famous Kothu Parottas.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    What Are The Best Indian Restaurants In Brampton?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordionPremium">
                                <div class="accordion-body">
                                    Chennora is widely considered a top choice for those looking for genuine Indian flavors, prepared with fresh ingredients and traditional recipes.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right: Image Slider & Button -->
                <div class="col-lg-6 text-center ps-lg-5">
                    <div id="faqCarouselPremium" class="carousel slide faq-carousel-wrapper" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="/dine360_theme_chennora/static/src/img/faq-slide-1.png" class="d-block w-100" alt="FAQ Slide 1"/>
                            </div>
                            <div class="carousel-item">
                                <img src="/dine360_theme_chennora/static/src/img/faq-slide-2.png" class="d-block w-100" alt="FAQ Slide 2"/>
                            </div>
                            <div class="carousel-item">
                                <img src="/dine360_theme_chennora/static/src/img/faq-slide-3.png" class="d-block w-100" alt="FAQ Slide 3"/>
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#faqCarouselPremium" data-bs-slide="prev">
                            <span class="fa fa-chevron-left"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#faqCarouselPremium" data-bs-slide="next">
                            <span class="fa fa-chevron-right"></span>
                        </button>
                    </div>
                    
                    <a href="/about" class="know-more-btn">
                        Know More <span><i class="fa fa-arrow-right"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </section>
        <!-- Premium Blog Section -->
    <section class="s_blog_premium o_colored_level pt80 pb80" data-snippet="s_blog_premium" data-name="Premium Blog">
        <t t-set="latest_blogs" t-value="website.get_recent_blogs(3)"/>
        <!-- Floating Accent -->
        <img src="/dine360_theme_chennora/static/src/img/french-fries-accent.png" class="fries-accent d-none d-lg-block" alt=""/>

        <div class="container">
            <!-- Header -->
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h6 class="d-flex align-items-center justify-content-center mb-3" style="color: #2BB1A5; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
                        <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
                        LATEST BLOG
                        <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
                    </h6>
                    <h2 class="display-4 fw-bold" style="color: #04121D;">Latest News &amp; Articles</h2>
                </div>
            </div>

            <div class="row g-4 d-flex align-items-stretch">
                <t t-foreach="latest_blogs" t-as="blog">
                    <div class="col-lg-4">
                        <div class="blog-card">
                            <div class="blog-img-wrapper">
                                <img t-att-src="blog.get('image')" t-att-alt="blog.get('title')"/>
                                <div class="date-badge">
                                    <span t-esc="blog.get('day')"/>
                                    <span t-esc="blog.get('month')"/>
                                </div>
                            </div>
                            <div class="blog-body">
                                <span class="category-line" t-esc="'Category: ' + blog.get('category')"/>
                                <h4><a t-attf-href="/blog/#{blog.get('slug')}" class="text-decoration-none" style="color: inherit;" t-esc="blog.get('title')"/></h4>
                                <p class="blog-excerpt" t-esc="blog.get('excerpt')"/>
                                <a t-attf-href="/blog/#{blog.get('slug')}" class="btn-link text-decoration-none fw-bold mt-2 d-inline-block" style="color: #2BB1A5; font-size: 14px;">Read More</a>
                            </div>
                        </div>
                    </div>
                </t>
            </div>

            <!-- Bottom Button -->
            <div class="row mt-5">
                <div class="col-12 text-center">
                    <a href="/blog" class="know-more-btn">
                        Know More <span><i class="fa fa-arrow-right"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- Premium Auto-Sliding Gallery Section -->
    <section class="s_gallery_slider_premium o_colored_level" data-snippet="s_gallery_slider_premium" data-name="Premium Gallery Slider">
        <div class="gallery-track">
            <!-- Set 1 -->
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/gallery-1.png" alt="Gallery 1"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/gallery-2.png" alt="Gallery 2"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/gallery-3.png" alt="Gallery 3"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" alt="Gallery 4"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" alt="Gallery 5"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/cat-curries.png" alt="Gallery 6"/></div>
            <!-- Duplicate for Seamless Loop -->
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/gallery-1.png" alt="Gallery 1"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/gallery-2.png" alt="Gallery 2"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/gallery-3.png" alt="Gallery 3"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" alt="Gallery 4"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" alt="Gallery 5"/></div>
            <div class="gallery-item"><img src="/dine360_theme_chennora/static/src/img/cat-curries.png" alt="Gallery 6"/></div>
        </div>
    </section>

                </div>
            </xpath>
        </template>


      


        


        <!-- ====================================================== -->
        <!-- 4. SHOP PAGE                                            -->
        <!-- ====================================================== -->
        <!--
        <template id="custom_shop" inherit_id="website_sale.products" name="Chennora Shop">
            <xpath expr="//div[@id='wrap']" position="replace">
                <div id="wrap" class="oe_structure">
                     <section class="s_text_block pt80 pb80">
                        <div class="container">
                            <h1>Shop Page</h1>
                            <p>Paste your shop page code here.</p>
                        </div>
                    </section>
                </div>
            </xpath>
        </template>
        -->

    </data>
</odoo>

