// Alpha Z · Pages — Home, Careers, ApplicationDetail

const HOME_INDEX = [
  { id: "hero",         num: "01", label: "Alpha Z" },
  { id: "what",         num: "02", label: "What" },
  { id: "approach",     num: "03", label: "How it works" },
  { id: "applications", num: "04", label: "Applications" },
  { id: "stance",       num: "05", label: "Stance" },
  { id: "careers",      num: "06", label: "Careers" },
  { id: "footer",       num: "07", label: "Document" },
];

/* Home — 7 sections, locked copy */
function HomePage({ tweaks }) {
  const [activeIdx, setActiveIdx] = React.useState("hero");

  React.useEffect(() => {
    // Highlight current section in side index using IntersectionObserver
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActiveIdx(e.target.id);
      });
    }, { rootMargin: "-40% 0px -55% 0px" });
    HOME_INDEX.forEach(item => {
      const el = document.getElementById(item.id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <>
      {/* ───────── §1 HERO ───────── */}
      <section id="hero" className="section hero-section">
        <div className="hero-bg" aria-hidden="true">
          {/* Desktop: full-bleed. Mobile: parked top-right as a corner watermark.
              CSS does the repositioning per breakpoint; markup is one figure. */}
          <div className="hero-bg-wide">
            <HeroFigure />
          </div>
        </div>
        <div className="container-wide hero-content">
          <h1 className="t-display-xl hero-headline">
            AI for decision-making.
          </h1>
          <p className="t-lead hero-lead">
            We solve complex decisions from messy goals, constraints, and evidence — into answers that are derivable, consistent, and verifiable. A system that gets smarter with every problem it sees.
          </p>
        </div>
      </section>

      {/* ───────── §2 WHAT ───────── */}
      <section id="what" className="section">
        <div className="container-wide">
          <h2 className="t-display-l layers-title">
            Three layers, one decision.
          </h2>

          <div className="layers-doc">
            <article className="layer-row">
              <div className="layer-meta">
                <span className="t-label ink-500">Layer 01</span>
                <span className="layer-role">LLM</span>
              </div>
              <div className="layer-body">
                <h3 className="layer-name">Frames the problem.</h3>
                <p className="t-body-s">
                  {tweaks.s2Emphasis
                    ? <><span className="emph">An LLM</span> turns goals, constraints, and evidence into formal terms a solver can read.</>
                    : <>An LLM turns goals, constraints, and evidence into formal terms a solver can read.</>}
                </p>
              </div>
            </article>
            <article className="layer-row">
              <div className="layer-meta">
                <span className="t-label ink-500">Layer 02</span>
                <span className="layer-role">Algorithm</span>
              </div>
              <div className="layer-body">
                <h3 className="layer-name">Solves the formulation.</h3>
                <p className="t-body-s">
                  {tweaks.s2Emphasis
                    ? <><span className="emph">An algorithm</span> solves the formulation — calling a dedicated solver where one fits, or running our own where it doesn't. The answer is one you can derive, reproduce, and verify.</>
                    : <>An algorithm solves the formulation — calling a dedicated solver where one fits, or running our own where it doesn't. The answer is one you can derive, reproduce, and verify.</>}
                </p>
              </div>
            </article>
            <article className="layer-row">
              <div className="layer-meta">
                <span className="t-label ink-500">Layer 03</span>
                <span className="layer-role">Library</span>
              </div>
              <div className="layer-body">
                <h3 className="layer-name">Compounds what worked.</h3>
                <p className="t-body-s">
                  {tweaks.s2Emphasis
                    ? <><span className="emph">A library</span> remembers every solved problem, so the next decision starts smarter.</>
                    : <>A library remembers every solved problem, so the next decision starts smarter.</>}
                </p>
              </div>
            </article>
          </div>

          <div className="layers-coda">
            <p className="t-h2">The decision-maker keeps the judgment.</p>
            <p className="t-h2">The system handles the modeling.</p>
          </div>
        </div>
      </section>

      {/* ───────── §3 HOW IT WORKS ───────── */}
      <section id="approach" className="section">
        <div className="container-wide">
          <div className="how-head">
            <h2 className="t-display-l" style={{ maxWidth: "18ch" }}>
              From a question to a plan, in four moves.
            </h2>
            {tweaks.s3RightCol === "pullquote" && (
              <p className="pullquote t-meta">
                4 MOVES · ONE LOOP · ZERO BLACK BOX
              </p>
            )}
            {tweaks.s3RightCol === "axis" && (
              <p className="t-meta ink-500" style={{ maxWidth: "24ch" }}>
                Each move adds a square to the lattice. The library compounds across runs.
              </p>
            )}
          </div>

          <div className="steps">
            {[
              { num: "01", verb: "Formulate", artifact: "program",   body: "We translate the goal, the constraints, and the evidence into a formal optimization program — variables, objectives, constraints a solver can read.", stage: 1 },
              { num: "02", verb: "Solve",     artifact: "plan",      body: "An algorithm returns the answer, or proves the problem can't be satisfied as stated.", stage: 2 },
              { num: "03", verb: "Explain",   artifact: "reasoning", body: "The answer comes with its reasoning, assumptions, and where judgment is still needed — reviewable, not a black box.", stage: 3 },
              { num: "04", verb: "Compound",  artifact: "insight",   body: "What we learned formulating this problem becomes a structured insight in a library. The next problem starts smarter.", stage: 4 },
            ].map(s => (
              <div key={s.num} className="step">
                <span className="t-label ink-500">Step {s.num}</span>
                <h3 className="step-name">{s.verb}</h3>
                <p className="t-body-s step-body">{s.body}</p>
                {/* Mobile/tablet only — desktop shows the unified axis-line below */}
                <p className="step-artifact t-meta">
                  ↳ {s.verb.toLowerCase()} <span className="arrow">→</span> {s.artifact}
                </p>
              </div>
            ))}
          </div>

          {tweaks.s3RightCol === "axis" && (
            <div className="axis-line">
              {[
                "formulate → program",
                "solve → plan",
                "explain → reasoning",
                "compound → insight",
              ].map((t, i) => (
                <div key={i} className="axis-tick t-meta">
                  <span>POS {String(i+1).padStart(2,"0")}</span>
                  <span style={{ color: "var(--ink-900)" }}>{t}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* ───────── §4 APPLICATIONS ───────── */}
      <section id="applications" className="section">
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
            <h2 className="t-display-l" style={{ maxWidth: "16ch" }}>Where this matters.</h2>
            <p className="t-lead ink-700" style={{ maxWidth: "56ch" }}>
              Decision problems where capacity, evidence, and timing move at once — and someone still has to ship a plan.
            </p>
          </div>
          <div className="apps-grid">
            {APPLICATIONS.map(app => (
              <AppCard key={app.slug}
                       num={app.num}
                       slug={app.slug}
                       title={app.title}
                       desc={app.short} />
            ))}
          </div>
        </div>
      </section>

      {/* ───────── §5 STANCE ───────── */}
      <section id="stance" className="section">
        <div className="container-wide">
          <div className="stance-grid">
            <h2 className="t-display-l" style={{ maxWidth: "12ch" }}>
              Less black box. More grounded judgment.
            </h2>
            <div className="stance-body t-lead">
              <p>
                Every plan shows its <span className="emph">formulation</span>, its <span className="emph">solution</span>, and the <span className="emph">assumptions</span> behind it. Decisions you can defend. What works gets stored — not as data, but as a modeling insight the next decision can use.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ───────── §6 CAREERS CHIP ───────── */}
      <section id="careers" className="section">
        <div className="container-wide">
          <div className="careers-chip">
            <div>
              <h2 className="t-display-l" style={{ maxWidth: "18ch" }}>
                We're early. The way you join shapes the company.
              </h2>
              <p className="careers-chip-body t-lead">
                Builders, researchers, and product engineers who want AI to be useful where decisions carry real weight.
              </p>
            </div>
            <div>
              <Button variant="ghost" href="#/careers">See open directions</Button>
            </div>
          </div>
        </div>
      </section>

      {/* footer anchor */}
      <div id="footer"></div>
    </>
  );
}

/* ───────── Careers page ───────── */
function CareersPage() {
  const principles = [
    "Practical judgment over credentials.",
    "Intellectual honesty over confidence.",
    "Speed over polish."
  ];
  return (
    <>
      <section className="careers-hero">
        <div className="container">
          <h1 className="t-display-l">
            We're hiring people who like hard problems and simple products.
          </h1>
          <p className="t-lead lead">
            We're early. We're small. The next ten people set how this company thinks for the next ten years.
          </p>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <h2 className="t-h1" style={{ marginBottom: 24 }}>Open directions</h2>
          <div className="roles-list">
            {ROLES.filter(r => !r.archived).map(r => (
              <a className="role-row role-row-link" href={`#/careers/${r.slug}`} key={r.slug}>
                <div>
                  <div className="num t-meta">{r.num} · Role · {r.type}</div>
                  <h3>{r.title}</h3>
                </div>
                <div className="role-row-body">
                  <p className="t-body">{r.short}</p>
                  <span className="role-row-cta t-meta" aria-hidden="true">View role →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <h2 className="t-h1" style={{ marginBottom: 24 }}>What we look for</h2>
          <div className="principles">
            <ol>
              {principles.map((p, i) => (
                <li key={i}><span className="t-h2">{p}</span></li>
              ))}
            </ol>
            <p className="closing t-body">
              People who can sit with a messy problem long enough to make it small.
            </p>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <h2 className="t-h1" style={{ marginBottom: 24 }}>Contact</h2>
          <dl className="contact-row" style={{ marginTop: 32 }}>
            <dt>Email</dt>
            <dd><a href="mailto:contact@alpha-z.io" style={{ textDecoration: "underline", textUnderlineOffset: 3 }}>contact@alpha-z.io</a></dd>
            <dt>LinkedIn</dt>
            <dd><a href="https://linkedin.com/company/alpha-z-sg" style={{ textDecoration: "underline", textUnderlineOffset: 3 }}>linkedin.com/company/alpha-z-sg</a></dd>
          </dl>
        </div>
      </section>
    </>
  );
}

/* ───────── /careers/<slug> · single-role detail page ───────── */
function CareerDetailPage({ slug }) {
  const role = ROLES.find(r => r.slug === slug);
  // Treat archived roles as 404 — link rot is fine; we don't want stale
  // postings to be findable via direct URL once they're paused/filled.
  if (!role || role.archived) {
    return (
      <div className="container" style={{ paddingBlock: 120 }}>
        <p className="t-label ink-500">Role · 404</p>
        <h1 className="t-display-m" style={{ marginTop: 16 }}>Not found.</h1>
        <p style={{ marginTop: 16 }}>
          <a href="#/careers" style={{ textDecoration: "underline" }}>Back to careers</a>
        </p>
      </div>
    );
  }

  const hasTechTracks =
    (role.expertiseOpt && role.expertiseOpt.length > 0) ||
    (role.expertiseEng && role.expertiseEng.length > 0);

  return (
    <article className="app-detail role-detail">
      <div className="container-narrow">
        <div className="app-detail-header">
          <a href="#/careers" className="back-link t-label">
            <span className="back-arrow" aria-hidden="true">←</span>
            <span>Back to careers</span>
          </a>
          <span className="crumb t-label">Role · {role.num}</span>
        </div>
        <h1>{role.title} · {role.type}</h1>

        <section>
          <h2>What you'll do.</h2>
          <ul className="role-list">
            {role.responsibilities.map((b, i) => <li key={i} className="t-body">{b}</li>)}
          </ul>
        </section>

        <section>
          <h2>What we look for.</h2>
          <ul className="role-list">
            {role.requirements.map((b, i) => <li key={i} className="t-body">{b}</li>)}
          </ul>
        </section>

        {hasTechTracks && (
          <section>
            <h2>Technical expertise.</h2>
            {role.expertiseOpt && role.expertiseOpt.length > 0 && (
              <div className="role-track">
                <h3 className="role-track-h">Optimization &amp; Modeling</h3>
                <ul className="role-list">
                  {role.expertiseOpt.map((b, i) => <li key={i} className="t-body">{b}</li>)}
                </ul>
              </div>
            )}
            {role.expertiseEng && role.expertiseEng.length > 0 && (
              <div className="role-track">
                <h3 className="role-track-h">Engineering &amp; AI</h3>
                <ul className="role-list">
                  {role.expertiseEng.map((b, i) => <li key={i} className="t-body">{b}</li>)}
                </ul>
              </div>
            )}
          </section>
        )}

        <section>
          <h2>How to apply.</h2>
          <dl className="contact-row" style={{ marginTop: 16 }}>
            <dt>Email</dt>
            <dd><a href="mailto:contact@alpha-z.io" style={{ textDecoration: "underline", textUnderlineOffset: 3 }}>contact@alpha-z.io</a></dd>
            <dt>LinkedIn</dt>
            <dd><a href="https://www.linkedin.com/company/alpha-z-sg/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "underline", textUnderlineOffset: 3 }}>linkedin.com/company/alpha-z-sg</a></dd>
          </dl>
        </section>
      </div>
    </article>
  );
}

/* ───────── Application Detail ───────── */
function ApplicationDetailPage({ slug }) {
  const app = APPLICATIONS.find(a => a.slug === slug);
  if (!app) {
    return (
      <div className="container" style={{ paddingBlock: 120 }}>
        <p className="t-label ink-500">Application · 404</p>
        <h1 className="t-display-m" style={{ marginTop: 16 }}>Not found.</h1>
        <p style={{ marginTop: 16 }}><a href="#/#applications" style={{ textDecoration: "underline" }}>Back to applications</a></p>
      </div>
    );
  }
  const adjacent = app.adjacent.map(s => APPLICATIONS.find(a => a.slug === s)).filter(Boolean);

  return (
    <article className="app-detail">
      <div className="container-narrow">
        <div className="app-detail-header">
          <a href="#/#applications" className="back-link t-label">
            <span className="back-arrow" aria-hidden="true">←</span>
            <span>Back to applications</span>
          </a>
          <span className="crumb t-label">Application · {app.num}</span>
        </div>
        <h1>{app.longTitle}</h1>

        <section>
          <h2>The problem.</h2>
          {app.problem.map((p, i) => <p key={i} className="t-body">{p}</p>)}
        </section>

        <section>
          <h2>The shape of the decision.</h2>
          {app.shape.map((p, i) => <p key={i} className="t-body">{p}</p>)}
        </section>

        <section>
          <h2>How Alpha Z helps.</h2>
          {app.help.map((p, i) => <p key={i} className="t-body">{p}</p>)}
        </section>

        <section style={{ marginTop: 64 }}>
          <h2>Adjacent applications.</h2>
          <div className="adjacent">
            {adjacent.map(a => (
              <a key={a.slug} href={`#/applications/${a.slug}`}>
                <div className="label t-label">Use case · {a.num}</div>
                <div className="t-h3" style={{ marginBottom: 8 }}>{a.title}</div>
                <p className="t-body-s ink-700">{a.short}</p>
              </a>
            ))}
          </div>
        </section>
      </div>
    </article>
  );
}

Object.assign(window, { HomePage, CareersPage, CareerDetailPage, ApplicationDetailPage });