<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO & Meta Tags -->
    <title>Christmas Recipe Calculator</title>
    <meta name="description" content="Create and calculate holiday recipe shopping lists. Enter a recipe for one, specify your number of guests, and get a shopping list for your Christmas feast. Built with Flatlogic Generator.">
    <meta name="keywords" content="recipe calculator, Christmas recipes, holiday cooking, shopping list generator, party food calculator, festive meals, cooking for a crowd, recipe scaler, Built with Flatlogic Generator">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Christmas Recipe Calculator">
    <meta property="og:description" content="Easily calculate shopping lists for your holiday recipes.">
    <meta property="og:image" content="">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Christmas Recipe Calculator">
    <meta name="twitter:description" content="Easily calculate shopping lists for your holiday recipes.">
    <meta name="twitter:image" content="">

    <!-- Styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">

</head>
<body>

    <div id="snow-container"></div>

    <!-- Christmas Trees -->
    <div class="christmas-tree-container left">
        <div class="tree">
            <div class="ornament o1"></div>
            <div class="ornament o2"></div>
            <div class="ornament o3"></div>
            <div class="ornament o4"></div>
            <div class="ornament o5"></div>
            <div class="ornament o6"></div>
        </div>
    </div>
    <div class="christmas-tree-container right">
        <div class="tree">
            <div class="ornament o1"></div>
            <div class="ornament o2"></div>
            <div class="ornament o3"></div>
            <div class="ornament o4"></div>
            <div class="ornament o5"></div>
            <div class="ornament o6"></div>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg navbar-dark shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="#">Recipe Calculator</a>
        </div>
    </nav>

    <main class="container my-5">
        <div class="text-center mb-5">
            <h1 class="display-4">Hey, it's Christmas time!</h1>
            <p class="lead">Let's get your holiday recipes sorted.</p>
        </div>

        <div class="row g-5">
            <!-- Left Column: Recipe Input -->
            <div class="col-lg-6">
                <div class="card p-4 shadow">
                    <h2 class="mb-4">Your Recipe</h2>
                    <form id="recipe-form">
                        <div class="mb-3">
                            <label for="recipeName" class="form-label">Recipe Name</label>
                            <input type="text" class="form-control" id="recipeName" placeholder="e.g., Gingerbread Cookies">
                        </div>
                        
                        <hr class="my-4 border-secondary">

                        <h3 class="h5 mb-3">Ingredients (for 1 person)</h3>
                        <div id="ingredients-container">
                            <!-- Ingredient rows will be injected here by JS -->
                        </div>
                        <button type="button" id="add-ingredient" class="btn btn-secondary btn-sm mt-2">+ Add Ingredient</button>
                        
                        <hr class="my-4 border-secondary">

                        <div class="mb-3">
                            <label for="guestCount" class="form-label">How many guests?</label>
                            <input type="number" class="form-control" id="guestCount" placeholder="e.g., 8" min="1">
                        </div>

                        <div class="d-grid gap-3 d-md-flex justify-content-md-start mt-4">
                            <button type="button" id="calculate-btn" class="btn btn-primary">Calculate Shopping List</button>
                            <button type="button" id="new-recipe-btn" class="btn btn-outline-secondary">New Recipe</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Right Column: Shopping List -->
            <div class="col-lg-6">
                <div class="card shadow">
                    <div class="card-body" id="shopping-list-container">
                         <div class="text-center text-muted p-5">
                            <h3 class="h4">Your Shopping List</h3>
                            <p>Your calculated list will appear here.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="my-5 border-secondary">

        <div class="row">
            <div class="col-12">
                <h2 class="text-center mb-4">Saved Recipes</h2>
                <div id="recipe-cards-container" class="row">
                    <div class="col-12">
                        <p class="text-center text-muted">Your saved recipes will appear here.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="text-center py-4 mt-5">
        <p class="mb-0">&copy; <?php echo date("Y"); ?> Christmas Recipe Calculator. Happy Holidays!</p>
    </footer>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>

</body>
</html>