---
import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import Button from '../components/Button/Button.astro';
import { Image } from 'astro:assets';

import portrait from '../assets/images/portrait.jpg';

const blog = await getCollection('blog', ({ data }) =>
  import.meta.env.PROD ? data.draft !== true : true,
);
// TODO: show the pinned ones, not the recents
const portafolio = await getCollection('portafolio', ({ data }) =>
  import.meta.env.PROD ? data.draft !== true : true,
);
---

<Layout title="aleidk">
  <section
    id="hero"
    class="bg-image flex-center"
    style="--bg-image: url(https://placehold.co/600x400)"
  >
    <div class="hstack gap-5">
      <!-- <Image -->
      <!--   id="portrait" -->
      <!--   src={portrait} -->
      <!--   alt="portrait of Alexander Navarro" -->
      <!--   loading="eager" -->
      <!--   width={200} -->
      <!-- /> -->
      <div>
        <h1 class="my-0">Alexander Navarro</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet,
          repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
          porro, neque officia nisi error quia deleniti nesciunt provident vitae
          consequuntur quod?
        </p>
      </div>
    </div>
  </section>

  <section>
    <h2 class="text-center">Featured Work</h2>

    <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
      <Card>
        <img
          src="https://placehold.co/600x400"
          alt="project img"
          class="border-radius"
        />
        <h3 class="fs-4 text-center my-1">Project N°1</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
          cillum sint consectetur cupidatat.
        </p>

        <div class="text-end">
          <a href="">See more...</a>
        </div>
      </Card>

      <Card>
        <img
          src="https://placehold.co/600x400"
          alt="project img"
          class="border-radius"
        />
        <h3 class="fs-4 text-center my-1">Project N°1</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
          cillum sint consectetur cupidatat.
        </p>

        <div class="text-end">
          <a href="">See more...</a>
        </div>
      </Card>

      <Card>
        <img
          src="https://placehold.co/600x400"
          alt="project img"
          class="border-radius"
        />
        <h3 class="fs-4 text-center my-1">Project N°1</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
          cillum sint consectetur cupidatat.
        </p>

        <div class="text-end">
          <a href="">See more...</a>
        </div>
      </Card>
    </div>

    <div class="mt-4 text-center">
      <Button className="px-4 py-2 fs-5">View Work</Button>
    </div>
  </section>

  <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
    <h2 class="mb-4">What I've been up to...</h2>

    <div class="hstack flex-eq flex-wrap flex-md-nowrap">
      <div class="vstack justify-content-center">
        <h4 class="text-center">Blog</h4>
        <ol class="list-unstyle mt-0 fs-5">
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
        </ol>
      </div>

      <div>
        <div class="text-center mb-2">
          <img class="" src="https://placehold.co/400x200" alt="project img" />
        </div>
        <p class="text-justify">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
          consequatur iste molestiae blanditiis eligendi consectetur ullam.
          Excepturi quasi sed est animi laudantium necessitatibus, tempore
          delectus nulla aspernatur quod nesciunt fugiat.
        </p>
      </div>
    </div>

    <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
      <div class="vstack justify-content-center">
        <h4 class="text-center">Games</h4>
        <ol class="list-unstyle mt-0 fs-5">
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
        </ol>
      </div>

      <div>
        <div class="text-center mb-2">
          <img class="" src="https://placehold.co/400x200" alt="project img" />
        </div>
        <p class="text-justify">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
          consequatur iste molestiae blanditiis eligendi consectetur ullam.
          Excepturi quasi sed est animi laudantium necessitatibus, tempore
          delectus nulla aspernatur quod nesciunt fugiat.
        </p>
      </div>
    </div>
  </section>

  <section
    class="bg-image"
    style="--bg-image: url(https://placehold.co/600x400)"
  >
    <h2 class="text-center">Who am I?</h2>

    <p class="w-95 w-lg-70 mx-auto text-justify">
      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
      labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
      Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
      ut ea consectetur et est culpa et culpa duis.
    </p>

    <div class="text-center fs-4 mb-0">
      <a href="">
        <Button>View full curriculum</Button>
      </a>
    </div>
  </section>

  <section>
    <h2>Contact</h2>

    <div class="grid grid-cols-1 grid-lg-cols-2">
      <div>
        <div class="text-center">
          <img
            class="respect-width border-radius"
            src="https://placehold.co/500x300"
            alt="project img"
          />
        </div>
        <p class="text-justify">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
          exercitationem harum itaque perferendis praesentium asperiores vitae
          pariatur ad culpa mollitia necessitatibus hic!
        </p>
      </div>

      <div class="vstack justify-content-center">
        <ul
          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around"
        >
          {
            [
              {
                link: '#',
                img: 'https://placehold.co/60',
                alt: '',
                text: 'Github',
              },
              {
                link: '#',
                img: 'https://placehold.co/60',
                alt: '',
                text: 'Linkedin',
              },
              {
                link: '#',
                img: 'https://placehold.co/60',
                alt: '',
                text: 'Email',
              },
            ].map((item) => (
              <li class="mb-3">
                <a
                  href={item.link}
                  class="hstack flex-column flex-lg-row gap-2"
                >
                  <>
                    <img src={item.img} alt={item.alt} />
                    <span>{item.text}</span>
                  </>
                </a>
              </li>
            ))
          }
        </ul>
      </div>
    </div>
  </section>

  <style>
    #portrait {
      border-radius: 50%;
      border: 5px solid var(--prj-text);
    }
    #hero {
      min-height: 50vh;
    }
  </style>
</Layout>
