// Performance, Risk, Quarters, Terms, CTA, Footer sections
function Performance() {
  return (
    <section className="section" id="performance">
      <div className="shell">
        <div className="sec-head reveal">
          <div className="sec-label">03 / PERFORMANCE</div>
          <h2 className="sec-title">Equity growth through <em>dislocation-driven execution</em>.</h2>
          <p className="sec-sub-p">
            Sixteen consecutive positive months. Net strategy returns compound to <span style={{ color: 'var(--fg)' }}>+131.46%</span> across
            a window where Bitcoin returned <span style={{ color: 'var(--fg)' }}>−18.4%</span> and the S&amp;P 500 returned <span style={{ color: 'var(--fg)' }}>+22.6%</span>.
            Performance is uncorrelated to market beta — produced through systematic counter-trend entries, automated risk gating,
            and disciplined execution against forced-flow dislocations.
          </p>
        </div>
        <Chart />
      </div>
    </section>
  );
}

function RiskIcon({ name }) {
  const common = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
  switch (name) {
    case 'leverage':
      return <svg {...common}><path d="M3 17l5-5 4 4 9-9"/><path d="M14 7h7v7"/></svg>;
    case 'drawdown':
      return <svg {...common}><path d="M3 6l6 6 4-4 8 8"/><path d="M21 16v5h-5"/></svg>;
    case 'corr':
      return <svg {...common}><circle cx="9" cy="12" r="5"/><circle cx="15" cy="12" r="5"/></svg>;
    case 'sharpe':
      return <svg {...common}><path d="M3 18l4-8 3 5 4-10 3 7 4-3"/></svg>;
    case 'duration':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    default: return null;
  }
}

function Risk() {
  const constraints = [
    { icon: 'leverage', k: 'Leverage', v: '3x – 6x', n: 'operating range' },
    { icon: 'drawdown', k: 'Max Drawdown', v: '−6.7%', n: 'realized · 16 mo' },
    { icon: 'corr',     k: 'BTC Correlation', v: '~0.12', n: 'near-zero' },
    { icon: 'sharpe',   k: 'Sharpe Ratio', v: '>3.0', n: 'annualized' },
    { icon: 'duration', k: 'Avg Duration', v: 'Short-term', n: 'intraday resolution' },
  ];
  return (
    <section className="section" id="risk">
      <div className="shell">
        <div className="sec-head reveal">
          <div className="sec-label">05 / RISK MANAGEMENT</div>
          <h2 className="sec-title">Risk is defined <em>before capital is deployed</em>.</h2>
        </div>
        <div className="risk-intro">
          <p>Our framework protects capital through layered controls, continuous monitoring, and disciplined execution.</p>
          <p>We don't predict markets — we control risk, exposure, and behavior across all conditions.</p>
        </div>
        <div className="risk-grid">
          {window.HS_DATA.risk.map(([n, h, p, stat], i) => (
            <div className="risk-item" key={i}>
              <div className="risk-num">{n}</div>
              <h4 className="risk-h">{h}</h4>
              <p className="risk-p">{p}</p>
              {stat && (
                <div className="risk-stat">
                  <span className="risk-stat-k">{stat.k}</span>
                  <span className="risk-stat-v">{stat.v}</span>
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="risk-constraints">
          <div className="risk-constraints-h">
            <span className="sec-label" style={{ margin: 0 }}>OPERATING BOUNDS</span>
            <span className="risk-constraints-meta">realized · Jan 2025 — Apr 2026</span>
          </div>
          <div className="risk-constraints-grid">
            {constraints.map((c, i) => (
              <div className="rcon" key={i}>
                <div className="rcon-icon"><RiskIcon name={c.icon} /></div>
                <div className="rcon-k">{c.k}</div>
                <div className="rcon-v">{c.v}</div>
                <div className="rcon-n">{c.n}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="risk-foot">
          <p className="risk-foot-p">
            High win rates reflect systematic counter-trend entries against forced-flow dislocations
            with layered position building at progressively favorable levels — not asymmetric payoff structures.
          </p>
          <p className="risk-foot-tag">Discipline first. Capital always.</p>
        </div>
      </div>
    </section>
  );
}

function Regimes() {
  return (
    <section className="section" id="regimes">
      <div className="shell">
        <div className="sec-head reveal">
          <div className="sec-label">04 / RECENT PERIODS</div>
          <h2 className="sec-title">Execution across <em>varying market regimes</em>.</h2>
          <p className="sec-sub-p">
            Performance is driven by structured execution — adapting exposure, frequency,
            and positioning to prevailing flow conditions.
          </p>
        </div>
        <div className="regimes">
          {window.HS_DATA.regimes.map((r, i) => (
            <div className="regime" key={i}>
              <div className="regime-head">
                <h3 className="regime-h">{r.label}</h3>
                <div className="regime-range">{r.range}</div>
              </div>
              <div className="regime-total">{r.total}</div>
              <div className="regime-rule" />
              <p className="regime-body">{r.regime}</p>
              <p className="regime-body">{r.detail}</p>
              <div className="regime-stats">
                {r.stats.map((s, j) => (
                  <div className="regime-stat" key={j}>
                    <div className="regime-stat-k">{s.k}</div>
                    <div className="regime-stat-v">{s.v}</div>
                    <div className="regime-stat-n">{s.note}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <p className="regime-foot">Net strategy returns: net of trading, funding &amp; commission costs · before performance fee. LP returns subject to tier-based performance fee — see Terms. Past performance is not indicative of future results.</p>
      </div>
    </section>
  );
}

function Terms() {
  return (
    <section className="section" id="terms">
      <div className="shell">
        <div className="sec-head reveal">
          <div className="sec-label">06 / SMA TERMS</div>
          <h2 className="sec-title">Aligned <em>by design</em>.</h2>
        </div>
        <div className="terms-wrap">
          <div className="terms-tbl">
            {window.HS_DATA.terms.map(([k, v], i) => (
              <div className="terms-row" key={i}>
                <div className="terms-k">{k}</div>
                <div className="terms-v">
                  {typeof v === 'object' ? <span className="hl">{v.hl}</span> : v}
                </div>
              </div>
            ))}
          </div>
          <div className="terms-card">
            <div>
              <div className="terms-card-label">PERFORMANCE FEES · TIERED</div>
              <h3 className="terms-card-h">Scaled <em>with you</em>.</h3>
              <p className="terms-card-p">
                We get paid when you do. Performance fees apply only to realized net profit and decline
                as allocation scales — never on AUM, never on unrealized marks.
              </p>
            </div>
            <div className="tier-tbl">
              {window.HS_DATA.tiers.map(([k, v], i) => (
                <div className="tier-row" key={i}><span className="k">{k}</span><span className="v">{v}</span></div>
              ))}
            </div>
          </div>
        </div>
        <p className="terms-foot">
          Highstake LLC is registered in Saint Vincent &amp; the Grenadines. Terms shown apply to qualified allocators meeting the minimum allocation threshold. Final terms confirmed in the SMA agreement.
        </p>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta" id="access">
      <div className="cta-glow" />
      <div className="shell">
        <div className="sec-label">07 / ACCESS</div>
        <h2 className="cta-h">Selectively onboarding<br/><em>partners</em>.</h2>
        <p className="cta-p">
          For qualified allocators seeking uncorrelated alpha with institutional-grade risk
          management. Minimum allocation <span style={{ color: 'var(--fg)' }}>$500,000</span>.
          Monthly or quarterly payouts on realized net profit. Client-controlled custody.
        </p>
        <div className="cta-actions">
          <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('open-request-form')); }}>Request Access ↗</a>
          <a className="btn" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('open-tearsheet-form')); }}>Download Tear Sheet ↓</a>
        </div>
        <p className="cta-escape">
          Or reach out directly — <a href="mailto:invest@highstake.app">invest@highstake.app</a>
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-top">
          <div>
            <Logo size="large" />
            <p className="footer-blurb">
              Highstake LLC · Quantitative digital asset trading.
              Registered in Saint Vincent &amp; the Grenadines.
            </p>
          </div>
          <div className="footer-col">
            <h5>Fund</h5>
            <a href="#strategy">Strategy</a>
            <a href="#performance">Performance</a>
            <a href="#risk">Risk</a>
            <a href="#terms">Terms</a>
          </div>
          <div className="footer-col">
            <h5>Resources</h5>
            <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('open-tearsheet-form')); }}>Tear Sheet</a>
            <a href="/letters/">Letters</a>
            <a href="#">Methodology Note</a>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <a href="mailto:invest@highstake.app">invest@highstake.app</a>
          </div>
        </div>
        <p className="disclosure">
          DISCLOSURE — Past performance is not indicative of future results. Digital asset trading involves substantial risk, including potential loss of principal. Highstake LLC
          is not registered as an investment adviser in any jurisdiction; the fund operates on a private placement basis, available only to qualified allocators. S&P 500 comparison
          shown for directional context only; the strategy is non-correlated to equity beta. Figures cover Jan 2025 — Apr 2026 and are net strategy returns (after trading, funding &amp; commission costs · before performance fee) unless otherwise noted. Tier-based performance fee applies to realized profits — see Terms.
        </p>
        <div className="footer-bottom">
          <span>© 2026 Highstake LLC</span>
          <span>v1.2 · rendered {new Date().toISOString().slice(0, 10)}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Performance, Risk, Regimes, Terms, CTA, Footer });