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

const author = authors[0];
const { services, verticals, primaryVertical } = data;

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: SITE.name,
  jobTitle: author.jobTitle,
  url: SITE.url,
  makesOffer: services.map((s) => ({
    "@type": "Offer",
    itemOffered: { "@type": "Service", name: s.name, description: s.lead },
  })),
};
---

<BaseLayout
  title={`Services — AI Automation, Websites & Marketing for Law Firms | ${SITE.name}`}
  description="AI automation, website design, and digital marketing for law firms and service businesses. Autonomous systems that bring in more qualified cases and follow up instantly."
  canonical="/services"
  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">Services</p>
    <h1
      class="mt-6 max-w-[18ch] font-serif text-[clamp(2.2rem,5.6vw,4.2rem)] leading-[1.05] tracking-tight text-balance"
    >
      Automation, websites, and marketing — built for
      <span class="ca-brushed">law firms.</span>
    </h1>
    <p class="mt-7 max-w-[56ch] text-base leading-relaxed text-muted-foreground">
      I help {primaryVertical.toLowerCase()} and service businesses win more qualified work and
      follow up faster &mdash; using AI automation, custom websites, and technical marketing
      that run as intelligent systems rather than manual busywork.
    </p>
  </section>

  <!-- ---------- the three services ---------- -->
  <div class="mx-auto w-full max-w-6xl px-5">
    {
      services.map((s, i) => (
        <section class="ca-band" id={s.slug}>
          <div class="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:gap-16">
            <div>
              <span class="font-mono text-xs tracking-[0.14em] text-[var(--ca-ink-4)] tabular-nums">
                {String(i + 1).padStart(2, "0")}
              </span>
              <h2 class="mt-3 font-serif text-[clamp(1.8rem,4vw,2.6rem)] leading-tight tracking-tight">
                {s.page ? <a href={s.page} class="hover:text-[var(--ca-vermillion)] transition-colors">{s.name}</a> : s.name}
              </h2>
              <p class="mt-4 max-w-[32ch] font-serif text-[clamp(1.1rem,2vw,1.35rem)] leading-snug text-[var(--ca-ink-2)]">
                {s.lead}
              </p>
            </div>

            <div>
              <p class="max-w-[60ch] leading-relaxed text-[var(--ca-ink-2)]">{s.body}</p>
              <ul class="ca-cv-points mt-6">
                {s.points.map((p) => (
                  <li>{p}</li>
                ))}
              </ul>
              <div class="mt-7 flex flex-wrap items-center gap-6">
                {s.page && (
                  <a href={s.page} class="ca-quiet text-sm">
                    {s.name} for law firms &rarr;
                  </a>
                )}
                <a
                  href={`/contact?subject=${s.subject}`}
                  class:list={["text-sm", s.page ? "ca-quiet opacity-70" : "ca-quiet"]}
                >
                  Start a {s.name.toLowerCase()} project &rarr;
                </a>
              </div>
            </div>
          </div>
        </section>
      ))
    }
  </div>

  <!-- ---------- who I work with ---------- -->
  <section class="ca-band mx-auto w-full max-w-6xl px-5">
    <div class="mb-10 flex flex-wrap items-baseline gap-6">
      <h2 class="font-serif text-[clamp(1.8rem,4vw,2.4rem)] leading-tight tracking-tight">
        <span class="ca-brushed">Who I work with</span>
      </h2>
      <span class="ml-auto font-mono text-xs tracking-[0.1em] text-[var(--ca-ink-4)] uppercase">
        Primarily legal
      </span>
    </div>

    <div class="ca-verticals">
      {
        verticals.map((v) => (
          <div class:list={["ca-vertical", v.primary && "is-primary"]}>
            <h3>
              {v.name}
              {v.primary && <span class="ca-vertical-tag">Primary</span>}
            </h3>
            <p>{v.note}</p>
          </div>
        ))
      }
    </div>
  </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"
    >
      More qualified work, <span class="ca-brushed">less manual work.</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>