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

<BaseLayout
  title={`About - ${SITE.name}`}
  description={`About ${SITE.name} — who we are and what we cover.`}
  canonical="/about"
>
  <div class="mx-auto max-w-3xl px-5 py-12">
    <Breadcrumbs items={[{ label: "Home", to: "/" }, { label: "About" }]} />

    <header class="mt-6">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">About</div>
      <h1 class="mt-2 font-serif text-5xl font-semibold leading-[1.05] tracking-tight">
        About {SITE.name}.
      </h1>
    </header>

    <div class="prose-article mt-10">
      <p>
        This is placeholder copy for your About page. Describe what {SITE.name} is,
        who it&rsquo;s for, and why it exists. Edit this in <code>app/src/pages/about.astro</code>.
      </p>
      <h2 id="what-we-do">What we do</h2>
      <p>
        Summarize what visitors will find here &mdash; the topics you cover, the value
        you offer, and what makes your site worth their time.
      </p>
      <h2 id="how-it-works">How it works</h2>
      <p>
        If your site uses the content pipeline or other automation, explain it here.
        Otherwise, use this space to describe your process, standards, or approach.
      </p>
    </div>

    <section class="mt-12 border-t border-border pt-10">
      <h2 class="font-serif text-2xl font-semibold tracking-tight">The people behind {SITE.name}</h2>
      <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {
          authors.map((author) => (
            <a href={`/authors/${author.slug}`} class="group flex items-start gap-3">
              <img src={author.avatar} alt="" width="48" height="48" class="h-12 w-12 rounded-full" />
              <div>
                <div class="font-serif text-base font-semibold group-hover:text-primary">{author.name}</div>
                <div class="mt-1 text-sm text-muted-foreground">{author.bio}</div>
              </div>
            </a>
          ))
        }
      </div>
    </section>
  </div>
</BaseLayout>
