// === V2 — Monthly Returns Heatmap section ===
// A landing-page section that highlights the Performance > Overview > Monthly
// Returns view from the real product. Visually striking — colored cells per
// month, totals column on the right.

// Deterministic mock data shaped like the real screenshot
const HEATMAP_DATA = [
{ year: 2026, months: [56430, 50370, 13044, 115374, 100369, null, null, null, null, null, null, null] },
{ year: 2025, months: [44977, -12632, -28453, -21079, 13469, -24066, 21204, 18121, 72614, 39337, 12296, 20862] },
{ year: 2024, months: [14066, 24073, 25101, -1317, 22540, -21909, -2808, 2841, 52805, 14215, 54478, -16761] },
{ year: 2023, months: [945, -9482, -175, -1936, 6477, 14011, 7136, -1461, -10639, -4242, 11410, 11333] },
{ year: 2022, months: [-19548, -2398, 3412, -13651, -10408, -19, 389, -884, -1120, 295, 389, 475] },
{ year: 2021, months: [7431, -8546, -1917, 658, -7227, 7373, 5369, 4236, -1170, 7212, 882, -6633] },
{ year: 2020, months: [null, null, null, null, null, 1723, 2119, 3601, 2126, 6305, 10955, 11744] }];


const MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];

function fmtHeatmap(v) {
  if (v == null) return "—";
  const abs = Math.abs(v);
  const sign = v < 0 ? "-" : "";
  if (abs >= 1000) return `${sign}$${(abs / 1000).toFixed(abs >= 10000 ? 1 : 2)}K`;
  return `${sign}$${Math.round(abs)}`;
}

function cellColor(v, maxAbs) {
  if (v == null) return { bg: "transparent", color: "hsl(var(--subtle-fg))" };
  const intensity = Math.min(1, Math.abs(v) / maxAbs);
  // Light intensity threshold for readability
  const alpha = 0.18 + intensity * 0.55;
  if (v >= 0) return { bg: `hsl(145 65% 38% / ${alpha})`, color: "hsl(145 70% 88%)" };
  return { bg: `hsl(0 70% 42% / ${alpha})`, color: "hsl(0 70% 92%)" };
}

function MonthlyReturnsHeatmap() {
  const maxAbs = React.useMemo(() => {
    let m = 0;
    HEATMAP_DATA.forEach((r) => r.months.forEach((v) => {if (v != null) m = Math.max(m, Math.abs(v));}));
    return m;
  }, []);
  const totals = HEATMAP_DATA.map((r) => r.months.reduce((a, v) => a + (v || 0), 0));
  const maxAbsTotal = Math.max(...totals.map(Math.abs));

  return (
    <section id="heatmap" className="relative py-20 md:py-28" style={{ padding: "62px 0px" }}>
      <div className="mx-auto max-w-7xl px-6 md:px-10">
        <div className="grid md:grid-cols-12 gap-10 items-start">
          <div className="md:col-span-4 md:sticky md:top-24 md:order-2">
            <Eyebrow>Performance · Monthly Returns</Eyebrow>
            <h2 className="mt-4 text-3xl md:text-4xl font-semibold tracking-tight leading-tight">
              Monthly returns,<br />
              <span className="text-primary">one heatmap.</span>
            </h2>
            <p className="mt-5 text-mutedfg leading-relaxed">
              Switch between dollar amounts and percent returns. Filter by Combined, Realized, or Unrealized. Cell colors scale with magnitude so the worst months and the best months jump off the page.
            </p>
            <ul className="mt-6 space-y-2.5 text-sm text-mutedfg">
              <li className="flex items-start gap-2"><IcoCheck size={14} className="text-positive mt-0.5 shrink-0" /> Realized, unrealized, or combined view</li>
              <li className="flex items-start gap-2"><IcoCheck size={14} className="text-positive mt-0.5 shrink-0" /> Toggle $ amounts ↔ % returns</li>
              <li className="flex items-start gap-2"><IcoCheck size={14} className="text-positive mt-0.5 shrink-0" /> Per-portfolio and per-strategy slicing</li>
              <li className="flex items-start gap-2"><IcoCheck size={14} className="text-positive mt-0.5 shrink-0" /> Yearly totals roll up automatically</li>
            </ul>
            <a href="#cta-final" className="mt-7 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:text-primary/80">
              See your own history <IcoArrowRight size={13} />
            </a>
          </div>

          <div className="md:col-span-8 md:order-1">
            <div className="card1 overflow-hidden">
              {/* Header */}
              <div className="px-4 py-3 border-b border-border1 flex items-center justify-between flex-wrap gap-2">
                <div className="flex items-center gap-2">
                  <span className="text-[11px] font-semibold uppercase tracking-wider">Monthly Returns</span>
                  <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
                  <div className="flex items-center gap-px ml-2">
                    <button className="rounded-l-md bg-primary text-primaryFg px-2 py-0.5 text-[10px] font-mono font-bold">$</button>
                    <button className="rounded-r-md bg-card2 text-mutedfg border border-border1 px-2 py-0.5 text-[10px] font-mono">%</button>
                  </div>
                </div>
                <div className="flex items-center gap-3 text-[10px] text-mutedfg">
                  <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-sm bg-[hsl(145_65%_45%)]" /> Profit</span>
                  <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-sm bg-[hsl(0_70%_48%)]" /> Loss</span>
                </div>
              </div>

              {/* Heatmap grid */}
              <div>
                <table className="w-full text-[10.5px]" style={{ borderSpacing: "3px", borderCollapse: "separate", tableLayout: "fixed" }}>
                  <colgroup>
                    <col style={{ width: "52px" }} />
                    {MONTHS.map((m) => <col key={m} />)}
                    <col style={{ width: "80px" }} />
                  </colgroup>
                  <thead>
                    <tr>
                      <th className="text-left text-[9.5px] font-semibold uppercase tracking-wider text-subtlefg px-3 py-2">Year</th>
                      {MONTHS.map((m) =>
                      <th key={m} className="text-center text-[9.5px] font-semibold uppercase tracking-wider text-subtlefg px-1 py-2">{m}</th>
                      )}
                      <th className="text-right text-[9.5px] font-semibold uppercase tracking-wider text-subtlefg px-3 py-2">Total</th>
                    </tr>
                  </thead>
                  <tbody>
                    {HEATMAP_DATA.map((row, ri) => {
                      const total = totals[ri];
                      const totColor = cellColor(total, maxAbs * 8);
                      return (
                        <tr key={row.year}>
                          <td className="font-mono font-medium text-mutedfg px-3 py-1">{row.year}</td>
                          {row.months.map((v, i) => {
                            const c = cellColor(v, maxAbs);
                            return (
                              <td key={i} className="text-center font-mono font-medium tabular-nums"
                              style={{ background: c.bg, color: c.color, padding: "9px 2px", borderRadius: "4px", fontSize: 10 }}>
                                {fmtHeatmap(v)}
                              </td>);

                          })}
                          <td className="text-right font-mono font-bold tabular-nums"
                          style={{
                            background: (() => {
                              const intensity = Math.min(1, Math.abs(total) / maxAbsTotal);
                              const alpha = 0.30 + intensity * 0.65;
                              return total >= 0 ? `hsl(145 65% 38% / ${alpha})` : `hsl(0 70% 42% / ${alpha})`;
                            })(),
                            color: total >= 0 ? "hsl(145 70% 92%)" : "hsl(0 70% 95%)",
                            padding: "9px 12px", borderRadius: "4px", fontSize: 11
                          }}>
                            {fmtHeatmap(total)}
                          </td>
                        </tr>);

                    })}
                  </tbody>
                </table>
              </div>

              <div className="px-4 py-3 border-t border-border1 flex items-center justify-between text-[10.5px]">
                <span className="text-subtlefg">Best month: <span className="text-positive font-mono font-semibold">+$115,374</span> · Worst: <span className="text-negative font-mono font-semibold">-$28,453</span></span>
                <span className="text-subtlefg font-mono">7 years · 70 months · FIFO-matched</span>
              </div>
            </div>

            {/* Mini stats below */}
            <div className="grid grid-cols-3 gap-3 mt-4">
              <div className="card1 p-3">
                <div className="text-[10px] font-semibold uppercase tracking-wider text-subtlefg">Best Year</div>
                <div className="mt-1 font-mono text-xl font-bold text-positive">+$335,587</div>
                <div className="text-[10px] text-subtlefg">2026 · YTD</div>
              </div>
              <div className="card1 p-3">
                <div className="text-[10px] font-semibold uppercase tracking-wider text-subtlefg">Avg Monthly</div>
                <div className="mt-1 font-mono text-xl font-bold">+$10,468</div>
                <div className="text-[10px] text-subtlefg">Since Jun 2020</div>
              </div>
              <div className="card1 p-3">
                <div className="text-[10px] font-semibold uppercase tracking-wider text-subtlefg">Win Months</div>
                <div className="mt-1 font-mono text-xl font-bold text-primary">63%</div>
                <div className="text-[10px] text-subtlefg">44 / 70 months</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { MonthlyReturnsHeatmap });