const { PillButton, Icon } = window.AequitasDS;
const C = window.CAREERS;

/* ── Page two: Trader Opportunity ── */
function RolePage({ go }) {
  const [faq, setFaq] = React.useState(2);
  return (
    <React.Fragment>
      <header className="cr-hero cr-hero--tall">
        <div className="cr-hero__bg"></div>
        <div className="cr-hero__inner">
          <div className="cr-rule"></div>
          <div className="cr-hero__body">
            <span className="cr-eyebrow cr-eyebrow--light">{C.role.meta.join(" · ")}</span>
            <h1 className="cr-h1">Systematic<br />Quantitative<br />Trader</h1>
            <p className="cr-hero__lead">{C.role.summary}</p>
            <div className="cr-hero__actions">
              <PillButton as="button" onClick={() => go("apply")}>Apply</PillButton>
              <button className="cr-textlink" onClick={() => go("process")}>How we work</button>
            </div>
          </div>
          <div className="cr-hero__figures">
            {C.heroFigures.map(([k, v]) => (
              <div className="cr-hero__fig" key={k}>
                <span className="cr-eyebrow cr-eyebrow--light">{k}</span>
                <p>{v}</p>
              </div>
            ))}
          </div>
        </div>
      </header>

      <section className="cr-sec">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">The opportunity</span>
            <h2 className="cr-h2">Judgement and process matter more than asset class.</h2>
          </div>
          <div className="cr-cols">
            <div className="cr-cols__body cr-reveal">
              {C.opportunity.map((p, i) => <p key={i}>{p}</p>)}
            </div>
            <dl className="cr-facts cr-reveal">
              {C.opportunityFacts.map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}
            </dl>
          </div>
        </div>
      </section>

      <section className="cr-sec cr-sec--tint">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">The role</span>
            <h2 className="cr-h2">Research, develop and manage profitable strategies.</h2>
            <p className="cr-p" style={{ marginTop: 26 }}>{C.roleIntro}</p>
          </div>
          <span className="cr-eyebrow cr-reveal" style={{ marginBottom: 4, display: "block" }}>You'll be expected to</span>
          <ol className="cr-duties cr-reveal">
            {C.duties.map((d, i) => <li key={i}><b>{String(i + 1).padStart(2, "0")}</b><span>{d}</span></li>)}
          </ol>
          <p className="cr-p cr-reveal" style={{ marginTop: 40 }}>{C.roleClose}</p>
        </div>
      </section>

      <section className="cr-sec">
        <div className="cr-wrap">
          <div className="cr-sechead cr-sechead--row cr-reveal">
            <div>
              <span className="cr-eyebrow">How we work</span>
              <h2 className="cr-h2">From observation to scale.</h2>
            </div>
            <button className="cr-textlink cr-textlink--dark" onClick={() => go("process")}>Read the full process</button>
          </div>
          <div className="cr-reveal"><Pipeline /></div>
          <p className="cr-p cr-reveal" style={{ marginTop: 44 }}>{C.pipelineNote}</p>
        </div>
      </section>

      <section className="cr-sec cr-sec--tint">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">What success looks like</span>
            <h2 className="cr-h2">Eight things we watch for.</h2>
          </div>
          <div className="cr-grid cr-grid--4 cr-reveal">
            {C.success.map(([t, d]) => (
              <div className="cr-cell" key={t}><h3>{t}</h3><p>{d}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="cr-sec cr-sec--photo">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow cr-eyebrow--light">What we offer</span>
            <h2 className="cr-h2 cr-h2--light">What you get in return.</h2>
          </div>
          <div className="cr-grid cr-grid--4 cr-grid--light cr-reveal">
            {C.offer.map(([t, d]) => (
              <div className="cr-cell" key={t}><h3>{t}</h3><p>{d}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="cr-sec">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">Questions</span>
            <h2 className="cr-h2">Before you apply.</h2>
          </div>
          <div className="cr-faq cr-reveal">
            {C.faq.map((f, i) => (
              <div className="cr-faq__q" key={i}>
                <button onClick={() => setFaq(faq === i ? -1 : i)}>
                  <h3>{f.q}</h3>
                  <Icon name={faq === i ? "chevron-up" : "chevron-down"} size={16} />
                </button>
                {faq === i && (
                  <div className="cr-faq__a">
                    {f.a.map((p, j) => <p key={j}>{p}</p>)}
                    {f.pending && <span className="cr-faq__pending">Answer pending — to be confirmed by the firm</span>}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTA go={go} heading="Systematic Quantitative Trader" lede="Applications are reviewed individually." label="Apply" target="apply" />
      <Footer go={go} />
    </React.Fragment>
  );
}

/* ── Investment Process — an internal operating manual, made public ── */
function ProcessPage({ go }) {
  return (
    <React.Fragment>
      <header className="cr-hero">
        <div className="cr-hero__bg"></div>
        <div className="cr-hero__inner">
          <div className="cr-rule"></div>
          <div className="cr-hero__body">
            <span className="cr-eyebrow cr-eyebrow--light">For prospective traders</span>
            <h1 className="cr-h1">Investment<br />Process</h1>
            <p className="cr-hero__lead">We believe repeatable investment performance comes from disciplined research, rigorous validation and continuous improvement.</p>
          </div>
        </div>
      </header>

      <section className="cr-sec">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">How we think</span>
            <h2 className="cr-h2">Evidence over conviction.</h2>
          </div>
          <div className="cr-cols__body cr-reveal" style={{ maxWidth: "58em" }}>
            {C.howWeThink.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </section>

      <section className="cr-sec cr-sec--photo">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow cr-eyebrow--light">Research pipeline</span>
            <h2 className="cr-h2 cr-h2--light">Six stages, and most work stops early.</h2>
          </div>
          <div className="cr-reveal"><Pipeline light /></div>
        </div>
      </section>

      <section className="cr-sec">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">Research culture</span>
            <h2 className="cr-h2">Six habits we hold each other to.</h2>
          </div>
          <div className="cr-grid cr-grid--3 cr-reveal">
            {C.culture.map(([t, d]) => <div className="cr-cell" key={t}><h3>{t}</h3><p>{d}</p></div>)}
          </div>
        </div>
      </section>

      <section className="cr-sec cr-sec--tint">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">Research reviews</span>
            <h2 className="cr-h2">The rhythm of the week.</h2>
          </div>
          <div className="cr-cadence cr-reveal">
            {C.reviews.map(([when, title, items]) => (
              <div key={when}>
                <span className="cr-cadence__when">{when}</span>
                <h3>{title}</h3>
                <ul>{items.map((i) => <li key={i}>{i}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cr-sec">
        <div className="cr-wrap">
          <div className="cr-sechead cr-reveal">
            <span className="cr-eyebrow">Capital allocation</span>
            <h2 className="cr-h2">Capital follows evidence, not people.</h2>
          </div>
          <div className="cr-chain cr-reveal">
            {C.chain.map((n, i) => (
              <div className={`cr-chain__n${i === C.chain.length - 1 ? " cr-chain__n--core" : ""}`} key={n}>
                <span className="cr-chain__i">{String(i + 1).padStart(2, "0")}</span>
                <span className="cr-chain__t">{n}</span>
                <div className="cr-chain__bar" style={{ animationDelay: (i * 0.09 + 0.1) + "s", opacity: 0.12 + i * 0.147 }}></div>
              </div>
            ))}
          </div>
          <div className="cr-cols" style={{ marginTop: "clamp(40px,3.6vw,64px)" }}>
            <div className="cr-cols__body cr-reveal">
              {C.chainNote.map((p, i) => <p key={i}>{p}</p>)}
            </div>
          </div>
        </div>
      </section>

      <section className="cr-sec cr-sec--tint">
        <div className="cr-wrap">
          <div className="cr-cols">
            <div className="cr-reveal">
              <span className="cr-eyebrow">What we expect</span>
              <h2 className="cr-h2" style={{ fontSize: "clamp(24px,2.2vw,38px)" }}>Of a trader here.</h2>
              <ol className="cr-duties" style={{ marginTop: 26 }}>
                {C.expectOfYou.map((d, i) => <li key={i}><b>{String(i + 1).padStart(2, "0")}</b><span>{d}</span></li>)}
              </ol>
            </div>
            <div className="cr-reveal">
              <span className="cr-eyebrow">What you can expect</span>
              <h2 className="cr-h2" style={{ fontSize: "clamp(24px,2.2vw,38px)" }}>From the firm.</h2>
              <dl className="cr-facts" style={{ marginTop: 26 }}>
                {C.expectFromUs.map((d) => <div key={d}><dd>{d}</dd></div>)}
              </dl>
            </div>
          </div>
        </div>
      </section>

      <CTA go={go} heading="Interested in joining?" lede="View current opportunities." label="Careers" target="careers" />
      <Footer go={go} />
    </React.Fragment>
  );
}

Object.assign(window, { RolePage, ProcessPage });