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">
            <div className="grid grid-cols-2 gap-x-8 gap-y-3">
              <div className="flex justify-between items-center">
                <span className="font-semibold">🥇 1st Place</span>
                <span className="text-xl font-bold">100 pts</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="font-semibold">🥈 2nd Place</span>
                <span className="text-xl font-bold">70 pts</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="font-semibold">🥉 3rd Place</span>
                <span className="text-xl font-bold">50 pts</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="font-semibold">4th Place</span>
                <span className="text-xl font-bold">40 pts</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="font-semibold">5th Place</span>
                <span className="text-xl font-bold">25 pts</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="font-semibold">6th Place</span>
                <span className="text-xl font-bold">25 pts</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="font-semibold">7th Place</span>
                <span className="text-xl font-bold">15 pts</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="font-semibold">8th Place</span>
                <span className="text-xl font-bold">15 pts</span>
              </div>
            </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 & Counter-Strike
          </h2>
          <p className="text-lg text-muted-foreground mb-4">
            Golf, tennis, and Counter-Strike work a bit differently since they
            each have multiple major tournaments throughout the year:
          </p>
          <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
            <li>
              Players/teams 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 by total qualifying points then earn the regular scoring
              points (100, 70, 50, 40, 25, 25, 15, 15)
            </li>
            <li>This rewards consistency across all the major tournaments!</li>
          </ul>
          <div className="bg-muted p-4 rounded-lg mt-4">
            <p className="font-semibold mb-2">Qualifying points per major:</p>
            <div className="grid grid-cols-2 gap-1 text-sm text-muted-foreground">
              <span>1st Place</span><span className="font-medium">8 QP</span>
              <span>2nd Place</span><span className="font-medium">5 QP</span>
              <span>3rd Place</span><span className="font-medium">3 QP</span>
              <span>4th Place</span><span className="font-medium">2 QP</span>
              <span>5th Place</span><span className="font-medium">1 QP</span>
            </div>
          </div>
        </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>
  );
}