function getHeader() {
  return `
  <header>
    <div>
      <h1>Design Journal</h1>
    </div>
  </header>
  `;
}

function getLeftPanel() {
  return `
  <div class="side-panel left-panel" id="left-panel">
    <div class="panel-toggle" onclick="togglePanel('left')">
      <span class="arrow">▶</span>
    </div>
    <div class="panel-content">
      <h3 class="panel-header">New Document</h3>

      <div class="template-form">
        <div class="form-group">
          <p style="margin-bottom: 1rem; color: var(--text-light); font-size: 0.9rem;">Create a new document or start with a template.</p>
        </div>

        <div class="form-actions" style="display: flex; flex-direction: column; gap: 0.75rem;">
          <button id="new-blank-document" class="btn" title="Start with a blank document">
            New Blank Document
          </button>
          <button id="load-template" class="btn success" title="Load default template">
            Load Default Template
          </button>
        </div>
      </div>
    </div>
  </div>
  `;
}

function getRightPanel() {
  return `
  <div class="side-panel right-panel" id="right-panel">
    <div class="panel-toggle" onclick="togglePanel('right')">
      <span class="arrow">◀</span>
    </div>
    <div class="panel-content">
      <h3 class="panel-header">Tools</h3>

      <div class="nav-section">
        <h4>Appearance</h4>
        <div class="nav-buttons">
          <button class="nav-btn" id="theme-toggle" title="Toggle dark mode">
            <span class="icon">☽</span>
            <span>Toggle Theme</span>
          </button>
        </div>
      </div>

      <div class="nav-section">
        <h4>Export</h4>
        <div class="nav-buttons">
          <button class="nav-btn" id="export-md" title="Export as Markdown">
            <span class="icon">↓</span>
            <span>Markdown</span>
          </button>
          <button class="nav-btn" id="export-web" title="Export as Web (HTML + CSS in ZIP)">
            <span class="icon">↓</span>
            <span>Web (ZIP)</span>
          </button>
        </div>
      </div>

      <div class="nav-section">
        <h4>Import</h4>
        <div class="nav-buttons">
          <label class="panel-file-input" for="import-md" title="Import Markdown">
            <input id="import-md" type="file" accept=".md" style="display:none;">
            <span class="icon">↑</span>
            <span>Import Markdown</span>
          </label>
        </div>
      </div>

      <div class="nav-section">
        <h4>Statistics</h4>
        <div class="stats-display" style="padding: 0.75rem; background: var(--surface-color); border-radius: 8px; font-size: 0.85rem;">
          <div style="margin-bottom: 0.5rem;"><strong>Words:</strong> <span id="word-count">0</span></div>
          <div style="margin-bottom: 0.5rem;"><strong>Characters:</strong> <span id="char-count">0</span></div>
          <div><strong>Reading time:</strong> <span id="reading-time">0 min</span></div>
        </div>
      </div>

      <div class="nav-section">
        <h4>Help</h4>
        <div class="nav-buttons">
          <button class="nav-btn" id="show-shortcuts" title="Keyboard shortcuts">
            <span class="icon">?</span>
            <span>Shortcuts</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  `;
}

function getPanelOverlay() {
  return `
  <div class="panel-overlay" id="panel-overlay" onclick="closeAllPanels()"></div>
  `;
}

module.exports = { getHeader, getLeftPanel, getRightPanel, getPanelOverlay };