// Generic content-page renderer.
// The page HTML must set window.GJF_PAGE_CONFIG_KEY before this script runs.
//
// Config schema (in pageConfigs.js):
// {
//   active: "Our Work",          // header active label
//   eyebrow: "Our Work",         // hero crumb / breadcrumb tail
//   crumbs: [{label, href}],     // breadcrumb chain (Home auto-prepended)
//   pageNum: "01 · Programmes",
//   title: "Programmes",
//   titleEm: "carry",            // optional italic word inside title (replaces {em})
//   lede: "...",
//   meta: [{dt, dd}],            // right-side meta dl rows (dd may be JSX or string)
//   methodStrip: true,           // show the red HRLEE chips
//   sections: [                  // body — array of section objects
//     { kind: "prose", num: "§ 01", heading: "Why this exists", body: ["para", "para"], pull: "..." },
//     { kind: "list",  num: "§ 02", heading: "What we do", intro: "...", items: ["...", "..."] },
//     { kind: "tiles", eyebrow: "§ 03 · ...", h2: "...", cols: 2, tiles: [{num, title, body}] },
//     { kind: "callout", body: "..." },
//     { kind: "html", html: "<p>...</p>" },
//   ],
//   prev: { href, dir, label },  // bottom nav
//   next: { href, dir, label },
// }

function SimplePage() {
  const cfg = window.GJF_PAGE_CONFIGS[window.GJF_PAGE_CONFIG_KEY];
  if (!cfg) return <div style={{padding: 80}}>Page config not found.</div>;

  const renderTitle = () => {
    if (cfg.titleEm && cfg.title.includes("{em}")) {
      const [a, b] = cfg.title.split("{em}");
      return <h1 className="gjf-page-title">{a}<em>{cfg.titleEm}</em>{b}</h1>;
    }
    return <h1 className="gjf-page-title">{cfg.title}</h1>;
  };

  const renderSection = (s, i) => {
    if (s.kind === "prose") {
      return (
        <article className="gjf-prose" key={i}>
          <aside className="gjf-prose-side">
            <span className="gjf-prose-num">{s.num}</span>
            <span className="gjf-prose-rule"></span>
            <h3>{s.heading}</h3>
          </aside>
          <div className="gjf-prose-body">
            {(s.body || []).map((p, j) => <p key={j} dangerouslySetInnerHTML={{__html: p}} />)}
            {s.pull && <blockquote className="gjf-prose-pull">{s.pull}</blockquote>}
          </div>
        </article>
      );
    }
    if (s.kind === "list") {
      return (
        <article className="gjf-prose" key={i}>
          <aside className="gjf-prose-side">
            <span className="gjf-prose-num">{s.num}</span>
            <span className="gjf-prose-rule"></span>
            <h3>{s.heading}</h3>
          </aside>
          <div className="gjf-prose-body">
            {s.intro && <p dangerouslySetInnerHTML={{__html: s.intro}} />}
            <ul>
              {s.items.map((it, j) => (
                <li key={j} dangerouslySetInnerHTML={{__html: it}} />
              ))}
            </ul>
            {s.outro && <p dangerouslySetInnerHTML={{__html: s.outro}} />}
          </div>
        </article>
      );
    }
    if (s.kind === "tiles") {
      return (
        <section className={"gjf-section " + (s.tone || "tone-paper")} key={i}>
          <div className="gjf-section-head">
            {s.eyebrow && <span className="gjf-eyebrow">{s.eyebrow}</span>}
            <h2>{s.h2}</h2>
            {s.lede && <p className="gjf-page-lede" style={{maxWidth: 720, margin: "16px auto 0"}}>{s.lede}</p>}
          </div>
          <div className={"gjf-section-grid cols-" + (s.cols || 2)} style={{maxWidth: 1080}}>
            {s.tiles.map((t, j) => (
              <div className="gjf-tile" key={j}>
                {t.num && <span className="gjf-tile-num">{t.num}</span>}
                <h3>{t.title}</h3>
                <p dangerouslySetInnerHTML={{__html: t.body}} />
                {t.cta && <a href={t.cta.href} className="gjf-tile-link">{t.cta.label} →</a>}
              </div>
            ))}
          </div>
        </section>
      );
    }
    if (s.kind === "callout") {
      return (
        <section className="gjf-section tone-navy" key={i}>
          <div className="gjf-section-head">
            {s.eyebrow && <span className="gjf-eyebrow on-dark">{s.eyebrow}</span>}
            {s.h2 && <h2>{s.h2}</h2>}
          </div>
          <div style={{maxWidth: 760, margin: "0 auto", textAlign: "center"}}>
            <p className="gjf-decl" style={{color: "var(--gjf-soft-ivory)"}} dangerouslySetInnerHTML={{__html: s.body}} />
          </div>
        </section>
      );
    }
    if (s.kind === "html") {
      return <div key={i} dangerouslySetInnerHTML={{__html: s.html}} />;
    }
    return null;
  };

  // group prose/list sections so they share a <main> wrapper
  const groups = [];
  let current = null;
  (cfg.sections || []).forEach((s) => {
    const isProse = s.kind === "prose" || s.kind === "list";
    if (isProse) {
      if (!current || current.type !== "main") { current = { type: "main", items: [] }; groups.push(current); }
      current.items.push(s);
    } else {
      groups.push({ type: "block", item: s });
      current = null;
    }
  });

  return (
    <React.Fragment>
      <GJF_Header active={cfg.active || ""} />

      <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>
              {(cfg.crumbs || []).map((c, i) => (
                <React.Fragment key={i}>
                  <span className="sep">/</span>
                  {c.href ? <a href={c.href}>{c.label}</a> : c.label}
                </React.Fragment>
              ))}
            </span>
            {cfg.pageNum && <span className="gjf-page-num">{cfg.pageNum}</span>}
            {renderTitle()}
            <span className="gjf-page-rule"></span>
            <p className="gjf-page-lede" dangerouslySetInnerHTML={{__html: cfg.lede || ""}} />
          </div>
          {cfg.meta && cfg.meta.length > 0 && (
            <dl className="gjf-page-meta">
              {cfg.meta.map((m, i) => (
                <div className="gjf-page-meta-row" key={i}>
                  <dt>{m.dt}</dt>
                  <dd dangerouslySetInnerHTML={{__html: m.dd}} />
                </div>
              ))}
            </dl>
          )}
        </div>
      </section>

      {cfg.methodStrip && (
        <div className="gjf-method-strip">
          <div className="gjf-method-strip-inner">
            <span className="gjf-method-label">The Method</span>
            <a className="gjf-method-step" href="foundation-1.html">Humanisation</a>
            <span className="gjf-method-arrow">→</span>
            <a className="gjf-method-step" href="foundation-2.html">Representation</a>
            <span className="gjf-method-arrow">→</span>
            <a className="gjf-method-step" href="foundation-3.html">Legislation</a>
            <span className="gjf-method-arrow">→</span>
            <a className="gjf-method-step" href="foundation-4.html">Education</a>
            <span className="gjf-method-arrow">→</span>
            <a className="gjf-method-step" href="foundation-5.html">Evolution</a>
          </div>
        </div>
      )}

      {groups.map((g, i) => {
        if (g.type === "main") {
          return (
            <main className="gjf-page-body" key={i}>
              {g.items.map((s, j) => renderSection(s, `${i}-${j}`))}
            </main>
          );
        }
        return <React.Fragment key={i}>{renderSection(g.item, i)}</React.Fragment>;
      })}

      {(cfg.prev || cfg.next) && (
        <div className="gjf-nextprev">
          <div className="gjf-nextprev-inner">
            {cfg.prev ? (
              <a href={cfg.prev.href} className="prev">
                <span className="dir">{cfg.prev.dir || "← Back"}</span>
                <span className="label">{cfg.prev.label}</span>
              </a>
            ) : <span />}
            {cfg.next ? (
              <a href={cfg.next.href} className="next">
                <span className="dir">{cfg.next.dir || "Continue →"}</span>
                <span className="label">{cfg.next.label}</span>
              </a>
            ) : <span />}
          </div>
        </div>
      )}

      <GJF_Footer />
    </React.Fragment>
  );
}
window.GJF_SimplePage = SimplePage;