/* CIRG website — ORSA Center project page. window.OrsaPage */

function OrsaSplit({ t, data, img, reverse, imgAlt }) {
  return (
    <div className="grid-2 orsa-split" style={{ gap: 48, alignItems: "center" }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <div className="eyebrow"><Icon name="circle-dot" size={14} />{data.eyebrow}</div>
        <h2 style={{ marginTop: 12 }}>{data.title}</h2>
        <p className="lead" style={{ marginBottom: data.points ? 18 : 0 }}>{data.lead}</p>
        {data.points ? (
          <ul className="orsa-list">
            {data.points.map((p) => (
              <li key={p}><Icon name="check" size={17} color="var(--color-volunteer)" />{p}</li>
            ))}
          </ul>
        ) : null}
      </div>
      <div className="orsa-img" style={{ order: reverse ? 1 : 2 }}>
        <img src={img} alt={imgAlt} />
      </div>
    </div>
  );
}

function OrsaPage({ t, go }) {
  const o = t.orsa;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={o.intro.crumb} eyebrow={o.intro.eyebrow} title={o.intro.title} lead={o.intro.lead} backTo="projects" backLabel={t.projects.intro.title} />

      {/* Fact strip */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="orsa-facts">
            {o.facts.map((f) => (
              <div className="orsa-fact" key={f[1]}>
                <span className="ic"><Icon name={f[0]} size={20} /></span>
                <div><div className="k">{f[1]}</div><div className="v">{f[2]}</div></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Problem */}
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <OrsaSplit t={t} data={o.problem} img="assets/proj-veteran.png" reverse imgAlt={o.problem.title} />
        </div>
      </section>

      {/* Solution */}
      <section className="section">
        <div className="container">
          <OrsaSplit t={t} data={o.solution} img="assets/prog-orsa.png" imgAlt={o.solution.title} />
        </div>
      </section>

      {/* Tracks */}
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <SectionHead eyebrow={o.tracksH.eyebrow} title={o.tracksH.title} lead={o.tracksH.lead} />
          <div className="grid-2">
            {o.tracks.map((tr) => {
              const a = ACCENT[tr.accent];
              return (
                <article className="card" key={tr.title} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                  <span className="dir-ico" style={{ background: a.soft, color: a.fg }}><Icon name={tr.icon} size={24} /></span>
                  <h3 style={{ margin: 0, fontSize: 21, fontWeight: 500 }}>{tr.title}</h3>
                  <ul className="orsa-list">
                    {tr.items.map((it) => <li key={it}><Icon name="check" size={17} color={a.fg} />{it}</li>)}
                  </ul>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* Educational model — steps */}
      <section className="section">
        <div className="container">
          <SectionHead center eyebrow={o.modelH.eyebrow} title={o.modelH.title} lead={o.modelH.lead} />
          <div className="orsa-flow">
            {o.steps.map((s, i) => (
              <React.Fragment key={s[1]}>
                <div className="orsa-step">
                  <span className="n">{i + 1}</span>
                  <span className="ic"><Icon name={s[0]} size={22} /></span>
                  <span className="lb">{s[1]}</span>
                </div>
                {i < o.steps.length - 1 ? <span className="orsa-arrow" aria-hidden="true"><Icon name="chevron-right" size={20} /></span> : null}
              </React.Fragment>
            ))}
          </div>
          <div className="orsa-core"><Icon name="atom" size={18} />{o.modelCore}</div>
        </div>
      </section>

      {/* Infrastructure */}
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <SectionHead eyebrow={o.infraH.eyebrow} title={o.infraH.title} lead={o.infraH.lead} />
          <div className="value-grid">
            {o.infra.map((x) => (
              <div className="value-chip" key={x[1]}><span className="ic"><Icon name={x[0]} size={18} /></span><span>{x[1]}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* Partners */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={o.partnersH.eyebrow} title={o.partnersH.title} lead={o.partnersH.lead} />
          <div className="grid-2" style={{ gap: 16 }}>
            {o.partners.filter((pr) => !(pr[2] && pr[2].hide)).map((pr) => (
              <div className="card orsa-partner" key={pr[0]}>
                <span className="dir-ico" style={{ background: "var(--color-bg-soft-blue)", color: "var(--color-action-blue)", flex: "none" }}><Icon name="handshake" size={20} /></span>
                <div><b>{pr[0]}</b><span>{pr[1]}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Phase 1 — stats */}
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <SectionHead eyebrow={o.phaseH.eyebrow} title={o.phaseH.title} lead={o.phaseH.lead} />
          <div className="orsa-stats">
            {o.stats.map((s) => (
              <div className="orsa-stat" key={s[1]}><div className="v">{s[0]}</div><div className="l">{s[1]}</div></div>
            ))}
          </div>
          <p className="muted-note" style={{ marginTop: 20, maxWidth: 760 }}><Icon name="info" size={15} />{o.phaseExtra}</p>
        </div>
      </section>

      {/* Impact */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={o.impactH.eyebrow} title={o.impactH.title} lead={o.impactLead} />
          <ul className="orsa-list orsa-list-2col">
            {o.impact.map((x) => <li key={x}><Icon name="trending-up" size={17} color="var(--color-volunteer)" />{x}</li>)}
          </ul>
        </div>
      </section>

      {/* Support formats */}
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <SectionHead eyebrow={o.supportH.eyebrow} title={o.supportH.title} lead={o.supportH.lead} />
          <div className="grid-2" style={{ gap: 16 }}>
            {o.support.map((x) => (
              <div className="card orsa-partner" key={x[1]}>
                <span className="dir-ico" style={{ background: "var(--color-volunteer-soft)", color: "var(--color-volunteer)", flex: "none" }}><Icon name={x[0]} size={20} /></span>
                <div><b style={{ fontWeight: 500 }}>{x[1]}</b></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Ask + CTA */}
      <section className="section">
        <div className="container">
          <div className="grid-2" style={{ gap: 48, alignItems: "start" }}>
            <div>
              <div className="eyebrow"><Icon name="flag" size={14} />{o.askH.eyebrow}</div>
              <h2 style={{ marginTop: 12 }}>{o.askH.title}</h2>
              <p className="lead">{o.askH.lead}</p>
              <ul className="orsa-list">
                {o.ask.map((x) => <li key={x}><Icon name="check-circle-2" size={17} color="var(--color-action-blue)" />{x}</li>)}
              </ul>
            </div>
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 18, background: "var(--gradient-navy)", border: "none" }}>
              <p style={{ margin: 0, fontSize: 19, fontWeight: 300, color: "#fff", lineHeight: 1.5 }}>{o.ctaText}</p>
              <div className="orsa-contact">
                <div className="dir-n" style={{ color: "var(--color-cirg-cyan)" }}>{o.contact.label}</div>
                <div style={{ color: "#fff", fontWeight: 500, fontSize: 16 }}>{o.contact.name}</div>
                <a href={"tel:" + o.contact.tel} style={{ color: "#fff", textDecoration: "none", display: "inline-flex", gap: 8, alignItems: "center" }}><Icon name="phone" size={15} />{o.contact.phone}</a>
              </div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <button className="btn" style={{ background: "#fff", color: "var(--color-action-blue)" }} onClick={() => go("partners")}>{t.cta.partner}</button>
                <button className="btn btn-ghost" style={{ color: "#fff" }} onClick={() => go("contacts")}>{t.cta.writeUs} <Icon name="arrow-right" size={16} /></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { OrsaPage });