# Espace Activités Élèves

import { ActivityFilter } from "../src/components/ActivityFilter";
import { CycleBadge } from "../src/components/CycleBadge";
import { allActivities } from "../src/data/activities";

Bienvenue dans ton espace de programmation ! Choisis ton cycle ou explore les activités ci-dessous pour démarrer une mission immédiatement avec un projet déjà configuré.

---

## 🎯 Choisis ton niveau

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1rem', margin: '1.25rem 0' }}>

<div
  style={{
    border: "2px solid var(--sp-tip-border, #FEF08A)",
    backgroundColor: "var(--sp-tip-bg, #FEFCE8)",
    borderRadius: "12px",
    padding: "1.25rem",
    boxShadow: "var(--sp-card-shadow, 0 2px 4px rgba(0,0,0,0.03))",
  }}
>
  <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--sp-text-title, #0F172A)" }}>
    <CycleBadge cycle="1" /> Maternelle
  </h3>
  <p style={{ margin: "0 0 0.75rem 0", fontSize: "0.9rem", color: "var(--sp-tip-text, #713F12)" }}>
    <strong>PS, MS, GS</strong> • Activités corporelles sans écran et découverte guidée de
    ScratchJr.
  </p>
  <a
    href="/activites/cycle-1"
    style={{
      color: "var(--sp-tip-title, #CA8A04)",
      fontWeight: 800,
      textDecoration: "none",
      fontSize: "0.95rem",
    }}
  >
    Voir les 6 activités C1 →
  </a>
</div>

<div
  style={{
    border: "2px solid var(--sp-tryit-border, #BBF7D0)",
    backgroundColor: "var(--sp-tryit-bg, #F0FDF4)",
    borderRadius: "12px",
    padding: "1.25rem",
    boxShadow: "var(--sp-card-shadow, 0 2px 4px rgba(0,0,0,0.03))",
  }}
>
  <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--sp-text-title, #0F172A)" }}>
    <CycleBadge cycle="2" /> Élémentaire
  </h3>
  <p
    style={{
      margin: "0 0 0.75rem 0",
      fontSize: "0.9rem",
      color: "var(--sp-tryit-box-text, #14532D)",
    }}
  >
    <strong>CP, CE1, CE2</strong> • Premières animations, dialogues, boucles et labyrinthe au
    clavier.
  </p>
  <a
    href="/activites/cycle-2"
    style={{
      color: "var(--sp-tryit-title, #16A34A)",
      fontWeight: 800,
      textDecoration: "none",
      fontSize: "0.95rem",
    }}
  >
    Voir les 6 activités C2 →
  </a>
</div>

<div
  style={{
    border: "2px solid var(--sp-starter-border, #BFDBFE)",
    backgroundColor: "var(--sp-starter-bg, #EFF6FF)",
    borderRadius: "12px",
    padding: "1.25rem",
    boxShadow: "var(--sp-card-shadow, 0 2px 4px rgba(0,0,0,0.03))",
  }}
>
  <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--sp-text-title, #0F172A)" }}>
    <CycleBadge cycle="3" /> Consolidation
  </h3>
  <p
    style={{
      margin: "0 0 0.75rem 0",
      fontSize: "0.9rem",
      color: "var(--sp-starter-title, #1E3A8A)",
    }}
  >
    <strong>CM1, CM2, 6e</strong> • Coordonnées (X, Y), scores, capteurs et jeu de collecte complet.
  </p>
  <a
    href="/activites/cycle-3"
    style={{
      color: "var(--sp-starter-title, #2563EB)",
      fontWeight: 800,
      textDecoration: "none",
      fontSize: "0.95rem",
    }}
  >
    Voir les 6 activités C3 →
  </a>
</div>

<div
  style={{
    border: "2px solid var(--sp-bonus-border, #E9D5FF)",
    backgroundColor: "var(--sp-bonus-bg, #FAF5FF)",
    borderRadius: "12px",
    padding: "1.25rem",
    boxShadow: "var(--sp-card-shadow, 0 2px 4px rgba(0,0,0,0.03))",
  }}
>
  <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--sp-text-title, #0F172A)" }}>
    <CycleBadge cycle="4" /> Collège
  </h3>
  <p
    style={{ margin: "0 0 0.75rem 0", fontSize: "0.9rem", color: "var(--sp-bonus-text, #581C87)" }}
  >
    <strong>5e, 4e, 3e</strong> • Listes, clones, simulations scientifiques et transition vers
    Python.
  </p>
  <a
    href="/activites/cycle-4"
    style={{
      color: "var(--sp-bonus-title, #9333EA)",
      fontWeight: 800,
      textDecoration: "none",
      fontSize: "0.95rem",
    }}
  >
    Voir les 6 activités C4 →
  </a>
</div>

</div>

---

## 🔍 Toutes les 24 activités à explorer

Utilise les filtres ci-dessous pour trouver l'activité idéale selon ton temps, ton outil et tes envies :

<ActivityFilter initialActivities={allActivities} />