const { Icon } = window.AequitasCapitalDesignSystem_4533c9;

/* ── Process: replaces the performance module. Qualitative, no data. ── */
function Process() {
  const [open, setOpen] = React.useState(null);
  return (
    <section id="process" className="v2-sec">
      <div className="v2-wrap">
        <div className="v2-sechead lp-reveal">
          <span className="v2-eyebrow">How we operate</span>
          <h2 className="v2-h2">Four stages, applied to every position.</h2>
        </div>
        <ol className="v2-proc">
          {FUND.process.map((p, i) => (
            <li
              key={p.step}
              className={`v2-proc__item lp-reveal${open === i ? " is-open" : ""}`}
              onMouseEnter={() => setOpen(i)}
              onMouseLeave={() => setOpen(null)}
            >
              <span className="v2-proc__idx">{String(i + 1).padStart(2, "0")}</span>
              <span className="v2-proc__step">{p.step}</span>
              <h3>{p.label}</h3>
              <p>{p.body}</p>
            </li>
          ))}
        </ol>
        <div className="v2-mandate lp-reveal">
          <span className="v2-eyebrow">Mandate</span>
          <dl>
            {FUND.mandate.map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}
          </dl>
        </div>
      </div>
    </section>
  );
}

/* ── Terms ── */
function Terms() {
  return (
    <section id="terms" className="v2-sec v2-sec--tint">
      <div className="v2-wrap">
        <div className="v2-sechead lp-reveal">
          <span className="v2-eyebrow">Fund terms</span>
          <h2 className="v2-h2">Structure and dealing.</h2>
        </div>
        <dl className="v2-terms lp-reveal">
          {FUND.terms.map(([k, v]) => (
            <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
          ))}
        </dl>
        <div className="v2-disclaim lp-reveal">
          <Icon name="info" size={16} />
          <p>
            <strong>The fund's performance record is not published.</strong> It is provided to qualifying investors
            directly, on request, alongside audited statements issued by P11 Management. Nothing on this page
            constitutes an offer to the public or a solicitation to invest.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ── Risk framework ── */
function RiskFramework() {
  return (
    <section id="risk" className="v2-sec v2-sec--photo">
      <div className="v2-wrap">
        <div className="v2-sechead lp-reveal">
          <span className="v2-eyebrow v2-eyebrow--light">Risk framework</span>
          <h2 className="v2-h2 v2-h2--light">Embedded throughout, not applied after the fact.</h2>
        </div>
        <div className="v2-riskgrid">
          {FUND.risk.map((r) => (
            <article key={r.label} className="v2-riskcard lp-reveal">
              <Icon name={r.icon} size={20} />
              <h3>{r.label}</h3>
              <p>{r.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Terms, RiskFramework });