// PHAROS — Context, Reality, Approach, Industries
const { useContext: useAboutCtx } = React;

// ---------- Context ----------
function Context() {
  const { t } = React.useContext(window.LangCtx);
  const stats = [
    [t.context.stat1n, t.context.stat1l, t.context.stat1c, "01"],
    [t.context.stat2n, t.context.stat2l, t.context.stat2c, "02"],
    [t.context.stat3n, t.context.stat3l, t.context.stat3c, "03"],
  ];
  return (
    <section className="sec sec--paper" id="context">
      <div className="container">
        <SectionHead index={2} eyebrow={t.context.eyebrow} h2={t.context.h2} />
        <div className="ctx-body">
          <div>{t.context.eyebrow}</div>
          <div>
            <Reveal as="p" className="lede">{t.context.p1}</Reveal>
            <Reveal delay={120} as="p" className="lede">{t.context.p2}</Reveal>
          </div>
        </div>
        <div className="stats">
          {stats.map(([n, l, c, idx], i) => (
            <Reveal delay={i * 120} key={i} className="stat">
              <div className="stat-tag">FIG. {idx}</div>
              <div className="stat-num">{n}</div>
              <div className="stat-label">{l}</div>
              <div className="stat-caption">{c}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Context = Context;

// ---------- Reality ----------
function Reality() {
  const { t } = React.useContext(window.LangCtx);
  return (
    <section className="sec sec--ink" id="reality">
      <div className="container">
        <SectionHead index={3} eyebrow={t.reality.eyebrow} h2={t.reality.h2} lede={t.reality.lede} />
        <ol className="reality-list">
          {t.reality.items.map(([title, body], i) => (
            <Reveal as="li" key={i} delay={i * 80} className="reality-row">
              <span className="reality-no">§ {String(i + 1).padStart(2, "0")}</span>
              <div className="reality-text">
                <h3 className="reality-title">{title}</h3>
                <p className="reality-body">{body}</p>
              </div>
            </Reveal>
          ))}
        </ol>
      </div>
    </section>
  );
}
window.Reality = Reality;

// ---------- Approach ----------
function Approach({ layout }) {
  const { t } = React.useContext(window.LangCtx);
  return (
    <section className="sec sec--paper" id="approach">
      <div className="container">
        <SectionHead index={4} eyebrow={t.approach.eyebrow} h2={t.approach.h2} />
        {layout === "timeline" && (
          <ol className="timeline">
            {t.approach.stages.map(([title, body, when, artifact], i) => (
              <Reveal as="li" key={i} delay={i * 90} className="timeline-row">
                <div className="timeline-no">WS / {String(i + 1).padStart(2, "0")}</div>
                <div className="timeline-body">
                  <h3 className="timeline-title">{title}</h3>
                  <p className="timeline-text">{body}</p>
                  {artifact && (
                    <p className="timeline-artifact">
                      <span className="timeline-artifact-label">{t.approach.artifactLabel}</span>
                      <span className="timeline-artifact-text">{artifact}</span>
                    </p>
                  )}
                </div>
                <div className="timeline-when">{when}</div>
              </Reveal>
            ))}
          </ol>
        )}
        {layout === "grid" && (
          <div className="approach-grid">
            {t.approach.stages.map(([title, body, when, artifact], i) => (
              <Reveal key={i} delay={i * 90} className="ag-card">
                <div className="ag-num">WS / {String(i + 1).padStart(2, "0")}</div>
                <h3 className="ag-title">{title}</h3>
                <p className="ag-body">{body}</p>
                {artifact && (
                  <p className="ag-artifact">
                    <span className="ag-artifact-label">{t.approach.artifactLabel}</span>
                    <span className="ag-artifact-text">{artifact}</span>
                  </p>
                )}
                <div className="ag-when">{when}</div>
              </Reveal>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}
window.Approach = Approach;

// ---------- Industries ----------
function Industries() {
  const { t } = React.useContext(window.LangCtx);
  return (
    <section className="sec sec--paper" id="industries">
      <div className="container">
        <SectionHead index={5} eyebrow={t.industries.eyebrow} h2={t.industries.h2} />
        <div className="ind-grid">
          {t.industries.items.map(([title, body, num], i) => (
            <Reveal key={i} delay={i * 80} className="ind-card">
              <div className="ind-num">SEC / {num}</div>
              <div>
                <h3 className="ind-title">{title}</h3>
                <p className="ind-body">{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <div className="ind-foot mono">{t.industries.footnote}</div>
      </div>
    </section>
  );
}
window.Industries = Industries;