---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import meBangkok from "@/assets/images/me-bangkok.jpg";
import JsonLd from "@/components/JsonLd.astro";
import BaseLayout from "@/layouts/BaseLayout.astro";

const recentProjects = (
  await getCollection("projects", ({ data }) => !data.draft)
)
  .sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf())
  .slice(0, 3);

const profilePageSchema = {
  "@context": "https://schema.org",
  "@type": "ProfilePage",
  url: "https://adrian-altner.com/about",
  mainEntity: {
    "@type": "Person",
    name: "Adrian Altner",
    url: "https://adrian-altner.com",
    jobTitle: "Key Account Manager & Amateur Photographer",
    sameAs: [
      "https://www.instagram.com/adrian.altner/",
      "https://www.linkedin.com/in/adrian-altner/",
      "https://github.com/adrian-altner",
    ],
  },
};
---

<BaseLayout title="About" description="About Adrian Altner, his passion for the web and photography, and how to get in touch.">
  <JsonLd schema={profilePageSchema} slot="head" />
  <div class="page">
    <main class="main">
      <a href="/" class="back">← Home</a>
      <div class="about">
        <div class="about__photo-col">
          <Image
            src={meBangkok}
            alt="Adrian Altner in Bangkok"
            class="about__photo"
            width={480}
            height={640}
          />
        </div>

        <div class="about__content">
          <h1 class="about__heading">About me</h1>
          <p class="about__tagline">Adrian Altner</p>

          <p class="about__bio">
            I've been passionate about the web since 1997. By day, I work as a Key Account
            Manager in IT distribution. I'm self-taught by nature, and in my spare time I
            build things for fun and teach myself whatever sparks my curiosity.
          </p>
          <p class="about__bio">
            Photography is one of my main hobbies. I usually shoot while traveling and on
            photowalks, drawn to street scenes, architecture, and the kind of light that never
            waits. This site is where those interests come together.
          </p>

        </div>
      </div>

      <section class="projects">
        <h2 class="projects__heading"><a href="/projects">Projects</a></h2>
        <ul class="projects__list">
          {recentProjects.map((p) => (
            <li class="projects__item">
              <a href={`/projects/${p.id}`} class="projects__title">{p.data.title}</a>
              <p class="projects__desc">{p.data.description}</p>
            </li>
          ))}
        </ul>
      </section>

    </main>
  </div>
</BaseLayout>

<style>
  .page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: #f5f5f3;
    color: #111;
  }

  .main {
    max-width: var(--width-content);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    width: 100%;
  }

  .back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
  }

  .back:hover {
    color: var(--accent);
  }

  /* ── Two-column layout ── */
  .about {
    display: grid;
    grid-template-columns: 48% 52%;
    gap: 0;
  }

  /* ── Photo column ── */
  .about__photo-col {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .about__photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  /* ── Content column ── */
  .about__content {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 560px;
  }

  .about__heading {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
  }

  .about__tagline {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    margin-bottom: 2rem;
  }

  .about__bio {
    font-size: 0.975rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 1rem;
  }

  /* ── Projects ── */
  .projects {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0de;
  }

  .projects__heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1rem;
  }

  .projects__heading a {
    color: inherit;
    text-decoration: none;
  }

  .projects__heading a:hover {
    color: #111;
  }

  .projects__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .projects__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0de;
  }

  .projects__item:first-child {
    border-top: 1px solid #e0e0de;
  }

  .projects__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111;
    text-decoration: none;
    line-height: 1.3;
  }

  .projects__title:hover {
    color: var(--accent);
  }

  .projects__desc {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
  }

  /* ── Mobile ── */
  @media (max-width: 600px) {
    .about {
      grid-template-columns: 1fr;
    }

    .about__photo-col {
      height: 520px;
    }

    .about__photo {
      object-fit: cover;
      object-position: center 85%;
    }

    .about__content {
      padding: 2rem 1.5rem 3rem;
    }
  }
</style>
