'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-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 &quot;waiting&quot;</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>
  )
}