const { PillButton, Icon } = window.AequitasCapitalDesignSystem_4533c9;

const SECTIONS = [
  { id: "about", label: "Firm" },
  { id: "strategy", label: "Strategy" },
  { id: "process", label: "Process" },
  { id: "terms", label: "Terms" },
  { id: "risk", label: "Risk" },
  { id: "contact", label: "Contact" }
];

const goTo = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 8, behavior: "smooth" }); };
const toPortal = () => { window.location.href = "/login"; };

/* ── Eligibility gate: apt for a fund restricted to Professional Clients ── */
function EligibilityGate({ onAccept }) {
  return (
    <div className="v2-gate">
      <div className="v2-gate__box">
        <img src="assets/images/aequitas-logo-trim-2x.png" alt="Aequitas Capital Partners" />
        <span className="v2-gate__eyebrow">Audience restriction</span>
        <h2>This site is intended for Professional Clients and Eligible Counterparties.</h2>
        <p>
          The information beyond this point is not directed at retail clients or the general public, and does not
          constitute an offer to the public or a solicitation to invest. Investments in alternative funds involve
          significant risk of capital loss. Past performance is not indicative of future results.
        </p>
        <div className="v2-gate__actions">
          <button className="v2-btn v2-btn--light" onClick={onAccept}>I confirm I qualify</button>
          <a className="v2-btn v2-btn--ghostlight" href="https://www.fca.org.uk" target="_blank" rel="noopener">Leave this site</a>
        </div>
      </div>
    </div>
  );
}

/* ── Fixed section rail: persistent position-in-document indicator ── */
function SideRail({ active, solid }) {
  return (
    <nav className={`v2-rail${solid ? " is-solid" : ""}`} aria-label="Sections">
      {SECTIONS.map((s, i) => (
        <button
          key={s.id}
          className={`v2-rail__item${active === s.id ? " is-active" : ""}`}
          onClick={() => goTo(s.id)}
        >
          <span className="v2-rail__tick"></span>
          <span className="v2-rail__label">{s.label}</span>
        </button>
      ))}
    </nav>
  );
}

/* ── Nav + hero ── */
function Nav({ solid }) {
  return (
    <nav className={`v2-nav${solid ? " is-solid" : ""}`}>
      <div className="v2-nav__inner">
        <img
          src={solid ? "assets/images/aequitas-logo-navy-2x.png" : "assets/images/aequitas-logo-trim-2x.png"}
          alt="Aequitas Capital Partners"
          className="v2-nav__logo"
        />
        <ul className="v2-nav__links">
          {SECTIONS.slice(0, 4).map((s) => (
            <li key={s.id}><button onClick={() => goTo(s.id)}>{s.label}</button></li>
          ))}
        </ul>
        <div className="v2-nav__cta">
          <button className="v2-navcta" onClick={toPortal}>
            Client login
            <span className="v2-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>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <header className="v2-hero" id="top">
      <div className="v2-hero__bg"></div>
      <div className="v2-hero__inner">
        <div className="v2-rule"></div>
        <div className="v2-hero__body">
          <span className="v2-eyebrow v2-eyebrow--light">London · By invitation only</span>
          <h1 className="v2-h1">Ideas Compete.<br />Evidence Decides.</h1>
          <p className="v2-hero__lead">{FUND.heroLead}</p>
          <div className="v2-hero__actions">
            <PillButton as="button" onClick={() => goTo("strategy")}>Our strategy</PillButton>
            <button className="v2-textlink v2-textlink--light" onClick={() => goTo("contact")}>Request an introduction</button>
          </div>
        </div>
        <div className="v2-hero__figures">
          {FUND.credentials.map(([k, v]) => (
            <div className="v2-hero__fig" key={k}>
              <span className="v2-eyebrow v2-eyebrow--light">{k}</span>
              <p>{v}</p>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

/* ── Firm ── */
function About() {
  return (
    <section id="about" className="v2-sec">
      <div className="v2-wrap">
        <div className="v2-sechead lp-reveal">
          <span className="v2-eyebrow">The firm</span>
          <h2 className="v2-h2">Built on proprietary models, not conviction alone.</h2>
        </div>
        <div className="v2-about">
          <div className="v2-about__cols lp-reveal">
            {FUND.about.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="v2-about__facts lp-reveal">
            {FUND.aboutFacts.map(([k, v]) => (
              <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Strategy: expandable pillars + sleeve allocation ── */
function Strategy() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="strategy" className="v2-sec v2-sec--tint">
      <div className="v2-wrap">
        <div className="v2-sechead lp-reveal">
          <span className="v2-eyebrow">Investment strategy</span>
          <h2 className="v2-h2">Where liquidity, timing and structure create asymmetry.</h2>
        </div>
        <div className="v2-strat">
          <div className="v2-strat__list">
            {FUND.strategy.map((s, i) => (
              <article key={s.label} className={`v2-pillar${open === i ? " is-open" : ""} lp-reveal`} onClick={() => setOpen(i)}>
                <header>
                  <div>
                    <span className="v2-pillar__num">{String(i + 1).padStart(2, "0")}</span>
                    <h3>{s.label}</h3>
                    <p className="v2-pillar__lede">{s.lede}</p>
                  </div>
                  <Icon name={open === i ? "chevron-up" : "chevron-down"} size={16} />
                </header>
                {open === i ? <p className="v2-pillar__body">{s.body}</p> : null}
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SECTIONS, goTo, toPortal, EligibilityGate, SideRail, Nav, Hero, About, Strategy });