// Fin45 — Portfolio page
const DP = window.FIN_DATA;
const { EquityCurve, PositionsTable, AllocationBar, MonthsGrid, HonestNumber, SubscribeCTA } = window;

function PagePortfolio() {
  const s = DP.scoreboard;
  const dDir = s.deltaUsd > 0 ? 'up' : 'dn';
  return (
    <main className="page" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <div className="crumb">
        <a href="#/">Home</a>
        <span className="crumb-sep">/</span>
        <span>Portfolio</span>
        <span className="crumb-sep">/</span>
        <span style={{ color: 'var(--text-body)' }}>Day {DP.meta.day}</span>
      </div>

      {/* Equity curve hero */}
      <section className="equity-card">
        <div className="equity-head">
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 10 }}>
              Equity Curve · Day 1 → Day {DP.meta.day}
            </div>
            <div className="equity-value">{'$' + s.value.toLocaleString()}</div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'var(--text-body)', marginTop: 8 }}>
              <span className={dDir}>{s.deltaUsd >= 0 ? '+' : ''}${s.deltaUsd.toLocaleString()} ({s.deltaPct >= 0 ? '+' : ''}{s.deltaPct}% today)</span>
              <span style={{ color: 'var(--text-faint)', margin: '0 12px' }}>·</span>
              <span className="up">+$3,240 cumulative (+3.24%)</span>
            </div>
          </div>
          <div className="equity-meta">
            <div>Started ${DP.meta.starting.toLocaleString()} · {DP.meta.started}</div>
            <div style={{ marginTop: 6, color: 'var(--text-body)' }}>● buys &nbsp;&nbsp; <span style={{ color: 'var(--accent-negative)' }}>●</span> exits</div>
          </div>
        </div>
        <EquityCurve height={300} />
      </section>

      <div className="section-hd">
        <h2>Open positions <span className="muted">· 8 names</span></h2>
        <span className="section-link">{s.openPositions} open · 58.7% cash</span>
      </div>
      <PositionsTable />

      <div className="section-hd">
        <h2>Allocation <span className="muted">· by category</span></h2>
      </div>
      <AllocationBar />

      <div className="section-hd">
        <h2>Monthly returns <span className="muted">· vs 10% target</span></h2>
      </div>
      <MonthsGrid />
      <div style={{ display: 'flex', gap: 18, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', color: 'var(--text-muted)', textTransform: 'uppercase', marginTop: 14, flexWrap: 'wrap' }}>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'rgba(16,185,129,0.4)', verticalAlign: 'middle', marginRight: 6 }} />Hit target</span>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'rgba(245,158,11,0.4)', verticalAlign: 'middle', marginRight: 6 }} />Positive · below target</span>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, background: 'rgba(239,68,68,0.4)', verticalAlign: 'middle', marginRight: 6 }} />Negative</span>
      </div>

      <div className="section-hd">
        <h2>The Honest Number <span className="muted">· since Day 1</span></h2>
      </div>
      <HonestNumber />

      <SubscribeCTA heading={<>Get the next move<br />before the close.</>} />
    </main>
  );
}

window.PagePortfolio = PagePortfolio;