---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import LinkButton from "@components/LinkButton.astro";
import Hr from "@components/Hr.astro";
import Card from "@components/Card";
import Socials from "@components/Socials.astro";
import getSortedPosts from "@utils/getSortedPosts";
import slugify from "@utils/slugify";
import { SOCIALS } from "@config";

const posts = await getCollection("blog");

const sortedPosts = getSortedPosts(posts);
const featuredPosts = sortedPosts.filter(({ data }) => data.featured);

const socialCount = SOCIALS.filter(social => social.active).length;
---

<Layout>
  <Header />
  <main id="main-content">
    <section id="hero">
      <h1>Engineering Chaos</h1>
      <a
        target="_blank"
        href="/rss.xml"
        class="rss-link"
        aria-label="rss feed"
        title="RSS Feed"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="rss-icon"
          ><path
            d="M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001h2z"
          ></path><path
            d="M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z"
          ></path><circle cx="6" cy="18" r="2"></circle>
        </svg>
      </a>

      <p>
        I'm Alex, a DevOps architect and software developer. I currently hold the role of DevOps Engineer at Materna, where I assist developers in accelerating web performance and provide guidance on various topics such as web development, Kubernetes, network security, and more.
      </p>
      <!-- <p>
        Read the blog posts or check
        <LinkButton
          className="hover:text-skin-accent underline underline-offset-4 decoration-dashed"
          href="https://github.com/satnaing/astro-paper#readme"
        >
          README
        </LinkButton> for more info.
      </p> -->
      {
        // only display if at least one social link is enabled
        socialCount > 0 && (
          <div class="social-wrapper">
            <div class="social-links">Social Links:</div>
            <Socials />
          </div>
        )
      }
    </section>

    <Hr />

    {
      featuredPosts.length > 0 && (
        <>
          <section id="featured">
            <h2>Featured</h2>
            <ul>
              {featuredPosts.map(({ data }) => (
                <Card
                  href={`/posts/${slugify(data)}`}
                  frontmatter={data}
                  secHeading={false}
                />
              ))}
            </ul>
          </section>
          <Hr />
        </>
      )
    }

    <section id="recent-posts">
      <h2>Recent Posts</h2>
      <ul>
        {
          sortedPosts.map(
            ({ data }, index) =>
              index < 4 && (
                <Card
                  href={`/posts/${slugify(data)}`}
                  frontmatter={data}
                  secHeading={false}
                />
              )
          )
        }
      </ul>
      <div class="all-posts-btn-wrapper">
        <LinkButton href="/posts">
          All Posts
          <svg xmlns="http://www.w3.org/2000/svg"
            ><path
              d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
            ></path>
          </svg>
        </LinkButton>
      </div>
    </section>
  </main>

  <Footer />
</Layout>

<style>
  /* ===== Hero Section ===== */
  #hero {
    @apply pb-6 pt-8;
  }
  #hero h1 {
    @apply my-4 inline-block text-3xl font-bold sm:my-8 sm:text-5xl;
  }
  #hero .rss-link {
    @apply mb-6;
  }
  #hero .rss-icon {
    @apply mb-2 h-6 w-6 scale-110 fill-skin-accent sm:mb-3 sm:scale-125;
  }
  #hero p {
    @apply my-2;
  }
  .social-wrapper {
    @apply mt-4 flex flex-col sm:flex-row sm:items-center;
  }
  .social-links {
    @apply mb-1 mr-2 whitespace-nowrap sm:mb-0;
  }

  /* ===== Featured & Recent Posts Sections ===== */
  #featured,
  #recent-posts {
    @apply pb-6 pt-12;
  }
  #featured h2,
  #recent-posts h2 {
    @apply text-2xl font-semibold tracking-wide;
  }
  .all-posts-btn-wrapper {
    @apply my-8 text-center;
  }
</style>