Styled Card - Copy this React, Mui Component to your project

Crie um widget de dashboard moderno e minimalista para gestão esportiva, mostrando disponibilidade de quadras. Deve incluir: Design: Cartão retangular branco com bordas arredondadas (16:9), sombra sutil, fonte 'Inter' ou similar Cabeçalho: Ícone de quadra (🏐) + título 'Disponibilidade de Quadras' em azul escuro (#2E3A59), botão de filtro no canto Métricas Principais (em 3 colunas): Total de Horários: Número '128' grande (32px), label 'Horários disponíveis', badge verde (+2% hoje) Quadras Livres: Número '8/10' com barra de progresso horizontal (80% verde, 20% cinza) Ocupação: Gráfico donut laranja (65%) com número central e fundo cinza claro Rodapé: 3 mini-cards (hoje/semana/mês) com: Ícones de calendário 📅 Métricas ('82 horários', '78% ocupação', '68% disponível') Variações (setas ▲▼ coloridas + porcentagens) Estilo: Flat design, cores profissionais (azul/verde/laranja), espaçamento balanceado Contexto: Fundo do dashboard em cinza muito claro (#F5F7FA) para contrastar" Dicas para refinamento: Adicione "UI/UX design, clean analytics style, 4k detailed" para melhor qualidade Para versão dark mode: especifique "dark theme with neon metrics (#00E676/#FF9100)" Se quiser elementos interativos: "add hover effects on buttons with subtle glow