<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-M8Z9SNPV');</script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free Baby Registry & Shopping Checklist - 87 essential items for your newborn. Add product links, track prices, and share with family.">
    <meta name="keywords" content="baby registry, baby shopping list, baby checklist, newborn essentials, Kenya baby registry">
    <meta name="author" content="Tija Kids">
    <link rel="canonical" href="https://tija.kids/tools/baby-checklist">
    <title>Baby Registry - Free Checklist | Tija Kids</title>
    <link rel="icon" type="image/png" href="/favicon.png">
    <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=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore-compat.js"></script>
    <style>
:root{--primary:#089888;--primary-dark:#037a6b;--secondary:#6858d8;--accent:#10B981;--pink:#EC4899;--ink:#182868;--text-dark:#1F2937;--text-light:#6B7280;--bg-light:#F9FAFB;--soft-teal:#e6f4f3;--white:#FFFFFF;--border:#E5E7EB}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text-dark);line-height:1.6;background:var(--bg-light);padding-bottom:80px}
nav{position:fixed;top:0;width:100%;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);z-index:1000;padding:1rem 2rem;box-shadow:0 2px 20px rgba(0,0,0,0.05)}
.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:36px;width:auto}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{text-decoration:none;color:var(--text-dark);font-weight:500}
.btn{padding:0.75rem 1.5rem;border-radius:12px;font-weight:600;text-decoration:none;transition:all 0.2s;border:none;cursor:pointer;font-family:inherit;font-size:1rem}
.btn-primary{background:var(--primary);color:white;box-shadow:0 2px 8px rgba(8,152,136,0.2)}
.btn-secondary{background:white;color:var(--primary);border:2px solid var(--primary)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(8,152,136,0.3)}
.full-width{width:100%}
main{max-width:900px;margin:0 auto;padding:5.5rem 1rem 2rem}
.hero{text-align:center;padding:1.5rem;background:white;border-radius:16px;margin-bottom:1rem;box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid var(--border)}
.hero h1{font-size:2rem;margin-bottom:0.25rem;color:var(--ink);font-weight:800}
.hero p{color:var(--text-light);font-size:0.95rem;margin-bottom:1rem}
.stats-row{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem}
.stat{text-align:center}
.stat span{display:block;font-size:1.4rem;font-weight:700;color:var(--primary)}
.stat label{font-size:0.75rem;color:var(--text-light)}
.progress-container{max-width:350px;margin:0 auto}
.progress-bar{height:10px;background:#E5E7EB;border-radius:10px;overflow:hidden}
.progress-fill{height:100%;background:var(--primary);border-radius:10px;transition:width 0.5s;width:0%}
.progress-text{display:block;margin-top:0.4rem;font-weight:600;color:var(--primary);font-size:0.85rem}
.hidden{display:none!important}
.print-only{display:none}
.settings-bar{display:flex;justify-content:center;margin-bottom:1rem}
.currency-selector{display:flex;align-items:center;gap:0.5rem;background:white;padding:0.5rem 1rem;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05);border:1px solid var(--border)}
.currency-selector select{border:none;background:transparent;font-family:inherit;font-weight:600;color:var(--primary);cursor:pointer;font-size:0.9rem}
    </style>
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M8Z9SNPV"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <nav class="no-print">
        <div class="nav-container">
            <a href="/" class="logo">
                <img src="/images/tija-kids-landscape-logo.png" alt="Tija Kids">
            </a>
            <div class="nav-links">
                <a href="/">Home</a>
                <a href="/tools">Free Tools</a>
                <a href="/#download" class="btn btn-primary">Download App</a>
            </div>
        </div>
    </nav>

    <main>
        <section class="hero no-print">
            <h1>🍼 Baby Registry</h1>
            <p>87 essential items for your newborn. Add product links and share with family!</p>
            <div class="stats-row">
                <div class="stat"><span id="totalItems">0</span><label>Items</label></div>
                <div class="stat"><span id="totalValue">KSH 0</span><label>Est. Value</label></div>
                <div class="stat"><span id="purchasedCount">0</span><label>Got it</label></div>
            </div>
            <div class="progress-container">
                <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
                <span class="progress-text" id="progressText">0% Complete</span>
            </div>
        </section>
        <div class="print-header print-only"><h1 id="printTitle">Baby Registry</h1><p id="printSubtitle"></p></div>
        <div class="settings-bar no-print">
            <div class="currency-selector">
                <label>💰</label>
                <select id="currencySelect" onchange="changeCurrency()">
                    <option value="KSH">KSH</option>
                    <option value="USD">USD</option>
                    <option value="EUR">EUR</option>
                    <option value="GBP">GBP</option>
                    <option value="NGN">NGN</option>
                    <option value="UGX">UGX</option>
                    <option value="TZS">TZS</option>
                </select>
            </div>
        </div>
        <div class="search-section no-print" id="searchSection">
            <div class="search-card">
                <h3>🔍 Find a Registry</h3>
                <div class="search-box">
                    <input type="text" id="searchInput" placeholder="Search by name or email...">
                    <button onclick="searchRegistries()">Search</button>
                </div>
                <div id="searchResults" class="search-results hidden"></div>
            </div>
        </div>
        <div class="registry-setup no-print" id="registrySetup">
            <div class="setup-card">
                <h2>📋 Start Your Registry</h2>
                <p>Create a shareable registry with 87 essential baby items</p>
                <form id="registryForm" onsubmit="return createRegistry(event)">
                    <input type="text" id="parentName" placeholder="Your name" required>
                    <input type="email" id="parentEmail" placeholder="Your email" required>
                    <input type="text" id="babyName" placeholder="Baby's name (optional)">
                    <div class="form-field">
                        <label for="dueDate">Due Date (optional)</label>
                        <input type="date" id="dueDate" min="">
                    </div>
                    <label class="terms-label">
                        <input type="checkbox" id="acceptTerms" required>
                        <span>I agree to the <a href="/privacy" target="_blank">Privacy Policy</a> and <a href="/terms" target="_blank">Terms</a></span>
                    </label>
                    <button type="submit" class="btn btn-primary full-width">Create My Registry</button>
                </form>
                <div class="divider"><span>or</span></div>
                <button class="btn btn-secondary full-width" onclick="continueAsGuest()">Continue as Guest</button>
            </div>
        </div>
        <div class="registry-header hidden no-print" id="registryHeader">
            <div class="registry-info"><h2 id="registryTitle">My Baby Registry</h2><p id="registrySubtitle"></p></div>
            <div class="registry-actions">
                <button class="action-btn" onclick="showShareModal()">📤 Share</button>
                <button class="action-btn" onclick="showInviteModal()">👥 Co-Parent</button>
            </div>
        </div>
        <div class="controls hidden no-print" id="controls">
            <button class="control-btn" onclick="expandAll()">Expand All</button>
            <button class="control-btn" onclick="collapseAll()">Collapse All</button>
            <button class="control-btn active" onclick="filterItems('all')">All Items</button>
            <button class="control-btn" onclick="filterItems('needed')">Still Needed</button>
            <button class="control-btn primary" onclick="printChecklist()">🖨️ Print</button>
        </div>
        <div class="checklist-container hidden" id="checklistContainer"></div>
        <button class="fab no-print hidden" id="fabAdd" onclick="showAddCustomModal()">+</button>
    </main>
    <div class="slide-panel-overlay hidden" id="itemDetailPanel" onclick="if(event.target===this)closeItemDetail()">
        <div class="slide-panel"><div class="panel-handle"></div><button class="panel-close" onclick="closeItemDetail()">├ù</button><div id="itemDetailContent"></div></div>
    </div>
    <div class="modal-overlay hidden no-print" id="addCustomModal" onclick="if(event.target===this)closeModal('addCustomModal')">
        <div class="modal slide-up">
            <div class="modal-handle"></div><button class="modal-close" onclick="closeModal('addCustomModal')">├ù</button>
            <h2>Γ₧ò Add Custom Item</h2>
            <form id="addCustomForm" onsubmit="return addCustomItem(event)">
                <input type="text" id="customName" placeholder="Item name *" required>
                <select id="customCategory" required>
                    <option value="">Select Category</option>
                    <option value="nursery">🛏️ Nursery</option>
                    <option value="feeding">🍼 Feeding</option>
                    <option value="diapering">🧷 Diapering</option>
                    <option value="clothing">👕 Clothing</option>
                    <option value="bathing">🛁 Bathing</option>
                    <option value="travel">🚗 Travel</option>
                    <option value="health">🏥 Health</option>
                    <option value="play">🧸 Play</option>
                    <option value="mom">💐 For Mom</option>
                </select>
                <div class="form-row">
                    <input type="text" id="customQty" placeholder="Qty" value="1">
                    <div class="price-input"><span class="currency-label" id="customCurrLabel">KSH</span><input type="number" id="customPrice" placeholder="Price" step="0.01"></div>
                </div>
                <input type="url" id="customUrl" placeholder="Product link (optional)">
                <textarea id="customNotes" placeholder="Notes (optional)" rows="2"></textarea>
                <button type="submit" class="btn btn-primary full-width">Add Item</button>
            </form>
        </div>
    </div>
    <div class="modal-overlay hidden no-print" id="shareModal" onclick="if(event.target===this)closeModal('shareModal')">
        <div class="modal"><button class="modal-close" onclick="closeModal('shareModal')">├ù</button>
            <h2>≡ƒôñ Share Your Registry</h2><p>Share this link with family and friends!</p>
            <div class="share-link-box"><input type="text" id="shareLink" readonly><button onclick="copyShareLink()">Copy</button></div>
            <div class="share-buttons">
                <button class="share-btn whatsapp" onclick="shareVia('whatsapp')">WhatsApp</button>
                <button class="share-btn email" onclick="shareVia('email')">Email</button>
                <button class="share-btn facebook" onclick="shareVia('facebook')">Facebook</button>
            </div>
        </div>
    </div>
    <div class="modal-overlay hidden no-print" id="inviteModal" onclick="if(event.target===this)closeModal('inviteModal')">
        <div class="modal"><button class="modal-close" onclick="closeModal('inviteModal')">├ù</button>
            <h2>≡ƒæÑ Invite Co-Parent</h2>
            <form onsubmit="return inviteCoParent(event)">
                <input type="text" id="coparentName" placeholder="Co-parent's name" required>
                <input type="email" id="coparentEmail" placeholder="Co-parent's email" required>
                <button type="submit" class="btn btn-primary full-width">Add Co-Parent</button>
            </form>
            <div id="coparentList" class="coparent-list"></div>
        </div>
    </div>
    <div class="modal-overlay hidden no-print" id="addLinkModal" onclick="if(event.target===this)closeModal('addLinkModal')">
        <div class="modal"><button class="modal-close" onclick="closeModal('addLinkModal')">├ù</button>
            <h2>≡ƒöù Add Product Link</h2><p>Add a link where this item can be purchased</p>
            <form id="addLinkForm" onsubmit="return saveProductLink(event)">
                <input type="hidden" id="linkItemId">
                <input type="url" id="productUrl" placeholder="Product URL *" required>
                <input type="text" id="storeName" placeholder="Store name (e.g., Jumia, Amazon)">
                <div class="price-input"><span class="currency-label" id="linkCurrLabel">KSH</span><input type="number" id="linkPrice" placeholder="Price" step="0.01"></div>
                <textarea id="linkNotes" placeholder="Notes (optional)" rows="2"></textarea>
                <button type="submit" class="btn btn-primary full-width">Add Link</button>
            </form>
        </div>
    </div>
    <div class="toast hidden no-print" id="toast"></div>
    <footer class="no-print" style="background: #182868; padding: 3rem 1rem 2rem; color: white; margin-top: 4rem;">
        <div style="max-width: 1200px; margin: 0 auto;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem;">
                <!-- Brand -->
                <div>
                    <div style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;">Tija Kids</div>
                    <p style="color: #94a3b8; font-size: 0.9rem;">Empowering kids with independence and parents with peace of mind.</p>
                </div>
                
                <!-- Product -->
                <div>
                    <h4 style="font-weight: 600; margin-bottom: 1rem;">Product</h4>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="margin-bottom: 0.75rem;"><a href="/#features" style="color: #94a3b8; text-decoration: none;">Features</a></li>
                        <li style="margin-bottom: 0.75rem;"><a href="/#pricing" style="color: #94a3b8; text-decoration: none;">Pricing</a></li>
                        <li style="margin-bottom: 0.75rem;"><a href="/tools" style="color: #94a3b8; text-decoration: none;">Free Tools</a></li>
                    </ul>
                </div>
                
                <!-- Company -->
                <div>
                    <h4 style="font-weight: 600; margin-bottom: 1rem;">Company</h4>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="margin-bottom: 0.75rem;"><a href="/#about" style="color: #94a3b8; text-decoration: none;">About Us</a></li>
                        <li style="margin-bottom: 0.75rem;"><a href="/contact" style="color: #94a3b8; text-decoration: none;">Contact</a></li>
                    </ul>
                </div>
                
                <!-- Support -->
                <div>
                    <h4 style="font-weight: 600; margin-bottom: 1rem;">Support</h4>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="margin-bottom: 0.75rem;"><a href="/contact" style="color: #94a3b8; text-decoration: none;">Help Center</a></li>
                        <li style="margin-bottom: 0.75rem;"><a href="/privacy" style="color: #94a3b8; text-decoration: none;">Privacy Policy</a></li>
                        <li style="margin-bottom: 0.75rem;"><a href="/terms" style="color: #94a3b8; text-decoration: none;">Terms of Service</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer Bottom -->
            <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; text-align: center;">
                <p style="color: #94a3b8; font-size: 0.85rem; margin: 0;">© 2025 Tija Kids Inc. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <style>
.search-section{max-width:420px;margin:0 auto 1rem}.search-card{background:white;padding:1rem;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}.search-card h3{text-align:center;margin-bottom:0.75rem;font-size:1rem}.search-box{display:flex;gap:0.5rem}.search-box input{flex:1;padding:0.6rem 1rem;border:2px solid #E5E7EB;border-radius:10px;font-size:0.9rem;font-family:inherit}.search-box button{padding:0.6rem 1rem;background:var(--primary);color:white;border:none;border-radius:10px;font-weight:600;cursor:pointer}.search-results{margin-top:0.75rem;max-height:200px;overflow-y:auto}.search-result-item{display:flex;align-items:center;gap:0.75rem;padding:0.5rem;background:var(--bg-light);border-radius:8px;margin-bottom:0.4rem;cursor:pointer}.search-result-item:hover{background:#E5E7EB}.search-result-avatar{width:32px;height:32px;background:var(--primary);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem}.search-result-info h4{font-size:0.85rem;margin-bottom:0}.search-result-info p{font-size:0.7rem;color:var(--text-light)}
.registry-setup{max-width:400px;margin:0 auto 1.5rem}.setup-card{background:white;padding:1.5rem;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid var(--border)}.setup-card h2{text-align:center;margin-bottom:0.4rem;font-size:1.3rem;color:var(--ink);font-weight:700}.setup-card>p{text-align:center;color:var(--text-light);margin-bottom:1rem;font-size:0.9rem}.setup-card form{display:flex;flex-direction:column;gap:0.75rem}.form-field{display:flex;flex-direction:column;gap:0.3rem}.form-field label{font-size:0.85rem;font-weight:600;color:var(--text-dark)}.setup-card input[type="text"],.setup-card input[type="email"],.setup-card input[type="date"]{padding:0.75rem 1rem;border:2px solid #E5E7EB;border-radius:12px;font-size:0.95rem;font-family:inherit}.setup-card input:focus{outline:none;border-color:var(--primary)}.terms-label{display:flex;align-items:flex-start;gap:0.5rem;font-size:0.8rem;color:var(--text-light);cursor:pointer}.terms-label input{margin-top:2px;width:16px;height:16px}.terms-label a{color:var(--primary)}.divider{display:flex;align-items:center;gap:1rem;margin:1rem 0;color:var(--text-light);font-size:0.85rem}.divider::before,.divider::after{content:'';flex:1;height:1px;background:#E5E7EB}
.registry-header{background:white;padding:1rem;border-radius:16px;margin-bottom:0.75rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;box-shadow:0 2px 10px rgba(0,0,0,0.05)}.registry-info h2{font-size:1.1rem;margin-bottom:0.1rem}.registry-info p{color:var(--text-light);font-size:0.8rem}.registry-actions{display:flex;gap:0.5rem}.action-btn{padding:0.4rem 0.8rem;background:var(--bg-light);border:none;border-radius:12px;font-weight:500;cursor:pointer;font-family:inherit;font-size:0.8rem}.action-btn:hover{background:var(--primary);color:white}
.controls{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;justify-content:center}.control-btn{padding:0.4rem 0.8rem;border:2px solid #E5E7EB;background:white;border-radius:12px;font-weight:500;cursor:pointer;font-family:inherit;font-size:0.8rem}.control-btn:hover,.control-btn.active{border-color:var(--primary);color:var(--primary)}.control-btn.primary{background:var(--primary);color:white;border-color:var(--primary)}
.fab{position:fixed;bottom:1.5rem;right:1.5rem;width:54px;height:54px;border-radius:50%;background:var(--pink);color:white;border:none;font-size:1.8rem;cursor:pointer;box-shadow:0 4px 15px rgba(236,72,153,0.4);z-index:100;display:flex;align-items:center;justify-content:center}.fab:hover{transform:scale(1.1)}
.checklist-container{display:flex;flex-direction:column;gap:0.75rem}.category{background:white;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.05)}.category-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;user-select:none}.category-header:hover{background:var(--bg-light)}.category-title{display:flex;align-items:center;gap:0.6rem;font-size:1rem;font-weight:600}.category-icon{font-size:1.2rem}.category-count{font-size:0.8rem;color:var(--text-light);font-weight:400}.category-toggle{font-size:0.9rem;transition:transform 0.3s;color:var(--text-light)}.category.collapsed .category-toggle{transform:rotate(-90deg)}.category.collapsed .category-items{display:none}.category-items{padding:0 0.75rem 0.75rem}
    </style>

    <style>
.item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;border-radius:12px;cursor:pointer;transition:all 0.2s;border:1px solid transparent}.item:hover{background:var(--bg-light);border-color:#E5E7EB}.item.checked{background:#F0FDF4}.item.checked .item-name{color:var(--text-light)}.checkbox{width:22px;height:22px;border:2px solid #D1D5DB;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0;transition:all 0.2s}.item.checked .checkbox{background:var(--accent);border-color:var(--accent);color:white}.item-content{flex:1;min-width:0}.item-name{font-weight:500;font-size:0.9rem;margin-bottom:0.15rem}.item-desc{font-size:0.75rem;color:var(--text-light);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.item-meta{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}.item-qty{font-size:0.75rem;color:var(--text-light);background:var(--bg-light);padding:0.2rem 0.5rem;border-radius:10px}.item-qty input{width:40px;border:none;background:transparent;text-align:center;font-family:inherit;font-size:0.75rem;color:var(--text-light)}.item-price{font-size:0.85rem;font-weight:600;color:var(--primary)}.item-link-badge{width:24px;height:24px;background:var(--pink);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem}
.slide-panel-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:2000;display:flex;align-items:flex-end;justify-content:center}.slide-panel{background:white;border-radius:16px 16px 0 0;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;animation:slideUp 0.3s ease;position:relative}@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}.panel-handle{width:40px;height:4px;background:#E5E7EB;border-radius:2px;margin:12px auto}.panel-close{position:absolute;top:12px;left:16px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-light)}.detail-header{padding:0 1.25rem 1rem;border-bottom:1px solid #E5E7EB}.detail-title{font-size:1.1rem;font-weight:600;margin-bottom:0.25rem}.detail-desc{font-size:0.85rem;color:var(--text-light);line-height:1.5}.detail-content{padding:1.25rem}.detail-section{margin-bottom:1.25rem}.detail-section h4{font-size:0.8rem;color:var(--text-light);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.5px}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;border-bottom:1px solid #F3F4F6}.detail-row:last-child{border-bottom:none}.detail-label{font-size:0.85rem;color:var(--text-light)}.detail-value{font-size:0.9rem;font-weight:500}
.buying-option{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;background:var(--bg-light);border-radius:12px;margin-bottom:0.5rem}.buying-option .store-icon{width:36px;height:36px;background:white;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.buying-option .store-info{flex:1}.buying-option .store-name{font-size:0.85rem;font-weight:500}.buying-option .store-price{font-size:0.8rem;color:var(--text-light)}.buying-option .view-btn{padding:0.4rem 0.8rem;background:white;border:1px solid #E5E7EB;border-radius:10px;font-size:0.75rem;cursor:pointer;text-decoration:none;color:var(--text-dark);font-weight:500}.buying-option .remove-link{padding:0.3rem 0.5rem;background:#FEE2E2;border:none;border-radius:8px;font-size:0.7rem;cursor:pointer;color:#DC2626}.add-link-btn{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem;border:2px dashed #E5E7EB;border-radius:12px;background:none;width:100%;cursor:pointer;color:var(--text-light);font-family:inherit;font-size:0.85rem}.add-link-btn:hover{border-color:var(--primary);color:var(--primary)}.detail-actions{display:flex;gap:0.75rem;margin-top:1.5rem}.detail-actions button{flex:1;padding:0.75rem;border-radius:12px;font-weight:600;cursor:pointer;font-family:inherit;font-size:0.9rem}.mark-btn{background:var(--accent);color:white;border:none}.mark-btn.needed{background:white;color:var(--accent);border:2px solid var(--accent)}
    </style>

    <style>
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:flex-end;justify-content:center;z-index:2000}.modal{background:white;border-radius:16px 16px 0 0;padding:1.5rem;width:100%;max-width:450px;max-height:85vh;overflow-y:auto;animation:slideUp 0.3s ease;position:relative}.modal-handle{width:40px;height:4px;background:#E5E7EB;border-radius:2px;margin:0 auto 1rem}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-light)}.modal h2{margin-bottom:0.75rem;font-size:1.2rem}.modal>p{color:var(--text-light);margin-bottom:1rem;font-size:0.85rem}.modal form{display:flex;flex-direction:column;gap:0.75rem}.modal input,.modal select,.modal textarea{padding:0.75rem 1rem;border:2px solid #E5E7EB;border-radius:12px;font-size:0.9rem;font-family:inherit}.modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--primary)}.form-row{display:flex;gap:0.75rem}.form-row>*{flex:1}.price-input{display:flex;align-items:center;border:2px solid #E5E7EB;border-radius:12px;overflow:hidden}.price-input .currency-label{padding:0.75rem;background:var(--bg-light);font-weight:600;font-size:0.8rem;color:var(--text-light)}.price-input input{border:none;padding:0.75rem;flex:1;font-size:0.9rem}.price-input input:focus{outline:none}
.share-link-box{display:flex;gap:0.5rem;margin-bottom:1rem}.share-link-box input{flex:1;padding:0.6rem;border:2px solid #E5E7EB;border-radius:10px;font-size:0.85rem}.share-link-box button{padding:0.6rem 1rem;background:var(--primary);color:white;border:none;border-radius:10px;cursor:pointer;font-weight:600}.share-buttons{display:flex;gap:0.5rem;flex-wrap:wrap}.share-btn{flex:1;min-width:90px;padding:0.6rem;border:none;border-radius:10px;font-weight:600;cursor:pointer;color:white;font-size:0.85rem}.share-btn.whatsapp{background:#25D366}.share-btn.email{background:#EA4335}.share-btn.facebook{background:#1877F2}.coparent-list{margin-top:1rem;border-top:1px solid #E5E7EB;padding-top:0.75rem}.coparent-list h4{font-size:0.8rem;color:var(--text-light);margin-bottom:0.5rem}.coparent-item{display:flex;align-items:center;gap:0.5rem;padding:0.4rem;background:var(--bg-light);border-radius:8px;margin-bottom:0.4rem;font-size:0.85rem}.coparent-item .avatar{width:28px;height:28px;background:var(--primary);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.75rem}
.toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%);background:#1F2937;color:white;padding:0.6rem 1.25rem;border-radius:12px;font-weight:500;z-index:3000;font-size:0.85rem}
@media(max-width:768px){.nav-links{display:none}.hero h1{font-size:1.5rem}.stats-row{gap:1.25rem}.registry-header{flex-direction:column;text-align:center}}
@media print{.no-print{display:none!important}.print-only{display:block!important}body{background:white;padding:0}main{padding:0;max-width:100%}.category{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}.category.collapsed .category-items{display:block!important}.item{padding:0.4rem 0.75rem}.item-desc{display:block!important;-webkit-line-clamp:unset}.print-header{text-align:center;margin-bottom:1rem}.print-header h1{font-size:1.5rem;color:#333}.print-header p{color:#666}}
    </style>

    <script>
// Firebase config
const firebaseConfig = {apiKey:"AIzaSyBqLJBHMCVDyksLVrz_lKZznNCFasBaIgM",authDomain:"tija-kids-app-v1.firebaseapp.com",projectId:"tija-kids-app-v1",storageBucket:"tija-kids-app-v1.firebasestorage.app",messagingSenderId:"732265337048",appId:"1:732265337048:web:420265d759eafdde36c7ad"};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

let registry = null, currency = 'KSH', currentFilter = 'all', currentItemId = null;

const checklistData = [
  {id:'nursery',icon:'🛏️',title:'Nursery',items:[
    {name:'Crib or bassinet',qty:'1',desc:'A safe sleep space. Bassinet is great for first 3-4 months, then transition to crib.'},
    {name:'Firm crib mattress',qty:'1',desc:'Must be firm and fit snugly in crib with no gaps. Essential for safe sleep.'},
    {name:'Fitted crib sheets',qty:'3-4',desc:'Get extras for middle-of-night changes. 100% cotton is breathable.'},
    {name:'Waterproof mattress protector',qty:'2',desc:'Protects mattress from diaper leaks. Get 2 so you have a backup.'},
    {name:'Baby monitor',qty:'1',desc:'Video monitors let you see baby. Audio-only works too if budget is tight.'},
    {name:'Night light',qty:'1',desc:'Soft light for nighttime feeds and diaper changes without fully waking baby.'},
    {name:'Dresser or changing table',qty:'1',desc:'Dresser with changing pad on top saves space and money.'},
    {name:'Changing pad',qty:'1',desc:'Contoured sides help keep baby safe. Can use on dresser or floor.'},
    {name:'Changing pad covers',qty:'3-4',desc:"Washable covers. You'll go through these quickly!"},
    {name:'Diaper pail',qty:'1',desc:'Locks in odors. Some use regular trash can with bags - works too!'},
    {name:'Rocking chair or glider',qty:'1',desc:'For nursing and soothing baby. Test comfort before buying.'},
    {name:'Blackout curtains',qty:'1 set',desc:'Helps baby sleep during day naps. Game changer for sleep training.'},
    {name:'White noise machine',qty:'1',desc:'Mimics womb sounds. Helps baby sleep longer. Many parents swear by these!'},
    {name:'Humidifier',qty:'1',desc:'Helps with dry air and congestion. Cool mist is safest for babies.'},
    {name:'Room thermometer',qty:'1',desc:'Ideal room temp is 68-72┬░F (20-22┬░C). Prevents overheating.'}
  ]},
  {id:'feeding',icon:'🍼',title:'Feeding',items:[
    {name:'Bottles (various sizes)',qty:'6-8',desc:'Start with a few different brands to see what baby prefers. Anti-colic helps with gas.'},
    {name:'Bottle nipples (slow flow)',qty:'6-8',desc:'Newborns need slow flow. Size up as baby grows.'},
    {name:'Bottle brush',qty:'1',desc:'For cleaning bottles and nipples thoroughly.'},
    {name:'Bottle drying rack',qty:'1',desc:'Keeps bottles organized and drip-drying.'},
    {name:'Formula (if not breastfeeding)',qty:'as needed',desc:"Ask pediatrician for recommendations. Don't stockpile - baby may need different type."},
    {name:'Breast pump',qty:'1',desc:'Electric double pump saves time. Check if insurance covers it!'},
    {name:'Breast milk storage bags',qty:'1 box',desc:'For freezing pumped milk. Label with date.'},
    {name:'Nursing pillow',qty:'1',desc:'Supports baby during feeding. Helps with positioning and arm fatigue.'},
    {name:'Nursing bras',qty:'3-4',desc:'Easy-open clips for breastfeeding. Size up from pre-pregnancy.'},
    {name:'Breast pads',qty:'1 box',desc:'Absorbs leaks. Disposable or washable options available.'},
    {name:'Nipple cream (lanolin)',qty:'1',desc:'Soothes sore nipples from breastfeeding. Safe for baby.'},
    {name:'Burp cloths',qty:'10-12',desc:"You'll use these constantly! Cloth diapers work great as burp cloths."},
    {name:'Bibs',qty:'8-10',desc:'For drool and spit-up. Bandana bibs are cute and functional.'},
    {name:'High chair',qty:'1',desc:'Need around 6 months when starting solids. Can wait to buy.'},
    {name:'Bottle warmer',qty:'1',desc:'Optional - can warm bottles in warm water instead.'}
  ]},
  {id:'diapering',icon:'🧷',title:'Diapering',items:[
    {name:'Newborn diapers',qty:'2-3 packs',desc:"Don't buy too many - babies outgrow newborn size quickly (1-2 weeks)!"},
    {name:'Size 1 diapers',qty:'3-4 packs',desc:'Most babies stay in size 1 for 2-3 months. Stock up on these.'},
    {name:'Baby wipes (fragrance-free)',qty:'4-5 packs',desc:"Fragrance-free is gentler on newborn skin. You'll use SO many."},
    {name:'Diaper rash cream',qty:'2',desc:'Zinc oxide based (like Desitin) works best. Apply at every change to prevent rash.'},
    {name:'Changing pad liners',qty:'1 pack',desc:'Disposable liners make cleanup easier when accidents happen.'},
    {name:'Diaper bag',qty:'1',desc:'Backpack style keeps hands free. Look for lots of pockets.'},
    {name:'Portable changing pad',qty:'1',desc:'For diaper changes on the go. Folds up small.'},
    {name:'Diaper caddy/organizer',qty:'1',desc:'Keeps diapers, wipes, cream organized. Portable for room-to-room.'},
    {name:'Hand sanitizer',qty:'3-4',desc:'Keep one in diaper bag, nursery, and living areas.'}
  ]},
  {id:'clothing',icon:'👕',title:'Clothing',items:[
    {name:'Onesies/bodysuits (newborn)',qty:'6-8',desc:'Snap crotch for easy diaper changes. Short and long sleeve options.'},
    {name:'Onesies (0-3 months)',qty:'6-8',desc:'Babies grow fast! Have next size ready.'},
    {name:'Sleepers/footie pajamas',qty:'4-6',desc:'Zip-up is easier than snaps at 3am. Get with built-in feet.'},
    {name:'Swaddle blankets',qty:'4-6',desc:'Muslin swaddles are versatile - for swaddling, nursing cover, burp cloth.'},
    {name:'Sleep sacks',qty:'2-3',desc:'Safer than loose blankets. Use after baby outgrows swaddling.'},
    {name:'Hats (newborn)',qty:'2-3',desc:'Babies lose heat through their heads. Essential for first weeks.'},
    {name:'Socks or booties',qty:'6-8 pairs',desc:'They fall off constantly! Buy extras.'},
    {name:'Mittens (scratch mittens)',qty:'2-3 pairs',desc:'Prevents baby from scratching face. Some onesies have built-in.'},
    {name:'Sweater or jacket',qty:'1-2',desc:'For cooler weather outings.'},
    {name:'Going home outfit',qty:'1',desc:'Special outfit for leaving hospital. Bring newborn AND 0-3 month size!'}
  ]},
  {id:'bathing',icon:'🛁',title:'Bathing & Grooming',items:[
    {name:'Baby bathtub',qty:'1',desc:'Infant tub with sling support is safest. Some fit in sink.'},
    {name:'Hooded towels',qty:'2-3',desc:'Keeps baby warm after bath. Hood covers head where heat escapes.'},
    {name:'Baby washcloths',qty:'6-8',desc:'Soft cloths for gentle cleaning. Also good for wiping drool.'},
    {name:'Baby body wash/shampoo',qty:'1',desc:'Tear-free, fragrance-free formula. One bottle lasts months!'},
    {name:'Baby lotion',qty:'1',desc:'For dry skin. Fragrance-free is gentlest.'},
    {name:'Baby nail clippers or file',qty:'1',desc:'Baby nails grow fast and are sharp! File is safer for newborns.'},
    {name:'Soft baby brush',qty:'1',desc:'For cradle cap and gentle scalp massage.'},
    {name:'Baby comb',qty:'1',desc:'Fine-tooth comb helps with cradle cap.'},
    {name:'Cotton balls or pads',qty:'1 pack',desc:'For cleaning eyes, ears, and umbilical cord area.'}
  ]},
  {id:'travel',icon:'🚗',title:'Travel & Gear',items:[
    {name:'Infant car seat',qty:'1',desc:'MUST have before leaving hospital. Rear-facing until age 2 minimum.'},
    {name:'Stroller',qty:'1',desc:'Travel system (car seat + stroller) is convenient. Test before buying!'},
    {name:'Baby carrier or wrap',qty:'1',desc:'Keeps hands free while keeping baby close. Great for fussy babies.'},
    {name:'Stroller rain cover',qty:'1',desc:'Protects baby from rain and wind during walks.'},
    {name:'Car seat mirror',qty:'1',desc:'See rear-facing baby while driving. Peace of mind!'},
    {name:'Car window shades',qty:'2',desc:'Protects baby from sun during car rides.'},
    {name:'Portable bassinet/travel crib',qty:'1',desc:'For overnight trips and visits to grandparents.'},
    {name:'Baby swing',qty:'1',desc:"Soothing motion helps calm fussy babies. Some babies love it, some don't."},
    {name:'Bouncer seat',qty:'1',desc:'Safe place to put baby while you shower or cook. Vibration soothes.'}
  ]},
  {id:'health',icon:'🏥',title:'Health & Safety',items:[
    {name:'Baby thermometer',qty:'1',desc:'Rectal is most accurate for infants. Digital forehead works for older babies.'},
    {name:'Nasal aspirator',qty:'1',desc:'Clears stuffy nose. NoseFrida or bulb syringe both work.'},
    {name:'Baby medicine dropper/syringe',qty:'2',desc:'For giving liquid medicine. Usually comes with infant Tylenol.'},
    {name:'Infant pain reliever (Tylenol)',qty:'1',desc:'For fever and teething pain. Ask pediatrician about dosing.'},
    {name:'Gas drops (simethicone)',qty:'1',desc:'Helps with gas and colic. Safe for newborns.'},
    {name:'Gripe water',qty:'1',desc:'Natural remedy for colic and hiccups. Many parents find it helpful.'},
    {name:'Saline drops',qty:'1',desc:'Loosens mucus before using aspirator. Safe and gentle.'},
    {name:'First aid kit',qty:'1',desc:'Baby-safe bandages, antiseptic, tweezers for splinters.'},
    {name:'Baby sunscreen',qty:'1',desc:'For babies 6+ months. Before that, keep in shade and use hats.'},
    {name:'Outlet covers',qty:'1 pack',desc:'Baby-proof before baby is mobile. Easier to do early!'},
    {name:'Cabinet locks',qty:'1 pack',desc:'For cabinets with cleaning supplies and medicines.'},
    {name:'Baby gate',qty:'1-2',desc:'Need around 6-8 months when baby starts crawling.'}
  ]},
  {id:'play',icon:'🧸',title:'Play & Development',items:[
    {name:'Play mat/activity gym',qty:'1',desc:'Tummy time essential! Hanging toys encourage reaching and grabbing.'},
    {name:'Soft rattles',qty:'2-3',desc:'Easy to grip. Helps develop hand-eye coordination.'},
    {name:'Teething toys',qty:'3-4',desc:'Teething starts around 4-6 months. Have variety ready.'},
    {name:'Soft books',qty:'2-3',desc:'Crinkle books and cloth books are safe for babies to chew.'},
    {name:'Board books',qty:'3-5',desc:'Never too early to read to baby! Black and white for newborns.'},
    {name:'Mirror toy',qty:'1',desc:'Babies love looking at faces - even their own!'},
    {name:'Stacking toys',qty:'1 set',desc:'Great for 6+ months. Teaches cause and effect.'},
    {name:'Soft blocks',qty:'1 set',desc:'Safe for throwing and stacking. Good for motor skills.'}
  ]},
  {id:'mom',icon:'💐',title:'For Mom',items:[
    {name:'Postpartum pads (heavy)',qty:'2-3 packs',desc:"Hospital provides some, but you'll need more at home. Heavy flow for first weeks."},
    {name:'Comfortable underwear',qty:'5-6',desc:'High-waisted, stretchy. Some prefer disposable mesh from hospital.'},
    {name:'Nursing nightgowns',qty:'2-3',desc:'Easy access for nighttime feeds. Button-front or pull-aside.'},
    {name:'Nipple shields',qty:'1 pack',desc:'Helps with latch issues. Ask lactation consultant before using.'},
    {name:'Perineal spray/witch hazel pads',qty:'1',desc:'Soothes soreness after vaginal delivery. Hospital may provide.'},
    {name:'Sitz bath',qty:'1',desc:'Warm water soaks help healing. Can use in toilet.'},
    {name:'Belly band/postpartum wrap',qty:'1',desc:'Supports core muscles. Especially helpful after C-section.'},
    {name:'Water bottle with straw',qty:'1',desc:'Stay hydrated while nursing! Straw makes one-handed drinking easy.'},
    {name:'Healthy snacks',qty:'stock up',desc:'Nursing makes you hungry! Protein bars, nuts, fruit.'},
    {name:'Nursing cover',qty:'1',desc:'For breastfeeding in public if you prefer privacy. Muslin swaddle works too.'}
  ]}
];
    </script>

    <script>
document.addEventListener('DOMContentLoaded', init);

// Set min date for due date picker to today
const dueDateInput = document.getElementById('dueDate');
if (dueDateInput) {
    const today = new Date().toISOString().split('T')[0];
    dueDateInput.min = today;
}

function init() {
  const urlParams = new URLSearchParams(window.location.search);
  const registryId = urlParams.get('id');
  if (registryId) { loadRegistry(registryId); }
  else {
    const savedId = localStorage.getItem('registryId');
    if (savedId) loadRegistry(savedId);
  }
  updateStats();
}

async function createRegistry(event) {
  event.preventDefault();
  const name = document.getElementById('parentName').value.trim();
  const email = document.getElementById('parentEmail').value.trim();
  const babyName = document.getElementById('babyName').value.trim();
  const dueDate = document.getElementById('dueDate').value;
  if (!document.getElementById('acceptTerms').checked) { showToast('Please accept the Privacy Policy and Terms'); return false; }
  
  registry = {parentName:name,parentEmail:email,babyName:babyName||null,dueDate:dueDate||null,currency:currency,items:initializeItems(),coparents:[],createdAt:new Date().toISOString(),updatedAt:new Date().toISOString(),userType:'registryUser'};
  try {
    const docRef = await db.collection('registry_users').add(registry);
    registry.id = docRef.id;
    localStorage.setItem('registryId', docRef.id);
    showRegistry();
    showToast('Registry created! ≡ƒÄë');
  } catch (error) { console.error('Error:', error); showToast('Error creating registry'); }
  return false;
}

function continueAsGuest() {
  registry = {parentName:'Guest',parentEmail:null,babyName:null,dueDate:null,currency:currency,items:initializeItems(),coparents:[],createdAt:new Date().toISOString(),updatedAt:new Date().toISOString(),isGuest:true};
  showRegistry();
  showToast('Browsing as guest. Create account to save & share!');
}

function initializeItems() {
  const items = {};
  let idx = 0;
  checklistData.forEach(cat => {
    cat.items.forEach(item => {
      const id = `${cat.id}_${idx}`;
      items[id] = {id:id,categoryId:cat.id,name:item.name,desc:item.desc,qty:item.qty,checked:false,price:null,links:[],notes:''};
      idx++;
    });
  });
  return items;
}

async function loadRegistry(registryId) {
  try {
    const doc = await db.collection('registry_users').doc(registryId).get();
    if (doc.exists) {
      registry = {id:doc.id,...doc.data()};
      localStorage.setItem('registryId', registryId);
      if (registry.currency) { currency = registry.currency; document.getElementById('currencySelect').value = currency; }
      showRegistry();
    } else { showToast('Registry not found'); }
  } catch (error) { console.error('Error:', error); showToast('Error loading registry'); }
}

function showRegistry() {
  document.getElementById('registrySetup').classList.add('hidden');
  document.getElementById('searchSection').classList.add('hidden');
  document.getElementById('registryHeader').classList.remove('hidden');
  document.getElementById('controls').classList.remove('hidden');
  document.getElementById('checklistContainer').classList.remove('hidden');
  document.getElementById('fabAdd').classList.remove('hidden');
  
  const title = registry.babyName ? `${registry.babyName}'s Registry` : `${registry.parentName}'s Baby Registry`;
  document.getElementById('registryTitle').textContent = title;
  document.getElementById('printTitle').textContent = title;
  let subtitle = '';
  if (registry.dueDate) { const due = new Date(registry.dueDate); subtitle = `Due: ${due.toLocaleDateString('en-US',{month:'long',year:'numeric'})}`; }
  document.getElementById('registrySubtitle').textContent = subtitle;
  document.getElementById('printSubtitle').textContent = subtitle;
  renderChecklist();
  updateStats();
}

function renderChecklist() {
  const container = document.getElementById('checklistContainer');
  container.innerHTML = '';
  
  checklistData.forEach(category => {
    const categoryItems = Object.values(registry.items).filter(item => item.categoryId === category.id);
    let filteredItems = currentFilter === 'needed' ? categoryItems.filter(item => !item.checked) : categoryItems;
    if (filteredItems.length === 0 && currentFilter === 'needed') return;
    
    const checkedCount = categoryItems.filter(i => i.checked).length;
    const categoryEl = document.createElement('div');
    categoryEl.className = 'category collapsed';
    categoryEl.innerHTML = `
      <div class="category-header" onclick="toggleCategory(this)">
        <div class="category-title"><span class="category-icon">${category.icon}</span><span>${category.title}</span><span class="category-count">${checkedCount}/${categoryItems.length}</span></div>
        <span class="category-toggle">Γû╝</span>
      </div>
      <div class="category-items" id="items-${category.id}"></div>`;
    
    const itemsContainer = categoryEl.querySelector('.category-items');
    filteredItems.forEach(item => {
      const itemEl = document.createElement('div');
      itemEl.className = `item ${item.checked ? 'checked' : ''}`;
      itemEl.onclick = (e) => { if (!e.target.closest('.checkbox') && !e.target.closest('.item-qty input')) showItemDetail(item.id); };
      const hasLinks = item.links && item.links.length > 0;
      const lowestPrice = hasLinks ? Math.min(...item.links.filter(l => l.price).map(l => l.price)) : item.price;
      itemEl.innerHTML = `
        <div class="checkbox" onclick="event.stopPropagation(); toggleItem('${item.id}')">${item.checked ? 'Γ£ô' : ''}</div>
        <div class="item-content"><div class="item-name">${item.name}</div><div class="item-desc">${item.desc}</div></div>
        <div class="item-meta">
          <div class="item-qty"><input type="text" value="${item.qty}" onclick="event.stopPropagation()" onchange="updateQty('${item.id}', this.value)" title="Quantity needed"></div>
          ${lowestPrice ? `<span class="item-price">${formatPrice(lowestPrice)}</span>` : ''}
          ${hasLinks ? `<span class="item-link-badge">${item.links.length}</span>` : ''}
        </div>`;
      itemsContainer.appendChild(itemEl);
    });
    container.appendChild(categoryEl);
  });
}

function toggleCategory(header) { header.parentElement.classList.toggle('collapsed'); }
function expandAll() { document.querySelectorAll('.category').forEach(cat => cat.classList.remove('collapsed')); }
function collapseAll() { document.querySelectorAll('.category').forEach(cat => cat.classList.add('collapsed')); }
function filterItems(filter) { currentFilter = filter; document.querySelectorAll('.control-btn').forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); renderChecklist(); }

async function toggleItem(itemId) {
  if (!registry || !registry.items[itemId]) return;
  registry.items[itemId].checked = !registry.items[itemId].checked;
  registry.updatedAt = new Date().toISOString();
  renderChecklist(); updateStats(); await saveRegistry();
}

async function updateQty(itemId, newQty) {
  if (!registry || !registry.items[itemId]) return;
  registry.items[itemId].qty = newQty;
  registry.updatedAt = new Date().toISOString();
  await saveRegistry();
}

async function saveRegistry() {
  if (!registry || !registry.id || registry.isGuest) return;
  try { await db.collection('registry_users').doc(registry.id).update({items:registry.items,coparents:registry.coparents,currency:registry.currency,updatedAt:registry.updatedAt}); }
  catch (error) { console.error('Error saving:', error); }
}

function updateStats() {
  if (!registry) { document.getElementById('totalItems').textContent = '87'; return; }
  const items = Object.values(registry.items);
  const total = items.length, checked = items.filter(i => i.checked).length;
  const percent = total > 0 ? Math.round((checked / total) * 100) : 0;
  let totalValue = 0;
  items.forEach(item => {
    if (item.links && item.links.length > 0) { const prices = item.links.filter(l => l.price).map(l => l.price); if (prices.length > 0) totalValue += Math.min(...prices); }
    else if (item.price) totalValue += item.price;
  });
  document.getElementById('totalItems').textContent = total;
  document.getElementById('purchasedCount').textContent = checked;
  document.getElementById('totalValue').textContent = formatPrice(totalValue);
  document.getElementById('progressFill').style.width = `${percent}%`;
  document.getElementById('progressText').textContent = `${percent}% Complete`;
}
    </script>

    <script>
function showItemDetail(itemId) {
  currentItemId = itemId;
  const item = registry.items[itemId];
  if (!item) return;
  
  let linksHtml = '';
  if (item.links && item.links.length > 0) {
    linksHtml = item.links.map((link, idx) => `
      <div class="buying-option">
        <div class="store-icon">≡ƒ¢Æ</div>
        <div class="store-info"><div class="store-name">${link.storeName || 'Online Store'}</div><div class="store-price">${link.price ? formatPrice(link.price) : 'Price not set'}</div></div>
        <a href="${link.url}" target="_blank" class="view-btn">View</a>
        <button class="remove-link" onclick="removeLink('${itemId}', ${idx})">Γ£ò</button>
      </div>`).join('');
  }
  
  document.getElementById('itemDetailContent').innerHTML = `
    <div class="detail-header"><h3 class="detail-title">${item.name}</h3><p class="detail-desc">${item.desc}</p></div>
    <div class="detail-content">
      <div class="detail-section"><h4>Details</h4>
        <div class="detail-row"><span class="detail-label">Quantity Needed</span><span class="detail-value">${item.qty}</span></div>
        <div class="detail-row"><span class="detail-label">Status</span><span class="detail-value">${item.checked ? 'Γ£à Got it!' : '≡ƒôï Still needed'}</span></div>
      </div>
      <div class="detail-section"><h4>Where to Buy</h4>${linksHtml}
        <button class="add-link-btn" onclick="showAddLinkModal('${itemId}')"><span>≡ƒöù</span> Add Product Link</button>
      </div>
      <div class="detail-actions">
        <button class="mark-btn ${item.checked ? 'needed' : ''}" onclick="toggleItem('${itemId}'); closeItemDetail();">${item.checked ? 'Mark as Needed' : 'Mark as Got It! Γ£ô'}</button>
      </div>
    </div>`;
  document.getElementById('itemDetailPanel').classList.remove('hidden');
}

function closeItemDetail() { document.getElementById('itemDetailPanel').classList.add('hidden'); currentItemId = null; }

function showAddLinkModal(itemId) {
  document.getElementById('linkItemId').value = itemId;
  document.getElementById('productUrl').value = '';
  document.getElementById('storeName').value = '';
  document.getElementById('linkPrice').value = '';
  document.getElementById('linkNotes').value = '';
  document.getElementById('linkCurrLabel').textContent = currency;
  closeItemDetail();
  document.getElementById('addLinkModal').classList.remove('hidden');
}

async function saveProductLink(event) {
  event.preventDefault();
  const itemId = document.getElementById('linkItemId').value;
  const url = document.getElementById('productUrl').value.trim();
  const storeName = document.getElementById('storeName').value.trim();
  const price = parseFloat(document.getElementById('linkPrice').value) || null;
  const notes = document.getElementById('linkNotes').value.trim();
  if (!registry.items[itemId]) return false;
  if (!registry.items[itemId].links) registry.items[itemId].links = [];
  
  let store = storeName;
  if (!store) { try { const urlObj = new URL(url); store = urlObj.hostname.replace('www.', '').split('.')[0]; store = store.charAt(0).toUpperCase() + store.slice(1); } catch (e) { store = 'Online Store'; } }
  
  registry.items[itemId].links.push({url:url,storeName:store,price:price,notes:notes,addedAt:new Date().toISOString()});
  registry.updatedAt = new Date().toISOString();
  closeModal('addLinkModal');
  await saveRegistry();
  renderChecklist(); updateStats();
  showToast('Product link added! ≡ƒöù');
  showItemDetail(itemId);
  return false;
}

async function removeLink(itemId, linkIndex) {
  if (!registry.items[itemId] || !registry.items[itemId].links) return;
  registry.items[itemId].links.splice(linkIndex, 1);
  registry.updatedAt = new Date().toISOString();
  await saveRegistry();
  renderChecklist(); updateStats();
  showItemDetail(itemId);
  showToast('Link removed');
}

function showAddCustomModal() {
  document.getElementById('customName').value = '';
  document.getElementById('customCategory').value = '';
  document.getElementById('customQty').value = '1';
  document.getElementById('customPrice').value = '';
  document.getElementById('customUrl').value = '';
  document.getElementById('customNotes').value = '';
  document.getElementById('customCurrLabel').textContent = currency;
  document.getElementById('addCustomModal').classList.remove('hidden');
}

async function addCustomItem(event) {
  event.preventDefault();
  const name = document.getElementById('customName').value.trim();
  const categoryId = document.getElementById('customCategory').value;
  const qty = document.getElementById('customQty').value.trim() || '1';
  const price = parseFloat(document.getElementById('customPrice').value) || null;
  const url = document.getElementById('customUrl').value.trim();
  const notes = document.getElementById('customNotes').value.trim();
  if (!name || !categoryId) { showToast('Please fill in name and category'); return false; }
  
  const itemId = `custom_${Date.now()}`;
  registry.items[itemId] = {id:itemId,categoryId:categoryId,name:name,desc:notes||'Custom item',qty:qty,checked:false,price:price,links:url?[{url:url,storeName:'',price:price,addedAt:new Date().toISOString()}]:[],notes:notes,isCustom:true};
  registry.updatedAt = new Date().toISOString();
  closeModal('addCustomModal');
  await saveRegistry();
  renderChecklist(); updateStats();
  showToast('Custom item added! Γ£¿');
  return false;
}

function changeCurrency() {
  currency = document.getElementById('currencySelect').value;
  document.getElementById('customCurrLabel').textContent = currency;
  document.getElementById('linkCurrLabel').textContent = currency;
  if (registry) { registry.currency = currency; saveRegistry(); renderChecklist(); updateStats(); }
}

function formatPrice(amount) {
  if (!amount) return '';
  const symbols = {'KSH':'KSH ','USD':'$','EUR':'Γé¼','GBP':'┬ú','NGN':'Γéª','UGX':'UGX ','TZS':'TZS '};
  return (symbols[currency] || currency + ' ') + amount.toLocaleString();
}

async function searchRegistries() {
  const query = document.getElementById('searchInput').value.trim().toLowerCase();
  if (!query) return;
  const resultsDiv = document.getElementById('searchResults');
  resultsDiv.innerHTML = '<p style="text-align:center;color:var(--text-light);font-size:0.85rem;">Searching...</p>';
  resultsDiv.classList.remove('hidden');
  try {
    const snapshot = await db.collection('registry_users').where('userType','==','registryUser').limit(50).get();
    const results = [];
    snapshot.forEach(doc => {
      const data = doc.data();
      if ((data.parentName && data.parentName.toLowerCase().includes(query)) || (data.parentEmail && data.parentEmail.toLowerCase().includes(query)) || (data.babyName && data.babyName.toLowerCase().includes(query))) {
        results.push({id:doc.id,...data});
      }
    });
    if (results.length === 0) { resultsDiv.innerHTML = '<p style="text-align:center;color:var(--text-light);font-size:0.85rem;">No registries found</p>'; }
    else { resultsDiv.innerHTML = results.map(r => `<div class="search-result-item" onclick="loadRegistry('${r.id}')"><div class="search-result-avatar">${(r.parentName||'G')[0].toUpperCase()}</div><div class="search-result-info"><h4>${r.babyName ? r.babyName+"'s Registry" : r.parentName+"'s Registry"}</h4><p>${r.parentName}${r.dueDate ? ' ΓÇó Due '+new Date(r.dueDate).toLocaleDateString('en-US',{month:'short',year:'numeric'}) : ''}</p></div></div>`).join(''); }
  } catch (error) { console.error('Search error:', error); resultsDiv.innerHTML = '<p style="text-align:center;color:var(--text-light);font-size:0.85rem;">Search error</p>'; }
}

function showShareModal() {
  if (!registry || !registry.id) { showToast('Save your registry first to share'); return; }
  document.getElementById('shareLink').value = `${window.location.origin}${window.location.pathname}?id=${registry.id}`;
  document.getElementById('shareModal').classList.remove('hidden');
}

function copyShareLink() { document.getElementById('shareLink').select(); document.execCommand('copy'); showToast('Link copied! ≡ƒôï'); }

function shareVia(platform) {
  const url = document.getElementById('shareLink').value;
  const title = registry.babyName ? `${registry.babyName}'s Baby Registry` : `${registry.parentName}'s Baby Registry`;
  const text = 'Check out my baby registry! ≡ƒæ╢≡ƒÄü';
  let shareUrl = '';
  if (platform === 'whatsapp') shareUrl = `https://wa.me/?text=${encodeURIComponent(text+'\n'+url)}`;
  else if (platform === 'email') shareUrl = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(text+'\n\n'+url)}`;
  else if (platform === 'facebook') shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
  window.open(shareUrl, '_blank');
}

function showInviteModal() {
  document.getElementById('coparentName').value = '';
  document.getElementById('coparentEmail').value = '';
  updateCoparentList();
  document.getElementById('inviteModal').classList.remove('hidden');
}

async function inviteCoParent(event) {
  event.preventDefault();
  const name = document.getElementById('coparentName').value.trim();
  const email = document.getElementById('coparentEmail').value.trim();
  if (!registry.coparents) registry.coparents = [];
  registry.coparents.push({name:name,email:email,addedAt:new Date().toISOString()});
  registry.updatedAt = new Date().toISOString();
  await saveRegistry();
  updateCoparentList();
  document.getElementById('coparentName').value = '';
  document.getElementById('coparentEmail').value = '';
  showToast(`${name} added as co-parent! ≡ƒæÑ`);
  return false;
}

function updateCoparentList() {
  const listDiv = document.getElementById('coparentList');
  if (!registry || !registry.coparents || registry.coparents.length === 0) { listDiv.innerHTML = ''; return; }
  listDiv.innerHTML = `<h4>Co-Parents</h4>${registry.coparents.map(cp => `<div class="coparent-item"><div class="avatar">${cp.name[0].toUpperCase()}</div><span>${cp.name}</span></div>`).join('')}`;
}

function printChecklist() { document.querySelectorAll('.category').forEach(cat => cat.classList.remove('collapsed')); window.print(); }
function closeModal(modalId) { document.getElementById(modalId).classList.add('hidden'); }
function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.remove('hidden'); setTimeout(() => toast.classList.add('hidden'), 3000); }
    </script>
</body>
</html>