/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer */
/* mission.jsx — About / Mission page. Editorial three-pillar layout. */

const MissionPillar = ({ index, label, quote, body }) => (
  <article className="tm-mission-pillar">
    <div className="tm-mission-pillar-meta">
      <span className="tm-mission-pillar-num">{String(index + 1).padStart(2, '0')}</span>
      <span className="tm-mission-pillar-label">{label}</span>
    </div>
    <blockquote className="tm-mission-quote">
      <p>{quote}</p>
    </blockquote>
    <p className="tm-mission-body">{body}</p>
  </article>
);

const MissionApp = () => {
  const { c } = useLang();
  const m = c.mission;

  return (
    <>
      <NavBar />
      <main className="tm-mission">
        <header className="tm-mission-hero">
          <div className="tm-container">
            <span className="tm-mission-eyebrow">{m.eyebrow}</span>
            <h1 className="tm-mission-h1">{m.h1}</h1>
          </div>
        </header>

        <div className="tm-container tm-mission-body-wrap">
          <div className="tm-mission-pillars">
            {m.pillars.map((p, i) => (
              <MissionPillar key={p.label} index={i} {...p} />
            ))}
          </div>

          <section className="tm-mission-join">
            <h2 className="tm-mission-join-title">{m.joinTitle}</h2>
            <p className="tm-mission-join-body">{m.joinBody}</p>
            <div className="tm-mission-join-actions">
              <a className="tm-btn tm-btn-dark tm-btn-lg" href={c.links.app}>
                {m.ctaPrimary}
                <i className="ph-bold ph-arrow-right"></i>
              </a>
              <a className="tm-btn tm-btn-ghost tm-btn-lg" href={c.links.call} target="_blank" rel="noopener noreferrer">
                {c.callCta}
                <i className="ph-bold ph-calendar-blank"></i>
              </a>
            </div>
          </section>
        </div>
      </main>
      <Footer />
    </>
  );
};

const MissionRoot = () => (
  <LangProvider>
    <MissionApp />
  </LangProvider>
);

ReactDOM.createRoot(document.getElementById('root')).render(<MissionRoot />);