/* Services — overview grid + data-driven detail page. Multi-page links. */
function ServicesOverview() {
  return (
    <main>
      <section className="detail-hero page-banner">
        <img className="banner-img" src="assets/photos/face-rock-bandon-1.jpg" alt="The Face Rock coastline with sea stacks and surf" />
        <div className="banner-scrim"></div>
        <div className="wrap measure">
          <h1 style={{ color: 'var(--fr-off-white)' }}>Operational depth across the programs Tribal health runs on.</h1>
          <p className="lead" style={{ marginTop: 20, color: 'rgba(240,237,228,.85)' }}>
            Each service follows the same principle. Your team stays focused on care.<br />We take on the structure, compliance, and reporting that sit underneath it.
          </p>
        </div>
        <div className="banner-ground"></div>
      </section>
      <section className="section-sm">
        <div className="wrap grid grid-3">
          {window.FR.services.map((s, i) => (
            <a className="card" key={s.slug} href={window.FR.serviceUrl(s.slug)}>
              <h3>{s.name.replace(/\//g, '/\u200B')}</h3>
              <p>{s.short}</p>
              <span className="card-more">Learn more &rarr;</span>
            </a>
          ))}
        </div>
      </section>
      <section className="section-sm section-alt ground-panel">
        <div className="wrap center measure-center">
          <h2>Not sure where to start?</h2>
          <p className="lead" style={{ margin: '16px auto 24px' }}>We'll help you find the right path forward.</p>
          <a href="contact.html" className="btn btn-primary">Talk to Face Rock</a>
        </div>
      </section>
    </main>
  );
}

function ServiceDetail() {
  const list = window.FR.services;
  const slug = window.FR_SLUG;
  const idx = Math.max(0, list.findIndex((s) => s.slug === slug));
  const s = list[idx];
  const next = list[(idx + 1) % list.length];
  return (
    <main>
      <section className="detail-hero">
        <div className="wrap">
          <a href="services.html" className="crumb" style={{ fontSize: 'var(--fs-xs)', fontWeight: 600, letterSpacing: '.03em', color: 'var(--text-muted)' }}>&larr; All services</a>
          <div className="measure" style={{ marginTop: 16 }}>
            <h1 style={{ color: 'var(--brand-deep)' }}>{s.name.replace(/\//g, '/\u200B')}</h1>
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap grid grid-2" style={{ alignItems: 'start', gap: 48 }}>
          <div className="measure">
            <p className="para">{s.p1}</p>
            <p className="para" style={{ marginBottom: 0 }}>{s.p2}</p>
          </div>
          <div className="howitworks">
            <h4>How it works</h4>
            {s.steps.map((st, i) => (
              <div className="step" key={i}>
                <div className="step-n">{i + 1}</div>
                <div className="step-t">{st}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="next-service">
        <div className="wrap">
          <a href={window.FR.serviceUrl(next.slug)} className="next-link">
            <span className="next-eyebrow">Next service</span><span className="next-name">{next.name.replace(/\//g, '/\u200B')} &rarr;</span>
          </a>
        </div>
      </section>

      <section className="section-dark cta-band">
        <div className="wrap cta-band-inner">
          <div className="role-quote" style={{ fontSize: 26, maxWidth: 660 }}>
            You know what your Tribe needs,<br />we know how to build it.
          </div>
          <a href="contact.html" className="btn btn-on-dark">Talk to Face Rock</a>
        </div>
      </section>
    </main>
  );
}

window.ServicesOverview = ServicesOverview;
window.ServiceDetail = ServiceDetail;