'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">
          Magent is a friendly status checker. It looks at a few helper apps, then shows you where
          your request is and what you can safely do 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 keeps the request and whether it is
            approved.
          </p>
        </article>
        <article className="how-card">
          <h2>Sonarr / Radarr</h2>
          <p className="how-title">The library manager</p>
          <p>
            These add the request to the library list and decide what quality to look for.
          </p>
        </article>
        <article className="how-card">
          <h2>Prowlarr</h2>
          <p className="how-title">The search helper</p>
          <p>
            This checks your search sources and reports back what it finds.
          </p>
        </article>
        <article className="how-card">
          <h2>qBittorrent</h2>
          <p className="how-title">The downloader</p>
          <p>
            This downloads the file. Magent can tell if it is downloading, paused, or finished.
          </p>
        </article>
        <article className="how-card">
          <h2>Jellyfin</h2>
          <p className="how-title">The place you watch</p>
          <p>
            When the file is ready, Jellyfin shows it in your library so you can watch it.
          </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.
          </li>
          <li>
            <strong>Prowlarr looks for sources</strong> and sends results back.
          </li>
          <li>
            <strong>qBittorrent downloads</strong> the 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.
          That does not mean it is broken. It usually means the release is not available yet.
        </p>
      </section>
    </main>
  )
}