const { useState } = React;

/* --- Small UI helpers --- */
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>
  );
}

/* Accepts either `lines` or `rows` (for backward compatibility) */
function StatCard({ label, lines = [], rows = [] }) {
  const items = lines.length ? lines : rows;
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="muted">{label}</div>
      <div style={{ fontSize: 14, marginTop: 6 }}>
        {items.map((r, i) => (
          <div key={i} style={{ marginTop: 2 }}>
            {typeof r === "object" && r?.k ? (
              <>
                <strong>{r.k}:</strong> {r.v}
              </>
            ) : (
              r
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function InvestmentCard() {
  const [links] = useState({
    pdf: "./Investment.pdf", // update if your path differs
    pres: "./PRES.pdf", // optional repo link
  });

  return (
    <div>
      {/* ===== Header with cover ===== */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./investment-cover.jpg')" }}
        >
          <div className="head-content">
            <div className="icon">IF</div>
            <div>
              <h1 className="title">
                Multi-Fund Portfolio — CAPM & Fama-French
              </h1>
              <div className="meta">
                Defensive • Balanced • Aggressive — 20-year view • Group of 3
                (me + 2 peers)
              </div>
            </div>
          </div>
        </div>

        {/* ===== Body ===== */}
        <div className="card-body">
          <div
            style={{
              display: "flex",
              gap: 8,
              flexWrap: "wrap",
              marginBottom: 8,
            }}
          >
            <Badge tone="info">Report in English (PDF)</Badge>
          </div>

          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            Three funds tailored to distinct risk profiles: a defensive
            Stay-at-Home fund, a balanced Out-in-the-World fund, and a high-beta
            Life-On-The-Edge fund. Construction and evaluation rely on{" "}
            <strong>CAPM</strong> and the
            <strong> Fama–French 3-Factor model</strong> over long horizons,
            with scenario analysis, Monte Carlo projections, and stress tests
            for turbulent periods.
          </p>

          {/* Centered buttons: PDF + (optional) Code */}
          <div
            style={{
              marginTop: 12,
              display: "flex",
              justifyContent: "center",
              gap: 10,
              flexWrap: "wrap",
            }}
          >
            <a
              className="btn"
              href={links.pdf}
              target="_blank"
              rel="noopener noreferrer"
            >
              Open Full Report (PDF)
            </a>
            <a
              className="btn"
              href={links.pres}
              target="_blank"
              rel="noopener noreferrer"
            >
              Open Presentation (PDF)
            </a>
          </div>
        </div>
      </header>

      {/* ===== Key Points ===== */}
      <Section title="Key Points">
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          <Pill>Three funds by risk profile</Pill>
          <Pill>CAPM & Fama-French (FF3)</Pill>
          <Pill>20-year horizons (monthly)</Pill>
          <Pill>Monte Carlo (10-year)</Pill>
          <Pill>Stress tests (2008, 2020)</Pill>
        </div>
      </Section>

      {/* ===== Funds Overview ===== */}
      <Section title="Funds Overview">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="Stay-at-Home (Defensive)"
            lines={[
              <>
                Blue-chips & dividends; avg beta ≈ <strong>0.6</strong>.
              </>,
              <>
                Goal: capital preservation (~5% p.a. with reinvested dividends).
              </>,
            ]}
          />
          <StatCard
            label="Out-in-the-World (Balanced)"
            lines={[
              <>
                Target portfolio beta ≈ <strong>1.18</strong>.
              </>,
              <>
                Realized 1-yr ≈ <strong>25.1%</strong> vs CAPM{" "}
                <strong>23.56%</strong>.
              </>,
            ]}
          />
          <StatCard
            label="Life-On-The-Edge (Aggressive)"
            lines={[
              <>
                High beta (CAPM <strong>1.86</strong>; FF3 <strong>1.73</strong>
                ).
              </>,
              <>
                Period return ≈ <strong>−1.22%</strong> (short-horizon
                underperformance).
              </>,
            ]}
          />
        </div>
        <p className="muted" style={{ marginTop: 8, fontSize: 12 }}>
          Metrics summarized from the attached report; see PDF for full
          methodology and tables.
        </p>
      </Section>

      {/* ===== Method ===== */}
      <Section title="Method">
        <ul style={{ marginTop: 8 }}>
          <li>
            <strong>Risk models:</strong> CAPM betas and Fama–French 3-factor
            regressions on monthly data; long windows for stability.
          </li>
          <li>
            <strong>Construction:</strong> defensive emphasizes low-beta
            blue-chips & dividends; balanced mixes blue-chips and growth;
            aggressive focuses on higher-beta growth names.
          </li>
          <li>
            <strong>Forward view:</strong> Monte Carlo (10k paths) and
            illustrative stress tests (’08/’20-style drawdowns).
          </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(<InvestmentCard />);