/* Home — hero, credibility, services, not-a-rescue, proof teaser, CTA. */
function HomePage() {
  const A = window.FR.anchors;
  return (
    <main>
      {/* Hero */}
      <section className="hero">
        <img className="hero-img" src="assets/photos/FR_Hero_wide.jpg" alt="The Face Rock formation rising from the sea at golden hour" />
        <div className="hero-scrim"></div>
        <div className="wrap hero-body">
          <h1>Build stronger{' '}<br className="brk" />Tribal health programs</h1>
          <p className="hero-tagline">{A.tagline.split(' into ')[0]}{' '}<br className="brk" />into {A.tagline.split(' into ')[1]}</p>
          <div className="hero-actions">
            <a href="services.html" className="btn btn-hero-ghost">See how we work</a>
          </div>
        </div>
        <div className="hero-ground"></div>
      </section>

      {/* Credibility strip */}
      <section className="section-alt ground-panel">
        <div className="wrap">
          <div className="cred">
            {window.FR.credibility.map((c) => (
              <div className="cred-item" key={c.label}>
                <div className="cred-num">{c.num}</div>
                <div className="cred-label">{c.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="section">
        <div className="wrap">
          <div className="measure" style={{ marginBottom: 44 }}>
            <div className="eyebrow">What we do</div>
            <h2>Every program, run inside{' '}<br className="brk" />the structures it depends on.</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              Tribal health programs carry real operational weight. We take on the parts that pull teams away from care, and run them well.
            </p>
          </div>
          <div className="grid grid-3">
            {window.FR.services.map((s, i) => (
              <a className="card" key={s.slug} href={window.FR.serviceUrl(s.slug)}>
                <h3>{s.name}</h3>
                <p>{s.short}</p>
                <span className="card-more">Learn more &rarr;</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Not a rescue */}
      <section className="section section-dark">
        <div className="wrap partner-band">
          <div>
            <div className="eyebrow eyebrow-light">How we partner</div>
            <div className="role-quote">An investment{' '}<br className="brk" />in what&rsquo;s already there.</div>
          </div>
          <div className="partner-copy">
            <p>
              Face Rock structures programs from enrollment and compliance through execution and ongoing management. The documents and filings are outputs of the work, not the end of it. We stay in it.
            </p>
            <p>
              Our goal is a Tribal health system that does not need us, and we build toward that from day one. But we stay in range. When funding shifts or new programs bring new complexity, we are ready as a resource the team already knows.
            </p>
          </div>
        </div>
      </section>

      {/* Client Stories teaser — gated on the stories flag (client quotes not yet approved) */}
      {window.FR.flags.stories && (
      <section className="section">
        <div className="wrap grid grid-2" style={{ alignItems: 'center' }}>
          <div>
            <div className="eyebrow">Client Stories</div>
            <h2>We have structured 560+ 105(l) leases with IHS and BIA.</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              Across 40+ Tribal Nation partners and more than three decades, our authority comes from specificity, not adjectives.
            </p>
            <a href="client-stories.html" className="btn btn-ghost" style={{ marginTop: 8 }}>See the work</a>
          </div>
          <div className="card" style={{ background: 'var(--bg-primary)' }}>
            <div className="quote" style={{ color: 'var(--brand-deep)', lineHeight: 1.4 }}>
              &ldquo;{window.FR.quotes[0].text}&rdquo;
            </div>
            <div className="quote-attr" style={{ color: 'var(--text-muted)' }}>{window.FR.quotes[0].attr}</div>
          </div>
        </div>
      </section>
      )}

      {/* Soft CTA */}
      <section className="section-sm section-alt ground-panel">
        <div className="wrap center">
          <h2 style={{ maxWidth: 900, marginLeft: 'auto', marginRight: 'auto' }}>Start a conversation about your program.</h2>
          <p className="lead" style={{ margin: '16px auto 24px', maxWidth: 820, textWrap: 'balance' }}>
            Tell us where your program stands and we'll tell you plainly how we can help.
          </p>
          <a href="contact.html" className="btn btn-primary">Talk to Face Rock</a>
        </div>
      </section>
    </main>
  );
}
window.HomePage = HomePage;