/* Clear Mint — Financial Health · Benchmarks. window.FHBench */
(function () {
  const I = window.CMIcon;
  const useC = () => React.useContext(window.FHTheme);
  const { FHCard, FHBar, FHSegmented, FHLine, FHRadar, FHBellCurve, FHChip } = window;
  const hexA = window.FHhexA;

  function BenchCard({ b, compare }) {
    const C = useC();
    const max = Math.max(b.you, b.benchmark, b.canadian) * 1.15 || 100;
    const rows = [
      { l: 'You', v: b.youFmt, raw: b.you, c: C.emerald },
      { l: compare, v: b.benchFmt, raw: b.benchmark, c: C.sub },
      { l: 'Canadian Average', v: b.canFmt, raw: b.canadian, c: C.gold }
    ];
    return React.createElement(FHCard, { pad: 18 },
      React.createElement('div', { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 12 } },
        React.createElement('span', { style: { fontSize: 13, fontWeight: 800, color: C.ink, display: 'inline-flex', alignItems: 'center', gap: 5 } }, b.label, React.createElement(I.Info, { size: 12, style: { color: C.mut } })),
        React.createElement('span', { style: { fontSize: 11, fontWeight: 800, color: C.emerald, textAlign: 'right', lineHeight: 1.3 } }, b.invert ? 'Better than' : 'Top', React.createElement('br'), b.top.replace('Top ', '').replace('Better than ', ''))),
      React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 3, marginBottom: 12 } },
        React.createElement('span', { className: 'num', style: { fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 700, color: C.ink } }, b.youFmt),
        React.createElement('span', { style: { fontSize: 12, color: C.sub, fontWeight: 600 } }, 'You')),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } },
        rows.map((r, i) => React.createElement('div', { key: i },
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr auto', gap: 6, alignItems: 'baseline', fontSize: 11.5, marginBottom: 5 } },
            React.createElement('span', { style: { color: i === 0 ? C.ink : C.sub, fontWeight: i === 0 ? 700 : 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, r.l),
            React.createElement('span', { className: 'num', style: { color: r.c === C.sub ? C.sub : r.c, fontWeight: 800 } }, r.v)),
          React.createElement(FHBar, { pct: Math.min(100, r.raw / max * 100), color: r.c, height: 6 })))));
  }

  function RankBadge({ ranking }) {
    const C = useC();
    return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
      ranking.map((t, i) => React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '11px 13px', borderRadius: 12, marginBottom: 2, background: t.current ? hexA(C.emerald, 0.12) : 'transparent', border: '1px solid ' + (t.current ? hexA(C.emerald, 0.35) : 'transparent') } },
        React.createElement('span', { style: { width: 26, height: 26, borderRadius: 999, background: t.reached ? C.emerald : C.track, color: t.reached ? '#fff' : C.mut, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, t.reached ? React.createElement(I.Check, { size: 14 }) : React.createElement('span', { style: { fontSize: 10, fontWeight: 800 } }, i + 1)),
        React.createElement('span', { style: { flex: 1, fontSize: 13, fontWeight: t.current ? 800 : 600, color: t.reached ? C.ink : C.mut } }, t.tier),
        t.current ? React.createElement('span', { style: { fontSize: 11, fontWeight: 800, color: C.emerald } }, 'You are here') : null)));
  }

  function FHBench({ data, compare }) {
    const C = useC();
    const bm = data.benchmarks;
    const [filter, setFilter] = React.useState('All');
    const x6 = data.trends.x6;
    const youCF = data.trends.netWorth.series.slice(-7);
    const simCF = youCF.map(v => Math.round(v * 0.72));

    const spendCats = [
      { l: 'Housing', you: 28, sim: 28 }, { l: 'Transport', you: 15, sim: 13 }, { l: 'Food & Dining', you: 13, sim: 15 },
      { l: 'Utilities', you: 8, sim: 7 }, { l: 'Shopping', you: 7, sim: 9 }, { l: 'Health', you: 5, sim: 5 }, { l: 'Entertainment', you: 4, sim: 4 }, { l: 'Other', you: 20, sim: 19 }
    ];

    return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 18 } },
      React.createElement('div', { style: { fontSize: 13, color: C.sub } }, 'Benchmarks are based on Canadian households with similar income, location, and household size.'),
      /* benchmark cards */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 14 }, className: 'fh-kpi6' }, bm.cards.map((b, i) => React.createElement(BenchCard, { key: i, b, compare }))),
      /* detailed */
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' } },
        React.createElement('span', { style: { fontFamily: 'var(--font-serif)', fontSize: 19, fontWeight: 700, color: C.ink } }, 'Detailed Benchmarks'),
        React.createElement(FHSegmented, { value: filter, onChange: setFilter, size: 'sm', options: ['All', 'Cash Flow', 'Debt', 'Savings', 'Investments', 'Protection'] })),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.15fr 1.15fr 1fr', gap: 16 }, className: 'fh-3col' },
        React.createElement(FHCard, { title: 'Cash Flow: You vs Households', info: true },
          React.createElement('div', { style: { fontSize: 12.5, marginBottom: 8 } }, React.createElement('span', { style: { color: C.sub } }, 'You save '), React.createElement('b', { style: { color: C.emerald } }, '$2,450/mo'), React.createElement('span', { style: { color: C.sub } }, ' vs $1,320 similar')),
          React.createElement(FHLine, { height: 210, money: true, x: x6, series: [{ name: 'You', data: youCF.slice(-6), color: C.emerald, dots: true }, { name: compare, data: simCF.slice(-6), color: C.sub, fill: false, dots: true }] })),
        React.createElement(FHCard, { title: 'Spending by Category', info: true },
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 11, marginTop: 2 } },
            spendCats.map((s, i) => React.createElement('div', { key: i, style: { display: 'grid', gridTemplateColumns: '78px 1fr 38px', gap: 9, alignItems: 'center' } },
              React.createElement('span', { style: { fontSize: 11.5, color: C.sub, fontWeight: 600 } }, s.l),
              React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 3 } }, React.createElement(FHBar, { pct: s.you / 30 * 100, color: C.emerald, height: 6 }), React.createElement(FHBar, { pct: s.sim / 30 * 100, color: C.sub, height: 6 })),
              React.createElement('span', { className: 'num', style: { fontSize: 11.5, color: C.ink, fontWeight: 800, textAlign: 'right' } }, s.you + '%')))),
          React.createElement('div', { style: { display: 'flex', gap: 14, marginTop: 12, fontSize: 11, color: C.sub } }, React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 5 } }, React.createElement('span', { style: { width: 9, height: 9, borderRadius: 3, background: C.emerald } }), 'You'), React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 5 } }, React.createElement('span', { style: { width: 9, height: 9, borderRadius: 3, background: C.sub } }), compare))),
        React.createElement(FHCard, { title: 'Your Percentile Rankings', info: true },
          React.createElement(FHRadar, { height: 300, axes: bm.radar, datasets: [{ name: 'You', values: bm.radar.map(r => r.you), color: C.emerald }, { name: compare, values: bm.radar.map(r => r.bench), color: C.gold, dashed: true, fill: false }] }))),
      /* distributions */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }, className: 'fh-3col' },
        bm.distributions.map((d, i) => {
          const youPct = Math.min(0.92, Math.max(0.08, d.you / d.max));
          return React.createElement(FHCard, { key: i, title: d.label, info: true },
            React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 } },
              React.createElement('span', { className: 'num', style: { fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 700, color: C.emerald } }, d.fmt(d.you)),
              React.createElement('span', { style: { fontSize: 11.5, color: C.sub } }, 'You · ', d.youTop)),
            React.createElement('div', { style: { display: 'flex', gap: 14, fontSize: 11, color: C.sub, marginBottom: 4 } },
              React.createElement('span', null, compare + ': ', React.createElement('b', { style: { color: C.ink } }, d.fmt(d.similar))),
              React.createElement('span', null, 'Avg: ', React.createElement('b', { style: { color: C.gold } }, d.fmt(d.canadian)))),
            React.createElement(FHBellCurve, { youPct, ticks: d.ticks, youTop: d.youTop, color: C.emerald }));
        })),
      /* ranking + insights */
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 16 }, className: 'fh-2col' },
        React.createElement(FHCard, { title: 'Financial Health Ranking', info: true }, React.createElement(RankBadge, { ranking: bm.ranking })),
        React.createElement(FHCard, { title: 'AI Insights', info: true, right: React.createElement('span', { style: { fontSize: 11, color: C.gold, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 } }, React.createElement(I.Spark, { size: 13 }), 'Generated') },
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
            bm.insights.map((ins, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 12, padding: '13px 0', borderBottom: i < bm.insights.length - 1 ? '1px solid ' + C.line : 'none' } },
              React.createElement('span', { style: { width: 30, height: 30, borderRadius: 9, background: hexA(C.emerald, 0.14), color: C.emerald, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, React.createElement(I.Check, { size: 16 })),
              React.createElement('div', { style: { fontSize: 13, color: C.ink, lineHeight: 1.55, paddingTop: 5 } }, ins)))))),
      /* footer */
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, background: C.panel2, border: '1px solid ' + C.line, borderRadius: 16, padding: '18px 22px', flexWrap: 'wrap' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 14 } },
          React.createElement('span', { style: { width: 40, height: 40, borderRadius: 11, background: hexA(C.gold, 0.16), color: C.gold, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(I.Spark, { size: 20 })),
          React.createElement('div', null, React.createElement('div', { style: { fontWeight: 800, fontSize: 14, color: C.ink } }, 'How benchmarks work'), React.createElement('div', { style: { fontSize: 12.5, color: C.sub, marginTop: 2, maxWidth: 620 } }, 'We compare you to Canadian households with similar income, location, and household size. Benchmarks are updated quarterly using StatsCan and industry data.'))),
        React.createElement('span', { style: { fontSize: 11.5, color: C.mut } }, 'Source: Statistics Canada, FCAC, and industry partners')));
  }
  window.FHBench = FHBench;
})();