function getMain() {
  return `
  <main>
    <section id="table-of-contents">
      <h2>Table of Contents</h2>
      <nav id="toc-nav">
        <div class="toc-placeholder">
          <p>The table of contents will be automatically generated from your journal headings.</p>
          <button id="refresh-toc" class="btn secondary">Refresh</button>
        </div>
      </nav>
    </section>

    <section id="design-journal">
      <h2>Design Journal</h2>
      <div id="journal-controls" style="padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 1rem; align-items: center; justify-content: center;">
        <button id="save-journal" class="btn success">Save</button>
        <button id="load-journal" class="btn">Load</button>
        <button id="preview-toggle" class="btn primary">Preview</button>
        <button id="present-mode" class="btn" title="Open in presentation mode (new window)">Present</button>
        <span id="save-status" class="text-light"></span>
      </div>

      <!-- Journal loading modal -->
      <div id="journal-modal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
          <div class="modal-header">
            <h3>Select a Journal</h3>
            <button class="modal-close" id="close-journal-modal">×</button>
          </div>
          <div class="modal-body" id="journal-modal-body">
            <!-- Dynamic content -->
          </div>
        </div>
      </div>
      <div id="journal-editor" contenteditable="true">
        <!-- Main editor area -->
      </div>
    </section>

    <section id="ai-assistant">
      <h2>AI Assistant</h2>
      <div class="ai-controls" style="padding: 1rem; border-bottom: 1px solid var(--border-color);">
        <div class="ai-actions" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;">
          <button id="activate-rephrase" class="btn" title="Rephrase selected text">
            Rephrase
          </button>
          <button id="check-inconsistencies" class="btn" title="Check for inconsistencies">
            Inconsistencies
          </button>
          <button id="check-duplications" class="btn" title="Check for duplicates">
            Duplicates
          </button>
          <button id="give-advice" class="btn" title="Get improvement advice">
            Advice
          </button>
        </div>
        <div class="liberty-mode" style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
            <div style="display: flex; align-items: center; gap: 0.25rem;">
              <label for="liberty-repeat-count" style="font-size: 0.85rem; color: var(--text-light);">Iterations:</label>
              <select id="liberty-repeat-count" style="padding: 0.25rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--surface-color); color: var(--text-color); font-size: 0.85rem;">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" selected>3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </div>
            <div style="display: flex; align-items: center; gap: 0.25rem;">
              <label for="liberty-precision" style="font-size: 0.85rem; color: var(--text-light);">Precision:</label>
              <select id="liberty-precision" style="padding: 0.25rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--surface-color); color: var(--text-color); font-size: 0.85rem;">
                <option value="30">30% (Very creative)</option>
                <option value="50">50% (Balanced)</option>
                <option value="70" selected>70% (Conservative)</option>
                <option value="90">90% (Very precise)</option>
              </select>
            </div>
          </div>
          <button id="liberty-mode" class="btn" style="width: 100%;" title="Enhanced Mode - Iterative generation in real-time">
            Enhanced Mode
          </button>
        </div>
      </div>
      <div id="ai-assistant-feedback" style="flex: 1; padding: 1rem; overflow-y: auto; min-height: 200px;">
        <div class="feedback-message" style="text-align: center; color: var(--text-light);">
          <strong>AI Assistant Ready</strong><br>
          Select text in the editor and click an action to begin.
          <div style="margin-top: 1rem; font-size: 0.85rem;">
            <div style="margin-bottom: 0.5rem;"><strong>Powered by Mistral AI</strong></div>
            <div>Model: Mistral Large (multilingual)</div>
          </div>
        </div>
      </div>
    </section>
  </main>
  `;
}

module.exports = { getMain };