const rules = [
  {
    title: "General Betting Rules",
    content: "All bets are subject to Fortune's terms and conditions. By placing a bet, you agree to abide by these rules. The minimum bet amount is 5 ETB and the maximum payout is 500,000 ETB per bet.",
  },
  {
    title: "Live Betting",
    content: "Live bets are accepted subject to availability. Odds may change at any time during live events. Bets placed during network disruptions may be voided at management's discretion.",
  },
  {
    title: "Void Bets",
    content: "Bets may be voided in cases of obvious error in odds, match postponement/cancellation, or system malfunction. Voided bets are returned to the account at stake value.",
  },
  {
    title: "Responsible Gambling",
    content: "Fortune's is committed to responsible gambling. Users may set deposit limits, loss limits, or self-exclude at any time. Gambling should be entertaining, not a source of income.",
  },
  {
    title: "Account Rules",
    content: "Each person may hold only one account. Duplicate accounts will be closed. Users must be 18+ years of age. Accounts showing signs of bonus abuse may be restricted.",
  },
]

export default function RulesPage() {
  return (
    <div className="max-w-2xl space-y-4">
      <div className="border-b border-border pb-2">
        <h1 className="text-sm font-black uppercase tracking-wide text-foreground">Betting Rules</h1>
      </div>

      <div className="space-y-3">
        {rules.map((rule, i) => (
          <div key={i} className="bg-card border border-border rounded-lg overflow-hidden">
            <div className="bg-secondary px-4 py-2.5 flex items-center gap-2">
              <span className="bg-primary text-primary-foreground size-5 rounded-full text-[10px] font-bold flex items-center justify-center shrink-0">
                {i + 1}
              </span>
              <h3 className="text-[12px] font-bold text-foreground">{rule.title}</h3>
            </div>
            <div className="px-4 py-3 text-[11px] text-muted-foreground leading-relaxed">
              {rule.content}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}