---
import BaseLayout from "../../layouts/BaseLayout.astro";
import { SITE } from "../../lib/blog-data.js";
import data from "../../config/website-design.json";

const { eyebrow, title, lead, intro, included, process, portfolio } = data;

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Service",
  serviceType: "Law firm website design and development",
  provider: { "@type": "Person", name: SITE.name, url: SITE.url },
  areaServed: "United States",
  description: lead,
};
---

<BaseLayout
  title={`Law Firm Website Design & Development | ${SITE.name}`}
  description="Custom law firm website design and development — fast, mobile, built for local SEO and intake. Sites that turn legal searches into signed cases."
  canonical="/services/website-design"
  jsonLd={jsonLd}
>
  <!-- ---------- header ---------- -->
  <section class="mx-auto w-full max-w-6xl px-5 pt-20 pb-14 md:pt-28">
    <nav class="mb-8">
      <a href="/services" class="ca-back">
        <span aria-hidden="true">&larr;</span> All services
      </a>
    </nav>
    <p class="font-mono text-xs tracking-[0.18em] text-muted-foreground uppercase">
      {eyebrow}
    </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"
    >
      Law firm websites that turn searches into
      <span class="ca-brushed">signed cases.</span>
    </h1>
    <p class="mt-7 max-w-[58ch] text-base leading-relaxed text-muted-foreground">
      {lead}
    </p>
    <div class="mt-9 flex flex-wrap items-center gap-7">
      <a
        href="/contact?subject=website-design"
        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 website project
      </a>
      <a href="#work" class="ca-quiet text-sm">See the work</a>
    </div>
  </section>

  <!-- ---------- intro ---------- -->
  <section class="ca-band mx-auto w-full max-w-6xl px-5">
    <p class="max-w-[64ch] font-serif text-[clamp(1.3rem,2.6vw,1.8rem)] leading-snug text-[var(--ca-ink-2)]">
      {intro}
    </p>
  </section>

  <!-- ---------- portfolio ---------- -->
  <section class="ca-band mx-auto w-full max-w-6xl px-5" id="work">
    <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">Recent law firm sites</span>
      </h2>
      <span class="ml-auto font-mono text-xs tracking-[0.1em] text-[var(--ca-ink-4)] uppercase">
        Selected work
      </span>
    </div>

    <div class="ca-folio">
      {
        portfolio.map((p) => {
          const inner = (
            <>
              <div class="ca-folio-frame">
                <div class="ca-folio-chrome" aria-hidden="true">
                  <span /><span /><span />
                </div>
                {p.image ? (
                  <img src={p.image} alt={`${p.name} website`} loading="lazy" />
                ) : (
                  <div class="ca-folio-empty" aria-hidden="true">
                    <span class="ca-folio-glyph">+</span>
                    <span>Add screenshot</span>
                  </div>
                )}
              </div>
              <div class="ca-folio-meta">
                <h3>{p.name}</h3>
                <p class="ca-folio-practice">{p.practice}</p>
                <p class="ca-folio-note">{p.note}</p>
                {p.url && (
                  <span class="ca-folio-link">
                    {p.url.replace(/^https?:\/\//, "").replace(/\/$/, "")} &nearr;
                  </span>
                )}
              </div>
            </>
          );

          return p.url ? (
            <a
              href={p.url}
              target="_blank"
              rel="noopener noreferrer"
              class="ca-folio-item"
            >
              {inner}
            </a>
          ) : (
            <div class="ca-folio-item is-empty">{inner}</div>
          );
        })
      }
    </div>
  </section>

  <!-- ---------- what's included ---------- -->
  <section class="ca-band mx-auto w-full max-w-6xl px-5">
    <h2 class="mb-10 font-serif text-[clamp(1.8rem,4vw,2.4rem)] leading-tight tracking-tight">
      <span class="ca-brushed">What&rsquo;s included</span>
    </h2>
    <div class="ca-feature-grid">
      {
        included.map((f) => (
          <div class="ca-feature">
            <h3>{f.title}</h3>
            <p>{f.note}</p>
          </div>
        ))
      }
    </div>
  </section>

  <!-- ---------- process ---------- -->
  <section class="ca-band mx-auto w-full max-w-6xl px-5">
    <h2 class="mb-10 font-serif text-[clamp(1.8rem,4vw,2.4rem)] leading-tight tracking-tight">
      How it works
    </h2>
    <ol class="ca-process">
      {
        process.map((s) => (
          <li>
            <span class="ca-process-step">{s.step}</span>
            <div>
              <h3>{s.title}</h3>
              <p>{s.note}</p>
            </div>
          </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"
    >
      Ready for a site that <span class="ca-brushed">wins cases?</span>
    </h2>
    <div class="mt-9 flex flex-wrap items-center gap-7">
      <a
        href="/contact?subject=website-design"
        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 website project
      </a>
      <a href="/services" class="ca-quiet text-sm">All services</a>
    </div>
  </section>
</BaseLayout>
