'use client'

export default function HowItWorksPage() {
  return (
    <main className="card how-page">
      <header className="how-hero">
        <p className="eyebrow">How this works</p>
        <h1>Your request, step by step</h1>
        <p className="lede">
          Think of Magent as a status tracker. It checks a few helper apps that do different jobs,
          then tells you where your request is stuck and what you can safely try next.
        </p>
      </header>

      <section className="how-grid">
        <article className="how-card">
          <h2>Jellyseerr</h2>
          <p className="how-title">The request box</p>
          <p>
            This is where you ask for a movie or show. It records your request and keeps track of
            approvals.
          </p>
        </article>
        <article className="how-card">
          <h2>Sonarr / Radarr</h2>
          <p className="how-title">The librarian</p>
          <p>
            These apps add the item to the library, decide what quality to grab, and look for the
            files that match your request.
          </p>
        </article>
        <article className="how-card">
          <h2>Prowlarr</h2>
          <p className="how-title">The search helper</p>
          <p>
            This one checks your torrent sources and reports back what it found, or if nothing is
            available yet.
          </p>
        </article>
        <article className="how-card">
          <h2>qBittorrent</h2>
          <p className="how-title">The downloader</p>
          <p>
            If a file is found, this app downloads it. Magent can tell if it is actively
            downloading, stalled, or finished.
          </p>
        </article>
      </section>

      <section className="how-flow">
        <h2>The pipeline in plain English</h2>
        <ol className="how-steps">
          <li>
            <strong>You request a title</strong> in Jellyseerr.
          </li>
          <li>
            <strong>Sonarr/Radarr adds it</strong> to the library list and asks Prowlarr to search.
          </li>
          <li>
            <strong>Prowlarr looks for sources</strong> and sends results back.
          </li>
          <li>
            <strong>qBittorrent downloads</strong> the best match.
          </li>
          <li>
            <strong>Sonarr/Radarr imports</strong> it into your library.
          </li>
          <li>
            <strong>Jellyfin shows it</strong> when it is ready to watch.
          </li>
        </ol>
      </section>

      <section className="how-callout">
        <h2>Why Magent sometimes says "waiting"</h2>
        <p>
          If the search helper cannot find a match yet, Magent will say there is nothing to grab.
          This does not mean something is broken. It usually means the release is not available
          yet or your search sources do not have it.
        </p>
      </section>
    </main>
  )
}