---
import BaseLayout from "../layouts/BaseLayout.astro";
import BrandMark from "../components/BrandMark.astro";
import InkWash from "../components/InkWash.astro";
import IndexRow from "../components/IndexRow.astro";
import SectionHead from "../components/SectionHead.astro";
import { SITE, authors, personSchema } from "../lib/blog-data.js";

// The theme exposes the author via `authors`, not on SITE.
const author = authors[0];
import projects from "../config/projects.json";
import capabilities from "../config/capabilities.json";

const concepts = [
  "Agentic websites",
  "Autonomous SEO systems",
  "Multi-agent collaboration",
  "AI product architecture",
  "Retrieval-augmented generation",
  "AI knowledge systems",
  "AI workflow orchestration",
  "AI-driven software development",
  "Self-healing applications",
  "Autonomous business systems",
];

const industries = [
  "Artificial Intelligence",
  "SaaS",
  "FinTech",
  "Healthcare",
  "Legal Technology",
  "Digital Marketing",
  "Location Intelligence",
  "Automation Platforms",
];

const facts = [
  { label: "Writing code since", value: "1988 — Commodore 64, age 8" },
  { label: "Professional experience", value: "26 years" },
  { label: "FinTech since", value: "2014" },
  { label: "Compliance", value: "HIPAA · SOC 2 · PCI" },
  { label: "Focused on agentic AI since", value: "2022" },
];

const jsonLd = { "@context": "https://schema.org", ...personSchema(author) };
---

<BaseLayout
  title={`${SITE.name} — ${author.jobTitle}`}
  description={SITE.description}
  canonical="/"
  jsonLd={jsonLd}
>
  <!-- hero: the one ink surface on the page -->
  <section
    class="ca-ink-surface relative -mt-16 flex min-h-[92svh] flex-col justify-center pt-32 pb-16"
  >
    <InkWash />
    <div class="relative z-10 mx-auto w-full max-w-6xl px-5">
      <div class="grid items-center gap-10 lg:grid-cols-[1.4fr_0.6fr] lg:gap-16">
        <div>
      <h1 class="mb-8 md:mb-11">
        <span class="sr-only">{SITE.name} — {author.jobTitle}</span>
        <BrandMark width="min(34rem, 100%)" animate invert seal={false} />
      </h1>

      <div class="ca-seq">
        <p class="font-mono text-xs tracking-[0.18em] text-muted-foreground uppercase">
          {author.jobTitle}
        </p>
        <p
          class="mt-6 max-w-[24ch] font-serif text-[clamp(1.6rem,3.2vw,2.4rem)] leading-tight tracking-tight text-balance"
        >
          Autonomous systems that do the work teams used to do <span class="ca-brushed"
            >by hand.</span
          >
        </p>
        <p class="mt-6 max-w-[52ch] text-base leading-relaxed text-muted-foreground">
          I design and build AI agents and intelligent business systems that automate
          complex workflows end to end. 26 years as a software engineer — since 2022,
          focused entirely on agentic AI.
        </p>
        <div class="mt-9 flex flex-wrap items-center gap-7">
          <a
            href="/contact"
            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"
          >
            Let&rsquo;s build your autonomous system &rarr;
          </a>
          <a href="#work" class="ca-quiet text-sm">See the work</a>
        </div>
      </div>
        </div>

        <!-- The hero is an ink surface in both themes, so this always uses the
             dark-wardrobe frame — the black henley and the bar behind it melt
             into the ground instead of sitting in a box. The radial mask does
             the rest: no visible edge where the photograph stops. -->
        <figure class="ca-hero-portrait ca-seq" style="--ca-seq-delay: 1.62s">
          <img
            src="/carlos-arias-dark.jpg"
            alt={`${SITE.name}, ${author.jobTitle}`}
            width="760"
            height="950"
            loading="eager"
          />
          <span class="ca-hero-seal" aria-hidden="true">印</span>
        </figure>
      </div>
    </div>
    <!-- kintsugi at the seam where ink meets paper -->
    <span class="absolute bottom-[-1px] left-[12%] z-10 h-0.5 w-11 bg-[var(--ca-seal)]"></span>
  </section>

  <!-- capabilities, not services: signals builder rather than agency -->
  <section id="expertise" class="ca-band">
    <div class="mx-auto w-full max-w-6xl px-5">
      <SectionHead title="What I build" meta="Capabilities" brush />
      <div class="grid gap-x-14 sm:grid-cols-2 lg:grid-cols-3">
        {
          capabilities.map((cap) => (
            <div class="border-t border-border py-6">
              <h3 class="font-serif text-2xl leading-snug tracking-tight">{cap.title}</h3>
              <p class="mt-2 max-w-[44ch] text-sm text-muted-foreground">{cap.summary}</p>
            </div>
          ))
        }
      </div>
    </div>
  </section>

  <!-- work as a typographic index, not cards -->
  <section id="work" class="ca-band">
    <div class="mx-auto w-full max-w-6xl px-5">
      <SectionHead title="Current work" meta="2014 &mdash; present" brush />
      <div class="flex flex-col">
        {
          projects.map((project, i) => (
            <IndexRow
              href={`/projects/${project.slug}`}
              title={project.title}
              meta={project.period}
              summary={project.summary}
              first={i === 0}
            />
          ))
        }
      </div>
      <div class="mt-9">
        <a href="/projects" class="ca-quiet font-mono text-xs tracking-[0.12em] uppercase"
          >All projects</a
        >
      </div>
    </div>
  </section>

  <!-- the one full-bleed vermillion moment. The 1-2% seal rule is
       absolute everywhere else, which is what lets this land. -->
  <section class="bg-[var(--ca-seal)] py-20 text-white md:py-32">
    <div class="mx-auto w-full max-w-6xl px-5">
      <p
        class="max-w-[17ch] font-serif text-[clamp(2rem,6vw,4.2rem)] leading-[1.1] tracking-tight text-balance"
      >
        Build software that builds, improves, and manages software.
      </p>
      <span class="mt-8 block font-mono text-xs tracking-[0.16em] uppercase opacity-70"
        >The mission</span
      >
    </div>
  </section>

  <section id="about" class="ca-band">
    <div class="mx-auto grid w-full max-w-6xl gap-12 px-5 lg:grid-cols-[1.55fr_1fr] lg:gap-20">
      <div class="text-[var(--ca-ink-2)]">
        <p class="mb-5 max-w-[62ch]">
          I&rsquo;ve been writing software since I was eight years old, on a Commodore 64 in
          1988. Nearly four decades later the instinct is unchanged: if a process is
          repetitive, it should build and run itself.
        </p>
        <p class="mb-5 max-w-[62ch]">
          For 26 years I&rsquo;ve worked as a Software Engineer, CTO, Product Engineer, and
          Technology Advisor across startups and enterprise &mdash; leading engineering teams
          and shipping platforms in FinTech, healthcare, SaaS, digital marketing, and
          geospatial technology. In FinTech since 2014, which means security and compliance
          aren&rsquo;t an afterthought: HIPAA, SOC 2, PCI.
        </p>
        <p class="max-w-[62ch]">
          Since 2022 my focus has been singular. I don&rsquo;t bolt AI onto existing
          applications &mdash; I design systems where multiple agents collaborate:
          researching, planning, deciding, generating content, writing software, running QA,
          and optimizing continuously with minimal human intervention.
        </p>
      </div>
      <dl class="flex flex-col self-start">
        {
          facts.map((fact, i) => (
            <div class={`border-b border-border py-4 ${i === 0 ? "border-t" : ""}`}>
              <dt class="font-mono text-xs tracking-[0.1em] text-[var(--ca-ink-4)] uppercase">
                {fact.label}
              </dt>
              <dd class="mt-1 font-serif text-xl leading-snug">{fact.value}</dd>
            </div>
          ))
        }
      </dl>
    </div>
  </section>

  <section class="ca-band">
    <div class="mx-auto w-full max-w-6xl px-5">
      <SectionHead title="Research &amp; concepts" meta="Ongoing" />
      <ul class="flex max-w-4xl flex-wrap gap-2">
        {
          concepts.map((concept) => (
            <li class="rounded-[var(--radius)] border border-border px-3 py-1.5 font-mono text-xs tracking-wide text-muted-foreground transition-colors hover:border-[var(--ca-ink-3)] hover:text-foreground">
              {concept}
            </li>
          ))
        }
      </ul>
    </div>
  </section>

  <section class="ca-band">
    <div class="mx-auto w-full max-w-6xl px-5">
      <h2 class="mb-8 font-serif text-[clamp(1.8rem,4vw,2.4rem)] leading-tight tracking-tight">
        Industries
      </h2>
      <p
        class="max-w-4xl font-mono text-xs leading-loose tracking-[0.1em] text-[var(--ca-ink-4)] uppercase"
      >
        {industries.join(" · ")}
      </p>
    </div>
  </section>

  <section id="contact" class="ca-band">
    <div class="mx-auto w-full max-w-6xl px-5">
      <h2
        class="max-w-[18ch] font-serif text-[clamp(1.8rem,4.5vw,3.1rem)] leading-tight tracking-tight text-balance"
      >
        Automation that actually <span class="ca-brushed">runs itself.</span>
      </h2>
      <a href="/contact" class="ca-quiet mt-9 inline-block text-xl">Start a conversation</a>
    </div>
  </section>
</BaseLayout>