Blog and recipe finder

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Baraka Blog &amp; Recipe Finder</title>
<script src="./Baraka%20Blog%20&amp;%20Recipe%20Finder_files/saved_resource"></script>
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    amber: {
                        50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d',
                        400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309',
                        800: '#92400e', 900: '#78350f'
                    }
                }
            }
        }
    }
</script>

<div class="max-w-6xl mx-auto p-6">
    <div class="bg-white rounded-2xl shadow-xl p-8">
        <!-- 🎨 HEADER -->
        <div class="text-center mb-8">
            <div class="flex items-center justify-center mb-4">
                <div class="text-2xl font-bold text-amber-800">🥥 BARAKA</div>
            </div>
            <h1 class="text-3xl font-bold text-amber-800 mb-3">
                Blog &amp; Recipe Finder
            </h1>
            <p class="text-lg text-amber-700 font-medium mb-2">
                Discover the perfect DIY recipes and guides tailored just for you!
            </p>
            <p class="text-gray-600 mb-3">
                Find personalized DIY recipes and beauty tips from Baraka Shea Butter
            </p>
            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 max-w-md mx-auto">
                <p class="text-sm text-amber-800 font-medium">
                    📝 Select up to three choices from each category to get personalized recommendations
                </p>
            </div>
            <p class="text-xs text-gray-500 mt-2">
                Powered by 6+ authentic Baraka recipes and guides
            </p>
        </div>

        <!-- 🎛️ FILTER GRID -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <div>
                <!-- Content Type Filter -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-2 flex items-center">
                        <span class="mr-2">📚</span> Content Type
                    </h3>
                    <p class="text-sm text-gray-600 mb-3">Select up to 3 (optional)</p>
                    <div class="flex flex-wrap gap-2">
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="contentTypes" data-value="DIY Recipe">
                            DIY Recipe                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="contentTypes" data-value="DIY Blog">
                            DIY Blog                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="contentTypes" data-value="Both">
                            Both                            </button>
                                                </div>
                    <div class="selection-display mt-2 text-sm text-gray-600"></div>
                </div>

                <!-- Recipe Type Filter -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-2 flex items-center">
                        <span class="mr-2">🎯</span> Recipe Type
                    </h3>
                    <p class="text-sm text-gray-600 mb-3">Select up to 3 (optional)</p>
                    <div class="flex flex-wrap gap-2">
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Face Care">
                            Face Care                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Body Care">
                            Body Care                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Hair Care">
                            Hair Care                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Lip Care">
                            Lip Care                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Hand &amp; Foot Care">
                            Hand &amp; Foot Care                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Soaps &amp; Cleansers">
                            Soaps &amp; Cleansers                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Mother &amp; Baby">
                            Mother &amp; Baby                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Multipurpose">
                            Multipurpose                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Body Scrubs &amp; Polishes">
                            Body Scrubs &amp; Polishes                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Bath Products">
                            Bath Products                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Men's Grooming">
                            Men's Grooming                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Deodorants">
                            Deodorants                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="recipeTypes" data-value="Suncare &amp; After-sun">
                            Suncare &amp; After-sun                            </button>
                                                </div>
                    <div class="selection-display mt-2 text-sm text-gray-600"></div>
                </div>
            </div>

            <div>
                <!-- Ingredients Filter -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-2 flex items-center">
                        <span class="mr-2">🌿</span> Ingredients
                    </h3>
                    <p class="text-sm text-gray-600 mb-3">Select up to 3 (optional)</p>
                    <div class="flex flex-wrap gap-2">
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Shea Butter">
                            Shea Butter                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Cocoa Butter">
                            Cocoa Butter                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Kombo Butter">
                            Kombo Butter                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Coconut Oil">
                            Coconut Oil                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Shea Oil">
                            Shea Oil                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Baobab Oil">
                            Baobab Oil                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Red Palm Oil">
                            Red Palm Oil                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Palm Kernel Oil">
                            Palm Kernel Oil                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="ingredients" data-value="Black Soap Base">
                            Black Soap Base                            </button>
                                                </div>
                    <div class="selection-display mt-2 text-sm text-gray-600"></div>
                </div>

                <!-- Skin Concerns Filter -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-2 flex items-center">
                        <span class="mr-2">✨</span> Skin Concerns/Purpose
                    </h3>
                    <p class="text-sm text-gray-600 mb-3">Select up to 3 (optional)</p>
                    <div class="flex flex-wrap gap-2">
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="skinConcerns" data-value="Everyday Moisture">
                            Everyday Moisture                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="skinConcerns" data-value="Dry/Sensitive Skin">
                            Dry/Sensitive Skin                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="skinConcerns" data-value="Problem Skin (Acne, Eczema)">
                            Problem Skin (Acne, Eczema)                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="skinConcerns" data-value="Anti-aging">
                            Anti-aging                            </button>
                                                    <button class="filter-btn px-3 py-2 rounded-full text-sm font-medium transition-all border bg-white border-gray-300 text-gray-700 hover:border-amber-300 hover:bg-amber-50" data-category="skinConcerns" data-value="Cleansing &amp; Purifying">
                            Cleansing &amp; Purifying                            </button>
                                                </div>
                    <div class="selection-display mt-2 text-sm text-gray-600"></div>
                </div>
            </div>
        </div>

        <!-- 🎮 ACTION BUTTONS -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
            <button id="findRecommendations" class="px-8 py-4 bg-amber-600 text-white font-semibold rounded-lg hover:bg-amber-700 transition-all flex items-center justify-center min-w-48">
                🔍 Find My Recommendations
            </button>
            <button id="clearAll" class="px-6 py-3 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-all flex items-center">
                ❌ Clear All
            </button>
        </div>

        <!-- 📋 SELECTION SUMMARY -->
        <div id="selectionSummary" class="hidden bg-amber-50 p-4 rounded-lg mb-6 border border-amber-200">
            <h4 class="font-semibold text-amber-800 mb-2">Current Selections:</h4>
            <div id="summaryContent" class="space-y-1 text-sm"></div>
        </div>

        <!-- ⏳ LOADING STATE -->
        <div id="loadingState" class="hidden text-center py-8">
            <div class="animate-spin inline-block w-8 h-8 border-4 border-current border-t-transparent text-amber-600 rounded-full mb-4"></div>
            <p class="text-gray-600">Finding your perfect recommendations...</p>
        </div>

        <!-- ✨ RECOMMENDATIONS -->
        <div id="recommendationsSection" class="hidden mt-8">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold text-gray-800">✨ Your Personalized Recommendations</h3>
                <button id="emailResults" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-all flex items-center">
                    📧 Email Results
                </button>
            </div>
            <div id="recommendationsList" class="space-y-6"></div>
        </div>

        <!-- 📧 EMAIL MODAL -->
        <div id="emailModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">📧 Email Your Recommendations</h3>
                    <button id="closeModal" class="text-gray-400 hover:text-gray-600">❌</button>
                </div>
                
                <div id="emailForm">
                    <p class="text-gray-600 mb-4">Get your personalized recommendations sent to your inbox, plus exclusive DIY tips from Baraka!</p>
                    <input type="email" id="emailInput" placeholder="Enter your email address" class="w-full px-4 py-3 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-amber-500">
                    <div class="flex gap-3">
                        <button id="cancelEmail" class="flex-1 px-4 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all">Cancel</button>
                        <button id="sendEmail" class="flex-1 px-4 py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-all">Send Recommendations</button>
                    </div>
                    <p class="text-xs text-gray-500 mt-3 text-center">By providing your email, you agree to receive marketing emails from Baraka. You can unsubscribe at any time.</p>
                </div>

                <div id="emailSuccess" class="hidden text-center py-4">
                    <div class="text-4xl mb-3">✅</div>
                    <h4 class="text-lg font-semibold text-green-600 mb-2">Sent Successfully!</h4>
                    <p class="text-gray-600">Check your inbox for your personalized recommendations and exclusive Baraka tips!</p>
                </div>

                <div id="emailError" class="hidden text-center py-4">
                    <div class="text-4xl mb-3">❌</div>
                    <h4 class="text-lg font-semibold text-red-600 mb-2">Error Sending Email</h4>
                    <p class="text-gray-600">Please try again or contact support.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 🎯 APPLICATION STATE
    let selections = { contentTypes: [], ingredients: [], recipeTypes: [], skinConcerns: [] };
    let currentRecommendations = [];

    // 🚀 INITIALIZATION
    document.addEventListener('DOMContentLoaded', function() {
        initializeFilters();
        initializeButtons();
        initializeModal();
    });

    function initializeFilters() {
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() { handleFilterClick(this); });
        });
    }

    function initializeButtons() {
        document.getElementById('findRecommendations').addEventListener('click', findRecommendations);
        document.getElementById('clearAll').addEventListener('click', clearAllSelections);
        document.getElementById('emailResults').addEventListener('click', showEmailModal);
    }

    function initializeModal() {
        document.getElementById('closeModal').addEventListener('click', hideEmailModal);
        document.getElementById('cancelEmail').addEventListener('click', hideEmailModal);
        document.getElementById('sendEmail').addEventListener('click', sendEmailResults);
        document.getElementById('emailModal').addEventListener('click', function(e) {
            if (e.target === this) hideEmailModal();
        });
        document.getElementById('emailInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') sendEmailResults();
        });
    }

    function handleFilterClick(button) {
        const category = button.dataset.category;
        const value = button.dataset.value;
        const isSelected = button.classList.contains('bg-amber-100');
        
        if (isSelected) {
            button.classList.remove('bg-amber-100', 'border-amber-400', 'text-amber-800');
            button.classList.add('bg-white', 'border-gray-300', 'text-gray-700');
            selections[category] = selections[category].filter(item => item !== value);
        } else {
            if (selections[category].length < 3) {
                button.classList.remove('bg-white', 'border-gray-300', 'text-gray-700');
                button.classList.add('bg-amber-100', 'border-amber-400', 'text-amber-800');
                selections[category].push(value);
            } else {
                alert('You can select up to 3 items per category.');
                return;
            }
        }
        
        updateSelectionDisplays();
        updateSelectionSummary();
    }

    function updateSelectionDisplays() {
        Object.keys(selections).forEach(category => {
            const container = document.querySelector(`[data-category="${category}"]`).closest('.mb-6');
            const display = container.querySelector('.selection-display');
            
            if (selections[category].length > 0) {
                display.textContent = `Selected (${selections[category].length}/3): ${selections[category].join(', ')}`;
            } else {
                display.textContent = '';
            }
        });
    }

    function updateSelectionSummary() {
        const hasSelections = Object.values(selections).some(arr => arr.length > 0);
        const summary = document.getElementById('selectionSummary');
        const content = document.getElementById('summaryContent');
        
        if (hasSelections) {
            content.innerHTML = '';
            const categoryNames = { contentTypes: 'Content', ingredients: 'Ingredients', recipeTypes: 'Recipe Type', skinConcerns: 'Skin Concerns' };
            
            Object.entries(selections).forEach(([category, items]) => {
                if (items.length > 0) {
                    const div = document.createElement('div');
                    div.innerHTML = `<strong>${categoryNames[category]}:</strong> ${items.join(', ')}`;
                    content.appendChild(div);
                }
            });
            
            summary.classList.remove('hidden');
        } else {
            summary.classList.add('hidden');
        }
    }

    function clearAllSelections() {
        selections = { contentTypes: [], ingredients: [], recipeTypes: [], skinConcerns: [] };
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('bg-amber-100', 'border-amber-400', 'text-amber-800');
            btn.classList.add('bg-white', 'border-gray-300', 'text-gray-700');
        });
        updateSelectionDisplays();
        updateSelectionSummary();
        document.getElementById('recommendationsSection').classList.add('hidden');
        currentRecommendations = [];
    }

    async function findRecommendations() {
        const hasSelections = Object.values(selections).some(arr => arr.length > 0);
        if (!hasSelections) {
            alert('Please select at least one criteria to get recommendations');
            return;
        }
        
        document.getElementById('loadingState').classList.remove('hidden');
        document.getElementById('recommendationsSection').classList.add('hidden');
        
        try {
            const response = await fetch('', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    action: 'get_recommendations',
                    contentTypes: selections.contentTypes,
                    ingredients: selections.ingredients,
                    recipeTypes: selections.recipeTypes,
                    skinConcerns: selections.skinConcerns
                })
            });
            
            const recommendations = await response.json();
            currentRecommendations = recommendations;
            displayRecommendations(recommendations);
            
        } catch (error) {
            console.error('Error getting recommendations:', error);
            alert('Sorry, there was an error getting recommendations. Please try again.');
        } finally {
            document.getElementById('loadingState').classList.add('hidden');
        }
    }

    function displayRecommendations(recommendations) {
        const container = document.getElementById('recommendationsList');
        container.innerHTML = '';
        
        recommendations.forEach((rec, index) => {
            const div = document.createElement('div');
            div.className = 'bg-gradient-to-r from-amber-50 to-orange-50 p-6 rounded-xl border border-amber-200';
            
            const typeIcon = rec.contentType === 'DIY Blog' ? '📚 DIY Guide' : 
                           rec.contentType === 'DIY Recipe' ? '📝 Recipe' : '📚📝 Guide with Recipes';
            
            div.innerHTML = `
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-amber-800 bg-amber-100 mr-3">
                                ${typeIcon}
                            </span>
                        </div>
                        <h4 class="text-lg font-semibold text-amber-800 mb-2">🌟 ${rec.title}</h4>
                        <p class="text-gray-700 mb-3">${rec.description}</p>
                        <a href="${rec.url}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-amber-600 hover:text-amber-700 font-medium transition-colors">
                            Read More 🔗
                        </a>
                    </div>
                </div>
            `;
            
            container.appendChild(div);
        });
        
        document.getElementById('recommendationsSection').classList.remove('hidden');
    }

    function showEmailModal() {
        if (currentRecommendations.length === 0) {
            alert('Please get recommendations first before emailing them.');
            return;
        }
        
        document.getElementById('emailModal').classList.remove('hidden');
        document.getElementById('emailForm').classList.remove('hidden');
        document.getElementById('emailSuccess').classList.add('hidden');
        document.getElementById('emailError').classList.add('hidden');
        document.getElementById('emailInput').value = '';
    }

    function hideEmailModal() {
        document.getElementById('emailModal').classList.add('hidden');
    }

    async function sendEmailResults() {
        const email = document.getElementById('emailInput').value.trim();
        
        if (!email || !email.includes('@')) {
            alert('Please enter a valid email address');
            return;
        }
        
        const sendButton = document.getElementById('sendEmail');
        const originalText = sendButton.textContent;
        sendButton.textContent = 'Sending...';
        sendButton.disabled = true;
        
        try {
            const response = await fetch('', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    action: 'send_email',
                    email: email,
                    recommendations: currentRecommendations,
                    criteria: selections
                })
            });
            
            const result = await response.json();
            
            if (result.success) {
                document.getElementById('emailForm').classList.add('hidden');
                document.getElementById('emailSuccess').classList.remove('hidden');
                setTimeout(() => { hideEmailModal(); }, 3000);
            } else {
                document.getElementById('emailForm').classList.add('hidden');
                document.getElementById('emailError').classList.remove('hidden');
                setTimeout(() => {
                    document.getElementById('emailForm').classList.remove('hidden');
                    document.getElementById('emailError').classList.add('hidden');
                }, 3000);
            }
            
        } catch (error) {
            console.error('Error sending email:', error);
            alert('Sorry, there was an error sending your recommendations. Please try again.');
        } finally {
            sendButton.textContent = originalText;
            sendButton.disabled = false;
        }
    }
</script>

'Luxurious Cocoa Butter and Baobab Oil Balm', 'url' => 'https://www.barakasheabutter.com/blogs/baraka-blogs/what-are-the-best-ingredients-for-diy-skincare#sec-5-3', 'type' => 'DIY Recipe', 'ingredients' => ['Cocoa Butter', 'Baobab Oil'], 'recipeTypes' => ['Body Care'], 'skinConcerns' => ['Everyday Moisture'], 'description' => 'DIY body care recipe featuring Cocoa Butter and Baobab Oil', 'source' => 'Earlier DIY Blog' ], [ 'title' =>