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

<BaseLayout
  title={`Services - ${SITE.name}`}
  description={`Work with ${SITE.name} — an overview of what we offer.`}
  canonical="/services"
>
  <div class="mx-auto max-w-3xl px-5 py-12">
    <Breadcrumbs items={[{ label: "Home", to: "/" }, { label: "Services" }]} />

    <header class="mt-6">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">Work with us</div>
      <h1 class="mt-2 font-serif text-5xl font-semibold leading-[1.05] tracking-tight">
        What we offer.
      </h1>
    </header>

    <div class="prose-article mt-10">
      <p>
        This is a placeholder Services page. Describe how visitors can work with
        {SITE.name}, or delete this page if you don&rsquo;t need it. Edit it in
        <code>app/src/pages/services.astro</code>.
      </p>
    </div>

    <section class="mt-12 border-t border-border pt-10">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">01</div>
      <h2 class="mt-2 font-serif text-3xl font-semibold tracking-tight">Service one</h2>
      <p class="mt-4 leading-relaxed text-muted-foreground">
        Describe your first offering here &mdash; what it is, who it&rsquo;s for, and
        the outcome a client can expect.
      </p>
    </section>

    <section class="mt-12 border-t border-border pt-10">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">02</div>
      <h2 class="mt-2 font-serif text-3xl font-semibold tracking-tight">Service two</h2>
      <p class="mt-4 leading-relaxed text-muted-foreground">
        Describe your second offering. Use short paragraphs and bullet lists to keep
        it scannable.
      </p>
    </section>

    <section class="mt-12 border-t border-border pt-10">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">03</div>
      <h2 class="mt-2 font-serif text-3xl font-semibold tracking-tight">Service three</h2>
      <p class="mt-4 leading-relaxed text-muted-foreground">
        Describe your third offering, or remove this section if you offer fewer services.
      </p>
    </section>

    <section class="mt-12 border-t border-border pt-10">
      <h2 class="font-serif text-2xl font-semibold tracking-tight">Get in touch</h2>
      <p class="mt-4 leading-relaxed text-muted-foreground">
        Everything starts with a conversation. Tell us what you&rsquo;re trying to
        accomplish and we&rsquo;ll let you know whether we&rsquo;re a good fit.
      </p>
      <div class="mt-6">
        <a
          href="/contact"
          class="rounded-md bg-foreground px-6 py-2.5 text-sm font-medium text-background hover:opacity-90"
        >
          Send us a message
        </a>
      </div>
    </section>
  </div>
</BaseLayout>
