const { useState } = React;

/* --- Small UI helpers (same as your other cards) --- */
function Badge({ children, tone = "default" }) {
  const styles = {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    border: "1px solid var(--ring)",
    borderRadius: "999px",
    padding: "6px 10px",
    fontWeight: 700,
    fontSize: "12.5px",
    background: "#fff",
    color: "var(--text)",
  };
  if (tone === "info") {
    styles.background = "#F1F5FF";
    styles.border = "1px solid #C7D2FE";
    styles.color = "#1E3A8A";
  }
  return <span style={styles}>{children}</span>;
}

function Pill({ children }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        border: "1px solid var(--ring)",
        borderRadius: "999px",
        padding: "6px 10px",
        marginRight: 8,
        marginBottom: 8,
        background: "#fff",
        color: "var(--text)",
        fontWeight: 700,
        fontSize: "12.5px",
      }}
    >
      {children}
    </span>
  );
}

function Section({ title, children }) {
  return (
    <section className="card" style={{ marginTop: 16 }}>
      <h2 style={{ marginTop: 0, marginBottom: 8, fontSize: 18 }}>{title}</h2>
      <div>{children}</div>
    </section>
  );
}

/* --- Card Component --- */
function RiskAwareCard() {
  const [links] = useState({
    pdf: "/projects/research/PAPER2-21.pdf", // adjust if stored elsewhere
    code: "https://github.com/jeremy111004/Adaptive-Risk-Reduction-with-Regime-Aware-Models",
  });

  return (
    <div>
      {/* ===== Header ===== */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./riskaware-cover.jpg')" }}
        >
          <div className="head-content">
            <div className="icon">🧠</div>
            <div>
              <h1 className="title">
                Adaptive Risk Allocation through Hidden Markov Regimes
              </h1>
              <div className="meta">
                Regime Detection • Risk Mitigation • Portfolio Allocation
              </div>
            </div>
          </div>
        </div>

        {/* ===== Body ===== */}
        <div className="card-body">
          <div
            style={{
              display: "flex",
              gap: 8,
              flexWrap: "wrap",
              marginBottom: 8,
            }}
          >
            <Badge tone="info">Peer-style Research Summary</Badge>
            <Badge>Python • Quant/Risk</Badge>
            <Badge>HMM • HRP • Momentum</Badge>
          </div>

          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            This paper evaluates whether{" "}
            <strong>HMM-based regime signals</strong> can systematically{" "}
            <strong>reduce realized risk</strong> (drawdowns, ES) while keeping{" "}
            <strong>competitive Sharpe</strong> in realistic, rolling settings.
            Four deployable models share a unified evaluation pipeline and are
            compared at equalized volatility (10% ex-post, pre-cost KPIs).
          </p>

          <div
            style={{
              marginTop: 12,
              display: "flex",
              justifyContent: "center",
              gap: 10,
              flexWrap: "wrap",
            }}
          >
            <a
              className="btn ghost"
              href={links.pdf}
              target="_blank"
              rel="noopener noreferrer"
            >
              PDF
            </a>
            <a
              className="btn ghost"
              href={links.code}
              target="_blank"
              rel="noopener noreferrer"
            >
              Code
            </a>
          </div>
        </div>
      </header>

      {/* ===== Research Question & Setup ===== */}
      <Section title="Research Question & Setup">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Question:</strong> Can regime-aware allocation lower{" "}
            <em>MaxDD</em> and <em>ES95</em> without sacrificing Sharpe?
          </li>
          <li>
            <strong>Data & Returns:</strong> Daily closes → log-returns; aligned;
            EW return = simple average (multi-asset panel).
          </li>
          <li>
            <strong>Rolling Features:</strong>{" "}
            <em>log vol(21d)</em>, <em>log PC1 share (63d)</em>, and a composite{" "}
            stress score = z(vol21) + z(pc1).
          </li>
          <li>
            <strong>HMM:</strong> K=3, diagonal-Gaussian emissions;{" "}
            <em>500-day fit window</em>; <em>refit every 3–5 days</em>; states
            remapped calm → mid → stress by expected stress.
          </li>
          <li>
            <strong>Live probabilities:</strong> one-step-ahead (αᵗA), used to
            blend or switch per-regime template portfolios.
          </li>
          <li>
            <strong>KPIs:</strong> Ann. Return/Vol, <em>Sharpe</em>,{" "}
            <em>MaxDD</em>, <em>ES95 (one-day)</em>, turnover distribution,
            subperiods, calibration.
          </li>
        </ul>
      </Section>

      {/* ===== Models Tested ===== */}
      <Section title="Models Tested (4)">
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          <Pill>PCA–HMM (Hard Switch)</Pill>
          <Pill>Prob-HMM + Momentum (Hybrid)</Pill>
          <Pill>Regime-Aware HRP (Mixture-Cov)</Pill>
          <Pill>IA + HMM (Tempered Fusion)</Pill>
        </div>

        <div style={{ marginTop: 8 }}>
          <ul>
            <li>
              <strong>M1 — PCA–HMM (Hard):</strong> Feature ={" "}
              <em>log PC1 variance share</em>. Hard switch between per-regime
              mean-variance templates → very shallow MaxDD via crisp de-risk/re-risk.
            </li>
            <li>
              <strong>M2 — Hybrid:</strong> Feature = <em>log vol(21d)</em>.{" "}
              <em>Soft probability blend</em> of per-regime MV templates +{" "}
              <em>momentum sleeve</em> (126d/21d risk-adjusted) with{" "}
              <em>stress gate</em> γₜ = γ<sub>max</sub>(1 − P<sub>stress</sub>).
            </li>
            <li>
              <strong>M3 — RA–HRP:</strong> Features ={" "}
              <em>(vol21, pc1)</em>. HRP on <em>probability-weighted covariance</em>{" "}
              (mixture-cov) → excellent one-day ES (tail control).
            </li>
            <li>
              <strong>M4 — IA + HMM:</strong> Small MLP (2→16→K) trained on the
              fit window with HMM as teacher; <em>tempered product-of-experts</em>{" "}
              p̂<sub>fused</sub> ∝ p̂<sub>HMM</sub><sup>1−β</sup> ⊙
              p̂<sub>NN</sub><sup>β</sup> → smoother probabilities & weights.
            </li>
          </ul>
        </div>
      </Section>

      {/* ===== Headline Results ===== */}
      <Section title="Headline Results (10% vol, pre-cost)">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Hybrid (M2):</strong> Sharpe <strong>2.454</strong>, MaxDD{" "}
            <strong>−13.3%</strong>, ES95 <strong>0.0141</strong> →{" "}
            <em>#1 Sharpe with controlled DD</em>.
          </li>
          <li>
            <strong>IA + HMM (M4):</strong> Sharpe <strong>2.222</strong>, MaxDD{" "}
            <strong>−18.7%</strong>, ES95 <strong>0.0129</strong> →{" "}
            <em>strong Sharpe & tails; very stable weights</em>.
          </li>
          <li>
            <strong>PCA–HMM (M1):</strong> Sharpe <strong>1.995</strong>,{" "}
            <em>shallowest MaxDD</em> <strong>−10.8%</strong>, ES95{" "}
            <strong>0.0144</strong>.
          </li>
          <li>
            <strong>RA–HRP (M3):</strong> Sharpe <strong>1.590</strong>,{" "}
            <em>best one-day ES</em> <strong>0.0108</strong>, deeper DD at equalized vol.
          </li>
        </ul>
        <p style={{ color: "#2C3445", lineHeight: 1.55 }}>
          <em>Why this ordering?</em> Soft blending curbs boundary whipsaws;
          momentum adds carry but is throttled in stress; HRP stabilizes risk
          contributions; hard switches de-risk instantly (optics-friendly MaxDD).
        </p>
      </Section>

      {/* ===== Deployability & Limits ===== */}
      <Section title="Deployability & Limits">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Turnover:</strong> Concentrated near zero with thin right tails —
            rankings likely robust under realistic bps.
          </li>
          <li>
            <strong>Live use:</strong> Prefer rolling <em>causal</em> vol targeting
            and explicit cost model; weekly/biweekly rebal with turnover caps.
          </li>
          <li>
            <strong>Limitations:</strong> Per-regime templates estimated with{" "}
            <em>full-sample labels</em> (non-causal); tables are <em>pre-cost</em>;
            10% scaling is reporting-only.
          </li>
        </ul>
      </Section>

      {/* ===== Exact Settings (Copy/Paste into Config) ===== */}
      <Section title="Exact Settings (for code)">
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          <Pill>K = 3, diag-Gaussian HMM</Pill>
          <Pill>500-day fit window</Pill>
          <Pill>Refit every 3–5 days</Pill>
          <Pill>Features: log vol(21), log PC1(63)</Pill>
          <Pill>Prob: one-step-ahead αᵗA</Pill>
          <Pill>Momentum: 126/21 risk-adj</Pill>
          <Pill>Gate: γ = γmax(1 − Pstress)</Pill>
          <Pill>Templates: MV / HRP</Pill>
          <Pill>Vol report @10% (ex-post)</Pill>
        </div>
      </Section>

      {/* ===== Footer ===== */}
      <div style={{ textAlign: "center", marginTop: 16 }}>
        <a className="btn ghost" href="/" rel="noopener">
          ← Back to Home
        </a>
      </div>
    </div>
  );
}

/* --- Mount --- */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RiskAwareCard />);