// Renders a single foundational element page.
// The page HTML must set window.GJF_PAGE_FOUNDATION_ID before this script runs.
function FoundationPage() {
  const id = window.GJF_PAGE_FOUNDATION_ID;
  const f = window.GJF_FOUNDATIONS.find(x => x.id === id);
  if (!f) return <div style={{padding: 80}}>Foundation not found.</div>;

  const all = window.GJF_FOUNDATIONS;
  const idx = all.findIndex(x => x.id === id);
  const prev = idx > 0 ? all[idx - 1] : null;
  const next = idx < all.length - 1 ? all[idx + 1] : null;

  return (
    <React.Fragment>
      <GJF_Header active="Foundational Elements" />

      <section className="gjf-page-hero">
        <div className="gjf-page-hero-inner">
          <div className="gjf-page-hero-copy">
            <span className="gjf-page-crumb">
              <a href="index.html">Home</a><span className="sep">/</span>
              <a href="foundations.html">Foundations</a><span className="sep">/</span>
              {f.name}
            </span>
            <span className="gjf-page-num">Foundational Element {f.roman} · {f.role}</span>
            <h1 className="gjf-page-title">{f.name}</h1>
            <span className="gjf-page-rule"></span>
            <p className="gjf-page-lede">{f.summary}</p>
          </div>
          <dl className="gjf-page-meta">
            <div className="gjf-page-meta-row">
              <dt>Position in method</dt>
              <dd>Step {f.methodIndex + 1} of 5</dd>
            </div>
            <div className="gjf-page-meta-row">
              <dt>Tagline</dt>
              <dd>{f.tagline}</dd>
            </div>
            <div className="gjf-page-meta-row">
              <dt>Read together with</dt>
              <dd><a href="manifesto.html" style={{color: "var(--gjf-gold-deep)"}}>The Manifesto</a></dd>
            </div>
          </dl>
        </div>
      </section>

      <div className="gjf-method-strip">
        <div className="gjf-method-strip-inner">
          <span className="gjf-method-label">The Method</span>
          {all.map((s, i) => (
            <React.Fragment key={s.id}>
              <a
                className={"gjf-method-step" + (s.id === f.id ? " is-active" : "")}
                href={`foundation-${s.id}.html`}
                aria-current={s.id === f.id ? "page" : undefined}
              >{s.name}</a>
              {i < all.length - 1 && <span className="gjf-method-arrow">→</span>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <main className="gjf-page-body">
        <article className="gjf-prose">
          <aside className="gjf-prose-side">
            <span className="gjf-prose-num">§ 01</span>
            <span className="gjf-prose-rule"></span>
            <h3>Strategic Purpose</h3>
          </aside>
          <div className="gjf-prose-body">
            <p>{f.purpose}</p>
            <blockquote className="gjf-prose-pull">{f.tagline}.</blockquote>
          </div>
        </article>

        <article className="gjf-prose">
          <aside className="gjf-prose-side">
            <span className="gjf-prose-num">§ 02</span>
            <span className="gjf-prose-rule"></span>
            <h3>The Problem It Answers</h3>
          </aside>
          <div className="gjf-prose-body">
            <p>This element responds to a recurring institutional failure pattern:</p>
            <ul>
              {f.problem.map((p, i) => <li key={i}>{p}</li>)}
            </ul>
          </div>
        </article>
      </main>

      <section className="gjf-section tone-paper">
        <div className="gjf-section-head">
          <span className="gjf-eyebrow">§ 03 · Strategic Objectives</span>
          <h2>What this element is built to do</h2>
        </div>
        <div className="gjf-section-grid cols-2" style={{maxWidth: 1080}}>
          {f.objectives.map((o, i) => (
            <div className="gjf-tile" key={i}>
              <span className="gjf-tile-num">Objective {String(i+1).padStart(2,"0")}</span>
              <h3>{o.title}</h3>
              <p>{o.body}</p>
            </div>
          ))}
        </div>
      </section>

      <main className="gjf-page-body">
        <article className="gjf-prose">
          <aside className="gjf-prose-side">
            <span className="gjf-prose-num">§ 04</span>
            <span className="gjf-prose-rule"></span>
            <h3>The {f.name} Test</h3>
          </aside>
          <div className="gjf-prose-body">
            <p>At its simplest, {f.name} asks:</p>
            <ul>
              {f.test.map((p, i) => <li key={i}>{p}</li>)}
            </ul>
          </div>
        </article>

        <article className="gjf-prose">
          <aside className="gjf-prose-side">
            <span className="gjf-prose-num">§ 05</span>
            <span className="gjf-prose-rule"></span>
            <h3>Closing Statement</h3>
          </aside>
          <div className="gjf-prose-body">
            <blockquote className="gjf-prose-pull">{f.closing}</blockquote>
          </div>
        </article>
      </main>

      <div className="gjf-nextprev">
        <div className="gjf-nextprev-inner">
          {prev ? (
            <a href={`foundation-${prev.id}.html`} className="prev">
              <span className="dir">← Previous Element</span>
              <span className="label">{prev.roman}. {prev.name}</span>
            </a>
          ) : (
            <a href="manifesto.html" className="prev">
              <span className="dir">← Back to</span>
              <span className="label">The Manifesto</span>
            </a>
          )}
          {next ? (
            <a href={`foundation-${next.id}.html`} className="next">
              <span className="dir">Next Element →</span>
              <span className="label">{next.roman}. {next.name}</span>
            </a>
          ) : (
            <a href="pillars.html" className="next">
              <span className="dir">Continue →</span>
              <span className="label">The Five Pillars</span>
            </a>
          )}
        </div>
      </div>

      <GJF_Footer />
    </React.Fragment>
  );
}
window.GJF_FoundationPage = FoundationPage;