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

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-8">How To Play</h1>

      <div className="space-y-8">
        <section>
          <h2 className="text-2xl font-semibold mb-4">🎯 The Goal</h2>
          <p className="text-lg text-muted-foreground">
            Draft teams and athletes across multiple sports and earn points
            based on how well they perform. The player with the most points at
            the end of the season wins!
          </p>
        </section>

        <section>
          <h2 className="text-2xl font-semibold mb-4">
            📋 Building Your Roster
          </h2>
          <p className="text-lg text-muted-foreground mb-4">
            Your roster has spots for different sports. You'll draft teams or
            individual athletes depending on the sport:
          </p>
          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
            <li>Each sport has at least one required spot on your roster</li>
            <li>
              You'll also get flex spots that can be filled with any sport you
              choose
            </li>
            <li>
              Pick wisely - you're stuck with your roster for the whole season!
            </li>
          </ul>
        </section>

        <section>
          <h2 className="text-2xl font-semibold mb-4">🏆 How Scoring Works</h2>
          <p className="text-lg text-muted-foreground mb-4">
            Points are awarded based on final standings. The better your pick
            finishes, the more points you earn:
          </p>
          <div className="bg-muted p-6 rounded-lg space-y-2">
            <div className="flex justify-between items-center">
              <span className="font-semibold">🥇 1st Place</span>
              <span className="text-xl font-bold">80 points</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="font-semibold">🥈 2nd Place</span>
              <span className="text-xl font-bold">50 points</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="font-semibold">🥉 3rd-4th Place</span>
              <span className="text-xl font-bold">30 points</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="font-semibold">5th-8th Place</span>
              <span className="text-xl font-bold">20 points</span>
            </div>
          </div>
          <p className="text-sm text-muted-foreground mt-4 italic">
            Note: If nobody drafted a team that finishes in the top 8, those
            points aren't awarded to anyone.
          </p>
        </section>

        <section>
          <h2 className="text-2xl font-semibold mb-4">
            ⛳ Special Scoring for Golf & Tennis
          </h2>
          <p className="text-lg text-muted-foreground mb-4">
            Golf and tennis work a bit differently since they have multiple
            major tournaments:
          </p>
          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
            <li>
              Players earn qualifying points at each major tournament throughout
              the year
            </li>
            <li>
              After all majors are complete, we add up everyone's qualifying
              points
            </li>
            <li>
              The top 8 players by total qualifying points then earn the regular
              scoring points (80, 50, 30, 20)
            </li>
            <li>This rewards consistency across all the major tournaments!</li>
          </ul>
        </section>

        <section>
          <h2 className="text-2xl font-semibold mb-4">🎲 The Draft</h2>
          <p className="text-lg text-muted-foreground mb-4">
            Before the season starts, you'll participate in a snake draft:
          </p>
          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
            <li>
              <strong>Snake draft</strong> means the order reverses each round
              (if you pick last in round 1, you pick first in round 2)
            </li>
            <li>You'll have a time limit to make each pick</li>
            <li>
              Once you draft a team or athlete, they're yours for the entire
              season
            </li>
            <li>No trading picks or players - choose carefully!</li>
          </ul>
        </section>

        <section>
          <h2 className="text-2xl font-semibold mb-4">📅 During the Season</h2>
          <p className="text-lg text-muted-foreground mb-4">
            Once the season starts, it's all about watching your picks compete:
          </p>
          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
            <li>No trades - your roster is locked in</li>
            <li>No waivers or free agent pickups</li>
            <li>Just sit back and cheer for your teams and athletes!</li>
          </ul>
        </section>

        <section className="bg-primary/5 p-6 rounded-lg border border-primary/20">
          <h2 className="text-2xl font-semibold mb-4">💡 Quick Tips</h2>
          <ul className="space-y-2 text-muted-foreground">
            <li>
              ✓ <strong>Diversify:</strong> Don't put all your eggs in one
              basket - spread your picks across different sports
            </li>
            <li>
              ✓ <strong>Know the format:</strong> Some sports score based on
              playoffs, others on regular season performance
            </li>
            <li>
              ✓ <strong>Draft early:</strong> The best teams and athletes go
              fast!
            </li>
            <li>
              ✓ <strong>Have fun:</strong> This is about enjoying sports across
              the calendar year
            </li>
          </ul>
        </section>

        <section className="text-center pt-8">
          <p className="text-xl text-muted-foreground mb-6">
            Ready to compete?
          </p>
          <a
            href="/leagues/new"
            className="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-11 px-8 text-base"
          >
            Create a League
          </a>
        </section>
      </div>
    </div>
  );
}