/* ── SHARED LAYOUT COMPONENTS ── */
const Layout = {
  nav(activePage='') {
    return `
<nav id="navbar">
  <div class="container nav-inner">
    <a href="index.html" class="nav-logo">
      <span style="animation:wobble 3s ease-in-out infinite;display:inline-block">🐱</span>
      Fatcat Cards
    </a>
    <div class="nav-links">
      <div class="nav-dropdown">
        <a href="shop-singles.html" class="${activePage==='singles'?'active':''}">Singles ▾</a>
        <div class="nav-dropdown-menu">
          <a href="shop-singles.html">All Singles</a>
          <a href="shop-graded.html">Graded Slabs</a>
        </div>
      </div>
      <div class="nav-dropdown">
        <a href="shop-sealed.html" class="${activePage==='sealed'?'active':''}">Sealed ▾</a>
        <div class="nav-dropdown-menu">
          <a href="shop-sealed.html">All Sealed</a>
          <a href="shop-sealed.html?type=etb">Elite Trainer Boxes</a>
          <a href="shop-sealed.html?type=box">Booster Boxes</a>
          <a href="shop-sealed.html?type=pack">Single Packs</a>
        </div>
      </div>
      <a href="shop-mystery.html" class="${activePage==='mystery'?'active':''}">✨ Mystery Packs</a>
      <a href="shop-merch.html" class="${activePage==='merch'?'active':''}">Merch</a>
      <a href="live.html" class="${activePage==='live'?'active':''}">🔴 Live & Breaks</a>
      <a href="rewards.html" class="${activePage==='rewards'?'active':''}">⭐ Rewards</a>
    </div>
    <div class="nav-right">
      <a href="shop-mystery.html" class="btn btn-gold btn-sm" style="display:none;display:flex">✨ Open a Pack</a>
      <button class="cart-icon-btn" onclick="UI.openCart()" aria-label="Open cart">
        🛒
        <span class="cart-badge">0</span>
      </button>
      <button class="hamburger" onclick="UI.openMobileNav()" aria-label="Menu">☰</button>
    </div>
  </div>
</nav>

<!-- MOBILE NAV -->
<div class="mobile-nav" id="mobileNav">
  <div class="mobile-nav-header">
    <span style="font-family:'Bubblegum Sans',cursive;color:var(--gold);font-size:1.3rem">🐱 Fatcat Cards</span>
    <button onclick="UI.closeMobileNav()" style="background:none;border:none;color:var(--cream);font-size:1.5rem">✕</button>
  </div>
  <div class="mobile-nav-links">
    <a href="shop-singles.html">🃏 Singles</a>
    <a href="shop-graded.html" class="sub">💎 Graded Slabs</a>
    <a href="shop-sealed.html">📦 Sealed Product</a>
    <a href="shop-sealed.html?type=etb" class="sub">Elite Trainer Boxes</a>
    <a href="shop-sealed.html?type=box" class="sub">Booster Boxes</a>
    <a href="shop-mystery.html">✨ Mystery Packs</a>
    <a href="shop-merch.html">🎒 Merch & Accessories</a>
    <a href="live.html">🔴 Live & Breaks</a>
    <a href="rewards.html">⭐ Rewards</a>
    <a href="how-it-works.html">❓ How It Works</a>
    <a href="about.html">🐱 About</a>
  </div>
  <div class="mobile-nav-footer">
    <a href="shop-mystery.html" class="btn btn-gold">✨ Open a Mystery Pack</a>
    <a href="live.html" class="btn btn-outline">🔴 Join Live Break</a>
  </div>
</div>`;
  },

  cartSidebar() {
    return `
<!-- CART SIDEBAR -->
<div class="cart-overlay" id="cartOverlay">
  <div class="cart-panel">
    <div class="cart-header">
      <h3>Your Cart 🛒</h3>
      <button class="cart-close" onclick="UI.closeCart()">✕</button>
    </div>
    <div class="cart-items" id="cartItems">
      <div class="cart-empty">
        <div class="empty-icon">🃏</div>
        <p>Your cart is empty</p>
        <a href="index.html" class="btn btn-gold btn-sm">Start Shopping</a>
      </div>
    </div>
    <div class="cart-footer">
      <div class="cart-subtotal">
        <span>Subtotal</span>
        <span class="price" id="cartTotal">$0.00</span>
      </div>
      <div class="cart-shipping-note">Shipping calculated at checkout</div>
      <button class="btn btn-gold btn-full btn-lg" onclick="Checkout.startStripe()">
        Checkout with Stripe →
      </button>
      <div class="stripe-badge">🔒 Secure checkout powered by Stripe</div>
    </div>
  </div>
</div>`;
  },

  mobileBottomBar(activePage='') {
    return `
<div class="mobile-bottom-bar">
  <div class="mobile-bottom-bar-inner">
    <a href="index.html" class="bar-link ${activePage==='home'?'active':''}">
      <span class="bar-icon">🏠</span>Home
    </a>
    <a href="shop-singles.html" class="bar-link ${activePage==='shop'?'active':''}">
      <span class="bar-icon">🃏</span>Shop
    </a>
    <a href="shop-mystery.html" class="bar-link ${activePage==='mystery'?'active':''}">
      <span class="bar-icon">✨</span>Mystery
    </a>
    <a href="live.html" class="bar-link ${activePage==='live'?'active':''}">
      <span class="bar-icon">🔴</span>Live
    </a>
    <button class="bar-link" onclick="UI.openCart()">
      <span class="bar-icon">🛒 <span class="cart-badge" style="position:relative;top:0;right:0;width:auto;height:auto;border-radius:4px;padding:0 3px;font-size:.55rem"></span></span>Cart
    </button>
  </div>
</div>
<div class="bottom-spacer"></div>`;
  },

  footer() {
    return `
<footer>
  <div class="container">
    <div class="footer-grid">
      <div>
        <div class="footer-logo">🐱 Fatcat Cards</div>
        <p class="footer-tagline">Pokémon & TCG cards for collectors. Community-first, transparent odds, fair packs. Based in New Haven, CT.</p>
        <p style="color:rgba(255,248,231,.2);font-size:.75rem;margin-top:8px">Formerly Xmarksthespot</p>
      </div>
      <div class="footer-col">
        <h4>Shop</h4>
        <a href="shop-singles.html">Singles</a>
        <a href="shop-graded.html">Graded Slabs</a>
        <a href="shop-sealed.html">Sealed Product</a>
        <a href="shop-mystery.html">Mystery Packs</a>
        <a href="shop-merch.html">Merch & Accessories</a>
      </div>
      <div class="footer-col">
        <h4>Community</h4>
        <a href="https://discord.gg/fatcatcards" target="_blank">Discord</a>
        <a href="live.html">Live Breaks</a>
        <a href="rewards.html">Rewards</a>
        <a href="how-it-works.html">How It Works</a>
        <a href="about.html">About Us</a>
      </div>
      <div class="footer-col">
        <h4>Help</h4>
        <a href="faq.html">FAQ</a>
        <a href="contact.html">Contact</a>
        <a href="faq.html#shipping">Shipping Info</a>
        <a href="faq.html#buyback">Returns & Buy-Back</a>
        <a href="terms.html">Terms of Service</a>
        <a href="privacy.html">Privacy Policy</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p class="footer-disclaimer">All mystery pack contents are predetermined by fair allocation from our physical inventory. This is a collectible retail product with random contents — not a game of chance for cash prizes. All items have real collectible value. Buy-back is optional store credit only. Minimum age 13+.</p>
      <p class="footer-copy">© 2025 Fatcat Cards · New Haven, CT · All rights reserved</p>
    </div>
  </div>
</footer>`;
  },

  packOpeningModal() {
    return `
<!-- PACK OPENING MODAL -->
<div class="pack-opening-modal" id="packOpeningModal">
  <button class="pack-opening-close" onclick="PackOpener.close()">✕</button>

  <!-- Stage: Idle -->
  <div class="pack-opening-inner" id="packStageIdle">
    <div class="pack-stage-title" id="packOpenTitle">Mystery Pack</div>
    <div class="pack-stage-sub" id="packOpenSub">Click to reveal your cards!</div>
    <div style="margin:24px 0">
      <span class="pack-stage-idle" style="font-size:8rem;cursor:pointer;display:inline-block;animation:float 2.5s ease-in-out infinite" id="packChest" onclick="PackOpener.startReveal()">🎁</span>
    </div>
    <p style="color:rgba(255,248,231,.4);font-size:.85rem;font-weight:600;margin-bottom:16px">Click the pack to reveal!</p>
    <label style="display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,248,231,.5);font-size:.85rem;font-weight:700;cursor:pointer;margin-bottom:24px">
      <input type="checkbox" id="fastModeCheck" style="accent-color:var(--gold)"> Fast open mode
    </label>
    <button class="btn btn-gold btn-lg" onclick="PackOpener.startReveal()">✨ Reveal My Pack!</button>
  </div>

  <!-- Stage: Revealing -->
  <div class="pack-opening-inner" id="packStageRevealing" style="display:none">
    <div class="pack-stage-title">Opening! ✨</div>
    <div class="pack-stage-sub" id="revealProgress">0 / 5 cards revealed</div>
    <div class="reveal-grid" id="revealCardsGrid"></div>
  </div>

  <!-- Stage: Summary -->
  <div class="pack-opening-inner" id="packStageSummary" style="display:none;max-height:80vh;overflow-y:auto">
    <div class="pack-stage-title">Pack Complete! 🎉</div>
    <div class="reveal-grid" id="summaryCardsGrid" style="margin-bottom:16px"></div>
    <div class="pack-total-display">
      <span class="pack-total-label">Total pull value:</span>
      <span class="pack-total-amount" id="packTotalAmount">$0.00</span>
    </div>
    <div class="buyback-reveal-panel">
      <h4>💰 Buy-Back Available</h4>
      <p>Not happy with your pulls? Sell qualifying cards back for store credit.</p>
      <div class="buyback-actions">
        <button class="btn btn-green btn-sm" id="sellAllBtn">Sell All Back</button>
        <button class="btn btn-sm" style="background:rgba(255,255,255,.08);color:rgba(255,248,231,.7);border:1px solid rgba(255,255,255,.15)" onclick="PackOpener.close()">Keep All — Ship to Me</button>
      </div>
    </div>
    <div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px">
      <button class="btn btn-gold" onclick="PackOpener.reset()">🔄 Open Another</button>
      <button class="btn btn-outline-white" onclick="PackOpener.share()">📤 Share My Pulls</button>
      <a href="shop-mystery.html" class="btn" style="background:rgba(255,255,255,.1);color:var(--cream);border:1px solid rgba(255,255,255,.2)">🛒 Shop More</a>
    </div>
  </div>
</div>`;
  },

  head(title) {
    return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title} — Fatcat Cards</title>
<meta name="description" content="Fatcat Cards — Pokémon singles, graded slabs, sealed product, and mystery packs. Transparent odds, fair packs, community-first.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>`;
  },

  scripts() {
    return `
<script src="js/app.js"></script>
<script src="js/layout.js"></script>
</body>
</html>`;
  }
};