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

/* Trader Opportunity is deliberately absent — it is reached by clicking the
   opening on the careers page, not from the nav. */
const NAV = [
  { id: "careers", label: "Careers" },
  { id: "process", label: "Investment Process" }
];

/* The logo always returns to the fund's landing page, from every surface that
   shows it. A real anchor rather than a click handler, so middle-click and
   open-in-new-tab behave, and so it reads as a link to a screen reader. */
function Logo({ light, className }) {
  return (
    <a href="/" className={`aeq-logo${light ? " aeq-logo--light" : ""}${className ? " " + className : ""}`} aria-label="Aequitas Capital Partners — home">
      <span className="aeq-logo__mark"></span>
      <span className="aeq-logo__desc">Capital Partners</span>
    </a>
  );
}

function Nav({ solid, page, go }) {
  return (
    <nav className={`cr-nav${solid ? " is-solid" : ""}`}>
      <div className="cr-nav__inner">
        <Logo light={!solid} className="cr-nav__logo" />
        <ul className="cr-nav__links">
          {NAV.map((n) => (
            <li key={n.id}><button className={page === n.id ? "is-on" : ""} onClick={() => go(n.id)}>{n.label}</button></li>
          ))}
        </ul>
        <div className="cr-nav__cta">
          {H.open ? <button className="cr-navcta" onClick={() => go("apply")}>
            Apply
            <span className="cr-navcta__arrow">
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true"><path d="M2 6.5h8M6.8 3.2 10.1 6.5 6.8 9.8" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round"></path></svg>
            </span>
          </button> : null}
        </div>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="cr-footer">
      <div className="cr-wrap">
        <div className="cr-footer__top">
          <Logo light className="cr-footer__logo" />
          <ul>
            {NAV.map((n) => <li key={n.id}><button onClick={() => go(n.id)}>{n.label}</button></li>)}
            <li><a href="/team">Team</a></li>
            {H.open ? <li><button onClick={() => go("apply")}>Apply</button></li> : null}
          </ul>
        </div>
        <div className="cr-footer__legal">
          <p><strong>Aequitas Capital Partners LLP</strong> is registered in England and Wales, partnership number OC457483. Registered office: 5th Floor, 167–169 Great Portland Street, London W1W 5PF.</p>
          <p>Aequitas Capital Partners LLP is not authorised or regulated by the Financial Conduct Authority. This page describes an employment opportunity and does not constitute an offer of investment or a solicitation to invest.</p>
        </div>
        <div className="cr-footer__base"><span>© 2026 Aequitas Capital Partners LLP</span><span>London</span></div>
      </div>
    </footer>
  );
}

/* ── Page one: Careers. Deliberately minimal — one opportunity, nothing else. ── */
function CareersPage({ 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">London</span>
            <h1 className="cr-h1">Careers</h1>
            <p className="cr-hero__lead">We're always interested in speaking with exceptional people.</p>
          </div>
        </div>
      </header>

      <section className="cr-sec">
        <div className="cr-wrap">
          <div className="cr-sechead cr-sechead--bare cr-reveal">
            <span className="cr-eyebrow">Current opportunities</span>
          </div>
          {H.open ? (
            <article className="cr-role cr-reveal">
              <div>
                <div className="cr-role__meta">{C.role.meta.map((m) => <span key={m}>{m}</span>)}</div>
                <h3>{C.role.title}</h3>
                <p>{C.role.summary}</p>
              </div>
              <PillButton tone="dark" as="button" onClick={() => go("role")}>Learn more</PillButton>
            </article>
          ) : (
            /* Closed. Says so plainly and offers nothing to click, rather than
               listing a role that cannot be applied for. */
            <article className="cr-role cr-role--closed cr-reveal">
              <div>
                <h3>{H.closedHeading}</h3>
                <p>{H.closedBody}</p>
              </div>
            </article>
          )}
        </div>
      </section>

      <Footer go={go} />
    </React.Fragment>
  );
}

/* ── Shared: the six-stage pipeline, expandable ── */
function Pipeline({ light }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className={`cr-pipe${light ? " cr-pipe--light" : ""}`}>
      {C.pipeline.map((s, i) => (
        <article key={s.t} className={`cr-stage${light ? " cr-stage--light" : ""}${open === i ? " is-open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="cr-stage__head">
            <span className="cr-stage__idx">{String(i + 1).padStart(2, "0")}</span>
            <div>
              <h3 className="cr-stage__t">{s.t}</h3>
              <p className="cr-stage__lede">{s.lede}</p>
            </div>
            <Icon name={open === i ? "chevron-up" : "chevron-down"} size={16} />
          </div>
          {open === i && (
            <div className="cr-stage__body">
              {s.detail.map((p, j) => <p key={j}>{p}</p>)}
              {s.list && <ul>{s.list.map((l) => <li key={l}>{l}</li>)}</ul>}
            </div>
          )}
        </article>
      ))}
    </div>
  );
}

function CTA({ go, heading, lede, label, target }) {
  return (
    <section className="cr-cta">
      <div className="cr-wrap cr-cta__in">
        <div>
          <span className="cr-eyebrow cr-eyebrow--light">{heading}</span>
          <h2 className="cr-h2 cr-h2--light">{lede}</h2>
        </div>
        <PillButton as="button" onClick={() => go(target)}>{label}</PillButton>
      </div>
    </section>
  );
}

Object.assign(window, { NAV, Logo, Nav, Footer, CareersPage, Pipeline, CTA, CAREERS_C: C });