const { useState } = React;

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>
  );
}

function StatCard({ label, lines = [] }) {
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="muted">{label}</div>
      <div style={{ fontSize: 14, marginTop: 6 }}>
        {lines.map((t, i) => (
          <div key={i} style={{ marginTop: 2 }}>
            {t}
          </div>
        ))}
      </div>
    </div>
  );
}

function HMMCard() {
  const [links] = useState({
    pdf: "/projects/hmm/hmm-paper.pdf", // <-- put your PDF here
    code: "https://github.com/jeremy111004/volatility-regimes-hmm-svhmm", // <-- put your repo here
  });

  return (
    <div>
      {/* ===== Header with cover ===== */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./hmm-cover.jpg')" }}
        >
          <div className="head-content">
            <div className="icon">HMM</div>
            <div>
              <h1 className="title">
                Modeling Financial Volatility with Hidden Markov Regimes and
                Stochastic-Volatility Overlays
              </h1>
              <div className="meta">
                S&amp;P 500 (2000–2025) • Rolling window • Risk controls
              </div>
            </div>
          </div>
        </div>

        {/* ===== Body ===== */}
        <div className="card-body">
          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            We model volatility as latent <em>regimes</em> (low / medium / high)
            with a Gaussian <strong>HMM</strong> and a{" "}
            <strong>pseudo-SV-HMM</strong> (HMM + regime-conditioned AR(1)
            volatility overlay). Backtests use the pseudo version; a PyMC
            snippet for a full Bayesian SV-HMM is included only as an
            illustrative template. Evaluation is{" "}
            <strong>static</strong> and <strong>rolling</strong> (500-day window,
            refit every 5 days). Two overlays improve robustness:{" "}
            <strong>Panic Mode</strong> (triggered when 20-day ann. vol &gt; 60%
            and 5-day return &lt; −1%, then de-risk ~30 days) and a{" "}
            <strong>MA100</strong> trend filter (applied only to BTC/ETH/WTI).
          </p>

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

      {/* ===== Key Points ===== */}
      <Section title="Key Points">
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          <Pill>3-state Gaussian HMM (vol regimes)</Pill>
          <Pill>Pseudo-SV-HMM: HMM + regime AR(1) vol (illustrative PyMC only)</Pill>
          <Pill>Rolling: 500d window, refit every 5d</Pill>
          <Pill>Panic Mode: 20d vol &gt; 60% &amp; 5d ret &lt; −1% → flat ~30d</Pill>
          <Pill>MA100 filter (BTC/ETH/WTI only)</Pill>
          <Pill>Simple-return compounding; no costs (upper bound)</Pill>
        </div>
      </Section>

      {/* ===== Method (brief) ===== */}
      <Section title="Method in Brief">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Signal:</strong> daily log-returns (S&amp;P 500 primary; BTC/ETH/WTI
            for portability tests).
          </li>
          <li>
            <strong>HMM:</strong> Gaussian emissions; regimes decoded; example mapping:
            low → +1, medium → 0, high → −1.
          </li>
          <li>
            <strong>Pseudo-SV-HMM:</strong> regime-specific AR(1) volatility overlay
            estimated out-of-sample; PyMC/NUTS shown <em>as illustration only</em>.
          </li>
          <li>
            <strong>Rolling protocol:</strong> 500-day window, refit every 5 days,
            one-step-ahead decisions.
          </li>
          <li>
            <strong>Overlays:</strong> Panic Mode (universal); MA100 (BTC/ETH/WTI only).
          </li>
          <li>
            <strong>Benchmarks:</strong> Buy-and-Hold; comparisons vs GARCH(1,1) where
            relevant. Compounding uses simple returns.
          </li>
        </ul>
      </Section>

      {/* ===== S&P 500 Results ===== */}
      <Section title="S&amp;P 500 — Rolling Results (2000–2025)">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="HMM (Rolling + Panic)"
            lines={[
              <>
                <strong>Ann. Return:</strong> 7.43%
              </>,
              <>
                <strong>Volatility:</strong> 14.0%
              </>,
              <>
                <strong>Sharpe:</strong> 0.55
              </>,
            ]}
          />
          <StatCard
            label="Pseudo-SV-HMM (Rolling + Panic)"
            lines={[
              <>
                <strong>Ann. Return:</strong> 8.13%
              </>,
              <>
                <strong>Volatility:</strong> 16.0%
              </>,
              <>
                <strong>Sharpe:</strong> 0.51
              </>,
            ]}
          />
          <StatCard
            label="Buy-and-Hold (baseline)"
            lines={[
              <>
                <strong>Ann. Return:</strong> 5.36%
              </>,
              <>
                <strong>Volatility:</strong> 19.39%
              </>,
              <>
                <strong>Sharpe:</strong> 0.28
              </>,
            ]}
          />
        </div>
        <p className="muted" style={{ marginTop: 8, fontSize: 12 }}>
          Rolling: 500-day window; refit every 5 days. Panic Mode de-risks the
          portfolio for ~30 days after a stress trigger. No transaction costs or
          slippage are modeled (results are an upper bound).
        </p>
      </Section>

      {/* ===== Data & Repro ===== */}
      <Section title="Data &amp; Reproducibility">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Assets:</strong> S&amp;P 500 (primary); BTC/ETH/WTI for portability
            tests.
          </li>
          <li>
            <strong>Frequency:</strong> daily close; models fit on log-returns; portfolio
            compounding uses simple returns.
          </li>
          <li>
            <strong>Repro:</strong> deterministic seeds; explicit train/test splits;
            rolling refits; no leverage/costs.
          </li>
          <li>
            <strong>Libraries:</strong> hmmlearn (EM-HMM), PyMC (illustrative only for
            full SV-HMM), pandas/yfinance, matplotlib.
          </li>
        </ul>
      </Section>

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<HMMCard />);