---
import BaseLayout from '../layouts/BaseLayout.astro';
import ActivityWidget from "../components/ActivityWidget.astro";
import ViewCounter from "../components/ViewCounter.astro";
import SocialsWidget from "../components/SocialsWidget.astro";
import ProjectsFeature from "../components/ProjectsFeature.astro";
import {getCollection} from "astro:content";

const title = 'Home';
const description = 'My little corner of the internet.';
const permalink = Astro?.site?.href ?? '/';

const latestBlogPost = await getCollection("posts")
  .then(posts => posts.sort(
      (a, b) => new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
    )
  ).then(sortedBlogPosts => sortedBlogPosts.length > 0 ? sortedBlogPosts[0] : null);
---

<BaseLayout title={title} description={description} permalink={permalink}>
  <div class="home-container">
    <div class="window home-copy" data-title="Welcome" id="welcome">
      <div>
        <h1>Welcome to my little corner of the interwebs</h1>
        <p>Feel free to check out what I got in store!</p>
      </div>
    </div>
    <div class="window-row">
      <div class="window visitor-counter" data-title="Visitors counter" id="visitor-counter"
           aria-label="Visitors counter">
        <ViewCounter/>
      </div>
      <div class="window activity" data-title="Activity" id="activity" aria-label="Activity">
        <ActivityWidget/>
      </div>
    </div>
    <div class="window-row">
      <div class="window socials" data-title="Socials" id="socials" aria-label="Socials">
        <div class="buttons">
          <button popovertarget="socials-info" popovertargetaction="show" tabindex="0" title="Socials info">
            <span class="icon">ℹ️</span>
          </button>
        </div>
        <div popover="auto" id="socials-info" class="window">
          <div class="buttons">
            <button popovertarget="socials-info" popovertargetaction="hide" tabindex="0"
                    aria-label="Close socials info">
              <span class="icon">❌</span>
            </button>
          </div>
            <h2>Socials</h2>
            <p>I don't use social media much. Many of the ones listed here are here just as a way to reserve my username<br/> and/or to make it easier to verify that the account belongs to me.</p>
        </div>
        <SocialsWidget/>
      </div>
      <div class="window blog" aria-label="Blog" id="blog" data-title="Blog">
        <span>Latest article:</span>
        {
          latestBlogPost === null ? (
              <div class="latest-article">
                <span class="title">No articles yet</span>
                <span class="excerpt">Come back later to check for new articles!</span>
              </div>
          ) : null
        }
        <div class="latest-article">
          <span class="title" style={`view-transition-name: blog-post-${latestBlogPost?.slug}`}>{latestBlogPost?.data.title}</span>
          <span class="excerpt">{latestBlogPost?.data.description}</span>
        </div>
        <div class="actions">
          {
            latestBlogPost !== null && (
                  <a href={`/blog/${latestBlogPost?.slug}`} class="button">Read more</a>
                  <a href="/blog" class="button secondary">All articles</a>
            )
          }
        </div>
        <div class="buttons">
          <div class="rss">
            <a
                href="/rss.xml"
                target="_blank"
                aria-label="RSS feed"
                title="RSS feed"
            >
              <svg height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"
                   viewBox="-271 273 256 256" xml:space="preserve">
                <g>
                  <path fill="white" d="M-271,360v48.9c31.9,0,62.1,12.6,84.7,35.2c22.6,22.6,35.1,52.8,35.1,84.8v0.1h49.1c0-46.6-19-88.7-49.6-119.4
                    C-182.2,379-224.4,360.1-271,360z"/>
                  <path fill="white" d="M-237,460.9c-9.4,0-17.8,3.8-24,10s-10,14.6-10,24c0,9.3,3.8,17.7,10,23.9c6.2,6.1,14.6,9.9,24,9.9s17.8-3.7,24-9.9
                    s10-14.6,10-23.9c0-9.4-3.8-17.8-10-24C-219.2,464.7-227.6,460.9-237,460.9z"/>
                  <path fill="white" d="M-90.1,348.1c-46.3-46.4-110.2-75.1-180.8-75.1v48.9C-156.8,322-64.1,414.9-64,529h49C-15,458.4-43.7,394.5-90.1,348.1z"/>
                </g>
              </svg>
            </a>
          </div>

        </div>
      </div>
    </div>
    <div class="window-row">
      <div class="window" data-title="Projects" id="projects" aria-label="Projects">
        <div class="buttons">
          <button popovertarget="projects-info" popovertargetaction="show" tabindex="0" title="Projects info">
            <span class="icon">ℹ️</span>
          </button>
        </div>
        <div popover="auto" id="projects-info" class="window">
          <div class="buttons">
            <button popovertarget="projects-info" popovertargetaction="hide" tabindex="0"
                    aria-label="Close projects info">
              <span class="icon">❌</span>
            </button>
          </div>
          <h2>Projects</h2>
          <p>
            Here are some of the projects I'm working on. Most of them are open source, so feel free to check them out!
            <br>
            Projects presented here are what I consider in presentable and/or finished state. They might or might not
            get
            updates.
            <br>
            Most logos generated using <a href="https://huggingface.co/spaces/dalle-mini/dalle-mini" target="_blank">DALL-E
            mini</a>.
            <br>
            Inviter logo by <a href="https://slyfoxart.artstation.com/projects" target="_blank">SlyFox</a>
          </p>
        </div>
        <ProjectsFeature/>
      </div>
    </div>


  </div>
</BaseLayout>

<style lang="scss">

  #projects-info, #socials-info {
    position: fixed;
  }

  .visitor-counter {
    padding: 1.5rem 2rem 0 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: min(15rem, 100%);
    flex: 1;
    width: 100%;
  }

  .socials {
    padding: 2rem 1rem 0 1rem;
    flex: 2;
    min-width: min(25rem, 100%);
  }

  .activity {
    min-width: min(100%, 16rem);
    flex: 2;
  }

  #projects {
    width: 100%;
    display: flex;
    flex: 1;
    padding-top: 1.5rem;
  }

  .blog {
    padding: 2rem 1rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: min(25rem, 100%);
    width: 100%;
    gap: 0.5rem;
    flex: 1;

    .latest-article {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 0.5rem;
      background: rgba(255,255,255, 0.05);
      padding: 0.5rem;
      border-radius: 0.25rem;

      .title {
        font-weight: 600;
        font-size: 1.1rem;
      }

      .excerpt {
        font-size: 0.9rem;
        color: var(--text-secondary);
      }
    }

    .actions {
      display: flex;
      gap: 0.5rem;
    }

  }

  .buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .rss {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      a {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .window-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    justify-content: center;
  }

  .home-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2em 0;
    gap: 1.5rem;

    .home-copy {
      flex: 1;
      display: flex;
      width: 100%;
      padding-top: 3rem;
      padding-inline: 0.5rem;

      h1 {
        font-weight: 700;
        margin-bottom: 0.5em;
        line-height: 1.3;
        font-size: 2rem;
        text-align: center;
      }

      p {
        text-align: center;
        font-size: 1.2rem;
      }
    }

  }

  @media (max-width: 1200px) {
    p {
      font-size: 1.2em;
    }
  }

  @media (max-width: 800px) {
    .home-container {
      flex-direction: column;
    }

    .home-copy {
      flex: 0;
      padding-bottom: 2em;
      text-align: center;
    }
  }

</style>
