// ── Spend Dashboard mock ──────────────────────────────────────────
function Spend() {
  // 30-day spend pattern, last 4 days projected
  const days = React.useMemo(() => {
    const seed = [12, 18, 14, 22, 28, 16, 20, 31, 24, 27, 19, 33, 22, 38, 29, 41, 27, 35, 30, 44, 36, 48, 33, 51, 39, 56, 42, 60, 48, 64];
    return seed;
  }, []);
  const max = Math.max(...days);

  const platforms = [
    { name: 'Claude',  mark: 'oklch(0.78 0.15 30)',  tok: '1.42M', usd: 18.40 },
    { name: 'ChatGPT', mark: 'oklch(0.74 0.16 165)', tok: '892K',  usd: 14.20 },
    { name: 'Gemini',  mark: 'oklch(0.74 0.14 260)', tok: '214K',  usd: 4.85 },
    { name: 'Cursor',  mark: 'oklch(0.86 0.17 200)', tok: '3.14M', usd: 21.30 },
  ];
  const total = platforms.reduce((a,p) => a + p.usd, 0);

  return (
    <section className="spend" id="spend">
      <div className="wrap">
        <span className="eyebrow">PART FOUR — The Ledger</span>
        <h2 className="h-section" style={{marginTop:'24px', maxWidth:'18ch'}}>
          Every <em>dollar</em>, every <em>token</em>, finally visible.
        </h2>

        <div className="spend-grid">
          <div className="spend-chart-card">
            <div className="spend-chart-head">
              <div>
                <div className="spend-chart-title">SPEND · LAST 30 DAYS</div>
                <div className="spend-chart-total" style={{marginTop:'12px'}}>
                  $<em>58</em>.<span style={{fontSize:'0.5em', color:'var(--fg-3)'}}>75</span>
                </div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="spend-chart-delta">↑ 32% VS LAST MONTH</div>
                <div style={{fontFamily:'var(--mono)', fontSize:'11px', color:'var(--fg-3)', marginTop:'6px', letterSpacing:'0.1em'}}>BURN RATE · $1.96 / DAY</div>
              </div>
            </div>
            <div className="spend-chart">
              {days.map((v, i) => (
                <div key={i}
                  className={`spend-bar ${i >= 26 ? 'muted' : ''}`}
                  style={{height: `${(v / max) * 100}%`}}
                  title={`Day ${i+1}: $${(v/10).toFixed(2)}`}
                ></div>
              ))}
            </div>
            <div className="spend-x">
              <span>30D AGO</span>
              <span style={{textAlign:'center'}}>3W</span>
              <span style={{textAlign:'center'}}>2W</span>
              <span style={{textAlign:'center'}}>1W</span>
              <span>TODAY</span>
            </div>
          </div>

          <div className="spend-list-card">
            <div className="spend-list-head">
              <div>
                <div className="spend-chart-title">BY PLATFORM</div>
                <div style={{fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'40px', color:'var(--fg)', marginTop:'12px', lineHeight:'1'}}>{formatUSD(total)}</div>
              </div>
            </div>
            <div className="spend-list">
              {platforms.map(p => (
                <div className="spend-row" key={p.name}>
                  <div className="spend-row-mark" style={{background: p.mark, boxShadow: `0 0 10px ${p.mark}`}}></div>
                  <div className="spend-row-name">{p.name}</div>
                  <div className="spend-row-tok">{p.tok} TOK</div>
                  <div className="spend-row-usd">{formatUSD(p.usd)}</div>
                </div>
              ))}
            </div>
            <div style={{marginTop:'24px', padding:'14px 16px', borderRadius:'12px', background:'oklch(0.80 0.16 65 / 0.10)', border:'1px solid oklch(0.80 0.16 65 / 0.3)', display:'flex', alignItems:'center', gap:'12px'}}>
              <span style={{width:'8px', height:'8px', borderRadius:'50%', background:'var(--amber)', boxShadow:'0 0 10px var(--amber)'}}></span>
              <span style={{fontFamily:'var(--mono)', fontSize:'11px', letterSpacing:'0.1em', color:'var(--amber)'}}>80% OF $80 CAP REACHED — TOKI WILL PING YOU</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Spend = Spend;