---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Styleguide">
  <div class="max-w-3xl mx-auto">
    <header class="mb-12 text-center">
      <h1 class="text-5xl mb-4">Styleguide</h1>
      <p class="text-xl text-gray-500">
        A visual reference of HTML elements
      </p>
    </header>
    
    <div class="prose prose-lg max-w-none">
      <section id="headings">
        <h2>Headings</h2>
        <p>All heading levels with their respective styling:</p>
        
        <h1>Heading Level 1</h1>
        <h2>Heading Level 2</h2>
        <h3>Heading Level 3</h3>
        <h4>Heading Level 4</h4>
        <h5>Heading Level 5</h5>
        <h6>Heading Level 6</h6>
      </section>
      
      <section id="text">
        <h2>Text Elements</h2>
        
        <h3>Paragraph</h3>
        <p>This is a standard paragraph element. <strong>This text is bold</strong>. <em>This text is italicized</em>. <u>This text is underlined</u>. <del>This text is strikethrough</del>. <mark>This text is marked/highlighted</mark>. <small>This text is smaller</small>. This text contains <sub>subscript</sub> and <sup>superscript</sup> elements.</p>
        
        <h3>Links</h3>
        <p>This is a <a href="#">standard link</a> that you might use within a paragraph of text.</p>
        
        <h3>Blockquote</h3>
        <blockquote>
          <p>This is a blockquote. It's often used to quote someone or highlight a particular piece of text with special emphasis.</p>
          <p>Multiple paragraphs can be included in a blockquote.</p>
          <footer>— Someone Famous</footer>
        </blockquote>
        
        <h3>Inline Quote</h3>
        <p>As Shakespeare wrote, <q>To be or not to be, that is the question.</q></p>
      </section>
      
      <section id="address">
        <h2>Address</h2>
        <address>
          John Doe<br>
          123 Example Street<br>
          Example City, EX 12345<br>
          <a href="mailto:john@example.com">john@example.com</a><br>
          <a href="tel:+11234567890">(123) 456-7890</a>
        </address>
      </section>
      
      <section id="breaks">
        <h2>Line Break and Horizontal Rule</h2>
        <p>This line will be followed by a line break.<br/>This text appears after the line break.</p>
        
        <hr/>
        
        <p>The horizontal rule appears above this text.</p>
      </section>
      
      <section id="preformatted">
        <h2>Preformatted Text</h2>
        <pre>This  text    preserves 
  white space and line breaks
as they     are typed.
It uses a monospaced font.</pre>
      </section>
      
      <section id="lists">
        <h2>Lists</h2>
        
        <h3>Unordered List</h3>
        <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item three with a longer description</li>
          <li>List item four with nested items:
            <ul>
              <li>Nested item one</li>
              <li>Nested item two</li>
            </ul>
          </li>
        </ul>
        
        <h3>Ordered List</h3>
        <ol>
          <li>First item</li>
          <li>Second item</li>
          <li>Third item with a longer description</li>
          <li>Fourth item with nested items:
            <ol>
              <li>Nested ordered item one</li>
              <li>Nested ordered item two</li>
            </ol>
          </li>
        </ol>
        
        <h3>Definition List</h3>
        <dl>
          <dt>Definition Term</dt>
          <dd>This is the definition or description for the term above.</dd>
          
          <dt>Another Definition Term</dt>
          <dd>Each term can have one or more definitions associated with it.</dd>
          <dd>Here's a second definition for the same term.</dd>
          
          <dt>HTML</dt>
          <dt>Hypertext Markup Language</dt>
          <dd>The standard markup language for documents designed to be displayed in a web browser.</dd>
        </dl>
      </section>
      
      <section id="code">
        <h2>Code</h2>
        
        <h3>Inline Code</h3>
        <p>Use <code>console.log('Hello, World!')</code> to output a message to the browser console.</p>
        
      </section>
      
      <section id="tables">
        <h2>Tables</h2>
        
        <table>
          <caption>Sample Table Caption</caption>
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Row 1, Cell 1</td>
              <td>Row 1, Cell 2</td>
              <td>Row 1, Cell 3</td>
            </tr>
            <tr>
              <td>Row 2, Cell 1</td>
              <td>Row 2, Cell 2</td>
              <td>Row 2, Cell 3</td>
            </tr>
            <tr>
              <td>Row 3, Cell 1</td>
              <td>Row 3, Cell 2</td>
              <td>Row 3, Cell 3</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">Table Footer Information</td>
            </tr>
          </tfoot>
        </table>
      </section>
      
      <section id="forms">
        <h2>Form Elements</h2>
        <p>Basic form elements (non-functional, just for display purposes):</p>
        
        <form>
          <div class="mb-4">
            <label for="text-input">Text Input:</label>
            <input type="text" id="text-input" placeholder="Enter text here">
          </div>
          
          <div class="mb-4">
            <label for="textarea">Textarea:</label>
            <textarea id="textarea" rows="3" placeholder="Enter multiple lines of text"></textarea>
          </div>
          
          <div class="mb-4">
            <input type="checkbox" id="checkbox">
            <label for="checkbox">Checkbox example</label>
          </div>
          
          <div class="mb-4">
            <input type="radio" id="radio1" name="radio-group" checked>
            <label for="radio1">Radio option 1</label>
            <br>
            <input type="radio" id="radio2" name="radio-group">
            <label for="radio2">Radio option 2</label>
          </div>
          
          <div class="mb-4">
            <label for="select">Select Dropdown:</label>
            <select id="select">
              <option>Option 1</option>
              <option>Option 2</option>
              <option>Option 3</option>
            </select>
          </div>
          
          <button type="button">Button Element</button>
          
          <fieldset class="border p-4 rounded-md mt-4">
            <legend>Fieldset with Legend</legend>
            <div class="mb-2">
              <label for="first-name">First Name:</label>
              <input type="text" id="first-name" name="first-name">
            </div>
            <div class="mb-2">
              <label for="last-name">Last Name:</label>
              <input type="text" id="last-name" name="last-name">
            </div>
          </fieldset>
          
          <div class="mt-4">
            <label>Other Input Types:</label>
            <div class="mb-2">
              <input type="email" placeholder="Email input">
            </div>
            <div class="mb-2">
              <input type="password" placeholder="Password input">
            </div>
            <div class="mb-2">
              <input type="number" placeholder="Number input">
            </div>
            <div class="mb-2">
              <input type="date">
            </div>
            <div class="mb-2">
              <input type="color">
            </div>
            <div class="mb-2">
              <input type="range">
            </div>
          </div>
        </form>
      </section>
      
      <section id="progress">
        <h2>Progress & Meter</h2>
        
        <h3>Progress Bar</h3>
        <label for="progress-demo">Download progress:</label>
        <progress id="progress-demo" max="100" value="75">75%</progress>
        
        <h3>Meter</h3>
        <label for="meter-low">Low:</label>
        <meter id="meter-low" min="0" max="100" value="25" low="33" high="66" optimum="50">25%</meter>
        <br>
        <label for="meter-medium">Medium:</label>
        <meter id="meter-medium" min="0" max="100" value="50" low="33" high="66" optimum="50">50%</meter>
        <br>
        <label for="meter-high">High:</label>
        <meter id="meter-high" min="0" max="100" value="80" low="33" high="66" optimum="50">80%</meter>
      </section>
      
      <section id="time">
        <h2>Time Element</h2>
        <p>The concert takes place on <time datetime="2025-07-07T20:00:00">July 7th at 8:00 PM</time>.</p>
        <p>The store is open from <time datetime="09:00">9:00 AM</time> to <time datetime="21:00">9:00 PM</time> every day.</p>
        <p>The Declaration of Independence was signed on <time datetime="1776-07-04">July 4, 1776</time>.</p>
      </section>
      
      <section id="media">
        <h2>Media Elements</h2>
        
        <h3>Image</h3>
        <figure>
          <img src="https://via.placeholder.com/800x400" alt="Placeholder Image">
          <figcaption>A placeholder image with caption</figcaption>
        </figure>
        
        <h3>Responsive Image</h3>
        <img class="w-full" src="https://via.placeholder.com/1200x600" alt="Responsive Placeholder Image">
      </section>
      
      <section id="misc">
        <h2>Miscellaneous Elements</h2>
        
        <h3>Abbreviations</h3>
        <p><abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> are core web technologies.</p>
        
        <h3>Citations</h3>
        <p>According to the book <cite>HTML5 for Web Designers</cite>, semantic markup is important for accessibility.</p>
        
        <h3>Details & Summary</h3>
        <details>
          <summary>Click to expand for more information</summary>
          <p>This content is hidden until the user clicks on the summary element.</p>
          <p>It's useful for FAQ sections, accordion elements, and other expandable content.</p>
        </details>
        
        <h3>Ruby Annotation (East Asian Typography)</h3>
        <p>
          <ruby>
            漢 <rt>Kan</rt>
            字 <rt>ji</rt>
          </ruby>
          is the Japanese term for Chinese characters.
        </p>
        
        <h3>Bidirectional Text Override</h3>
        <p>This text includes a phrase in Hebrew: <bdo dir="rtl">שלום</bdo> (shalom) which means "peace".</p>
      </section>
    </div>
  </div>
</BaseLayout>
