app.js

// Japanese Fashion Shopping Guide Application

// Application data with corrected and verified URLs
const appData = {
  brands: {
    FDMTL: "https://fdmtl.com/",
    Needles: "https://www.needles.jp/",
    Visvim: "https://www.visvim.tv/",
    Kapital: "https://www.kapital.jp/",
    "Porter Classic": "https://porterclassic.com/",
    "North face purple label": "https://www.instagram.com/thenorthface.purplelabel/",
    Nanamica: "https://nanamica.com/",
    "Human made": "https://humanmade.jp/",
    Neighborhood: "https://www.neighborhood.jp/",
    Wtaps: "https://wtaps.com/",
    DESCENDANT: "https://descendant.jp/",
    CLESSTE: "https://clesste.com/",
    "See see": "https://seesee-sfc.com/",
    Fr2: "https://fr2.tokyo/",
    "Fresh service": "https://freshservice.jp/",
    Orslow: "https://orslow.jp/",
    "Good on": "https://goodon.jp/",
    "Wacko Maria": "https://wackomaria.co.jp/",
  },
  hongKongGuide: [
    {
      brand: "FDMTL",
      url: "https://fdmtl.com/",
      stores: [
        { name: "STUDIOUS", url: "https://studious.co.jp/" },
        { name: "連卡佛", url: "https://www.lanecrawford.com.hk/" },
        { name: "Musea juice", url: "https://juicestore.com/" },
        { name: "open dialogue", url: "https://opendialogue.jp/" },
        { name: "popcorn", url: "https://www.popcornstore.com.hk/" },
      ],
    },
    {
      brand: "Needles",
      url: "https://www.needles.jp/",
      stores: [
        { name: "STUDIOUS", url: "https://studious.co.jp/" },
        { name: "EXI.T", url: "https://www.ithk.com/eng/html/brands/EXI_T" },
        { name: "JUICE", url: "https://juicestore.com/" },
      ],
    },
    {
      brand: "Visvim",
      url: "https://www.visvim.tv/",
      stores: [{ name: "visvim", url: "https://www.visvim.tv/" }],
    },
    {
      brand: "Kapital",
      url: "https://www.kapital.jp/",
      stores: [
        { name: "DEL store", url: "https://www.instagram.com/delstore_hk/" },
        { name: "Visvim human", url: "https://www.visvim.tv/" },
      ],
    },
    {
      brand: "Porter Classic",
      url: "https://porterclassic.com/",
      stores: [{ name: "DEL store", url: "https://www.instagram.com/delstore_hk/" }],
    },
    {
      brand: "North face purple label",
      url: "https://www.instagram.com/thenorthface.purplelabel/",
      stores: [{ name: "supbean", url: "https://supbean.com/" }],
    },
    {
      brand: "Nanamica",
      url: "https://nanamica.com/",
      stores: [{ name: "連卡佛", url: "https://www.lanecrawford.com.hk/" }],
    },
    {
      brand: "Human made",
      url: "https://humanmade.jp/",
      stores: [
        { name: "HBX最平", url: "https://hbx.com/" },
        {
          name: "Husky Sneaker",
          url: "https://www.huskysneaker.com/categories/human-made",
        },
        { name: "second kill", url: "https://www.instagram.com/second_kill/" },
        { name: "Bcstore", url: "https://www.bcstorehkg.com/" },
      ],
    },
    {
      brand: "Neighborhood",
      url: "https://www.neighborhood.jp/",
      stores: [
        { name: "置地專門店", url: "https://www.lanecrawford.com.hk/" },
        { name: "中環hoods", url: "https://hoods.com/" },
        { name: "CWB exit", url: "https://www.ithk.com/eng/html/brands/EXI_T" },
        {
          name: "Husky Sneaker",
          url: "https://www.huskysneaker.com/categories/neighborhood",
        },
        { name: "Bcstore", url: "https://www.bcstorehkg.com/" },
        { name: "希慎HBX", url: "https://hbx.com/" },
      ],
    },
    {
      brand: "WTAPS",
      url: "https://wtaps.com/",
      stores: [
        { name: "hoods", url: "https://hoods.com/" },
        {
          name: "Husky Sneaker",
          url: "https://www.huskysneaker.com/categories/wtaps",
        },
        { name: "Bcstore", url: "https://www.bcstorehkg.com/" },
      ],
    },
    {
      brand: "DESCENDANT",
      url: "https://descendant.jp/",
      stores: [
        { name: "EXI.T", url: "https://www.ithk.com/eng/html/brands/EXI_T" },
        { name: "Bcstore", url: "https://www.bcstorehkg.com/" },
        { name: "Supbean", url: "https://supbean.com/" },
      ],
    },
    {
      brand: "CLESSTE",
      url: "https://clesste.com/",
      stores: [
        { name: "tree and branch", url: "https://treeandbranch.com/" },
        { name: "Bcstore", url: "https://www.bcstorehkg.com/" },
        { name: "Supbean", url: "https://supbean.com/" },
      ],
    },
    {
      brand: "See see",
      url: "https://seesee-sfc.com/",
      stores: [
        { name: "HBX", url: "https://hbx.com/" },
        { name: "Supbean", url: "https://supbean.com/" },
        { name: "Bcstore", url: "https://www.bcstorehkg.com/" },
      ],
    },
    {
      brand: "Fr2",
      url: "https://fr2.tokyo/",
      stores: [
        { name: "油麻地專門店", url: "https://fr2.tokyo/" },
        { name: "popcorn", url: "https://www.popcornstore.com.hk/" },
      ],
    },
    {
      brand: "Fresh service",
      url: "https://freshservice.jp/",
      stores: [
        { name: "comrade", url: "https://comradehk.com/" },
        { name: "exit", url: "https://www.ithk.com/eng/html/brands/EXI_T" },
      ],
    },
    {
      brand: "Orslow",
      url: "https://orslow.jp/",
      stores: [
        { name: "wander kagu", url: "https://wanderkagu.com/" },
        { name: "COMRADE", url: "https://comradehk.com/" },
      ],
    },
    {
      brand: "Good on",
      url: "https://goodon.jp/",
      stores: [
        { name: "simple legend", url: "https://www.instagram.com/simple_legend_shop/" },
        { name: "white whale", url: "https://www.instagram.com/white.whale.company/" },
      ],
    },
    {
      brand: "Wacko Maria",
      url: "https://wackomaria.co.jp/",
      stores: [
        { name: "STUDIOUS", url: "https://studious.co.jp/" },
        { name: "JUICE", url: "https://juicestore.com/" },
      ],
    },
  ],
  japaneseOnlineGood: {
    emsDirectShip: [
      {
        name: "Digital-Mountain",
        url: "https://www.digital-mountain.net/",
        description: "",
      },

      {
        name: "Deepinsideinc",
        url: "https://www.deepinsideinc.com/",
        description: "",
      },

      {
        name: "ANYTHING GOES",
        url: "https://anythinggoes.jp/",
        description: "",
      },
      { name: "HUES", url: "https://hues.co.jp/", description: "" },
      { name: "Reggie shop", url: "https://reggieshop.com/", description: "" },
    ],
    forwardingService: [
      { name: "ZOZOTOWN", url: "https://zozo.jp/", description: "" },
      {
        name: "Daytona Park",
        url: "https://www.daytona-park.com/",
        description: "",
      },
      {
        name: "LOFTMAN COMPANY",
        url: "https://www.loftman.co.jp/shop",
        description: "",
      },
      {
        name: "STUDIOUS",
        url: "https://studious.co.jp/shop/default.aspx",
        description: "",
      },
      {
        name: "navyharrys",
        url: "https://www.navyharrys.com/index.php",
        description: "",
      },
      { name: "ARKnets", url: "https://www.arknets.co.jp/", description: "" },
    ],
  },
  japaneseOfflineGuide: {
    hokkaido: [
      {
        name: "maw",
        url: "https://maw-sapporo.com/",
        comment: "睇graphpaper, fresh service",
      },
      {
        name: "FREAK'S STORE",
        url: "https://www.daytona-park.com/",
        comment: "你地熟過我",
      },
      { name: "kapital", url: "https://www.kapital.jp/", comment: "缺點少款" },
      {
        name: "figure",
        url: "https://figure-online.net/",
        comment: "wtaps/nbhd/nanamica果類任屌",
      },
      {
        name: "unplugged sapporo",
        url: "https://unpluggedsapporo.com/",
        comment: "睇 hender scheme，紳士嘢",
      },
      {
        name: "acousticrock",
        url: "http://www.acousticrock.jp/",
        comment: "睇vv",
      },
      {
        name: "wake",
        url: "https://www.instagram.com/wake.sapporo/",
        comment: "睇unlikely/ dp39，但缺點遠",
      },
      {
        name: "Coney Island",
        url: "https://coneyisland-sapporo.com/",
        comment: "hwdog同阿美卡嘰",
      },
      {
        name: "G.M geronimo",
        url: "https://geronimo-trd.com/",
        comment: "hwdog同阿美卡嘰",
      },
      {
        name: "billy's",
        url: "https://www.billys-tokyo.net/shop/",
        comment: "啲款勉強睇得上眼",
      },
      { name: "狸小路富士眼鏡", url: "", comment: "eyevan7285任試" },
    ],
    asahikawa: [
      {
        name: "POWWOW",
        url: "https://powwow.jp/",
        comment: "有Kapital, good on",
      },
    ],
    fukuoka: [
      {
        name: "HUES",
        url: "https://hues.co.jp/",
        comment: "porter classic, YOHJI, MM",
      },
      {
        name: "navyharrys",
        url: "https://www.navyharrys.com/",
        comment: "porter classic, Sun Surf",
      },
      {
        name: "N-HOOLYWOOD",
        url: "https://n-hoolywood.com/",
        comment: "PARCO FUKUOKA NEW WING",
      },
      {
        name: "福岡天神站",
        url: "",
        comment:
          "附近有曬最大路嘅hoods, bape, north face purple label, fr2 , chrome hearts, supreme，亦有first arrows，real mccoy ，賣pherrows嘅smart clothing store",
      },
      { name: "KAPITAL福岡店", url: "https://www.kapital.jp/", comment: "" },
    ],
    nagoya: [
      { name: "KAPITAL名古屋店", url: "https://www.kapital.jp/", comment: "" },
      {
        name: "porter classic名古屋店",
        url: "https://porterclassic.com/",
        comment: "",
      },
      {
        name: "N-HOOLYWOOD",
        url: "https://n-hoolywood.com/",
        comment: "3-1-65 OSU, NAKA-KU, NAGOYA-SHI, AICHI 460-0011",
      },
      {
        name: "FreshService STOCKROOM",
        url: "https://freshservice.jp/",
        comment: "愛知県名古屋市中區栄3-18-1",
      },
      {
        name: "IZUMIYA-NAGOYA",
        url: "https://izumiya-web.jp/",
        comment:
          "1LDK annex: 1LDK / 1LDK Stand, and wander, A.PRESSE, is-ness, S.F.C (STRIPES FOR CREATIVE) Park Side Store: KAPTAIN SUNSHINE, Paraboot, Porter Classic",
      },
    ],
  },
  problematicStores: [
    {
      name: "unexpected store online",
      url: "https://unexpected-store.com/",
      warning: "貨存不準確，試過有人兩次俾曬錢之後話無貨",
    },
    {
      name: "Supbean",
      url: "https://supbean.com/",
      warning:
        "有機會溝貨，試過有人幫襯佢買過 cahlumn 2pack tee，發現入面兩件都唔同size",
    },
  ],
  shoppingQA: {
    emsProcess:
      "EMS 係會經日本郵政送出你，再由香港郵政發俾比你，所以你填香港嘅地址就得。當你完成購買後，通常會有個code (例: ENXXXXXXXXXJP) 經email發比你，收到後可以去日本郵政個網睇至件貨去到邊，而到咗香港之後香港郵政個網都查到。如果你唔確定收件時間可以填住屋企地址先，件貨到咗香港之後香港郵政會sms你，時間唔啱既話可以係收到sms既第二朝之前轉地址(要睇返你個sms點寫)，轉附近郵局自己拎",
    daytonaPark: [
      "1. bns係用到的",
      "2. visa / master /一般香港既卡基本上都無分別都係用到的",
      "3. 一定要用 vpn 跳去日本(埋單全程)，某啲免費 vpn 太廢唔 work",
      "4. 一定要用 amazon pay",
      "5. 最難過既一關，隨機 ban amazon pay ac：好多時候去到購物車選擇結帳方式第1步就卡關，係因為佢有個隱藏隨機 ban amazon pay ac 機製（我前後開左4個ac，第4個先撞到比我用，要好似刷首抽咁，刷完之後果個ac就之後都會用得）",
      "6. 有可能會係第 3/4 步結帳轉入 amazon pay 再轉返黎既時候失敗 （似乎係因為購物籃中，唔可以同時存在有現貨同需要預訂既單品，要分開，否則就用唔到amazon pay。簡單地分開兩單即可解決）",
      "7. amazon 同 daytona 都要填地址姓名資料，佢問咩片假名定咩日本名果行，我就咁用 google 翻譯自己個名塞入去就搞掂。eg 陳大文，大文 (姓: 大文，名: 大文 | 日文姓: ダーウェン，日文名: ダーウェン）",
      "8. 據巴打測試，Amazon同Freaks store 名要用埋日本名",
    ],
  },
};

// Global state
let currentPage = "home";

// Initialize app
document.addEventListener("DOMContentLoaded", function () {
  console.log("App initializing...");

  // First populate all content
  populateContent();

  // Then initialize navigation after a short delay to ensure DOM is ready
  setTimeout(() => {
    initializeNavigation();
    setupFormHandlers();

    // Show home page by default
    showPage("home");
    console.log("App initialization completed");
  }, 100);
});

// Navigation handling
function initializeNavigation() {
  const navToggle = document.getElementById("navToggle");
  const navMenu = document.getElementById("navMenu");

  console.log("Initializing navigation...");
  console.log("Nav toggle:", navToggle);
  console.log("Nav menu:", navMenu);

  // Mobile nav toggle
  if (navToggle && navMenu) {
    navToggle.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("Nav toggle clicked");
      navMenu.classList.toggle("active");
      navToggle.classList.toggle("active");
    });
  }

  // Navigation links - use event delegation on document
  document.addEventListener("click", function (e) {
    const target = e.target.closest("[data-page]");
    if (target) {
      e.preventDefault();
      e.stopPropagation();

      const targetPage = target.getAttribute("data-page");
      console.log("Navigation clicked, target page:", targetPage);

      if (targetPage) {
        showPage(targetPage);

        // Close mobile menu if open
        if (navMenu && navMenu.classList.contains("active")) {
          navMenu.classList.remove("active");
        }
        if (navToggle && navToggle.classList.contains("active")) {
          navToggle.classList.remove("active");
        }
      }
    }
  });

  console.log("Navigation initialized");
}

function showPage(pageId) {
  console.log("Showing page:", pageId);

  // Hide all pages
  const allPages = document.querySelectorAll(".page");
  console.log("Found pages:", allPages.length);

  allPages.forEach((page) => {
    page.classList.remove("active");
    page.style.display = "none";
  });

  // Show target page
  const targetPage = document.getElementById(pageId);
  console.log("Target page element:", targetPage);

  if (targetPage) {
    targetPage.classList.add("active");
    targetPage.style.display = "block";
    currentPage = pageId;

    // Update navigation active state
    updateNavigation(pageId);

    // Scroll to top
    window.scrollTo(0, 0);

    console.log("Page shown successfully:", pageId);
  } else {
    console.error("Page not found:", pageId);
  }
}

function updateNavigation(activePageId) {
  const navLinks = document.querySelectorAll("a[data-page]");
  navLinks.forEach((link) => {
    const pageId = link.getAttribute("data-page");
    if (pageId === activePageId) {
      link.style.color = "var(--color-primary)";
      link.style.background = "var(--color-accent-light)";
    } else {
      link.style.color = "";
      link.style.background = "";
    }
  });
}

// ---------- Link preview thumbnails (dev grid version) ----------
// Screenshot previews via WordPress mShots (free, no API key);
// falls back to a favicon + initial-letter tile when a shot is unavailable.
function escapeHtml(text) {
  return String(text)
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

function previewThumbHtml(url, name) {
  const safeName = escapeHtml(name);
  const letter = safeName.charAt(0);
  if (!url) {
    return `
      <span class="preview-thumb preview-thumb--empty">
        <span class="preview-thumb__letter">${letter}</span>
      </span>`;
  }
  const shotUrl =
    "https://s.wordpress.com/mshots/v1/" +
    encodeURIComponent(url) +
    "?w=800&h=600";
  let favicon = "";
  try {
    const host = new URL(url).hostname;
    favicon = `<img class="preview-favicon" src="https://www.google.com/s2/favicons?domain=${encodeURIComponent(
      host
    )}&sz=64" alt="" onerror="this.style.display='none'" />`;
  } catch (e) {
    // keep plain-letter fallback for unparsable URLs
  }
  return `
    <span class="preview-thumb">
      <img class="preview-img" src="${shotUrl}" alt="${safeName} 網站預覽" loading="lazy"
        onerror="this.style.display='none';var f=this.parentElement.querySelector('.preview-fallback');if(f)f.style.display='flex';" />
      <span class="preview-fallback" style="display:none">${favicon}<span class="preview-thumb__letter">${letter}</span></span>
    </span>`;
}

// Content population
function populateContent() {
  console.log("Populating content...");
  populateHongKongGuide();
  populateJapaneseOnlineStores();
  populateJapaneseOfflineStores();
  populateProblematicStores();
  populateQAContent();
  populateBrandOptions();
  console.log("Content populated");
}

function populateHongKongGuide() {
  const container = document.getElementById("hongkongBrands");
  if (!container) {
    console.log("Hong Kong brands container not found");
    return;
  }

  console.log("Populating Hong Kong guide...");
  container.innerHTML = appData.hongKongGuide
    .map(
      (brandData) => `
    <div class="brand-card">
      <div class="brand-header">
        <h3><a href="${brandData.url}" target="_blank" rel="noopener">${escapeHtml(
        brandData.brand
      )}</a></h3>
      </div>
      <div class="stores-list">
        ${brandData.stores
          .map(
            (store) => `
          <a href="${store.url}" target="_blank" rel="noopener" class="store-preview-card">
            ${previewThumbHtml(store.url, store.name)}
            <span class="store-preview-name">${escapeHtml(store.name)}</span>
          </a>
        `
          )
          .join("")}
      </div>
    </div>
  `
    )
    .join("");
}

function storeCardHtml(store) {
  const thumb = store.url
    ? `<a href="${store.url}" target="_blank" rel="noopener" class="store-card__thumb">${previewThumbHtml(
        store.url,
        store.name
      )}</a>`
    : `<span class="store-card__thumb">${previewThumbHtml("", store.name)}</span>`;
  return `
    <div class="store-card store-card--preview">
      ${thumb}
      <div class="card__body">
        <h4>${
          store.url
            ? `<a href="${store.url}" target="_blank" rel="noopener">${escapeHtml(
                store.name
              )}</a>`
            : escapeHtml(store.name)
        }</h4>
        ${
          store.description
            ? `<p class="store-description">${escapeHtml(store.description)}</p>`
            : ""
        }
      </div>
    </div>
  `;
}

function populateJapaneseOnlineStores() {
  const emsContainer = document.getElementById("emsStores");
  const forwardingContainer = document.getElementById("forwardingStores");

  if (emsContainer) {
    console.log("Populating EMS stores...");
    emsContainer.innerHTML = appData.japaneseOnlineGood.emsDirectShip
      .map(storeCardHtml)
      .join("");
  }

  if (forwardingContainer) {
    console.log("Populating forwarding stores...");
    forwardingContainer.innerHTML = appData.japaneseOnlineGood.forwardingService
      .map(storeCardHtml)
      .join("");
  }
}

function populateJapaneseOfflineStores() {
  const container = document.getElementById("regionsContent");
  if (!container) {
    console.log("Regions content container not found");
    return;
  }

  const regionNames = {
    hokkaido: "北海道札幌",
    asahikawa: "旭川市",
    fukuoka: "福岡天神站",
    nagoya: "名古屋",
  };

  console.log("Populating Japanese offline stores...");
  container.innerHTML = Object.entries(appData.japaneseOfflineGuide)
    .map(
      ([region, stores]) => `
    <div class="region-section">
      <h2 class="region-title">${regionNames[region] || region}</h2>
      <div class="stores-list-region">
        ${stores
          .map(
            (store) => `
          <div class="region-store-card">
            ${
              store.url
                ? `<a href="${store.url}" target="_blank" rel="noopener" class="region-store-card__thumb">${previewThumbHtml(
                    store.url,
                    store.name
                  )}</a>`
                : `<span class="region-store-card__thumb">${previewThumbHtml(
                    "",
                    store.name
                  )}</span>`
            }
            <h4>${
              store.url
                ? `<a href="${store.url}" target="_blank" rel="noopener">${escapeHtml(
                    store.name
                  )}</a>`
                : escapeHtml(store.name)
            }</h4>
            ${
              store.comment
                ? `<p class="store-comment">${escapeHtml(store.comment)}</p>`
                : ""
            }
          </div>
        `
          )
          .join("")}
      </div>
    </div>
  `
    )
    .join("");
}

function populateProblematicStores() {
  const container = document.getElementById("problematicStores");
  if (!container) {
    console.log("Problematic stores container not found");
    return;
  }

  console.log("Populating problematic stores...");
  container.innerHTML = appData.problematicStores
    .map(
      (store) => `
    <div class="problematic-store">
      <a href="${store.url}" target="_blank" rel="noopener" class="problematic-store__thumb">${previewThumbHtml(
        store.url,
        store.name
      )}</a>
      <h4>🚨 <a href="${store.url}" target="_blank" rel="noopener">${escapeHtml(
        store.name
      )}</a></h4>
      <div class="warning-text">
        ${escapeHtml(store.warning)}
      </div>
    </div>
  `
    )
    .join("");
}

function populateQAContent() {
  const emsProcessElement = document.getElementById("emsProcess");
  const daytonaStepsElement = document.getElementById("daytonaSteps");

  if (emsProcessElement) {
    console.log("Populating EMS process...");
    emsProcessElement.textContent = appData.shoppingQA.emsProcess;
  }

  if (daytonaStepsElement) {
    console.log("Populating Daytona steps...");
    daytonaStepsElement.innerHTML = appData.shoppingQA.daytonaPark
      .map(
        (step, index) => `
      <div class="step-item">
        <div class="step-number">${index + 1}</div>
        ${step}
      </div>
    `
      )
      .join("");
  }
}

function populateBrandOptions() {
  const brandSelect = document.getElementById("brandName");
  if (!brandSelect) {
    console.log("Brand select not found");
    return;
  }

  console.log("Populating brand options...");
  Object.keys(appData.brands).forEach((brand) => {
    const option = document.createElement("option");
    option.value = brand;
    option.textContent = brand;
    brandSelect.appendChild(option);
  });
}

// Form handling
function setupFormHandlers() {
  const shareForm = document.getElementById("shareForm");
  if (!shareForm) {
    console.log("Share form not found");
    return;
  }

  console.log("Setting up form handlers...");
  shareForm.addEventListener("submit", function (e) {
    e.preventDefault();

    const formData = {
      brand: document.getElementById("brandName").value,
      store: document.getElementById("storeName").value,
      experience: document.getElementById("experience").value,
      rating: document.getElementById("rating").value,
    };

    if (
      formData.brand &&
      formData.store &&
      formData.experience &&
      formData.rating
    ) {
      addExperience(formData);
      shareForm.reset();

      // Show success message
      showToast("分享成功！感謝您的經驗分享。", "success");
    } else {
      showToast("請填寫所有必要欄位。", "error");
    }
  });
}

function addExperience(data) {
  const experiencesList = document.getElementById("experiencesList");
  if (!experiencesList) return;

  const ratingStars = "⭐".repeat(parseInt(data.rating));

  const experienceItem = document.createElement("div");
  experienceItem.className = "experience-item";
  experienceItem.innerHTML = `
    <div class="experience-header">
      <span class="brand-tag">${data.brand}</span>
      <span class="rating">${ratingStars}</span>
    </div>
    <p class="store-info">購買店鋪：${data.store}</p>
    <p class="experience-text">${data.experience}</p>
  `;

  // Insert at the beginning
  experiencesList.insertBefore(experienceItem, experiencesList.firstChild);
}

function showToast(message, type = "info") {
  // Remove existing toasts
  const existingToasts = document.querySelectorAll(".toast");
  existingToasts.forEach((toast) => toast.remove());

  // Create toast element
  const toast = document.createElement("div");
  toast.className = `toast toast--${type}`;

  const bgColor =
    type === "success"
      ? "var(--color-success)"
      : type === "error"
      ? "var(--color-error)"
      : "var(--color-info)";

  // Add toast styles
  toast.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: ${bgColor};
    color: var(--color-btn-primary-text);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    max-width: 300px;
    word-wrap: break-word;
  `;

  toast.textContent = message;
  document.body.appendChild(toast);

  // Show toast
  setTimeout(() => {
    toast.style.transform = "translateX(0)";
  }, 100);

  // Hide toast after 3 seconds
  setTimeout(() => {
    toast.style.transform = "translateX(100%)";
    setTimeout(() => {
      if (document.body.contains(toast)) {
        document.body.removeChild(toast);
      }
    }, 300);
  }, 3000);
}

// Handle responsive behavior
function handleResize() {
  const navMenu = document.getElementById("navMenu");
  const navToggle = document.getElementById("navToggle");

  if (window.innerWidth > 768) {
    if (navMenu) navMenu.classList.remove("active");
    if (navToggle) navToggle.classList.remove("active");
  }
}

window.addEventListener("resize", handleResize);

// Debug functions for testing
window.showPage = showPage;
window.appData = appData;
window.currentPage = () => currentPage;