export default function DashboardFixture() {
  return (
    <div>
      <div className="admin-page-header">
        <div>
          <h1 className="admin-page-title">Dashboard</h1>
          <p className="admin-page-subtitle">Přehled</p>
        </div>
      </div>
      <div
        className="dash-kpi-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: "1rem",
          marginBottom: "1rem",
        }}
      >
        {["Nabídky", "Objednávky", "Faktury", "Projekty"].map((label, i) => (
          <div
            key={i}
            className="dash-kpi-card"
            style={{
              padding: "1.25rem",
              borderRadius: 10,
              background: "var(--bg-secondary)",
            }}
          >
            <div style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>
              {label}
            </div>
            <div style={{ fontSize: "1.5rem", fontWeight: 600 }}>12</div>
            <div style={{ fontSize: "0.75rem" }}>tento měsíc</div>
          </div>
        ))}
      </div>
      <div
        className="dash-quick-actions"
        style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}
      >
        {["Nová nabídka", "Nová faktura", "Zapsat docházku"].map((label, i) => (
          <button
            key={i}
            className="admin-btn admin-btn-secondary"
            style={{ flex: 1 }}
          >
            {label}
          </button>
        ))}
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr",
          gap: "1rem",
          marginBottom: "1rem",
        }}
      >
        <div className="admin-card" style={{ minHeight: 320 }}>
          <div className="admin-card-body">
            <h3 className="admin-card-title">Docházka dnes</h3>
            <div style={{ height: 200 }} />
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
          <div className="admin-card" style={{ minHeight: 150 }}>
            <div className="admin-card-body">
              <h3 className="admin-card-title">Aktivita</h3>
            </div>
          </div>
          <div className="admin-card" style={{ minHeight: 150 }}>
            <div className="admin-card-body">
              <h3 className="admin-card-title">Profil</h3>
            </div>
          </div>
        </div>
      </div>
      <div
        style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}
      >
        <div className="admin-card" style={{ minHeight: 200 }}>
          <div className="admin-card-body">
            <h3 className="admin-card-title">Relace</h3>
          </div>
        </div>
        <div className="admin-card" style={{ minHeight: 200 }}>
          <div className="admin-card-body">
            <h3 className="admin-card-title">Poslední aktivity</h3>
          </div>
        </div>
      </div>
    </div>
  );
}