brackt/app/routes/how-to-play.tsx

import { Link } from "react-router";
import { Button } from "app/components/ui/button";

export function meta() {
  return [
    { title: "How To Play - Brackt" },
    {
      name: "description",
      content:
        "Learn how to play Brackt and compete in multi-sport fantasy leagues",
    },
  ];
}

export default function HowToPlay() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <h1 className="text-4xl font-bold mb-2">How To Play</h1>
      <p className="text-lg text-muted-foreground mb-10">
        Brackt is a multi-sport fantasy league where you draft athletes and
        teams across dozens of sports, then watch your roster compete all year
        long. Here's everything you need to know to get started.
      </p>

      <div className="space-y-10">

        {/* The Big Picture */}
        <section>
          <h2 className="text-2xl font-semibold mb-3">The Big Picture</h2>
          <p className="text-muted-foreground">
            Before the season starts, everyone in the league participates in a
            draft by picking real teams (and athletes in individual sports) across a set of sports
            chosen by your commissioner. Over the following months, those picks
            compete in their actual seasons. When it's all said and done,
            whoever earned the most points from their picks wins.
          </p>
        </section>

        {/* Building Your Roster */}
        <section>
          <h2 className="text-2xl font-semibold mb-3">Building Your Roster</h2>
          <p className="text-muted-foreground mb-4">
            Your league includes a set of sports selected by the commissioner, such as
            the NFL, NBA, Golf, Formula 1, Tennis, and more. Your roster has
            one dedicated spot for each sport, so you need to draft at least
            one pick from every sport in the league.
          </p>
          <p className="text-muted-foreground mb-4">
            Extra draft rounds beyond the number of sports create{" "}
            <span className="font-semibold text-foreground">flex spots</span>.
            Flex picks can come from any sport. These are great for grabbing a
            second (or even a third and a fourth!) player in a sport where you
            see value, or doubling down on a safe bet. How you use your flex
            spots can be the difference between winning the league and
            finishing at the bottom of the table.
          </p>
          <div className="bg-muted rounded-lg p-4 text-sm text-muted-foreground">
            <p>
              <span className="font-semibold text-foreground">Example:</span>{" "}
              Your league has 20 sports and 24 draft rounds. That means you
              fill 20 dedicated sport spots and have 4 flex picks to use
              however you like.
            </p>
          </div>
        </section>

        {/* How Points Work */}
        <section>
          <h2 className="text-2xl font-semibold mb-3">How Points Work</h2>
          <p className="text-muted-foreground mb-4">
            Points are awarded based on where your picks finish: 1st through
            8th. The better they finish, the more you earn. Your commissioner
            can adjust point values before the draft, but here's what a typical
            league looks like:
          </p>
          <div className="bg-muted rounded-lg overflow-hidden mb-4">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border">
                  <th className="text-left p-3 font-semibold text-foreground">
                    Finish
                  </th>
                  <th className="text-right p-3 font-semibold text-foreground">
                    Points
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                <tr>
                  <td className="p-3">1st Place</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    100
                  </td>
                </tr>
                <tr>
                  <td className="p-3">2nd Place</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    70
                  </td>
                </tr>
                <tr>
                  <td className="p-3">3rd Place</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    50
                  </td>
                </tr>
                <tr>
                  <td className="p-3">4th Place</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    40
                  </td>
                </tr>
                <tr>
                  <td className="p-3">5th–6th Place</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    25
                  </td>
                </tr>
                <tr>
                  <td className="p-3">7th–8th Place</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    15
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <p className="text-sm text-muted-foreground">
            If nobody in your league drafted a team that finishes in the top 8,
            those points aren't awarded to anyone in your league. In other
            words, if no one picks Indiana to win the NCAA Football
            championship, the manager who drafted Miami, the team that lost to
            them, still only would receive the 2nd place points.
          </p>
        </section>

        {/* Major-Based Sports */}
        <section>
          <h2 className="text-2xl font-semibold mb-3">Sports with Majors</h2>
          <p className="text-muted-foreground mb-4">
            Some sports don't have a single championship, they have multiple
            major tournaments spread throughout the year. Classic examples are
            golf and tennis, but other sports may be scored by majors as well.
            You can see on your league pages how each sport is scored. For
            these sports with majors,
            players earn{" "}
            <span className="font-semibold text-foreground">
              qualifying points (QP)
            </span>{" "}
            at each one:
          </p>
          <div className="bg-muted rounded-lg overflow-hidden mb-4">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border">
                  <th className="text-left p-3 font-semibold text-foreground">
                    Major Finish
                  </th>
                  <th className="text-right p-3 font-semibold text-foreground">
                    Qualifying Points
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                <tr>
                  <td className="p-3">1st</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    20 QP
                  </td>
                </tr>
                <tr>
                  <td className="p-3">2nd</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    14 QP
                  </td>
                </tr>
                <tr>
                  <td className="p-3">3rd</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    10 QP
                  </td>
                </tr>
                <tr>
                  <td className="p-3">4th</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    8 QP
                  </td>
                </tr>
                <tr>
                  <td className="p-3">5th–6th</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    5 QP
                  </td>
                </tr>
                <tr>
                  <td className="p-3">7th–8th</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    3 QP
                  </td>
                </tr>
                <tr>
                  <td className="p-3">9th–12th</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    2 QP
                  </td>
                </tr>
                <tr>
                  <td className="p-3">13th–16th</td>
                  <td className="p-3 text-right font-semibold text-foreground">
                    1 QP
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <p className="text-muted-foreground">
            QP don't go straight to your score — they determine the final
            ranking within that sport. Once all the majors are done, total QP
            are added up, and whoever's ranked 1st through 8th earns the
            standard league points. Consistency across majors is the key.
          </p>
        </section>

        {/* The Draft Room */}
        <section>
          <h2 className="text-2xl font-semibold mb-3">The Draft Room</h2>
          <p className="text-muted-foreground mb-6">
            Because Brackt is a "draft and done" league, the draft is your only
            opportunity to take action. Once the final pick is made, your roster
            is locked for the entire year. There are no trades, waivers, or
            mid-season pickups. Your success depends entirely on the strategy
            you execute during the draft.
          </p>

          {/* Timing Mechanics */}
          <div className="space-y-3 mb-6">
            <h3 className="text-lg font-semibold">Timing Mechanics</h3>
            <p className="text-muted-foreground">
              The draft uses a snake format where the pick order reverses every
              round. You can configure the timing of the draft using one of two
              primary mechanics:
            </p>
            <ul className="space-y-2 text-muted-foreground pl-4">
              <li>
                <span className="font-semibold text-foreground">
                  Standard Clock:
                </span>{" "}
                A traditional fixed countdown (such as 60 seconds per pick). It
                is a straightforward and consistent pace.
              </li>
              <li>
                <span className="font-semibold text-foreground">
                  Chess Clock (Fischer Increment):
                </span>{" "}
                This system uses a Time Bank and an Increment. You start with a
                pool of time (for example, 2 minutes). Each time you make a
                pick, a set bonus like 15 seconds is added back to your bank.
                This allows you to pick quickly in the early rounds to save up
                time for more difficult decisions later on.
              </li>
            </ul>
          </div>

          {/* Flexible Pacing */}
          <div className="space-y-3 mb-6">
            <h3 className="text-lg font-semibold">Flexible Pacing</h3>
            <p className="text-muted-foreground">
              These mechanics can be applied to any draft speed. Whether you
              want to finish in an hour or over the course of a week, the system
              scales to your needs:
            </p>
            <ul className="space-y-2 text-muted-foreground pl-4">
              <li>
                <span className="font-semibold text-foreground">
                  Live Drafts:
                </span>{" "}
                Uses short timers (seconds or minutes) for a fast-paced,
                single-session event.
              </li>
              <li>
                <span className="font-semibold text-foreground">
                  Slow Drafts:
                </span>{" "}
                Uses extended timers (hours) for leagues that want to draft over
                several days. Slow drafts include a customizable{" "}
                <span className="font-semibold text-foreground">
                  Overnight Pause
                </span>
                . The commissioner sets a uniform window (such as 10:00 PM to
                8:00 AM) where the clock stops for everyone. This ensures no one
                is forced to make a pick in the middle of the night.
              </li>
            </ul>
          </div>

          {/* Queue and Autodraft */}
          <div className="space-y-3">
            <h3 className="text-lg font-semibold">Queue and Autodraft</h3>
            <p className="text-muted-foreground">
              To keep the draft moving regardless of the pace, you can use the{" "}
              <span className="font-semibold text-foreground">Draft Queue</span>{" "}
              to pre-rank your targets. If your clock expires, the system
              automatically selects the highest available player from your
              queue. If your queue is empty, the system will select the
              highest-ranked athlete remaining in the pool to ensure the draft
              never stalls.
            </p>
          </div>
        </section>

        {/* During the Season */}
        <section>
          <h2 className="text-2xl font-semibold mb-3">After the Draft</h2>
          <p className="text-muted-foreground mb-4">
            Once the draft ends, your roster is locked. No trades, no waivers,
            no pickups. Just watch your picks compete across the year and see
            how your draft decisions play out. Points accumulate as sports
            seasons wrap up, and standings update in real time.
          </p>
          <p className="text-muted-foreground">
            If there's a tie in the final standings, it's broken by who has
            more 1st-place finishes. If that's still a tie, it goes to
            2nd-place finishes, then 3rd, and so on.
          </p>
        </section>

        {/* Links */}
        <section className="flex flex-col sm:flex-row gap-4 items-center justify-between pt-2">
          <p className="text-muted-foreground">
            Want the full breakdown? Read the{" "}
            <Link
              to="/rules"
              className="underline underline-offset-4 hover:text-foreground transition-colors"
            >
              official rules
            </Link>
            .
          </p>
          <Button asChild size="lg">
            <Link to="/leagues/new">Create a League</Link>
          </Button>
        </section>

      </div>
    </div>
  );
}