// Tax view
(function() {
  function Tax() {
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <div className="crumb">workspace<span className="sep">›</span>tax<span className="sep">›</span>fy 2026</div>
            <h1 className="display">Tax <span style={{ color: 'var(--fg-3)', fontStyle: 'italic', fontSize: 22 }}>· Q2 2026 estimated</span></h1>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 6, letterSpacing: '0.1em' }}>
              next deadline · Jun 16 · $22,140 estimated · 57 days remaining
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">Export 1099s</button>
            <button className="btn">Download Package</button>
            <button className="btn primary">File via EFTPS</button>
          </div>
        </div>

        <div className="g-4">
          <div className="metric">
            <span className="label">Federal · YTD</span>
            <span className="value">$48<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>,210</span></span>
            <div className="sub"><span style={{ color: 'var(--pos)' }}>paid Q1</span><span style={{ color: 'var(--fg-3)' }}>on time</span></div>
          </div>
          <div className="metric">
            <span className="label">State · CA</span>
            <span className="value">$12<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>,440</span></span>
            <div className="sub"><span style={{ color: 'var(--pos)' }}>paid Q1</span><span style={{ color: 'var(--fg-3)' }}>9.3% eff.</span></div>
          </div>
          <div className="metric">
            <span className="label">Est. Q2</span>
            <span className="value">$22<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>,140</span></span>
            <div className="sub"><span style={{ color: 'var(--cat-amber)' }}>due Jun 16</span><span style={{ color: 'var(--fg-3)' }}>57d</span></div>
          </div>
          <div className="metric">
            <span className="label">Effective Rate</span>
            <span className="value">24.8<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>%</span></span>
            <div className="sub"><span style={{ color: 'var(--pos)' }}>−1.2pp</span><span style={{ color: 'var(--fg-3)' }}>vs 2025</span></div>
          </div>
        </div>

        <div style={{ height: 'var(--gap)' }} />

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'var(--gap)' }}>
          <div className="panel">
            <div className="panel-head"><span className="panel-title">Deductible Expenses · auto-classified</span></div>
            <table className="data">
              <thead>
                <tr><th>Schedule</th><th>Category</th><th className="num">Amount</th><th className="num">Items</th><th>Docs</th></tr>
              </thead>
              <tbody>
                {[
                  ['Sch C · L8',   'Advertising',       2840.00, 11, 'complete'],
                  ['Sch C · L17',  'Legal & Professional', 8400.00, 4, 'complete'],
                  ['Sch C · L18',  'Office',            1240.50, 22, 'missing 2'],
                  ['Sch C · L20b', 'Rent (office)',     14400.00, 3, 'complete'],
                  ['Sch C · L21',  'Repairs',           320.00, 2, 'complete'],
                  ['Sch C · L22',  'Supplies',          480.00, 14, 'complete'],
                  ['Sch C · L24a', 'Travel',            3118.20, 8, 'complete'],
                  ['Sch C · L25',  'Utilities',         580.00, 4, 'complete'],
                  ['Sch C · L27',  'Other — SaaS',     21480.00, 42, 'complete'],
                  ['Sch C · L27',  'Other — Infra',    74920.00, 31, 'complete'],
                ].map((r, i) => (
                  <tr key={i}>
                    <td><span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>{r[0]}</span></td>
                    <td>{r[1]}</td>
                    <td className="num">${r[2].toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
                    <td className="num" style={{ color: 'var(--fg-2)' }}>{r[3]}</td>
                    <td>
                      <span className="chip" style={{ color: r[4] === 'complete' ? 'var(--pos)' : 'var(--cat-amber)', borderColor: r[4] === 'complete' ? 'color-mix(in oklch, var(--pos) 40%, transparent)' : 'color-mix(in oklch, var(--cat-amber) 40%, transparent)' }}>
                        {r[4]}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
            <div className="panel">
              <div className="panel-head"><span className="panel-title">Timeline · FY 2026</span></div>
              <div style={{ padding: 'var(--pad-x)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  ['Apr 15', 'Q1 2026 estimated', '$18,400', 'done', 'var(--pos)'],
                  ['Jun 16', 'Q2 2026 estimated', '$22,140', 'upcoming', 'var(--cat-amber)'],
                  ['Sep 15', 'Q3 2026 estimated', '$24,800', 'scheduled', 'var(--fg-2)'],
                  ['Jan 15', 'Q4 2026 estimated', '$28,200', 'scheduled', 'var(--fg-2)'],
                  ['Jan 31', '1099-NEC filings',  '—',       'scheduled', 'var(--fg-2)'],
                  ['Apr 15', 'FY 2026 return',    'TBD',     'scheduled', 'var(--fg-2)'],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr auto auto', gap: 10, alignItems: 'baseline', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                    <span style={{ color: r[4] }}>{r[0]}</span>
                    <span style={{ color: 'var(--fg-1)' }}>{r[1]}</span>
                    <span style={{ color: 'var(--fg-0)' }}>{r[2]}</span>
                    <span style={{ color: r[4], textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: 10 }}>{r[3]}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><span className="panel-title">1099-NEC · Contractors</span></div>
              <div style={{ padding: 'var(--pad-x)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-1)', lineHeight: 1.9 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>A. Obinna</span><span>$18,400</span><span style={{ color: 'var(--pos)' }}>w-9 ✓</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>M. Huang</span><span>$14,200</span><span style={{ color: 'var(--pos)' }}>w-9 ✓</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>R. Kapoor</span><span>$8,400</span><span style={{ color: 'var(--cat-amber)' }}>w-9 pending</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>J. Park Design</span><span>$6,240</span><span style={{ color: 'var(--pos)' }}>w-9 ✓</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  window.TaxView = Tax;
})();