---
import BaseLayout from "../layouts/BaseLayout.astro";
import SectionHead from "../components/SectionHead.astro";
import ResumeIntro from "../components/ui/resume-intro";
import { SITE, authors } from "../lib/blog-data.js";
import resume from "../config/resume.json";

const author = authors[0];

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "ProfilePage",
  mainEntity: {
    "@type": "Person",
    name: SITE.name,
    jobTitle: author.jobTitle,
    email: `mailto:${resume.contact.email}`,
    telephone: resume.contact.phone,
    description: resume.summary,
    knowsAbout: author.knowsAbout,
    alumniOf: resume.education.map((e) => ({ "@type": "Organization", name: e.org })),
    hasCredential: resume.certifications.map((c) => ({
      "@type": "EducationalOccupationalCredential",
      name: c.title,
    })),
  },
};
---

<BaseLayout
  title={`Resume — ${SITE.name}`}
  description={resume.summary}
  canonical="/resume"
  jsonLd={jsonLd}
>
  {/* client:visible — the block is the first thing on the page but the motion
      only matters once it is actually in view, and this keeps the JS off the
      critical path. */}
  <ResumeIntro
    client:visible
    name={SITE.name}
    headline={resume.headline}
    summary={resume.summary}
    highlights={resume.highlights}
    social={resume.social}
    email={resume.contact.email}
    resumeHref="/carlos-arias-resume.pdf"
    photoSrc="/carlos-arias-light.jpg"
    photoSrcDark="/carlos-arias-dark.jpg"
  />

  <div class="mx-auto w-full max-w-6xl px-5">
    <!-- ---------- experience ---------- -->
    <section class="ca-band" id="experience">
      <SectionHead title="Experience" meta="1999 — present" brush />

      <div class="flex flex-col">
        {
          resume.experience.map((job, i) => (
            <article
              class:list={["ca-cv-row", i === 0 && "border-t border-border"]}
            >
              <div class="ca-cv-when">
                <span class="font-mono text-xs tracking-wide text-[var(--ca-ink-4)] tabular-nums">
                  {job.period}
                </span>
                {job.current && (
                  <span class="ca-cv-now" aria-label="Current role">
                    Now
                  </span>
                )}
              </div>

              <div class="ca-cv-what">
                <h3 class="font-serif text-2xl leading-snug tracking-tight">{job.role}</h3>
                <p class="mt-1 text-sm">
                  <span class="text-foreground">{job.org}</span>
                  <span class="text-[var(--ca-ink-4)]"> · {job.sector}</span>
                </p>
                <p class="mt-4 max-w-[64ch] text-sm leading-relaxed text-muted-foreground">
                  {job.summary}
                </p>
                <ul class="ca-cv-points">
                  {job.points.map((point) => (
                    <li>{point}</li>
                  ))}
                </ul>
              </div>
            </article>
          ))
        }
      </div>
    </section>

    <!-- ---------- projects ---------- -->
    <section class="ca-band" id="ventures">
      <SectionHead title="Ventures" meta="Built and running" brush />

      <div class="grid gap-x-14 md:grid-cols-2">
        {
          resume.projects.map((project) => (
            <article class="border-t border-border py-7">
              <div class="flex flex-wrap items-baseline gap-3">
                <h3 class="font-serif text-2xl leading-snug tracking-tight">
                  {project.name}
                </h3>
                <span class="font-mono text-[0.7rem] tracking-[0.12em] text-[var(--ca-ink-4)] uppercase">
                  {project.kind}
                </span>
                <span class="ml-auto font-mono text-xs whitespace-nowrap text-[var(--ca-ink-4)] tabular-nums">
                  {project.period}
                </span>
              </div>
              <p class="mt-3 max-w-[56ch] text-sm leading-relaxed text-muted-foreground">
                {project.summary}
              </p>
              <ul class="ca-cv-points">
                {project.points.map((point) => (
                  <li>{point}</li>
                ))}
              </ul>
            </article>
          ))
        }
      </div>
    </section>

    <!-- ---------- skills ---------- -->
    <section class="ca-band" id="skills">
      <SectionHead title="Skills" meta="Years in practice" />

      <div class="grid gap-x-14 gap-y-10 md:grid-cols-2">
        {
          resume.skills.map((group) => (
            <div>
              <h3 class="mb-4 font-mono text-[0.7rem] tracking-[0.18em] text-[var(--ca-ink-4)] uppercase">
                {group.group}
              </h3>
              <ul class="flex flex-col">
                {group.items.map((item) => (
                  <li class="flex items-baseline gap-4 border-t border-border py-2.5 last:border-b">
                    <span class="text-sm">{item.name}</span>
                    {item.years && (
                      <span class="ml-auto font-mono text-xs whitespace-nowrap text-[var(--ca-ink-4)] tabular-nums">
                        {item.years} yr{item.years === 1 ? "" : "s"}
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))
        }
      </div>
    </section>

    <!-- ---------- tools ---------- -->
    <section class="ca-band">
      <SectionHead title="Tooling" meta="Day to day" />
      <ul class="flex max-w-5xl flex-wrap gap-2">
        {
          resume.tools.map((tool) => (
            <li class="rounded-[var(--radius)] border border-border px-2.5 py-1 font-mono text-[0.7rem] tracking-wide text-muted-foreground">
              {tool}
            </li>
          ))
        }
      </ul>
    </section>

    <!-- ---------- education ---------- -->
    <section class="ca-band" id="education">
      <div class="grid gap-x-14 gap-y-10 md:grid-cols-2">
        <div>
          <h2 class="mb-6 font-serif text-[clamp(1.6rem,3.4vw,2.1rem)] leading-tight tracking-tight">
            Education
          </h2>
          {
            resume.education.map((item) => (
              <div class="border-t border-border py-4 last:border-b">
                <p class="font-serif text-lg leading-snug">{item.title}</p>
                <p class="mt-1 text-sm text-muted-foreground">{item.org}</p>
                <p class="mt-1 font-mono text-xs text-[var(--ca-ink-4)] tabular-nums">
                  {item.period}
                </p>
              </div>
            ))
          }
        </div>

        <div>
          <h2 class="mb-6 font-serif text-[clamp(1.6rem,3.4vw,2.1rem)] leading-tight tracking-tight">
            Certifications
          </h2>
          {
            resume.certifications.map((item) => (
              <div class="flex items-baseline gap-4 border-t border-border py-4 last:border-b">
                <p class="text-sm">{item.title}</p>
                <p class="ml-auto font-mono text-xs whitespace-nowrap text-[var(--ca-ink-4)] tabular-nums">
                  {item.period}
                </p>
              </div>
            ))
          }
        </div>
      </div>
    </section>

    <!-- ---------- closing ---------- -->
    <section class="ca-band">
      <h2
        class="max-w-[20ch] font-serif text-[clamp(1.8rem,4.5vw,3.1rem)] leading-tight tracking-tight text-balance"
      >
        The full version, <span class="ca-brushed">on paper.</span>
      </h2>
      <div class="mt-9 flex flex-wrap items-center gap-7">
        <a
          href="/carlos-arias-resume.pdf"
          download
          class="rounded-[var(--radius)] border border-primary bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-transparent hover:text-primary"
        >
          Download resume (PDF)
        </a>
        <a href="/contact" class="ca-quiet text-sm">Start a conversation</a>
      </div>
    </section>
  </div>
</BaseLayout>