/* About (Our Approach + Our Team), Client Stories, Resources pages. Multi-page: real links. */
function AboutPage() {
  const [openMember, setOpenMember] = React.useState(null);
  React.useEffect(() => {
    if (!openMember) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpenMember(null); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [openMember]);
  const isNot = [
    { head: 'Not a traditional consulting firm', body: 'We don\u2019t hand over recommendations and walk away. We work alongside your team to put them into practice and keep the work moving.' },
    { head: 'Not a one-time engagement', body: 'Our work doesn\u2019t end with an application, agreement, or implementation. We stay engaged as programs grow, change, and new needs emerge.' },
    { head: 'Not dependent on a single relationship', body: 'Relationships may open the door. Face Rock brings the broader team, experience, and operational capability to carry the work forward.' },
    { head: 'Not a one-size-fits-all approach', body: 'Every Tribe, health program, and community is different. We work within your priorities, structures, and goals, not a predetermined playbook.' },
  ];
  return (
    <main>
      <section className="detail-hero page-banner">
        <img className="banner-img" src="assets/photos/face-rock-beach.jpg" alt="Face Rock at sunset with foreground rocks on the beach" />
        <div className="banner-scrim"></div>
        <div className="wrap measure">
          <div className="eyebrow" style={{ color: 'rgba(240,237,228,.66)' }}>Our Approach</div>
          <h1 style={{ color: 'var(--fr-off-white)', maxWidth: 860 }}>We become an extension of your team.</h1>
          <p className="lead" style={{ marginTop: 20, color: 'rgba(240,237,228,.9)', maxWidth: 1000 }}>
            Face Rock is an operational partner to Tribes. We do not deliver a recommendation and disengage.{' '}<br className="brk-wide" />We embed into real engagements and execute, grounded in application, not abstraction.
          </p>
        </div>
        <div className="banner-ground"></div>
      </section>

      {/* The long game */}
      <section className="section-sm">
        <div className="wrap long-game">
          <div>
            <div className="eyebrow">The long game</div>
            <h2>We build toward a system that does not need us.</h2>
          </div>
          <div className="para">
            <p>Our goal is a Tribal health system that stands on its own, and we build toward that from day one. But we stay in range. Funding shifts, leadership changes, and new programs bring new complexity.</p>
            <p style={{ marginBottom: 0 }}>When something opens up, we are ready to step back in as a resource the team already knows and trusts. That warmth comes from consistency and relationship, not decoration.</p>
          </div>
        </div>
      </section>

      {/* Domain fluency */}
      <section className="section-sm section-alt ground-panel">
        <div className="wrap">
          <div className="measure" style={{ marginBottom: 24 }}>
            <div className="eyebrow">Domain fluency</div>
            <h2>We are fluent in the structures most firms only reference.</h2>
          </div>
          <div className="gloss-grid">
            {window.FR.fluency.map((f) => (
              <div className="gloss" key={f.term}>
                <div className="gloss-term">{f.term}</div>
                <p className="gloss-def">{f.def}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What we are not */}
      <section className="section-sm">
        <div className="wrap">
          <div className="measure" style={{ marginBottom: 24 }}>
            <div className="eyebrow">What we are not</div>
            <h2>Clear edges keep the work honest.</h2>
          </div>
          <div className="grid grid-2">
            {isNot.map((item, i) => (
              <div className="card" key={i} style={{ background: 'var(--bg-primary)' }}>
                <h3 style={{ marginBottom: 8 }}>{item.head}</h3>
                <p style={{ color: 'var(--text-body)', margin: 0 }}>{item.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section-sm section-alt ground-panel">
        <div className="wrap">
          <div className="measure" style={{ marginBottom: 24 }}>
            <div className="eyebrow">Our Team</div>
            <h2>The people behind the work.</h2>
          </div>
          <div className="team">
            {window.FR.team.map((m) => (
              <button className="member" key={m.name} onClick={() => setOpenMember(m)} aria-label={`Read bio: ${m.name}`}>
                {m.photo
                  ? <div className="member-frame"><img className="member-photo" src={m.photo} alt={m.name} style={{ ...(m.zoom ? { transform: 'scale(' + m.zoom + ')' } : {}), ...(m.pos ? { objectPosition: m.pos } : {}) }} /></div>
                  : <div className="member-frame"><div className="member-photo ph">{m.name.split(' ').map((w) => w[0]).join('')}</div></div>}
                <div className="member-name">{m.name}</div>
                <div className="member-role">{m.role}</div>
                <div className="member-cue">Read bio &rarr;</div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {openMember && (
        <div className="bio-overlay" onClick={() => setOpenMember(null)}>
          <div className="bio-modal" role="dialog" aria-modal="true" aria-label={openMember.name} onClick={(e) => e.stopPropagation()}>
            <button className="bio-close" onClick={() => setOpenMember(null)} aria-label="Close">&times;</button>
            <div className="bio-head">
              {openMember.photo
                ? <div className="bio-frame"><img className="member-photo" src={openMember.photo} alt={openMember.name} style={{ ...(openMember.zoom ? { transform: 'scale(' + openMember.zoom + ')' } : {}), ...(openMember.pos ? { objectPosition: openMember.pos } : {}) }} /></div>
                : <div className="bio-frame"><div className="member-photo ph">{openMember.name.split(' ').map((w) => w[0]).join('')}</div></div>}
              <div>
                <div className="bio-name">{openMember.name}{openMember.credentials ? <span className="bio-cred">, {openMember.credentials}</span> : null}</div>
                <div className="bio-role">{openMember.role}</div>
              </div>
            </div>
            <p className="bio-text">{openMember.bio}</p>
            {openMember.notable && (
              <div className="bio-notable"><span>Recognition</span>{openMember.notable}</div>
            )}
          </div>
        </div>
      )}

      <section className="section-sm section-dark">
        <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
          <div className="role-quote" style={{ fontSize: 26, maxWidth: 640 }}>Talk to a team that already knows the structures.</div>
          <a href="contact.html" className="btn btn-on-dark">Talk to Face Rock</a>
        </div>
      </section>
    </main>
  );
}

function ClientStoriesPage() {
  return (
    <main>
      {!window.FR.flags.stories && (
        <div style={{ background: 'var(--brand-deep)', color: 'var(--bg-primary)', padding: '10px 0', fontSize: 14, letterSpacing: '.02em' }}>
          <div className="wrap">Unpublished preview — this page is hidden from navigation until client stories are approved.</div>
        </div>
      )}
      <section className="detail-hero detail-hero-dark">
        <div className="wrap measure">
          <h1>{'Structured 560+ 105(l) leases with IHS and BIA.'}</h1>
          <p className="lead" style={{ marginTop: 20 }}>
            Across 40+ Tribal Nation partners and more than three decades of work.
          </p>
          <p className="lead" style={{ marginTop: 16 }}>
            Case studies and named references are shared once permissioned.
          </p>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <div className="metric-strip">
            {window.FR.proofMetrics.map((m, i) => (
              <div className="metric" key={i}>
                <div className="metric-num">{m.num}</div>
                <div className="metric-label">{m.label}</div>
              </div>
            ))}
          </div>
          <p className="metric-source">Documented results from the Inovalon &times; Face Rock revenue cycle engagement. <a href="resource.html?slug=inovalon-rcm-feature-2024">Read the full story &rarr;</a></p>
        </div>
      </section>

      <section className="section-sm section-alt">
        <div className="wrap grid grid-2">
          {window.FR.cases.map((c, i) => (
            <a className="card" key={i} href={c.href}>
              <div className="card-index">{c.tag}</div>
              <h3>{c.title}</h3>
              <p style={{ marginTop: 12 }}>{c.result}</p>
              <span className="card-more">Read more &rarr;</span>
            </a>
          ))}
        </div>
      </section>

      <section className="section-sm section-dark">
        <div className="wrap grid grid-2" style={{ gap: 40 }}>
          {window.FR.quotes.map((q, i) => (
            <div key={i}>
              <div className="quote">&ldquo;{q.text}&rdquo;</div>
              <div className="quote-attr">{q.attr}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section-sm section-alt">
        <div className="wrap center">
          <div className="eyebrow">Partners &amp; platforms</div>
          <h2 style={{ marginBottom: 44 }}>The partners and platforms behind the work.</h2>

          <div className="partner-group">
            <div className="partner-cap">Solution partners</div>
            <div className="partners">
              {window.FR.partners.solutions.map((p) => (
                <div className="partner" key={p.name} title={p.name}>
                  {p.logo
                    ? <img src={p.logo} alt={p.name} />
                    : <span className="partner-word">{p.name}</span>}
                </div>
              ))}
            </div>
          </div>

          <div className="partner-group">
            <div className="partner-cap">Featured in</div>
            <div className="partners">
              {window.FR.partners.media.map((p) => (
                <div className="partner" key={p.name} title={p.name}>
                  {p.logo
                    ? <img src={p.logo} alt={p.name} />
                    : <span className="partner-word">{p.name}</span>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}

function VideoCard({ v }) {
  const [playing, setPlaying] = React.useState(false);
  const thumb = v.thumbnailUrl
    || (v.platform === 'youtube' ? `https://img.youtube.com/vi/${v.youtubeId}/maxresdefault.jpg` : null);
  const embed = v.platform === 'youtube'
    ? `https://www.youtube.com/embed/${v.youtubeId}?autoplay=1&rel=0`
    : `https://player.vimeo.com/video/${v.vimeoId}?autoplay=1`;
  return (
    <div className="vcard">
      <div className="vthumb">
        {playing ? (
          <iframe src={embed} title={v.title} allow="autoplay; fullscreen; picture-in-picture" allowFullScreen></iframe>
        ) : (
          <button className="vthumb-btn" onClick={() => setPlaying(true)} aria-label={`Play ${v.title}`}>
            <img src={thumb} alt={v.title} />
            <span className="vplay" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff"><path d="M8 5v14l11-7z" /></svg>
            </span>
          </button>
        )}
      </div>
      <div className="vbody">
        <div className="vmeta"><span>{v.source}</span><span>{v.date}</span></div>
        <h3 className="vtitle">{v.title}</h3>
        <div className="vauthors">By {v.authors}</div>
        <p className="vdesc">{v.description}</p>
        {!playing && (
          <button className="vlink" onClick={() => setPlaying(true)}>Watch now →</button>
        )}
      </div>
    </div>
  );
}

function InsightsPage() {
  const { videos, press, articles } = window.FR.insights;
  return (
    <main>
      <section className="detail-hero detail-hero-dark">
        <div className="wrap measure">
          <h1>From complex programs to practical next steps.</h1>
          <p className="lead" style={{ marginTop: 20, maxWidth: 1080 }}>
            Videos and articles that break down Tribal health funding, operations, revenue opportunities, and federal programs so you can understand what applies to your Tribe and what to do next.
          </p>
        </div>
      </section>

      {/* Videos */}
      <section className="section-sm">
        <div className="wrap">
          <div className="eyebrow">Video Features</div>
          <h2 style={{ marginBottom: 32 }}>Watch</h2>
          <div className="vgrid">
            {videos.map((v) => <VideoCard key={v.slug} v={v} />)}
          </div>
        </div>
      </section>

      {/* Press & Recognition */}
      <section className="section-sm section-alt">
        <div className="wrap">
          <div className="eyebrow">Press &amp; Recognition</div>
          <h2 style={{ marginBottom: 8 }}>Coverage about Face Rock</h2>
          <p className="lead" style={{ marginBottom: 32 }}>Media features and awards recognizing Face Rock and our team.</p>
          <div className="grid grid-3">
            {press.map((p) => (
              <a className="ins-card" key={p.slug} href={`resource.html?slug=${p.slug}`}>
                <div className="ins-card-top">
                  <span className="ins-tag">{p.tag}</span>
                  <span className="ins-date">{p.date}</span>
                </div>
                <div className="ins-outlet">{p.outlet}</div>
                <h3 className="ins-head">{p.headline}</h3>
                <p className="ins-sum">{p.summary}</p>
                <span className="card-more">Read more →</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Articles */}
      <section className="section-sm">
        <div className="wrap">
          <div className="eyebrow">Published Work</div>
          <h2 style={{ marginBottom: 8 }}>Articles by our team</h2>
          <p className="lead" style={{ marginBottom: 32 }}>
            Research, analysis, and perspectives written by Face Rock partners, published across Tribal health and gaming industry outlets.
          </p>
          <div className="alist">
            {articles.map((a) => (
              <a className="arow" key={a.slug} href={`resource.html?slug=${a.slug}`}>
                <div className="arow-date">{a.date}</div>
                <div className="arow-main">
                  <div className="ins-outlet">{a.outlet}</div>
                  <h3 className="ins-head">{a.headline}</h3>
                  <div className="arow-by">By {a.authors}</div>
                  <p className="ins-sum">{a.summary}</p>
                  <span className="card-more">Read more →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm section-dark">
        <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
          <div className="role-quote" style={{ fontSize: 26, maxWidth: 640 }}>Work with a team that already knows the structures.</div>
          <a href="contact.html" className="btn btn-on-dark">Talk to Face Rock</a>
        </div>
      </section>
    </main>
  );
}

function InsightDetailPage() {
  const slug = new URLSearchParams(window.location.search).get('slug');
  const all = [
    ...window.FR.insights.press.map((p) => ({ ...p, type: 'press' })),
    ...window.FR.insights.articles.map((a) => ({ ...a, type: 'article' })),
  ];
  const item = all.find((i) => i.slug === slug);

  if (!item) {
    return (
      <main>
        <section className="detail-hero">
          <div className="wrap measure">
            <h1 style={{ color: 'var(--brand-deep)' }}>Article not found</h1>
            <p className="lead" style={{ marginTop: 20 }}>
              This piece may have moved. <a href="resources.html">Back to Resources →</a>
            </p>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main>
      <section className="detail-hero">
        <div className="wrap measure">
          <a href="resources.html" className="crumb" style={{ color: 'var(--text-muted)', fontSize: 'var(--fs-sm)' }}>← Resources</a>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', margin: '16px 0 16px' }}>
            {item.type === 'press' && <span className="ins-tag">{item.tag}</span>}
            <span style={{ fontWeight: 600, color: 'var(--brand-deep)' }}>{item.outlet}</span>
            <span style={{ color: 'var(--text-muted)', fontSize: 'var(--fs-sm)' }}>{item.date}</span>
          </div>
          <h1 style={{ color: 'var(--brand-deep)' }}>{item.headline}</h1>
          {item.authors && <p style={{ color: 'var(--text-muted)', marginTop: 12, fontSize: 'var(--fs-sm)' }}>By {item.authors}</p>}
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap measure">
          <p className="lead" style={{ color: 'var(--brand-deep)', fontWeight: 600, marginBottom: 28 }}>{item.summary}</p>
          {item.body && item.body.map((para, i) => (
            <p className="para" key={i}>{para}</p>
          ))}
          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--fr-warm-beige)' }}>
            <div style={{ fontSize: 12, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 6 }}>Originally published by</div>
            <a href={item.sourceHref} target="_blank" rel="noopener noreferrer" style={{ fontWeight: 600 }}>{item.outlet} ↗</a>
          </div>
        </div>
      </section>

      <section className="section-sm section-dark">
        <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
          <div className="role-quote" style={{ fontSize: 26, maxWidth: 640 }}>Work with a team that already knows the structures.</div>
          <a href="contact.html" className="btn btn-on-dark">Talk to Face Rock</a>
        </div>
      </section>
    </main>
  );
}

window.AboutPage = AboutPage;
window.ClientStoriesPage = ClientStoriesPage;
window.InsightsPage = InsightsPage;
window.InsightDetailPage = InsightDetailPage;