<!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>FoodieFlow — An AI-powered flow from recipe to grocery</title>
    <meta name="description" content="FoodieFlow — An AI-powered flow from recipe to grocery — every day, every occasion. Manage recipes, create smart shopping lists, and optimize your grocery budget with AI.">
    <meta name="keywords" content="FoodieFlow, recipe manager, shopping list, AI recipe scanner, cooking organizer, meal planner">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="FoodieFlow — An AI-powered flow from recipe to grocery">
    <meta property="og:description" content="Manage recipes and create smart shopping lists. An AI-powered flow from recipe to grocery — every day, every occasion.">
    <meta property="og:image" content="">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="FoodieFlow — An AI-powered flow from recipe to grocery">
    <meta name="twitter:description" content="An AI-powered flow from recipe to grocery — every day, every occasion.">
    <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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v16">

</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top mb-4">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <i class="bi bi-flow me-2" style="color: var(--brand-primary);"></i>
                <span class="fw-bold">FoodieFlow</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center" id="auth-nav">
                    <!-- Auth items will be inserted here -->
                    <li class="nav-item">
                        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="guest-view" class="d-none auth-screen">
        <div class="container-fluid h-100 p-0">
            <div class="row h-100 g-0">
                <!-- Left Column: Video & Description -->
                <div class="col-lg-6 d-none d-lg-block auth-image-container">
                    <video autoplay muted loop playsinline class="auth-background-video">
                        <source src="assets/images/auth-video.mp4" type="video/mp4">
                    </video>
                    <div class="auth-image-overlay d-flex align-items-center justify-content-center p-5 text-white">
                        <div class="auth-branding-content position-relative overflow-hidden">
                            <!-- Floating decorative emojis with animation -->
                            <div class="position-absolute floating-emoji" style="top: 8%; right: 10%; font-size: 3rem; --rotate: 15deg;">🥑</div>
                            <div class="position-absolute floating-emoji" style="bottom: 12%; left: 8%; font-size: 3.5rem; --rotate: -15deg; animation-delay: 1s;">🛍️</div>
                            <div class="position-absolute floating-emoji" style="top: 35%; left: 5%; font-size: 2.5rem; --rotate: -20deg; animation-delay: 2s;">🥖</div>
                            <div class="position-absolute floating-emoji" style="bottom: 25%; right: 5%; font-size: 2rem; --rotate: 10deg; animation-delay: 1.5s;">🥗</div>
                            
                            <div class="text-center mb-4 position-relative">
                                <h1 class="display-3 fw-bold mb-2 text-white" style="letter-spacing: -2px;">FoodieFlow</h1>
                                <p class="lead px-4 text-white opacity-75">An AI-powered flow from recipe to grocery — every day, every occasion</p>
                            </div>
                            
                            <div class="feature-list mt-4 text-start position-relative">
                                <div class="d-flex mb-3 align-items-center transition-all feature-item">
                                    <span class="checkmark">✓</span>
                                    <h5 class="mb-0">AI Recipes from Photos</h5>
                                </div>
                                <div class="d-flex mb-3 align-items-center transition-all feature-item">
                                    <span class="checkmark">✓</span>
                                    <h5 class="mb-0">Smart Shopping Lists</h5>
                                </div>
                                <div class="d-flex mb-3 align-items-center transition-all feature-item">
                                    <span class="checkmark">✓</span>
                                    <h5 class="mb-0">AI Recipe Flow on Laptop</h5>
                                </div>
                                <div class="d-flex mb-3 align-items-center transition-all feature-item">
                                    <span class="checkmark">✓</span>
                                    <h5 class="mb-0">Smart Budget Calculator</h5>
                                </div>
                                <div class="d-flex align-items-center transition-all feature-item">
                                    <span class="checkmark">✓</span>
                                    <h5 class="mb-0">Expense Control & Splitting</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right Column: Forms -->
                <div class="col-lg-6 d-flex align-items-center justify-content-center p-5 bg-white auth-form-container">
                    <div class="w-100" style="max-width: 450px;">
                        
                        <!-- Login Form -->
                        <div id="login-container">
                            <div class="mb-5">
                                <h2 class="display-5 mb-2">Welcome back!</h2>
                                <p class="text-muted">Log in to access your recipes.</p>
                            </div>
                            <form id="login-form-landing">
                                <div class="mb-4">
                                    <label class="form-label">Email address</label>
                                    <input type="email" class="form-control form-control-lg" name="email" placeholder="name@example.com" required>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label">Password</label>
                                    <input type="password" class="form-control form-control-lg" name="password" placeholder="••••••••" required>
                                </div>
                                <div class="d-grid gap-2 mb-4">
                                    <button type="submit" class="btn btn-primary btn-lg">Log In</button>
                                </div>
                            </form>
                            <p class="text-center text-muted">
                                Don't have an account? <a href="#" id="show-register" class="text-primary fw-bold text-decoration-none">Create account</a>
                            </p>
                        </div>

                        <!-- Register Form -->
                        <div id="register-container" class="d-none">
                            <div class="mb-5">
                                <h2 class="display-5 mb-2">Create account</h2>
                                <p class="text-muted">Start your smart culinary journey today.</p>
                            </div>
                            <form id="register-form-landing">
                                <div class="mb-4">
                                    <label class="form-label">Email address</label>
                                    <input type="email" class="form-control form-control-lg" name="email" placeholder="name@example.com" required>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label">Password</label>
                                    <input type="password" class="form-control form-control-lg" name="password" placeholder="••••••••" required>
                                </div>
                                <div class="d-grid gap-2 mb-4">
                                    <button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
                                </div>
                            </form>
                            <p class="text-center text-muted">
                                Already have an account? <a href="#" id="show-login" class="text-primary fw-bold text-decoration-none">Log in here</a>
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="app-view" class="d-none">
        <main class="container my-5">
            <div class="text-center mb-5" style="padding-top: 20px;">
                <h1 class="display-4 mt-4">FoodieFlow</h1>
                <p class="lead">An AI-powered flow from recipe to grocery — every day, every occasion</p>
            </div>

            <div class="row g-4">
                <!-- Left Column: All Recipes -->
                <div class="col-md-6">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="text-center mb-0">All Recipes</h2>
                        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#recipe-form-modal">
                            Add recipe
                        </button>
                    </div>
                    <div class="mb-3 search-container">
                        <i class="bi bi-search"></i>
                        <input type="text" id="recipe-search" class="form-control" placeholder="Search recipes...">
                    </div>
                    <div class="mb-3 d-flex flex-wrap gap-2" id="category-filters">
                        <button class="btn btn-secondary active" data-category="all">All</button>
                        <button class="btn btn-outline-secondary" data-category="Drinks">Drinks</button>
                        <button class="btn btn-outline-secondary" data-category="Breakfast">Breakfast</button>
                        <button class="btn btn-outline-secondary" data-category="Dinner">Lunch/Dinner</button>
                        <button class="btn btn-outline-secondary" data-category="Appetizers">Appetizers</button>
                        <button class="btn btn-outline-secondary" data-category="No category">No category</button>
                    </div>
                    <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>

                <!-- Right Column: Shopping List / Products -->
                <div class="col-md-6">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2 class="text-center mb-0">Shopping list</h2>
                        <div>
                            <button id="add-product-btn" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#add-product-modal">Add product</button>
                            <button id="print-shopping-list-btn" class="btn btn-outline-secondary"><i class="bi bi-printer"></i> Print</button>
                        </div>
                    </div>
                    <div class="card shadow">
                        <div class="card-body" id="shopping-list-container">
                             <div class="text-center text-muted p-5">
                                <p>Your grocery list will appear here.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Modal Recipe Form -->
    <div class="modal fade" id="recipe-form-modal" tabindex="-1" aria-labelledby="recipe-form-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="recipe-form-modal-label">Add recipe</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card p-4 shadow">
                        <form id="recipe-form">
                            <input type="hidden" id="recipeId">
                            <div class="mb-3">
                                <label for="recipeName" class="form-label">Recipe name</label>
                                <input type="text" class="form-control" id="recipeName" placeholder="e.g. Avocado toast">
                            </div>
                            <div class="mb-3">
                                <label for="recipeCategory" class="form-label">Category</label>
                                <select class="form-control" id="recipeCategory">
                                    <option value="" selected disabled>Choose...</option>
                                    <option value="Drinks">Drinks</option>
                                    <option value="Breakfast">Breakfast</option>
                                    <option value="Dinner">Lunch/Dinner</option>
                                    <option value="Appetizers">Appetizers</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="recipeImage" class="form-label d-flex justify-content-between">
                                    Image
                                    <button type="button" id="ai-scan-btn" class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-magic"></i> AI Scanning
                                    </button>
                                </label>
                                <input type="file" class="form-control" id="recipeImage">
                                <div id="ai-scan-loading" class="text-primary mt-2 d-none">
                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    AI is recognizing the dish and creating a recipe...
                                </div>
                            </div>
                            
                            <hr class="my-4 border-secondary">

                            <h3 class="h5 mb-3">Ingredients (per 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="row">
                                <div class="col">
                                    <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" value="1">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="mb-3">
                                        <label for="portionsPerGuest" class="form-label">Portions per guest</label>
                                        <input type="number" class="form-control" id="portionsPerGuest" placeholder="e.g. 2" min="1" value="1">
                                    </div>
                                </div>
                            </div>

                            <div class="d-grid gap-2 mt-4">
                                <button type="button" id="new-recipe-btn" class="btn btn-primary">Save recipe</button>
                                <button type="button" id="cancel-edit-btn" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Add Product -->
    <div class="modal fade" id="add-product-modal" tabindex="-1" aria-labelledby="add-product-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add-product-modal-label">Add product</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="add-product-form">
                        <div class="mb-3">
                            <label for="productName" class="form-label">Product name</label>
                            <input type="text" class="form-control" id="productName" placeholder="e.g. Milk">
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label for="productQuantity" class="form-label">Quantity</label>
                                    <input type="number" class="form-control" id="productQuantity" placeholder="1" min="1" value="1">
                                </div>
                            </div>
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Unit</label>
                                    <div class="btn-group unit-selector" role="group" aria-label="Unit selector">
                                        <button type="button" class="btn btn-secondary unit-btn">g</button>
                                        <button type="button" class="btn btn-outline-secondary unit-btn">kg</button>
                                        <button type="button" class="btn btn-outline-secondary unit-btn">ml</button>
                                        <button type="button" class="btn btn-outline-secondary unit-btn">l</button>
                                        <button type="button" class="btn btn-outline-secondary unit-btn">pcs</button>
                                        <button type="button" class="btn btn-outline-secondary unit-btn">pack</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3" id="product-category-wrapper">
                            <label for="productCategory" class="form-label">Category</label>
                            <select class="form-select" id="productCategory">
                                <option value="Food" selected>Food</option>
                                <option value="Drinks">Drinks</option>
                                <option value="Cooking and serving">Kitchen & serving</option>
                                <option value="Tableware and consumables">Tableware & consumables</option>
                            </select>
                        </div>
                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-primary">Add product</button>
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal View Recipe -->
    <div class="modal fade" id="view-recipe-modal" tabindex="-1" aria-labelledby="view-recipe-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="view-recipe-modal-label">View recipe</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h2 id="view-recipe-name"></h2>
                    <p><strong>Category:</strong> <span id="view-recipe-category"></span></p>
                    <p><strong>Guest count:</strong> <span id="view-recipe-guests"></span></p>
                    <hr>
                    <h3>Ingredients</h3>
                    <ul id="view-recipe-ingredients" class="list-group">
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <footer class="text-center py-4 mt-5">
        <p class="mb-0">&copy; <?php echo date("Y"); ?> FoodieFlow — An AI-powered flow from recipe to grocery — every day, every occasion.</p>
        <div class="mt-2">
            <a href="test.php" class="text-muted text-decoration-none small"><i class="bi bi-bug"></i> Test Playground</a>
        </div>
    </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(); ?>_v6"></script>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmRemoveModal" tabindex="-1" aria-labelledby="confirmRemoveModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmRemoveModalLabel">Confirm Deletion</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>You are about to remove an ingredient from the recipe. This will modify the recipe. Are you sure?</p>
        <p><strong>Recipe:</strong> <span id="modal-recipe-name"></span></p>
        <p><strong>Ingredient:</strong> <span id="modal-ingredient-name"></span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="confirm-remove-btn">Delete</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>