---
layout: layouts/base.njk
---

{#
  This layout supports two usage patterns:
  1. Paginated from services.json — the `service` variable (pagination alias) is the full service object.
  2. Individual page with frontmatter — individual `serviceTitle`, `eyebrow`, `lead`, `images`, `included` variables.
#}
{% if service %}
  {% set _title    = service.name %}
  {% set _eyebrow  = service.eyebrow %}
  {% set _lead     = service.lead %}
  {% set _images   = service.images %}
  {% set _included = service.included %}
{% else %}
  {% set _title    = serviceTitle %}
  {% set _eyebrow  = eyebrow %}
  {% set _lead     = lead %}
  {% set _images   = images %}
  {% set _included = included %}
{% endif %}

<section class="page-hero bg-graphite">
  <div class="page-hero__inner container">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <ol role="list">
        <li><a href="/">Home</a></li>
        <li><a href="/services/">Services</a></li>
        <li aria-current="page">{{ _title }}</li>
      </ol>
    </nav>
    <p class="section-eyebrow">{{ _eyebrow }}</p>
    <h1 class="page-hero__title">{{ _title }}</h1>
    <p class="page-hero__lead">{{ _lead }}</p>
    <a href="/contact/" class="btn btn--primary">Request a Quote</a>
  </div>
</section>

<section class="service-detail section">
  <div class="container">

    {% if _images and _images.length %}
    <div class="service-detail__gallery">
      {% for image in _images %}
      <figure>
        <img
          src="/assets/{{ image.file }}"
          alt="{{ image.alt }}"
          loading="{% if loop.first %}eager{% else %}lazy{% endif %}"
          width="800"
          height="600"
        >
      </figure>
      {% endfor %}
    </div>
    {% endif %}

    <div class="service-detail__body">
      <h2>What's included</h2>
      {% if _included and _included.length %}
      <ul class="service-detail__list">
        {% for item in _included %}
        <li>{{ item }}</li>
        {% endfor %}
      </ul>
      {% endif %}

      <div class="service-detail__area">
        <p>Diana serves San Francisco and the wider Bay Area within 50 miles, including Oakland, Berkeley, Marin County, Palo Alto, and beyond.</p>
      </div>

      <a href="/contact/" class="btn btn--primary">Request a Quote</a>
    </div>

  </div>
</section>

{# Page body content (Eleventy compatibility) #}
{{ content | safe }}

{% include "components/cta-band.njk" %}