import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h1>🌊🏴‍☠️</h1>
  <h1>The Great Pirate Era</h1>
  <h2>Gol D. Roger's Final Words</h2>
  <h3>A Legacy of Adventure</h3>
  <h4>The Straw Hat Pirates</h4>

  <h5>What Makes Luffy <a href="">Unstoppable</a>?</h5>

  <p>
    It all began with <a href="">Gol D. Roger</a>, the Pirate King, whose final words set the seas ablaze with ambition: "My treasure? It's yours if you want
    it. I left everything I gathered in one place. Now you just have to find it!" This declaration created the Great Pirate Era, where countless adventurers set
    sail to find the legendary <strong>One Piece</strong>.
  </p>

  <p>
    Among them is Monkey D. Luffy, a boy with a dream to become the next Pirate King. With his trusty straw hat, gifted by the legendary Shanks, and the power
    of the <code>Gomu Gomu no Mi</code>, Luffy is destined to change the world. Alongside his diverse and loyal crew, they face challenges, explore mysterious
    islands, and uncover secrets of the world’s history.
  </p>

  <hr />

  <p>
    The journey isn’t easy. Each step requires bravery, camaraderie, and perseverance. From battling the ruthless <strong>Warlords of the Sea</strong> to
    confronting the secrets of the <em>Void Century</em>, the Straw Hat Pirates remain undeterred. Here’s a glimpse of their remarkable story:
  </p>
`;

export function ProseDemo() {
  return <Prose __html={content} />;
}

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Quotes</h3>
  <blockquote>"If you don’t take risks, you can’t create a future." - Monkey D. Luffy</blockquote>
  <p>And it can span into multiple lines:</p>
  <blockquote>
    "Inherited will, the swelling of the changing times, and the dreams of people, these are things that cannot be stopped. As long as people continue to seek
    the meaning of freedom, these things will never cease to be!" - Gol D. Roger
  </blockquote>
  <li>
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </li>
  <p>
    There&apos;s also <strong>strong</strong>, <b>courage</b>, and <em>determination</em> in their journey! But, let&apos;s display some
    <code>challenges!</code>
  </p>
`;

export function ProseBlockquoteDemo() {
  return <Prose __html={content} />;
}

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Mugiwara Crew</h3>
  <p>The core members of the Straw Hat Pirates:</p>
  <ul>
    <li>Monkey D. Luffy - The Captain</li>
    <li>Roronoa Zoro - The Swordsman</li>
    <li>Nami - The Navigator</li>
    <li>Usopp - The Sniper</li>
    <li>Sanji - The Cook</li>
    <li>Tony Tony Chopper - The Doctor</li>
    <li>Nico Robin - The Archaeologist</li>
    <li>Franky - The Shipwright</li>
    <li>Brook - The Musician</li>
    <li>Jinbe - The Helmsman</li>
  </ul>
  <p>Their ultimate goals:</p>
  <ol>
    <li>Find the legendary One Piece.</li>
    <li>
      Overcome these sub-challenges:
      <ol>
        <li>Gathering enough supplies for the journey.</li>
        <li>Recruiting allies to their cause.</li>
        <li>Surviving the harshest seas in the world.</li>
      </ol>
    </li>
    <li>Unravel the mysteries of the Void Century.</li>
    <li>
      Face incredible challenges to achieve this:
      <ol>
        <li>Decipher the Poneglyphs.</li>
        <li>Confront the guardians of the ancient secrets.</li>
        <li>Protect Robin, the only one capable of reading the ancient language.</li>
      </ol>
    </li>
    <li>Overthrow the oppressive World Government.</li>
    <li>
      This requires:
      <ol>
        <li>Defeating the Admirals.</li>
        <li>Disbanding the Celestial Dragons’ grip on power.</li>
        <li>Unleashing true freedom to the people of the world.</li>
      </ol>
    </li>
  </ol>
`;

export function ProseListDemo() {
  return <Prose __html={content} />;
}

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Unordered List</h3>
  <ul style="font-weight: 500;">
    <li>
      Unordered List 1:
      <ul>
        <li>Unordered Inside 1-1</li>
        <li>Unordered Inside 1-2</li>
      </ul>
    </li>
    <li>
      Unordered List 2:
      <ul>
        <li>
          Unordered Inside 2-1:
          <ul>
            <li>Unordered Inside 2-1-1</li>
            <li>Unordered Inside 2-1-2</li>
          </ul>
        </li>
        <li>
          Unordered Inside 2-2:
          <ul>
            <li>Unordered Inside 2-2-1</li>
            <li>Unordered Inside 2-2-2</li>
            <li>
              Unordered Inside 2-2-3:
              <ul>
                <li>Unordered Inside 2-2-3-1</li>
                <li>Unordered Inside 2-2-3-2</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <hr />

  <h3>Ordered List</h3>
  <ol style="font-weight: 500;">
    <li style="color: #e54d2e;">
      Ordered List 1:
      <ol>
        <li>Ordered Inside 1-A</li>
        <li>Ordered Inside 1-B</li>
      </ol>
    </li>
    <li style="color: #e54666;">
      Ordered List 2:
      <ol>
        <li>
          Ordered Inside 2-A:
          <ol>
            <li>Ordered Inside 2-A-I</li>
            <li>Ordered Inside 2-A-II</li>
          </ol>
        </li>
        <li style="color: #d6409f;">
          Ordered Inside 2-B:
          <ol>
            <li>Ordered Inside 2-B-I</li>
            <li>Ordered Inside 2-B-II</li>
            <li style="color: #8e4ec6;">
              Ordered Inside 2-B-III:
              <ol>
                <li>Ordered Inside 2-B-III-a</li>
                <li>Ordered Inside 2-B-III-b</li>
                <li style="color: #5b5bd6;">
                  Ordered Inside 2-B-III-c:
                  <ol>
                    <li>Ordered Inside 2-B-III-c-i</li>
                    <li>Ordered Inside 2-B-III-c-ii</li>
                    <li style="color: #0090ff;">
                      Ordered Inside 2-B-III-c-iii:
                      <ol>
                        <li>Ordered Inside 2-B-III-c-iii</li>
                        <li>Ordered Inside 2-B-III-c-iii</li>
                      </ol>
                    </li>
                  </ol>
                </li>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
`;

export function ProseListInsideDemo() {
  return <Prose __html={content} />;
}

import { Prose } from "@/ui/prose";

// Used for syntax highlighting
const html = String.raw;

const content = html`
  <h3>Allies</h3>
  <p>Here are some of their notable allies and their roles:</p>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th>Affiliation</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Shanks</td>
        <td>Mentor</td>
        <td>Red-Haired Pirates</td>
      </tr>
      <tr>
        <td>Portgas D. Ace</td>
        <td>Brother</td>
        <td>Whitebeard Pirates</td>
      </tr>
      <tr>
        <td>Boa Hancock</td>
        <td>Ally</td>
        <td>Kuja Pirates</td>
      </tr>
      <tr>
        <td>Dracule Mihawk</td>
        <td>Trainer</td>
        <td>Warlord of the Sea</td>
      </tr>
    </tbody>
  </table>
`;

export function ProseTableDemo() {
  return <Prose __html={content} />;
}