<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title ? title + ' — ' : '' %>Biz2Biz Chamber</title>
  <%
    const _m = typeof seoMeta !== 'undefined' ? seoMeta : {};
    const _desc = _m.description || 'Biz2Biz Chamber — Helping Businesses Connect, Collaborate, and Grow. The digital Chamber of Commerce for modern businesses.';
    const _ogTitle = _m.ogTitle || (title ? title + ' — Biz2Biz Chamber' : 'Biz2Biz Chamber');
  %>
  <meta name="description" content="<%= _desc %>">
  <% if (_m.canonical) { %><link rel="canonical" href="<%= _m.canonical %>"><% } %>
  <meta property="og:site_name" content="Biz2Biz Chamber">
  <meta property="og:type" content="<%= _m.ogType || 'website' %>">
  <meta property="og:title" content="<%= _ogTitle %>">
  <meta property="og:description" content="<%= _desc %>">
  <% if (_m.ogUrl) { %><meta property="og:url" content="<%= _m.ogUrl %>"><% } %>
  <% if (_m.ogImage) { %><meta property="og:image" content="<%= _m.ogImage %>"><% } %>
  <meta name="twitter:card" content="<%= _m.ogImage ? 'summary_large_image' : 'summary' %>">
  <meta name="twitter:title" content="<%= _ogTitle %>">
  <meta name="twitter:description" content="<%= _desc %>">
  <% if (_m.ogImage) { %><meta name="twitter:image" content="<%= _m.ogImage %>"><% } %>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <%- style %>
</head>
<body>

<!-- Navigation -->
<nav class="nav-main" id="mainNav">
  <div class="nav-container">
    <a href="/" class="nav-logo">
      <svg width="36" height="36" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="8" fill="#1a56db"/><path d="M8 10h8v16H8zM20 10h8v8h-8zM20 22h8v4h-8z" fill="white" opacity="0.9"/></svg>
      <span>Biz2Biz <strong>Chamber</strong></span>
    </a>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
      <i class="bi bi-list"></i>
    </button>
    <div class="nav-links" id="navLinks">
      <a href="/directory" class="nav-link">Directory</a>
      <a href="/events" class="nav-link">Events</a>
      <a href="/newsroom" class="nav-link">Newsroom</a>
      <a href="/about" class="nav-link">About</a>
      <a href="/contact" class="nav-link">Contact</a>
    </div>
    <div class="nav-actions">
      <% if (currentUser) { %>
        <a href="/member/dashboard" class="btn btn-outline-primary btn-sm">Dashboard</a>
      <% } else { %>
        <a href="/login" class="btn btn-ghost btn-sm">Login</a>
        <a href="/register" class="btn btn-primary btn-sm">Join Now</a>
      <% } %>
    </div>
  </div>
</nav>

<!-- Flash Messages -->
<% if (flash.success && flash.success.length) { %>
  <div class="flash flash-success"><i class="bi bi-check-circle-fill"></i> <%= flash.success[0] %><button onclick="this.parentElement.remove()"><i class="bi bi-x"></i></button></div>
<% } %>
<% if (flash.error && flash.error.length) { %>
  <div class="flash flash-error"><i class="bi bi-exclamation-circle-fill"></i> <%= flash.error[0] %><button onclick="this.parentElement.remove()"><i class="bi bi-x"></i></button></div>
<% } %>

<!-- Main Content -->
<main><%- body %></main>

<!-- Footer -->
<footer class="footer">
  <div class="footer-container">
    <div class="footer-brand">
      <a href="/" class="footer-logo">
        <svg width="32" height="32" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="8" fill="#1a56db"/><path d="M8 10h8v16H8zM20 10h8v8h-8zM20 22h8v4h-8z" fill="white" opacity="0.9"/></svg>
        <span>Biz2Biz <strong>Chamber</strong></span>
      </a>
      <p>Helping businesses connect, collaborate, and grow. The digital Chamber of Commerce for the modern business era.</p>
      <div class="footer-social">
        <a href="#" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
        <a href="#" aria-label="Twitter"><i class="bi bi-twitter-x"></i></a>
        <a href="#" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
      </div>
    </div>
    <div class="footer-links">
      <div class="footer-col">
        <h4>Platform</h4>
        <a href="/directory">Business Directory</a>
        <a href="/events">Events</a>
        <a href="/newsroom">Newsroom</a>
        <a href="/membership">Membership</a>
      </div>
      <div class="footer-col">
        <h4>Features</h4>
        <a href="/membership#crm">CRM Access</a>
        <a href="/membership#press">Press Releases</a>
        <a href="/membership#loyalty">Loyalty Program</a>
        <a href="/membership#agreements">Agreements</a>
      </div>
      <div class="footer-col">
        <h4>Company</h4>
        <a href="/about">About Us</a>
        <a href="/contact">Contact</a>
        <a href="/contact#faq">FAQ</a>
        <a href="/login">Member Login</a>
      </div>
      <div class="footer-col">
        <h4>Newsletter</h4>
        <p style="font-size:14px;margin-bottom:12px">Stay updated with chamber news and events.</p>
        <form class="footer-newsletter" id="newsletterForm">
          <input type="email" placeholder="Your email" required>
          <button type="submit">Subscribe</button>
        </form>
      </div>
    </div>
  </div>
  <div class="footer-bottom">
    <p>&copy; <%= new Date().getFullYear() %> Biz2Biz Chamber. All rights reserved.</p>
    <div class="footer-legal">
      <a href="/privacy">Privacy Policy</a>
      <a href="/terms">Terms of Service</a>
    </div>
  </div>
</footer>

<script src="/js/main.js"></script>
<%- script %>
</body>
</html>
