<main>
    <div class="header-space container"></div>

    <!-- zoop stories -->
    <section class="story-section">
        <p class="text-ml story-header section-header">Zoop Stories</p>
        <div class="scrollable stories-container">
            <div class="scroller stories-content">
                <!-- render stories here -->
                <div class="story flex-column-center">
                    <div class="story-img flex-center">
                        <img src="/assets/restaurant/burger-king.png" alt="zoop logo image" />
                    </div>
                    <p class="text-sl">Zoop Web</p>
                </div>
            </div>
        </div>
    </section>

    <!-- zoop favorites -->
    <section class="favorites-section">
        <p class="text-ml fav-header section-header">Fav Restaurants</p>
        <div class="scrollable fav-container">
            <div class="scroller fav-content">
                <!-- render favorite restaurants here -->
                <a href="/restaurant" class="restaurant-sec fav flex">
                    <div class="restaurant-sec-img">
                        <img src="/assets/restaurant/kumar.png" alt="kumar logo image" />
                    </div>
                    <div class="restaurant-sec-details">
                        <p class="restaurant-sec-title text-normal">Kumar's Hotel</p>
                        <div class="restaurant-sec-rating-cuisine flex-sm">
                            <div class="restaurant-sec-rating flex-sm">
                                <img src="/assets/icons/star.svg" alt="star rating" />
                                <p class="restaurant-sec-rating-figure text-sm">4.5</p>
                            </div>
                            <p class="restaurant-sec-cuisine text-sm">Chinese</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- order again -->
    <section class="order-section">
        <p class="text-ml order-header section-header">Order Again</p>
        <div class="scrollable order-container">
            <div class="scroller order-content">
                <div class="order">
                    <div class="order-img">
                        <img src="/assets/restaurant/dish (1).png" alt="plate of biryani" />
                    </div>
                    <div class="order-details flex-column">
                        <div class="flex-column">
                            <p class="order-item text-normal">Meghana Foods</p>
                            <div class="flex">
                                <img src="/assets/icons/star.svg" alt="rating star" />
                                <p class="rating-figure text-sm">4.3</p>
                                <span class="span-space"></span>
                                <p class="text-sm">15-20 mins</p>
                                <span class="span-space"></span>
                                <p class="text-sm">2 item</p>
                            </div>
                        </div>
                        <a href="./pages/basket.html" class="order-link text-accent">Order Again</a>
                    </div>
                </div>
                <div class="order">
                    <div class="order-img">
                        <img src="/assets/restaurant/dish (3).png" alt="plate of biryani" />
                    </div>
                    <div class="order-details flex-column">
                        <div class="flex-column">
                            <p class="order-item text-normal">Al Beks Eaetery</p>
                            <div class="flex">
                                <img src="/assets/icons/star.svg" alt="rating star" />
                                <p class="rating-figure text-sm">4.3</p>
                                <span class="span-space"></span>
                                <p class="text-sm">15-20 mins</p>
                                <span class="span-space"></span>
                                <p class="text-sm">2 item</p>
                            </div>
                        </div>
                        <a href="./pages/basket.html" class="order-link text-accent">Order Again</a>
                    </div>
                </div>
                <div class="order">
                    <div class="order-img">
                        <img src="/assets/restaurant/dish (2).png" alt="plate of biryani" />
                    </div>
                    <div class="order-details flex-column">
                        <div class="flex-column">
                            <p class="order-item text-normal">Jumping Jack</p>
                            <div class="flex">
                                <img src="/assets/icons/star.svg" alt="rating star" />
                                <p class="rating-figure text-sm">4.3</p>
                                <span class="span-space"></span>
                                <p class="text-sm">15-20 mins</p>
                                <span class="span-space"></span>
                                <p class="text-sm">2 item</p>
                            </div>
                        </div>
                        <a href="./pages/basket.html" class="order-link text-accent">Order Again</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- all restaurants -->
    <section class="restaurant-section">
        <p class="text-ml restaurant-header section-header">
            All Restaurants
        </p>
        <div class="restaurant-container">
            <!-- restaurant sorting elements -->
            <div class="restaurant-sort flex-column">
                <div class="restaurant-sort-category pricing btn">
                    <div class="rect-sec pricing-btn flex-sm">
                        <img src="/assets/icons/sort.svg" alt="sort logo image" />
                        <p class="text-sl">Pricing</p>
                        <img class="pointer" src="/assets/icons/bottom-arrow.svg" alt="down arrow image" />
                    </div>
                    <div class="restaurant-sort-pricing">
                        <div class="pricing-filter flex-column">
                            <p class="restaurant-sorting text-sl">High to low</p>
                            <p class="restaurant-sorting text-sl">Low to high</p>
                        </div>
                        <div class="restaurant-sort-clear flex-center">
                            <p class="clear-text text-accent-sl">Clear filter</p>
                        </div>
                    </div>
                </div>
                <div class="rect-sec restaurant-sort-category nearest btn">
                    <p class="text-sl">Nearest</p>
                </div>
            </div>
            <div class="restaurant-content">
                <!-- render restaurants here -->
            </div>
        </div>
    </section>
</main>