brackt/app/components/marketing/ScoringTables.tsx

interface TableProps {
  className?: string;
}

export function ScoringPointsTable({ className }: TableProps) {
  return (
    <div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
      <table className="w-full text-sm">
        <caption className="sr-only">Scoring points by finish position</caption>
        <thead>
          <tr className="border-b border-border">
            <th scope="col" className="text-left p-3 font-semibold text-foreground">Finish</th>
            <th scope="col" 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>
  );
}

export function QualifyingPointsTable({ className }: TableProps) {
  return (
    <div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
      <table className="w-full text-sm">
        <caption className="sr-only">Qualifying points by major finish position</caption>
        <thead>
          <tr className="border-b border-border">
            <th scope="col" className="text-left p-3 font-semibold text-foreground">Major Finish</th>
            <th scope="col" 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>
  );
}