script.js

const LOGO_SVG = `<svg viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="60" stroke="#cfa349" stroke-width="8" fill="none"/>
  <line x1="100" y1="100" x2="100" y2="65" stroke="#cfa349" stroke-width="5"/>
  <line x1="100" y1="100" x2="130" y2="100" stroke="#cfa349" stroke-width="5"/>
  <circle cx="100" cy="100" r="5" fill="#cfa349"/>
  <rect x="160" y="90" width="12" height="20" fill="#cfa349"/>
  <text x="200" y="90" font-family="Arial" font-size="32" fill="white" font-weight="bold">TIMEZONE</text>
  <text x="200" y="130" font-family="Arial" font-size="22" fill="#cfa349">WATCH STORE</text>
</svg>`;

function injectLogos() {
    document.querySelectorAll('.logo-inject').forEach(el => {
        el.innerHTML = LOGO_SVG;
    });
}

function initDarkMode() {
    if (localStorage.getItem('tz-dark') === '1') {
        document.body.classList.add('dark-mode');
    }
    updateDarkBtn();
}

function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
    localStorage.setItem('tz-dark', document.body.classList.contains('dark-mode') ? '1' : '0');
    updateDarkBtn();
}

function updateDarkBtn() {
    const isDark = document.body.classList.contains('dark-mode');
    document.querySelectorAll('.dark-toggle').forEach(btn => {
        btn.textContent = isDark ? '☀ Light' : '☾ Dark';
    });
}


function requireAuth() {
    if (!localStorage.getItem('tz-logged-in')) {
        window.location.href = 'login.html';
    }
}


const watches = [
    /* ---- ROLEX ---- */
    {id:1,  brand:"Rolex", name:"Submariner Date",      type:"Diver",         price:900000,
     img:"images/rolex1.jpg"},
    {id:2,  brand:"Rolex", name:"Datejust 41",          type:"Dress",         price:750000,
     img:"images/rolex2.jpg"},
    {id:3,  brand:"Rolex", name:"Daytona Cosmograph",   type:"Chronograph",   price:1500000,
     img:"images/rolex3.jpg"},
    {id:4,  brand:"Rolex", name:"GMT-Master II",        type:"Pilot",         price:1100000,
     img:"images/rolex4.jpg"},
    {id:5,  brand:"Rolex", name:"Sky-Dweller",          type:"World Timer",   price:1800000,
     img:"images/rolex5.jpg"},

    /* ---- OMEGA ---- */
    {id:6,  brand:"Omega", name:"Seamaster 300M",       type:"Diver",         price:550000,
     img:"images/omega1.jpg"},
    {id:7,  brand:"Omega", name:"Speedmaster Moonwatch",type:"Chronograph",   price:620000,
     img:"images/omega2.jpg"},
    {id:8,  brand:"Omega", name:"Constellation",        type:"Dress",         price:480000,
     img:"images/omega3.jpg"},
    {id:9,  brand:"Omega", name:"De Ville Tresor",      type:"Dress",         price:420000,
     img:"images/omega4.jpg"},
    {id:10, brand:"Omega", name:"Aqua Terra",           type:"Sport",         price:520000,
     img:"images/omega5.jpg"},

    /* ---- PATEK PHILIPPE ---- */
    {id:11, brand:"Patek Philippe", name:"Nautilus 5711",          type:"Sport Luxe",  price:6500000,
     img:"images/patek1.jpg"},
    {id:12, brand:"Patek Philippe", name:"Calatrava Ref 6119",     type:"Dress",       price:4200000,
     img:"images/patek2.jpg"},
    {id:13, brand:"Patek Philippe", name:"Aquanaut 5168G",         type:"Sport",       price:5500000,
     img:"images/patek3.jpg"},
    {id:14, brand:"Patek Philippe", name:"Grand Complication 5270", type:"Perpetual",  price:9800000,
     img:"images/patek4.jpg"},
    {id:15, brand:"Patek Philippe", name:"Annual Calendar 5396",   type:"Calendar",    price:7200000,
     img:"images/patek5.jpg"},

    /* ---- JACOB & CO ---- */
    {id:16, brand:"Jacob & Co", name:"Astronomia Solar",    type:"Skeletonised",    price:12000000,
     img:"images/jacob1.jpg"},
    {id:17, brand:"Jacob & Co", name:"Twin Turbo Furious",  type:"Chronograph",     price:8500000,
     img:"images/jacob2.jpg"},
    {id:18, brand:"Jacob & Co", name:"Epic X Chrono",       type:"Skeleton",        price:5800000,
     img:"images/jacob3.jpg"},
    {id:19, brand:"Jacob & Co", name:"Opera Godfather",     type:"Minute Repeater", price:18000000,
     img:"images/jacob4.jpg"},
    {id:20, brand:"Jacob & Co", name:"Billionaire Diamond", type:"Haute Joaillerie", price:22000000,
     img:"images/jacob5.jpg"},
];


function attachImgFallbacks() {
    document.querySelectorAll('.product-card img').forEach(img => {
        img.addEventListener('error', function() {
            this.style.display = 'none';
            const ph = document.createElement('div');
            ph.style.cssText = `width:100%;height:185px;background:#1a1a1a;display:flex;
                align-items:center;justify-content:center;color:#cfa349;
                font-family:'Playfair Display',serif;font-size:0.9rem;letter-spacing:2px;text-align:center;padding:10px;`;
            ph.textContent = this.alt || 'LUXURY TIMEPIECE';
            this.parentNode.insertBefore(ph, this);
        });
    });
}

/*CART*/
function getCart() {
    try { return JSON.parse(localStorage.getItem('tz-cart') || '[]'); } catch(e) { return []; }
}
function saveCart(cart) { localStorage.setItem('tz-cart', JSON.stringify(cart)); }
function getCartCount() { return getCart().reduce((s,i) => s + i.qty, 0); }

function addToCart(watchId) {
    const watch = watches.find(w => w.id === watchId);
    if (!watch) return;
    const cart = getCart();
    const existing = cart.find(i => i.id === watchId);
    if (existing) { existing.qty++; } else { cart.push({...watch, qty:1}); }
    saveCart(cart);
    updateCartBadge();
    showToast(`${watch.name} added to cart!`);
}
function removeFromCart(id) {
    saveCart(getCart().filter(i => i.id !== id));
    updateCartBadge();
}
function updateCartBadge() {
    const b = document.getElementById('cartBadge');
    if (b) b.textContent = getCartCount();
}

/* =============== TOAST =============== */
function showToast(msg) {
    let t = document.getElementById('tz-toast');
    if (!t) {
        t = document.createElement('div');
        t.id = 'tz-toast';
        document.body.appendChild(t);
    }
    t.textContent = msg;
    t.style.opacity = '1';
    clearTimeout(t._timer);
    t._timer = setTimeout(() => { t.style.opacity = '0'; }, 2500);
}

/* FORM VALIDATION */
function validateRegister() {
    let valid = true;
    document.querySelectorAll('.auth-error').forEach(e => e.textContent = '');

    const name     = (document.getElementById('name')?.value || '').trim();
    const email    = (document.getElementById('email')?.value || '').trim();
    const mobile   = (document.getElementById('mobile')?.value || '').trim();
    const password = document.getElementById('password')?.value || '';
    const confirm  = document.getElementById('confirmPassword')?.value || '';
    const category = document.getElementById('category')?.value || '';

    if (name && name.length < 3) {
        document.getElementById('nameError').textContent = 'Name must be at least 3 characters.'; valid = false;
    }
    if (email && !/^[^ ]+@[^ ]+\.[a-z]{2,}$/i.test(email)) {
        document.getElementById('emailError').textContent = 'Enter a valid email address.'; valid = false;
    }
    if (mobile && !/^[0-9]{10}$/.test(mobile)) {
        document.getElementById('mobileError').textContent = 'Mobile must be exactly 10 digits.'; valid = false;
    }
    if (password && !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/.test(password)) {
        document.getElementById('passwordError').textContent = 'Min 8 chars with uppercase, lowercase, number & symbol.'; valid = false;
    }
    if (confirm && password !== confirm) {
        document.getElementById('confirmPasswordError').textContent = 'Passwords do not match.'; valid = false;
    }
    if (!category) {
        document.getElementById('categoryError').textContent = 'Please select a category.'; valid = false;
    }
    return valid;
}

function validateLogin() {
    let valid = true;
    document.querySelectorAll('.auth-error').forEach(e => e.textContent = '');
    const email    = (document.getElementById('email')?.value || '').trim();
    const password = document.getElementById('password')?.value || '';
    if (email && !/^[^ ]+@[^ ]+\.[a-z]{2,}$/i.test(email)) {
        document.getElementById('emailError').textContent = 'Enter a valid email address.'; valid = false;
    }
    if (password && password.length < 6) {
        document.getElementById('passwordError').textContent = 'Password must be at least 6 characters.'; valid = false;
    }
    return valid;
}

function handleLogin(e) {
    e.preventDefault();
    if (!validateLogin()) return;
    // Mark as logged in
    localStorage.setItem('tz-logged-in', '1');
    window.location.href = 'home.html';
}

function handleRegister(e) {
    e.preventDefault();
    if (!validateRegister()) return;
    localStorage.setItem('tz-logged-in', '1');
    window.location.href = 'home.html';
}

function logout() {
    localStorage.removeItem('tz-logged-in');
    window.location.href = 'login.html';
}


function togglePassword(inputId, checkbox) {
    const f = document.getElementById(inputId);
    if (f) f.type = checkbox.checked ? 'text' : 'password';
}
function toggleBothPasswords(checkbox) {
    ['password','confirmPassword'].forEach(id => {
        const f = document.getElementById(id);
        if (f) f.type = checkbox.checked ? 'text' : 'password';
    });
}

window.addEventListener('DOMContentLoaded', () => {
    injectLogos();
    initDarkMode();
    updateCartBadge();
    attachImgFallbacks();
});