Clarify how-it-works steps and fixes

frontend/app/how-it-works/page.tsx

@@ -75,6 +75,62 @@ export default function HowItWorksPage() {
         </ol>
       </section>
 
+      <section className="how-flow">
+        <h2>Steps and fixes (simple and visual)</h2>
+        <div className="how-step-grid">
+          <article className="how-step-card step-jellyseerr">
+            <div className="step-badge">1</div>
+            <h3>Request sent</h3>
+            <p className="step-note">Jellyseerr holds your request and approval.</p>
+            <div className="step-fix-title">Fixes you can try</div>
+            <ul className="step-fix-list">
+              <li>Add to library queue (if it was approved but never added)</li>
+            </ul>
+          </article>
+
+          <article className="how-step-card step-arr">
+            <div className="step-badge">2</div>
+            <h3>Added to the library list</h3>
+            <p className="step-note">Sonarr/Radarr decide what quality to get.</p>
+            <div className="step-fix-title">Fixes you can try</div>
+            <ul className="step-fix-list">
+              <li>Search for releases (see options)</li>
+              <li>Search and auto-download (let it pick for you)</li>
+            </ul>
+          </article>
+
+          <article className="how-step-card step-prowlarr">
+            <div className="step-badge">3</div>
+            <h3>Searching for sources</h3>
+            <p className="step-note">Prowlarr checks your torrent providers.</p>
+            <div className="step-fix-title">Fixes you can try</div>
+            <ul className="step-fix-list">
+              <li>Search for releases (show a list to choose)</li>
+            </ul>
+          </article>
+
+          <article className="how-step-card step-qbit">
+            <div className="step-badge">4</div>
+            <h3>Downloading the file</h3>
+            <p className="step-note">qBittorrent downloads the selected match.</p>
+            <div className="step-fix-title">Fixes you can try</div>
+            <ul className="step-fix-list">
+              <li>Resume download (only if it already exists there)</li>
+            </ul>
+          </article>
+
+          <article className="how-step-card step-jellyfin">
+            <div className="step-badge">5</div>
+            <h3>Ready to watch</h3>
+            <p className="step-note">Jellyfin shows it in your library.</p>
+            <div className="step-fix-title">What to do next</div>
+            <ul className="step-fix-list">
+              <li>Open in Jellyfin (watch it)</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+
       <section className="how-callout">
         <h2>Why Magent sometimes says "waiting"</h2>
         <p>
@@ -82,32 +138,6 @@ export default function HowItWorksPage() {
           That does not mean it is broken. It usually means the release is not available yet.
         </p>
       </section>
-
-      <section className="how-flow">
-        <h2>Fix buttons and what they do</h2>
-        <ul className="how-steps">
-          <li>
-            <strong>Search for releases</strong> checks the torrent sources (via Prowlarr) and shows
-            you a list you can choose from.
-          </li>
-          <li>
-            <strong>Download selected release</strong> sends the pick to Sonarr/Radarr so it can
-            download and import it correctly.
-          </li>
-          <li>
-            <strong>Search and auto-download</strong> asks Sonarr/Radarr to find the best match and
-            grab it automatically.
-          </li>
-          <li>
-            <strong>Resume download</strong> tells qBittorrent to continue a paused download when it
-            is already there.
-          </li>
-          <li>
-            <strong>Add to library queue</strong> re-adds the request into Sonarr/Radarr when it is
-            missing there.
-          </li>
-        </ul>
-      </section>
     </main>
   )
 }