---
import { Age } from '@components/react/Age';
import { Container } from '@components/react/Container';
import { getCollection } from 'astro:content';
import { Heading } from '@components/react/Heading';
import { Image } from 'astro:assets';
import { SITE_TITLE } from '@/consts';
import Layout from '@/layouts/Page.astro';
import profileImage from '@/assets/images/me.jpg';

function getBirthdayInSecond() {
  const now = new Date();
  const dob = new Date(1996, 1, 22, 15, 30, 0);

  return Math.round((now.getTime() - dob.getTime()) / 1000);
}

const age = getBirthdayInSecond();
const ageInYears = Math.floor(age / 31536000);
const postsCount = (await getCollection('posts')).length;
---

<Layout title={`About Me | ${SITE_TITLE}`}>
  <Container>
    <div class="relative px-4 pb-16 mx-auto max-w-7xl">
      <div class="mx-auto text-base max-w-prose lg:max-w-none">
        <p
          class="font-semibold leading-6 tracking-wide text-indigo-600 uppercase xl:text-xl text-md"
        >
          About me
        </p>
        <Heading noMargin className="mb-8">Meet Florian</Heading>
      </div>

      <div class="lg:grid lg:grid-cols-2 lg:gap-8">
        <div class="relative mb-8 lg:mb-0 lg:row-start-1 lg:col-start-2">
          <svg
            class="absolute top-0 right-0 hidden -mt-20 -mr-20 lg:block"
            width="404"
            height="384"
            fill="none"
            viewBox="0 0 404 384"
          >
            <defs>
              <pattern
                id="de316486-4a29-4312-bdfc-fbce2132a2c1"
                x="0"
                y="0"
                width="20"
                height="20"
                patternUnits="userSpaceOnUse"
              >
                <rect
                  x="0"
                  y="0"
                  width="4"
                  height="4"
                  class="text-gray-200 dark:text-gray-700"
                  fill="currentColor"></rect>
              </pattern>
            </defs>
            <rect width="404" height="384" fill="url(#de316486-4a29-4312-bdfc-fbce2132a2c1)"></rect>
          </svg>
          <div class="relative mx-auto text-base max-w-prose lg:max-w-none">
            <figure>
              <Image
                src={profileImage}
                alt="Me"
                class="object-cover object-center w-full h-full rounded-lg shadow-lg bg-slate-50"
                width={600}
                quality={80}
              />
              <figcaption class="flex items-center mt-3 text-sm text-gray-500 dark:text-gray-100">
                <svg
                  class="flex-none w-5 h-5 mr-2 text-gray-400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
                    clip-rule="evenodd"></path>
                </svg>
                <span class="flex-1">
                  I should have read the text first{' '}
                  <span aria-label="sweat smiley" role="img">😅</span>
                </span>
              </figcaption>
            </figure>
          </div>
        </div>
        <div>
          <div
            class="mx-auto prose text-gray-500 xl:prose-lg dark:prose-dark lg:max-w-none lg:row-start-1 lg:col-start-1 dark:text-gray-100 space-y-4"
          >
            <p>Hey thanks for visiting my blog and wanting to get to know me better!</p>
            <p>
              I am an <Age client:idle age={age} />
              seconds ({ageInYears} years) old Austrian frontend developer.
            </p>
            <p>
              My true passion is to create modern websites and webapps with state of the art
              technology. My prefered framework for creating websites these days, is{' '}
              <a href="https://reactjs.org/">React</a>. I started learning React in 2016 and since
              then I kept learning new tools, concepts and technologies evolving around React.
            </p>
            <p>
              I started this blog early 2020 and oh boy did I not know what a crazy year this is
              gonna be. On January 7th I published{' '}
              <a href="/hello-world">my very first blog post</a> and since then I have written <strong
                >{postsCount}</strong
              > articles.
            </p>
            <p>
              Besides coding I like to play video games and listening to music. If I like a song, I
              sometimes learn to play it on my guitar. On rainy days (or even sunny ones haha) I
              also like watching movies and TV shows on Netflix.
            </p>
          </div>
        </div>
      </div>
    </div>
  </Container>
</Layout>
