BRAND_HEADER_HTML = """
<header class="product-header">
  <a class="brand-lockup" href="#workspace" aria-label="DocuLearn-RAG">
    <span class="brand-mark" aria-hidden="true">
      <svg viewBox="0 0 32 32" role="img">
        <path d="M8 4.5h12.5a3 3 0 0 1 3 3V22H11a3 3 0 0 1-3-3V4.5Z"/>
        <path d="M11.5 8h12a3 3 0 0 1 3 3v16.5H14.5a3 3 0 0 1-3-3V8Z"/>
        <path d="M16 14h6.5M16 18h6.5M16 22h4"/>
      </svg>
    </span>
    <span>DocuLearn-RAG</span>
  </a>
  <div class="header-status">
    <span class="status-dot" aria-hidden="true"></span>
    Local-first workspace
  </div>
</header>
<section class="hero-shell">
  <div class="hero-copy">
    <div class="eyebrow">Document intelligence workspace</div>
    <h1>Learn deeper from<br> <span>your documents.</span></h1>
    <p>Turn your PDFs into a sourced learning space — Q&A, summaries,
    quizzes, and flashcards in one workflow.</p>
  </div>
  <div class="hero-visual" aria-hidden="true">
    <div class="document-orbit orbit-one"></div>
    <div class="document-orbit orbit-two"></div>
    <div class="document-stack">
      <div class="document-sheet sheet-back"></div>
      <div class="document-sheet sheet-mid"></div>
      <div class="document-sheet sheet-front">
        <span></span><span></span><span></span><span></span>
      </div>
      <div class="rag-node node-a"></div>
      <div class="rag-node node-b"></div>
      <div class="rag-node node-c"></div>
    </div>
  </div>
</section>
"""

INFO_NOTE_HTML = """
<div class="workflow-strip">
  <div class="workflow-intro">
    <span class="workflow-label">Get started</span>
    <strong>One learning flow, four tools.</strong>
  </div>
  <ol class="workflow-steps">
    <li><span>01</span>Upload &amp; index PDFs</li>
    <li><span>02</span>Select scope</li>
    <li><span>03</span>Enter Gemini key</li>
    <li><span>04</span>Start learning</li>
  </ol>
</div>
"""

UPLOAD_HEADING_HTML = """
<div class="panel-heading">
  <span class="panel-icon" aria-hidden="true">
    <svg viewBox="0 0 24 24"><path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5"/>
    <path d="M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/></svg>
  </span>
  <div><h2>Document sources</h2><p>Upload and index your PDFs.</p></div>
</div>
"""

LIBRARY_HEADING_HTML = """
<div class="panel-heading">
  <span class="panel-icon" aria-hidden="true">
    <svg viewBox="0 0 24 24">
    <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H11v17H6.5A2.5 2.5 0 0 0 4 22V5.5Z"/>
    <path d="M20 5.5A2.5 2.5 0 0 0 17.5 3H13v17h4.5A2.5 2.5 0 0 1 20 22V5.5Z"/></svg>
  </span>
  <div><h2>Indexed library</h2><p>Select documents and scope before querying.</p></div>
</div>
"""

QA_HEADING_HTML = """
<div class="qa-heading">
  <div>
    <div class="qa-eyebrow">Grounded conversation</div>
    <h2>Ask your documents</h2>
    <p>Answers stay anchored to the sources in your current study scope.</p>
  </div>
  <div class="qa-scope-badge">
    <span class="qa-scope-dot" aria-hidden="true"></span>
    <span>Source-aware</span>
  </div>
</div>
"""

SUMMARY_HEADING_HTML = (
    '<div class="summary-heading"><div>'
    '<div class="summary-eyebrow">Document brief</div>'
    '<h2>Build a focused summary</h2>'
    '<p>Turn your selected sources into a concise, cited study brief.</p>'
    '</div><div class="summary-status"><span aria-hidden="true"></span>'
    'Source-grounded</div></div>'
    '<div class="summary-presets" aria-label="Summary focus presets">'
    '<span class="summary-presets-label">Focus</span>'
    '<span>Key ideas</span><span>Technical terms</span><span>Exam revision</span>'
    '</div>'
)

QUIZ_HEADING_HTML = (
    '<div class="quiz-heading"><div>'
    '<div class="quiz-eyebrow">Active recall</div>'
    '<h2>Test your understanding</h2>'
    '<p>Turn your selected documents into a focused, source-grounded quiz.</p>'
    '</div><div class="quiz-status"><span aria-hidden="true"></span>'
    'Practice-ready</div></div>'
)

FLASHCARD_HEADING_HTML = (
    '<div class="flashcard-heading"><div>'
    '<div class="flashcard-eyebrow">Spaced repetition</div>'
    '<h2>Review what you know</h2>'
    '<p>Turn your selected documents into focused study cards with source-backed answers.</p>'
    '</div><div class="flashcard-status"><span aria-hidden="true"></span>'
    'Study-ready</div></div>'
    '<div class="flashcard-mode-note">Learn, Review, Shuffle, or '
    'Exam mode to match your study flow.</div>'
)

EMPTY_LIBRARY_HTML = """
<div class="library-empty">
  <span class="library-empty-icon" aria-hidden="true">
    <svg viewBox="0 0 24 24">
      <path d="M7 3.5h7l3 3V20H7a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2Z"/>
      <path d="M14 3.5V7h3M8.5 11h5M8.5 14.5h6"/>
    </svg>
  </span>
  <span><strong>Library is empty</strong>
  <small>Upload PDFs in the left panel to start your learning space.</small></span>
</div>
"""

USAGE_MARKDOWN = """
1. **Upload & index PDFs** in the left panel.
2. **Select documents** to study from the indexed list.  
3. Use the tabs for **Q&A**, **summary**, **quiz**, or **flashcards**.  
4. If only 1 document is selected, you can filter by **page**.

**Tip:** When you ask clear topic-focused questions, the RAG results are more relevant.
"""