---
import { site } from "../data/site";
import { experience, education } from "../data/experience";
import { cvAvailable } from "../lib/assets";

// M1 shows the most recent roles; the full history lives in experience.ts (and the CV).
const recent = experience.slice(0, 3);
const olderCount = experience.length - recent.length;
---

<div class="about">
  <div class="about__bio" data-reveal>
    <p class="lead">{site.bio}</p>

    <dl class="about__facts">
      <div>
        <dt class="mono">Based</dt>
        <dd>{site.location}</dd>
      </div>
      <div>
        <dt class="mono">Focus</dt>
        <dd>Edge Kubernetes · GPU/AI · IaC & GitOps</dd>
      </div>
    </dl>

    <h3 class="about__sub mono"># education</h3>
    <ul class="about__education">
      {education.map((e) => <li>{e}</li>)}
    </ul>

    {cvAvailable && (
      <p class="about__cv">
        <a class="btn" href="/cv.pdf" download>Download full CV (PDF)</a>
      </p>
    )}
  </div>

  <div>
    <ol class="about__timeline">
      {
        recent.map((role) => (
          <li class="about__role" data-reveal>
            <div class="about__role-head">
              <h3 class="about__role-title">{role.title}</h3>
              <span class="mono about__role-period">{role.period}</span>
            </div>
            <p class="mono about__role-org">{role.org}</p>
            <p class="about__role-summary">{role.summary}</p>
            {role.highlights.length > 0 && (
              <ul class="about__highlights">
                {role.highlights.map((h) => (
                  <li>{h}</li>
                ))}
              </ul>
            )}
          </li>
        ))
      }
    </ol>
    {olderCount > 0 && (
      <p class="about__more mono">
        + {olderCount} earlier roles (ELGAS, Darktime){cvAvailable ? " - see the CV" : ""}.
      </p>
    )}
  </div>
</div>

<style>
  .about {
    display: grid;
    gap: var(--space-7);
  }
  @media (min-width: 880px) {
    .about {
      grid-template-columns: 1fr 1.1fr;
      gap: var(--space-8);
      align-items: start;
    }
  }
  .about__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-5) 0 0;
  }
  .about__facts dt {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .about__facts dd {
    margin: 0.2rem 0 0;
    color: var(--text);
    font-size: var(--step--1);
  }
  .about__sub {
    margin-top: var(--space-6);
    color: var(--text-dim);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
  }
  .about__sub::first-letter {
    color: var(--accent);
  }
  .about__education {
    margin: var(--space-3) 0 0;
    padding-left: 1.1rem;
    color: var(--text-dim);
    font-size: var(--step--1);
    display: grid;
    gap: 0.3rem;
  }
  .about__education li::marker {
    color: var(--accent);
  }
  .about__cv {
    margin-top: var(--space-6);
  }
  .about__timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
  }
  .about__role {
    position: relative;
    padding-left: var(--space-5);
    border-left: 1px solid var(--border-strong);
  }
  .about__role::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.4rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-dim);
  }
  .about__role-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .about__role-title {
    font-size: var(--step-1);
  }
  .about__role-period {
    font-size: 0.72rem;
    color: var(--text-faint);
  }
  .about__role-org {
    color: var(--accent);
    font-size: var(--step--1);
    margin-top: 0.15rem;
  }
  .about__role-summary {
    color: var(--text-dim);
    margin-top: var(--space-2);
    font-size: var(--step-0);
  }
  .about__highlights {
    margin: var(--space-3) 0 0;
    padding-left: 1.1rem;
    color: var(--text-dim);
    font-size: var(--step--1);
    display: grid;
    gap: 0.3rem;
  }
  .about__highlights li::marker {
    color: var(--accent);
  }
  .about__more {
    margin-top: var(--space-5);
    padding-left: var(--space-5);
    font-size: 0.72rem;
    color: var(--text-faint);
  }
</style>
