<script lang="ts">
  import Spacer from '$lib/Layout/Spacer.svelte';
  import root from './Utility/root';
  import { env } from '$env/dynamic/public';
  import tooltip from './Tooltip/tooltip';
  import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte';
  import MangaListTemplate from './List/Manga/MangaListTemplate.svelte';
  import localforage from 'localforage';
</script>

<div class="example-item card">
  <div class="item-content">
    <details class="list" open>
      <MangaListTemplate due={true} dummy displayUnresolved={false} disableFilter />
    </details>
  </div>

  <div class="card item-description">
    <span class="big-text">Manga, Without the Guesswork</span>

    <p>
      <a href={root('/')}>due.moe</a> automatically keeps your manga and light novel lists up to date—checking
      for new chapters, notifying you of new releases, and reminding you to update your volume count if
      you fall behind. Completed and ongoing series stay neatly organized so you can instantly see what
      needs your attention. Staying on top of your reading has never been easier.
    </p>

    <small class="bottom">
      This demo view contains simulated data which may include concluded manga.
    </small>
  </div>
</div>

<Spacer />

<div class="example-item card">
  <div class="card item-description">
    <span class="big-text">Anime, Made Smarter</span>

    <p>
      Track your anime effortlessly. <a href={root('/')}>due.moe</a> shows which episodes you still need
      to watch, keeps you updated on upcoming releases, and even counts down to the next subtitled episode—so
      you're always on time.
    </p>

    <small class="bottom">
      This demo view contains simulated data which may include concluded anime.
    </small>
  </div>
  <div class="item-content">
    <details class="list" open>
      <CompletedAnimeList dummy disableFilter />
    </details>
  </div>
</div>

<Spacer />

<div class="example-item card">
  <div class="item-content">
    <span class="big-text">Smarter Tools, Better Experience</span>

    <p>
      <a href={root('/')}>due.moe</a> isn't just tracking—it's a full suite of tools designed to enhance
      your AniList experience. From Wrapped to Sequel Spy, everything you need is right here.
    </p>

    <ul>
      <li><a href={root('/wrapped')}>AniList Wrapped</a> — Your Year on AniList</li>
      <li>
        Badge Wall — A unified badge collection experience for AniList
        <blockquote style="margin: 0 0 0 1.5rem;">
          Easily display all of your earned badges in a single place, with your Anime Watching Club
          (AWC) badges automatically included!
        </blockquote>
      </li>
      <li>
        <a href={root('/schedule')}>Subtitle Schedule</a> — A release calendar which displaying the
        scheduled <b>subtitle release times</b> for simulcast anime!
      </li>
      <li>
        <a href={root('/birthdays')}>Today's Character Birthdays</a> — A calendar to help you stay up
        to date with your favourite characters' birthdays, featuring an even bigger character database
        than AniList!
      </li>
      <li>
        <a href={root('/tools/sequel_spy')}>Sequel Spy</a> — Find media with prequels you haven't seen
        for any simulcast season
      </li>
    </ul>

    <br /><br />

    <span class="medium-text">
      <a
        href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`}
        onclick={async () => {
          await localforage.setItem(
            'redirect',
            window.location.origin + window.location.pathname + window.location.search
          );
        }}>Log in</a
      >
      with AniList, and <a href={root('/')}>due.moe</a> does the rest.
    </span>
  </div>

  <div class="item-description demo">
    <a href="https://imgur.com/j5vfKbx.mp4" target="_blank">
      <img src="https://imgur.com/j5vfKbx.gif" alt="Demo" title="Demo" use:tooltip />
    </a>
  </div>
</div>

<style>
  .example-item {
    display: flex;
    flex-wrap: wrap;
  }

  .demo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
  }

  .demo img {
    border-radius: 8px;
    margin: 0.15rem;
    width: 100%;
  }

  .item-content {
    flex: 1 1 50%;
  }

  .item-description {
    flex: 1 1 50%;
  }

  .medium-text {
    font-size: 1.125rem;
  }

  .big-text {
    font-size: 1.25rem;
  }

  .bottom {
    position: absolute;
    bottom: 1em;
  }
</style>
