script.js

document.addEventListener('DOMContentLoaded', function() {
    // Handle recipe search if on search page
    if (window.location.pathname.includes('search.html')) {
        const searchBtn = document.getElementById('search-btn');
        const searchQuery = document.getElementById('search-query');
        const resultsDiv = document.getElementById('results');

        searchBtn.addEventListener('click', function() {
            // Always show results, empty search shows all recipes
            const mockResults = [
{
                    title: "Chicken & Rice",
                    calories: 450,
                    servings: 4,
                    time: "30 mins",
                    ingredients: [
                        "2 chicken breasts, diced",
                        "1 cup white rice",
                        "2 tbsp olive oil",
                        "1 onion, chopped",
                        "2 cloves garlic, minced",
                        "1 tsp salt",
                        "1/2 tsp black pepper"
                    ],
                    instructions: [
                        "Heat oil in a large pan over medium heat",
                        "Add onions and garlic, cook until soft",
                        "Add chicken and cook until no longer pink",
                        "Add rice and stir to coat with oil",
                        "Add 2 cups water and bring to boil",
                        "Reduce heat, cover and simmer for 20 minutes",
                        "Season with salt and pepper"
                    ],
                    image: "http://static.photos/food/320x240/1"
                },
                {
                    title: "Vegetable Stir Fry",
                    calories: 320,
                    servings: 2,
                    time: "15 mins",
                    ingredients: [
                        "2 cups broccoli florets",
                        "1 carrot, julienned",
                        "1 bell pepper, sliced",
                        "2 tbsp soy sauce",
                        "1 tbsp sesame oil",
                        "1 tsp ginger, grated"
                    ],
                    instructions: [
                        "Heat oil in a wok or large pan",
                        "Add ginger and stir for 30 seconds",
                        "Add vegetables and stir fry for 5 minutes",
                        "Add soy sauce and continue cooking for 2 minutes",
                        "Serve hot"
                    ],
                    image: "http://static.photos/food/320x240/2"
                },
                {
                    title: "Avocado Toast",
                    calories: 220,
                    servings: 1,
                    time: "5 mins",
                    ingredients: [
                        "1 slice whole grain bread",
                        "1/2 avocado",
                        "1 tsp lemon juice",
                        "Pinch of salt",
                        "Red pepper flakes (optional)"
                    ],
                    instructions: [
                        "Toast the bread until golden",
                        "Mash avocado with lemon juice and salt",
                        "Spread avocado mixture on toast",
                        "Sprinkle with red pepper flakes if desired"
                    ],
                    image: "http://static.photos/food/320x240/3"
                }
            ];

            // Filter if search query exists
            const query = searchQuery.value.trim().toLowerCase();
            const filteredResults = query ? 
                mockResults.filter(recipe => 
                    recipe.ingredients.some(ing => ing.toLowerCase().includes(query)) ||
                    recipe.title.toLowerCase().includes(query)
                ) : mockResults;
            displaySearchResults(filteredResults);
        });

        function displaySearchResults(recipes) {
            if (recipes.length === 0) {
                resultsDiv.innerHTML = '<p>No recipes found. Try a different search.</p>';
                return;
            }
            
            resultsDiv.innerHTML = recipes.map(recipe => `
<div class="recipe-card" data-recipe='${JSON.stringify(recipe)}'>
                    <img src="${recipe.image}" alt="${recipe.title}">
                    <h3>${recipe.title}</h3>
                    <p><strong>${recipe.calories}</strong> calories</p>
                    <p>Ingredients: ${recipe.ingredients.join(', ')}</p>
                </div>
            `).join('');

            // Add click handlers to recipe cards
            document.querySelectorAll('.recipe-card').forEach(card => {
                card.addEventListener('click', function() {
                    const recipe = JSON.parse(this.dataset.recipe);
                    showRecipeDetails(recipe);
                });
            });
        }

        function showRecipeDetails(recipe) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = `
                <div class="recipe-details">
                    <button id="back-to-results" class="back-btn">&larr; Back to results</button>
                    <h2>${recipe.title}</h2>
                    <img src="${recipe.image}" alt="${recipe.title}" class="detail-image">
                    <div class="recipe-meta">
                        <p><strong>${recipe.calories}</strong> calories</p>
                        ${recipe.servings ? `<p>Serves: <strong>${recipe.servings}</strong></p>` : ''}
                        ${recipe.time ? `<p>Prep time: <strong>${recipe.time}</strong></p>` : ''}
                    </div>
                    <div class="recipe-content">
                        <div class="ingredients">
                            <h3>Ingredients</h3>
                            <ul>
                                ${recipe.ingredients.map(ing => `<li>${ing}</li>`).join('')}
                            </ul>
                        </div>
                        ${recipe.instructions ? `
                        <div class="instructions">
                            <h3>Instructions</h3>
                            <ol>
                                ${recipe.instructions.map(step => `<li>${step}</li>`).join('')}
                            </ol>
                        </div>
                        ` : ''}
                    </div>
                </div>
            `;

            document.getElementById('back-to-results').addEventListener('click', function() {
                // In a real app, you would re-fetch the previous results
                // For now we'll just reload the page
                location.reload();
            });
        }
            `).join('');
        }
    }
const analyzeBtn = document.getElementById('analyze-btn');
    const recipeText = document.getElementById('recipe-text');
    const resultsSection = document.getElementById('results');
    const nutritionFacts = document.querySelector('.nutrition-facts');

    analyzeBtn.addEventListener('click', function() {
        if (recipeText.value.trim() === '') {
            alert('Please enter a recipe to analyze');
            return;
        }

        // Simulate API call (in a real app, you would call your backend API)
        setTimeout(() => {
            const mockResults = {
                calories: 450,
                protein: '25g',
                carbs: '50g',
                fat: '15g',
                fiber: '8g',
                sugar: '12g'
            };

            displayResults(mockResults);
        }, 1000);
    });

    function displayResults(data) {
        nutritionFacts.innerHTML = `
            <div class="nutrition-item">
                <h3>Calories</h3>
                <p>${data.calories}</p>
            </div>
            <div class="nutrition-item">
                <h3>Protein</h3>
                <p>${data.protein}</p>
            </div>
            <div class="nutrition-item">
                <h3>Carbs</h3>
                <p>${data.carbs}</p>
            </div>
            <div class="nutrition-item">
                <h3>Fat</h3>
                <p>${data.fat}</p>
            </div>
            <div class="nutrition-item">
                <h3>Fiber</h3>
                <p>${data.fiber}</p>
            </div>
            <div class="nutrition-item">
                <h3>Sugar</h3>
                <p>${data.sugar}</p>
            </div>
        `;

        resultsSection.style.display = 'block';
    }
});