<!--
  templateType: page
  isAvailableForNewContent: true
  label: Typography & Style Guide
  screenshotPath: ../images/template-previews/typography.png
-->
{% extends "./layouts/base.html" %}

{% block body %}
<div class="body-container body-container--typography">
  {% dnd_area "main" label="Main Content" %}

    {# Page Header #}
    {% dnd_section
      padding={
        "top": 60,
        "bottom": 40,
        "left": 20,
        "right": 20
      },
      max_width=900
    %}
      {% dnd_module "header_intro"
        path="@hubspot/rich_text",
        label="Header Introduction"
      %}
        {% module_attribute "html" %}
          <div style="text-align: center;">
            <h1>Typography & Style Guide</h1>
            <p class="lead">Quick reference for text styles, colors, and CSS components used throughout the theme.</p>
          </div>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Headings #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "headings"
        path="@hubspot/rich_text",
        label="Headings"
      %}
        {% module_attribute "html" %}
          <h2 id="headings">Headings</h2>
          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h3>Heading 3</h3>
          <h4>Heading 4</h4>
          <h5>Heading 5</h5>
          <h6>Heading 6</h6>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Paragraphs & Text #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "paragraphs"
        path="@hubspot/rich_text",
        label="Paragraphs & Text"
      %}
        {% module_attribute "html" %}
          <h2 id="text">Paragraphs & Text</h2>
          <p>This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p class="lead">This is a lead paragraph - larger for introductions.</p>
          <p><small>This is small text for fine print and disclaimers.</small></p>

          <h3 id="emphasis">Emphasis & Inline Styles</h3>
          <p>
            <strong>Bold text</strong> &bull;
            <em>Italic text</em> &bull;
            <u>Underlined</u> &bull;
            <mark>Highlighted</mark> &bull;
            <del>Strikethrough</del> &bull;
            <code>inline code</code>
          </p>
          <p>This is a <a href="#">standard link</a> in text.</p>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Lists #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_column width=12 %}
        {% dnd_row %}
          {% dnd_module "list_unordered"
            path="@hubspot/rich_text",
            label="Unordered List",
            width=6
          %}
            {% module_attribute "html" %}
              <h3 id="lists">Unordered List</h3>
              <ul>
                <li>First item</li>
                <li>Second item
                  <ul>
                    <li>Nested item</li>
                    <li>Another nested</li>
                  </ul>
                </li>
                <li>Third item</li>
              </ul>
            {% end_module_attribute %}
          {% end_dnd_module %}
          {% dnd_module "list_ordered"
            path="@hubspot/rich_text",
            label="Ordered List",
            width=6,
            offset=6
          %}
            {% module_attribute "html" %}
              <h3>Ordered List</h3>
              <ol>
                <li>First step</li>
                <li>Second step
                  <ol>
                    <li>Sub-step A</li>
                    <li>Sub-step B</li>
                  </ol>
                </li>
                <li>Third step</li>
              </ol>
            {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}

    {# Blockquotes #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "blockquotes"
        path="@hubspot/rich_text",
        label="Blockquotes"
      %}
        {% module_attribute "html" %}
          <h2 id="blockquotes">Blockquotes</h2>
          <blockquote>
            <p>"This is a standard blockquote. Use for testimonials or to highlight important information."</p>
            <footer>— Author Name</footer>
          </blockquote>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Code #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "code"
        path="@hubspot/rich_text",
        label="Code Blocks"
      %}
        {% module_attribute "html" %}
          <h2 id="code">Code</h2>
          <p>Inline: <code>const value = "example";</code></p>
          <pre><code>// Code block
function example() {
  return "Hello, World!";
}</code></pre>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Tables #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "tables"
        path="@hubspot/rich_text",
        label="Tables"
      %}
        {% module_attribute "html" %}
          <h2 id="tables">Tables</h2>
          <table>
            <thead>
              <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
              </tr>
              <tr>
                <td>Cell 4</td>
                <td>Cell 5</td>
                <td>Cell 6</td>
              </tr>
            </tbody>
          </table>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Buttons (CSS Classes) #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "buttons"
        path="@hubspot/rich_text",
        label="Buttons"
      %}
        {% module_attribute "html" %}
          <h2 id="buttons">Buttons</h2>
          <p>Apply these CSS classes to links or buttons:</p>
          <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0;">
            <a href="#" class="btn btn-primary">Primary</a>
            <a href="#" class="btn btn-secondary">Secondary</a>
            <a href="#" class="btn btn-success">Success</a>
            <a href="#" class="btn btn-warning">Warning</a>
            <a href="#" class="btn btn-danger">Danger</a>
          </div>
          <h3>Sizes</h3>
          <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
            <a href="#" class="btn btn-primary btn-sm">Small</a>
            <a href="#" class="btn btn-primary">Default</a>
            <a href="#" class="btn btn-primary btn-lg">Large</a>
          </div>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Alerts #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "alerts"
        path="@hubspot/rich_text",
        label="Alerts"
      %}
        {% module_attribute "html" %}
          <h2 id="alerts">Alerts & Notices</h2>
          <div class="alert alert-info">
            <strong>Info:</strong> This is an informational alert.
          </div>
          <div class="alert alert-success">
            <strong>Success:</strong> Operation completed successfully.
          </div>
          <div class="alert alert-warning">
            <strong>Warning:</strong> Please review before proceeding.
          </div>
          <div class="alert alert-danger">
            <strong>Error:</strong> Something went wrong.
          </div>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Colors #}
    {% dnd_section
      padding={ "top": 40, "bottom": 60, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "colors"
        path="@hubspot/rich_text",
        label="Brand Colors"
      %}
        {% module_attribute "html" %}
          <h2 id="colors">Brand Colors</h2>
          <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem;">
            <div style="text-align: center;">
              <div style="background: var(--color-primary); height: 80px; border-radius: 8px; margin-bottom: 0.5rem;"></div>
              <small>Primary</small>
            </div>
            <div style="text-align: center;">
              <div style="background: var(--color-secondary); height: 80px; border-radius: 8px; margin-bottom: 0.5rem;"></div>
              <small>Secondary</small>
            </div>
            <div style="text-align: center;">
              <div style="background: var(--color-success); height: 80px; border-radius: 8px; margin-bottom: 0.5rem;"></div>
              <small>Success</small>
            </div>
            <div style="text-align: center;">
              <div style="background: var(--color-warning); height: 80px; border-radius: 8px; margin-bottom: 0.5rem;"></div>
              <small>Warning</small>
            </div>
            <div style="text-align: center;">
              <div style="background: var(--color-danger); height: 80px; border-radius: 8px; margin-bottom: 0.5rem;"></div>
              <small>Danger</small>
            </div>
            <div style="text-align: center;">
              <div style="background: var(--color-info); height: 80px; border-radius: 8px; margin-bottom: 0.5rem;"></div>
              <small>Info</small>
            </div>
          </div>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

    {# Accordions (Native HTML) #}
    {% dnd_section
      padding={ "top": 40, "bottom": 40, "left": 20, "right": 20 },
      max_width=900
    %}
      {% dnd_module "accordions"
        path="@hubspot/rich_text",
        label="Accordions"
      %}
        {% module_attribute "html" %}
          <h2 id="accordions">Accordions (Native HTML)</h2>
          <p>Use <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> in any rich text:</p>
          <details>
            <summary>Click to expand</summary>
            <p>This content is hidden by default and revealed when clicked. No JavaScript required!</p>
          </details>
          <details open>
            <summary>Open by default</summary>
            <p>Add the <code>open</code> attribute to have it expanded initially.</p>
          </details>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}

  {% end_dnd_area %}
</div>
{% endblock body %}
