---
import BaseLayout from "../layouts/BaseLayout.astro";
import { SITE, authors } from "../lib/blog-data.js";

const author = authors[0];

// The instinct that runs through everything — pulled out so the essay can stay
// prose while the eye still catches the shape of the career.
const timeline = [
  { year: "1988", note: "Taught myself to code — Commodore BASIC, age 8" },
  { year: "1990s", note: "Learning the craft: BASIC → Visual Basic → C++ → Java → the web" },
  { year: "1999", note: "Building software professionally" },
  { year: "2000s", note: "Built a CMS from scratch, before WordPress was a thing" },
  { year: "2022", note: "All in on agentic AI" },
];

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "AboutPage",
  mainEntity: {
    "@type": "Person",
    name: SITE.name,
    jobTitle: author.jobTitle,
    description: author.bio,
    url: SITE.url,
    sameAs: author.sameAs,
  },
};
---

<BaseLayout
  title={`About — Agentic AI & Automation Engineer | ${SITE.name}`}
  description="Carlos Arias builds AI automation and autonomous agentic systems — replacing the manual workflows teams used to run by hand. 25+ years in software engineering, focused on agentic AI since 2022."
  canonical="/about"
  jsonLd={jsonLd}
>
  <!-- ---------- header ---------- -->
  <section class="mx-auto w-full max-w-6xl px-5 pt-20 pb-14 md:pt-28">
    <p class="font-mono text-xs tracking-[0.18em] text-muted-foreground uppercase">About</p>
    <h1
      class="mt-6 max-w-[18ch] font-serif text-[clamp(2.2rem,5.6vw,4.2rem)] leading-[1.04] tracking-tight text-balance"
    >
      I automate the work teams used to do by hand, with <span class="ca-brushed"
        >agentic AI.</span
      >
    </h1>
    <p class="mt-7 max-w-[54ch] font-serif text-[clamp(1.2rem,2.4vw,1.6rem)] leading-snug text-[var(--ca-ink-2)]">
      I&rsquo;ve done this before it was obvious more than once. This time it feels like
      1988 again.
    </p>
  </section>

  <!-- ---------- two columns: reel rail + essay ---------- -->
  <section class="mx-auto w-full max-w-6xl px-5 pb-8">
    <div class="grid gap-12 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:gap-16">
      <!-- left: sticky 9:16 Instagram placeholder -->
      <div class="ca-reel-col">
        <figure class="ca-reel" aria-label="Instagram — placeholder">
          <!-- Swap this block for a real Instagram embed (Reel iframe or oEmbed)
               when ready. The 9:16 frame reserves the exact space, so the embed
               drops in without reflowing the essay beside it. -->
          <div class="ca-reel-inner">
            <span class="ca-reel-glyph" aria-hidden="true">▶</span>
            <span class="ca-reel-label">Instagram</span>
            <span class="ca-reel-handle">@carlosarias.co</span>
          </div>
          <span class="ca-hero-seal" aria-hidden="true">印</span>
        </figure>
        <a
          href="https://instagram.com/carlosarias.co"
          target="_blank"
          rel="noopener noreferrer"
          class="ca-quiet mt-4 inline-block font-mono text-[0.7rem] tracking-[0.12em] uppercase"
        >
          Follow along &rarr;
        </a>
      </div>

      <!-- right: the essay -->
      <div class="ca-prose ca-about-prose">
        <p>
          I taught myself to code in 1988, on a Commodore 64, at eight years old, using
          Commodore BASIC. What began as curiosity quickly became a lifelong obsession
          with technology, automation, and figuring out what computers could do next.
          I&rsquo;ve been building software professionally since 1999.
        </p>
        <p>
          As technology evolved, so did I. I moved from BASIC to Visual Basic, C++, Java,
          and eventually web application development. By the late 1990s I was building
          database-driven applications and eCommerce systems from scratch. By the early
          2000s I had built my own content management system — before platforms like
          WordPress made CMS technology mainstream.
        </p>

        <blockquote>
          That pattern has followed me my whole career: I see where technology is going
          and start building before it becomes obvious.
        </blockquote>

        <p>
          For more than 25 years I&rsquo;ve worked across software engineering, product
          development, automation, digital marketing, and technology leadership.
          I&rsquo;ve built SaaS platforms, founded technology companies, led engineering
          teams, and developed systems across FinTech, financial services, healthcare,
          digital marketing, and other industries.
        </p>

        <h2>Today, the focus is agentic AI.</h2>
        <p>
          AI has brought me back to the feeling I had when I first discovered programming
          in 1988. I&rsquo;ve worked with automation and intelligent software in different
          forms for years, but modern agentic AI fundamentally changed how I think about
          and build software. Since 2022 I&rsquo;ve focused heavily on AI engineering,
          autonomous systems, and building intelligent agents that can reason, make
          decisions, use tools, coordinate workflows, and perform real work with minimal
          human intervention.
        </p>

        <blockquote>
          Software that once needed a team and 6&ndash;12 months can now, in some cases,
          be designed and built by me in 6&ndash;12 days.
        </blockquote>

        <p>
          My work today goes beyond adding AI features or chatbots to traditional
          software. I build <strong>autonomous, agentic systems</strong> designed to
          actively perform work — systems that research, analyse information, make
          decisions, interact with APIs and software, generate and modify content,
          execute workflows, monitor results, and continuously adapt to what is happening
          around them.
        </p>
        <p>
          I&rsquo;m particularly interested in building <strong>AI agents that replace
          workflows, not just individual tasks</strong> — turning complex business
          processes that traditionally need multiple people, tools, and repetitive manual
          work into intelligent systems that operate with increasing autonomy.
        </p>

        <h2>This website is one of them.</h2>
        <p>
          It&rsquo;s an <strong>agentic website</strong>. AI agents play an active role in
          its development, content, optimisation, maintenance, and evolution. I provide
          the vision, architecture, constraints, and strategic direction; AI performs much
          of the execution.
        </p>
        <p>
          In many ways, it feels like 1988 again. We&rsquo;re at the beginning of a new era
          of computing. The tools are changing incredibly fast, the rules are still being
          written, and once again I find myself experimenting, building, and trying to
          understand what technology will be capable of next.
        </p>
      </div>
    </div>
  </section>

  <!-- ---------- timeline strip ---------- -->
  <section class="ca-band mx-auto w-full max-w-6xl px-5">
    <h2 class="mb-8 font-mono text-[0.7rem] tracking-[0.18em] text-[var(--ca-ink-4)] uppercase">
      The through-line
    </h2>
    <ol class="ca-timeline">
      {
        timeline.map((t) => (
          <li>
            <span class="ca-timeline-year">{t.year}</span>
            <span class="ca-timeline-note">{t.note}</span>
          </li>
        ))
      }
    </ol>
  </section>

  <!-- ---------- closing ---------- -->
  <section class="ca-band mx-auto w-full max-w-6xl px-5">
    <h2
      class="max-w-[20ch] font-serif text-[clamp(1.8rem,4.5vw,3.1rem)] leading-tight tracking-tight text-balance"
    >
      Building the next thing, <span class="ca-brushed">before it&rsquo;s obvious.</span>
    </h2>
    <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"
      >
        Start a conversation
      </a>
      <a href="/projects" class="ca-quiet text-sm">See the work</a>
    </div>
  </section>
</BaseLayout>
