export default function ChapterSuccess({
  chapter,
  result,
  isFinal,
  onContinue
}) {
  return (
    <main className="chapter-success" aria-labelledby="chapter-success-title">
      <div className="success-grid" aria-hidden="true" />
      <div className="success-particles" aria-hidden="true">
        {Array.from({ length: 12 }, (_, index) => (
          <span
            key={index}
            style={{
              "--particle-x": `${8 + index * 7.4}%`,
              "--particle-rotate": `${index * 23}deg`,
              "--particle-delay": `${index * 45}ms`
            }}
          />
        ))}
      </div>

      <section className="chapter-success-card" aria-live="polite">
        <div className="success-orbit" aria-hidden="true">
          <span>✓</span>
        </div>

        <p className="project-label">
          KAPITEL {chapter.number} // MODUL ONLINE
        </p>
        <h1 id="chapter-success-title">{chapter.success.headline}</h1>
        <p className="chapter-success-summary">{chapter.success.summary}</p>

        <div className="success-skills" aria-label="Gelernte Schwerpunkte">
          {chapter.success.skills.map((skill) => (
            <span key={skill}>✓ {skill}</span>
          ))}
        </div>

        <div className="chapter-success-stats">
          <div>
            <span>Gelöst</span>
            <strong>
              {result.completed}/{result.total}
            </strong>
          </div>
          <div>
            <span>Ohne Hilfe</span>
            <strong>{result.clean}</strong>
          </div>
          <div>
            <span>Korrigiert</span>
            <strong>{result.mistakes}</strong>
          </div>
          <div>
            <span>Hinweise</span>
            <strong>{result.hints}</strong>
          </div>
        </div>

        <button type="button" onClick={onContinue}>
          {isFinal
            ? "Gesamtsystem hochfahren →"
            : `Weiter zu Kapitel ${String(Number(chapter.number) + 1).padStart(2, "0")} →`}
        </button>
      </section>
    </main>
  );
}
