const STEPS = [
  {
    n: 1,
    title: "Excel-Upload",
    desc: "Lade Fächer, Kurse und Schülerwahlen als Excel-Dateien hoch. Schienengenerator validiert die Daten automatisch und meldet fehlende Spalten oder unbekannte Kurscodes, bevor irgendetwas berechnet wird.",
    bullets: ["Drag & Drop für .xlsx", "Schema-Validierung mit klaren Fehlermeldungen", "Optionale Geschlechterverteilung für Sport"],
    badge: "stage 1",
    icon: "upload_file",
    caption: "Screenshot: Datei-Upload-Dialog mit vier Slots (Schülerwahlen, Fächer, Kurse, Geschlechter)",
  },
  {
    n: 2,
    title: "Fachgruppen-Auswahl",
    desc: "Fasse Fächer zu Gruppen zusammen, die gemeinsam in einer Schiene laufen sollen — z.B. Bio + Chemie, Französisch + Spanisch. Pflicht- und Wahlfächer lassen sich getrennt gruppieren, einzelne Fächer (etwa Sport) per Setting ausschließen.",
    bullets: ["Vorschläge auf Basis der Wahlhäufigkeit", "Tabs für LK / GK und Pflicht / Wahl", "Einzelne Fächer per Setting ausschließen"],
    badge: "stage 2",
    icon: "category",
    caption: "Screenshot: Fachgruppen-Editor mit zusammenfassenden Pills",
  },
  {
    n: 3,
    title: "Schienengenerierung",
    desc: "Im Hintergrund kombiniert Schienengenerator ein Integer-Linear-Programm mit einem Greedy-Verfahren, um eine Auswahl plausibler Schienen-Kandidaten zu bauen. Pflichtkurse werden automatisch fixiert, optionale Kurse als Varianten angeboten.",
    bullets: ["ILP-Solver für harte Constraints", "Greedy-Fallback für große Jahrgänge", "Bis zu 32 Kandidaten parallel"],
    badge: "stage 3",
    icon: "memory",
    caption: "Screenshot: Fortschrittsanzeige der Pipeline mit drei Phasen",
  },
  {
    n: 4,
    title: "Optimierung",
    desc: "Simulated Annealing minimiert über zehntausende Iterationen Konflikte zwischen Kursen, Lehrkräften und Schienen — gleichzeitig auf allen Kandidaten. Du siehst live, wie die Konfliktzahl auf null kippt, und kannst jederzeit eingreifen.",
    bullets: ["Live-Visualisierung der Temperaturkurve", "Manuelles Verschieben einzelner Kurse", "Automatisches Speichern bei jedem Schritt"],
    badge: "stage 4",
    icon: "tune",
    caption: "Screenshot: Track-Menu mit drei Kandidaten-Karten und Konfliktbadges",
  },
  {
    n: 5,
    title: "Export",
    desc: "Übergib das Ergebnis als Excel-Mappe an die Schulleitung oder als XML direkt an WinSchool. Schülerbelegungen, Schienenbelegungen und eine druckbare Übersicht sind mit einem Klick fertig.",
    bullets: ["Excel-Belegung pro Schüler:in", "WinSchool-XML zum Direktimport", "Druckbares PDF für die Schulleitung"],
    badge: "stage 5",
    icon: "download",
    caption: "Screenshot: Export-Seite mit vier Optionen und Dateinamen-Vorschau",
  },
];

function Step({ s, reversed, idx }) {
  return (
    <article className={`step ${reversed ? "reverse" : ""}`}>
      <div className="step-body reveal">
        <div className="step-num">{String(s.n).padStart(2, "0")}</div>
        <h3>{s.title}</h3>
        <p>{s.desc}</p>
        <ul className="step-features">
          {s.bullets.map(b => (
            <li key={b}><Icon name="check_circle"/> {b}</li>
          ))}
        </ul>
      </div>
      <div className="step-art reveal delay-1" role="img" aria-label={s.caption}>
        <div className="ph">
          <span className="badge">{s.badge}</span>
          <Icon name={s.icon}/>
          <div className="caption">{s.caption}</div>
        </div>
      </div>
    </article>
  );
}

function Steps() {
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="steps-intro reveal">
          <span className="eyebrow"><Icon name="route"/> So funktioniert's</span>
          <h2 style={{marginTop: 14}}>Vom Excel-Stapel zur fertigen Schiene in fünf Schritten</h2>
          <p>Jeder Schritt eine Stage in der App, jeder Klick reversibel. Du behältst die Kontrolle, der Algorithmus übernimmt die Buchhaltung.</p>
        </div>
        <div style={{position: "relative"}}>
          <div className="step-rail" aria-hidden="true"/>
          {STEPS.map((s, i) => (
            <Step key={s.n} s={s} reversed={i % 2 === 1} idx={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Steps = Steps;