function Dashboard({ requests }) {
  const total     = requests.length;
  const isNew     = requests.filter((r) => r.status === 'new').length;
  const active    = requests.filter((r) => r.status === 'in_progress').length;
  const completed = requests.filter((r) => r.status === 'completed').length;

  const recent = [...requests]
    .sort((a, b) => new Date(b.updated_at || b.updatedAt) - new Date(a.updated_at || a.updatedAt))
    .slice(0, 6);

  return (
    <div>
      <h1 className="page-title">Dashboard</h1>
      <p className="page-subtitle">System overview</p>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-card__label">Total Requests</div>
          <div className="stat-card__value">{total}</div>
        </div>
        <div className="stat-card stat-card--accent">
          <div className="stat-card__label">New</div>
          <div className="stat-card__value">{isNew}</div>
          <div className="stat-card__delta">awaiting action</div>
        </div>
        <div className="stat-card">
          <div className="stat-card__label">In Progress</div>
          <div className="stat-card__value">{active}</div>
        </div>
        <div className="stat-card">
          <div className="stat-card__label">Completed</div>
          <div className="stat-card__value">{completed}</div>
        </div>
      </div>

      <div className="table-wrap">
        <div className="table-header">
          <span className="table-header__label">Recent Activity</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>Client</th>
              <th>Service</th>
              <th>Timeline</th>
              <th>Status</th>
              <th>Updated</th>
            </tr>
          </thead>
          <tbody>
            {recent.length === 0 && (
              <tr>
                <td colSpan="5" className="td-muted" style={{ textAlign: 'center', padding: 'var(--space-8)' }}>
                  No requests yet
                </td>
              </tr>
            )}
            {recent.map((r) => (
              <tr key={r.id}>
                <td data-label="Client">
                  <div>
                    <div>{r.name}</div>
                    <div className="td-muted" style={{ fontSize: 'var(--fs-caption)' }}>{r.email}</div>
                  </div>
                </td>
                <td data-label="Service" className="td-muted">{r.service}</td>
                <td data-label="Timeline" className="td-muted td-hide-mobile">{r.timeline || '—'}</td>
                <td data-label="Status">
                  <span className={`pill pill--${r.status}`}>
                    {r.status.replace('_', ' ')}
                  </span>
                </td>
                <td data-label="Updated" className="td-muted">{new Date(r.updated_at || r.updatedAt).toLocaleDateString()}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}