---
import Layout from "@layouts/Layout.astro";
import Navbar from "@components/widgets/Navbar.astro";
import { Picture } from "@astrojs/image/components";
import logo from "@assets/logo.png";
import { SOCIALS } from "../config";
---

<Layout
  schemaOrg={{
    "@context": "https://schema.org/",
    "@type": "Person",
    name: "xHyroM",
    url: "https://xhyrom.dev",
    image: "https://xhyrom.dev/favicon.ico",
    sameAs: [
      "https://twitter.com/hyrousek",
      "https://instagram.com/hyro.dev",
      "https://github.com/xHyroM",
    ],
    jobTitle: "Developer",
  }}
>
  <Navbar />
  <main
    class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
  >
    <div class="justify-cener flex items-center">
      <Picture
        src={logo}
        formats={["png"]}
        sizes="(max-width: 200px) 100vw, 200px"
        widths={[200, 400]}
        aspectRatio={"1:1"}
        alt="descriptive text"
        class={"h-[200px] w-[200px]"}
      />
    </div>
    <section class="text-center md:ml-6 md:text-left">
      <div class="flex drop-shadow-yellow">
        <h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
      </div>

      <ul class="my-5 flex justify-center text-white md:justify-start">
        {
          SOCIALS.map((social) => (
            <li class="mr-4 ">
              <a class="h-10 w-10" href={social.link} title={social.name}>
                <img
                  class="h-8 w-8 transition-all hover:-translate-y-1"
                  src={`/icons/${social.icon}`}
                  alt={`${social.name} icon`}
                />
              </a>
            </li>
          ))
        }
      </ul>
    </section>
  </main>
</Layout>