<?php 
require_once APPS_PATH . '/Recipes/components.php';
the_header(
    'Welcome',
    "Discover delicious recipes using the ingredients you already have. Fridgebites helps you create tasty meals with what's in your fridge",
    'frontpage',
    [
        ['robots', 'nofollow, noindex'],
        ['keywords', 'recipes, ingredients, recipe finder, fridge, fridge recipe, leftover recipes']
    ]
);
?>
<div class="welcome">
    <div class="container">
        <div class="welcome__inner">
            <div class="text-container">
                <div class="quote">
                    <h2><span class="black-qoute-word">Your</span> Fridge.</h2>
                    <h2><span class="black-qoute-word">Your</span> Rules.</h2>
                    <h2><span class="black-qoute-word">Our</span> Recipes.</h2>
                </div>
                <p>Discover delicious recipes tailored to exactly what you have on hand — no extra shopping trips, no wasted food, just tasty meals made easy.</p>
            </div>
            <canvas id="food-3d"></canvas>
        </div>
    </div>
</div>

<div class="container">
    <div class="latest-recipes">
        <h2 class="title">Latest Recipes Added</h2>
        <!-- Slider main container -->
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->

                <?php foreach($context['latest_recipes'] as $recipe): ?>
                <div class="swiper-slide">
                    <a href="<?= $recipe->get_absolute_url() ?>" class="recent-recipe hover-anim">
                        <div class="recipe-img">
                            <img src="<?= $recipe->get_image_url() ?>" alt="Recipe 1" class="recipe-img__img">

                        </div>
                        <div class="recipe-info">
                            <p class="recipe-info__title"><?= $recipe->field_title ?></p>
                            <p class="recipe-info__meta"><i class="fa-solid fa-user"></i> <?= $recipe->author_username ?></p>
                        </div>
                    </a>
                </div>
                <?php endforeach; ?>

            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>


        </div>

    </div>
    <div class="categories">
        <h2 class="title">Categories</h2>

        <div class="swiper categories-swiper">
            <div class="swiper-wrapper">
                <?php foreach($context['categories'] as $cat): ?>
                <div class="swiper-slide">
                    <a href="<?= get_permalink('recipes:catalog') . '?category=' . $cat->get_id() ?>" class="category hover-anim">
                        <p class="category-title"><?= $cat->field_name ?></p>

                    </a>
                </div>
                <?php endforeach; ?>
            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

    </div>

    <div class="recent-reviews">
        <h2 class="title">Recent User Reviews</h2>
        <div class="reviews-grid">
            <?php foreach($context['reviews'] as $review): ?>
            <a href="<?php the_permalink('recipes:single', [$review->field_recipe_id]) ?>" class="recent-review hover-anim">
                <div class="review-title">
                    <div class="review-img">
                        <img src="<?= $review->get_recipe_image() ?>" alt="reviewed recipe">
                    </div>
                    <h3 class="review-title-text"><?= $review->recipe_title ?></h3>
                </div>
                <div class="review-text">
                    <p><?= $review->get_excerpt() ?></p>
                </div>
                <div class="review-meta meta">
                    <p class="review-author"><i class="fa-solid fa-user"></i> <?= $review->author_username ?></p>
                    <p class="review-date"><i class="fa-solid fa-calendar-days"></i> <?= $review->get_date() ?></p>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
    <?php if(CURRENT_USER): ?>
    <?php if($context['usermenu_recipe_prefetch']): ?>
    <div class="daily-meals">
        <h2 class="title">Your Menu for <?= date("l"); ?></h2>
        <div class="daily-meals-grid">
            <?php 
                foreach ($context['usermenu_recipe_prefetch'] as $recipe_pref) {
                    the_product_recipes_item($recipe_pref['origin'], $recipe_pref['relations']);
                }
            ?>
        </div>
    </div>
    <?php else: ?>
    <div class="daily-meals">
        <h2 class="title">No meals added for <?= date("l"); ?></h2>
        <p class="no-daily-meals-msg">You have not added any recipes for <?= date("l");?>, please go to the catalog and add recipes.</p>
    </div>
    <?php endif; ?>
    <?php endif; ?>

</div>

<script type="importmap">
    {
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@v0.149.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.149.0/examples/jsm/"
  }
}
</script>
<script type="module" src="<?= ASSETS_PATH . '/js/threejs-scene.js' ?>"></script>


<?php the_footer(array(
    ASSETS_PATH . '/swiper/swiper-bundle.min.js',
    ASSETS_PATH . '/js/index.js',
)); ?>