import type { Metadata } from "next";
import Link from "next/link";
import { DAILY_REWARDS, RESCUE_CREDITS_AMOUNT, RESCUE_CREDITS_COOLDOWN_HOURS, STARTING_BALANCE, BET_LEVELS, formatSC } from "@spinza/shared";
import { Button } from "@/components/ui";
import { ProsePage, Section, Callout, Bullets } from "@/components/lobby/prose";

export const metadata: Metadata = {
  title: "How it works",
  description: "How Spinza works: a username, 10,000 fictional credits, twenty original games, daily rewards and levels. No deposits, no withdrawals, no cash value.",
  alternates: { canonical: "/how-it-works" },
};

const TOC = [
  { id: "credits", label: "Spinza Credits" },
  { id: "account", label: "Your account" },
  { id: "games", label: "The games" },
  { id: "refills", label: "Daily rewards & refills" },
  { id: "progression", label: "Levels, missions, achievements" },
  { id: "fairness", label: "Fairness & certification" },
  { id: "faq", label: "Questions" },
];

export default function HowItWorksPage() {
  return (
    <ProsePage eyebrow="Guide" title="How Spinza works" lead="Spinza is a social casino built around one idea: all the craft of great slot design, none of the money. Here is everything you need to know before your first spin." toc={TOC}>
      <Section id="credits" title="Spinza Credits are fictional — completely">
        <p>Everything in Spinza is played with Spinza Credits (SC). They are a made-up in-game currency. They have no monetary value, they cannot be bought, they cannot be sold, transferred, gifted or withdrawn, and they cannot be exchanged for prizes, goods or anything else.</p>
        <p>Because nothing of value is ever at stake, Spinza is not gambling. It is a game about games: the reels, the features, the near-misses and the big moments, without a wallet attached.</p>
        <Callout>
          <strong>Virtual credits only. No deposits. No withdrawals. No cash value.</strong> There is no shop, no checkout and no way to add credits with money — by design, forever.
        </Callout>
      </Section>

      <Section id="account" title="An account is just a username">
        <p>To create an account you choose a username (3 to 24 lowercase letters, numbers, underscores or hyphens) and a password of at least eight characters, and confirm you are 18 or older. That is the whole form. Spinza never asks for an email address, a phone number or a payment method.</p>
        <p>
          Because there is no email on file, Spinza gives you a <strong>recovery code</strong> when you register — the format is <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-[13px]">SPZ-XXXX-XXXX-XXXX</code>. It is the only way to reset a forgotten password. Save it somewhere safe. Every time it is used, a fresh code is issued. You can also rotate it at any time from{" "}
          <Link href="/settings#security" className="text-accent-2 underline-offset-4 hover:underline">
            Settings → Security
          </Link>
          .
        </p>
        <p>Every new account receives {formatSC(STARTING_BALANCE)} immediately.</p>
      </Section>

      <Section id="games" title="Twenty original games">
        <p>Every Spinza game is designed and built in-house — symbols, artwork, rules and math. You will find classic five-reel layouts alongside cascading grids, expanding wilds, hold-and-respin jackpots, collect-and-multiply meters, mystery symbols and pick bonuses.</p>
        <Bullets
          items={[
            <>
              <strong>Bet levels</strong> are the same everywhere: {BET_LEVELS.map((b) => b.toLocaleString("en-US")).join(", ")} SC per spin (some games narrow the range).
            </>,
            <>
              <strong>Volatility</strong> tells you how a game feels. Relaxed games pay small and often; extreme games stay quiet for long stretches and then explode.
            </>,
            <>
              <strong>Game Info</strong>, inside every game, shows the full rules, paytable, features and the certified return figures.
            </>,
            <>
              <strong>Outcomes are decided on the server</strong> for every round, recorded with a round ID, and listed in your history.
            </>,
          ]}
        />
      </Section>

      <Section id="refills" title="Running low is never the end">
        <p>Spinza is designed so nobody gets stuck at zero.</p>
        <Bullets
          items={[
            <>
              <strong>Daily reward.</strong> Claim once a day. The amount grows with your streak: {DAILY_REWARDS.map((d) => d.toLocaleString("en-US")).join(" → ")} SC over seven consecutive days, then the cycle starts again. Miss a day and you fall back one step; miss longer and the streak resets.
            </>,
            <>
              <strong>Rescue credits.</strong> If your balance reaches 0 SC, claim {formatSC(RESCUE_CREDITS_AMOUNT)} from the Rewards page. Available again {RESCUE_CREDITS_COOLDOWN_HOURS} hours after each use.
            </>,
            <>
              <strong>Level-ups, missions and achievements</strong> all pay credits too (see below).
            </>,
          ]}
        />
      </Section>

      <Section id="progression" title="Levels, missions and achievements">
        <p>Every spin earns experience points, with bonuses for triggering features and for trying a game for the first time. XP fills a level bar; each new level grants credits, with larger bonuses every fifth, tenth and twenty-fifth level.</p>
        <p>Missions are short daily and weekly challenges — spin a number of rounds, trigger a bonus, land a big multiplier. Achievements are permanent milestones across your whole Spinza history. Both pay credits and XP the moment they complete.</p>
        <p>Leaderboards rank players by biggest win, biggest multiplier, most spins and highest level. They are for bragging rights only, and you can opt out entirely in Settings.</p>
      </Section>

      <Section id="fairness" title="Fairness and certification">
        <p>Before a game is published, it is run through millions of simulated rounds. The observed return, hit rate, bonus frequency and maximum win are compared with the game&apos;s design targets, and the game only opens to players if it passes. The certification summary is shown in each game&apos;s Game Info panel.</p>
        <p>Outcomes are generated server-side with a cryptographically secure random source. The client only animates what the server has already decided.</p>
      </Section>

      <Section id="faq" title="Questions">
        <dl className="space-y-4">
          {[
            ["Can I buy credits?", "No. There is no store and never will be. Credits come only from daily rewards, rescue credits, missions, achievements and levelling up."],
            ["Can I win real money or prizes?", "No. Spinza Credits have no value outside Spinza and cannot be converted into anything."],
            ["Do I need to download anything?", "No. Spinza runs in your browser on phone, tablet and desktop. You can add it to your home screen for a full-screen experience."],
            ["What data do you keep?", "Your username, a hash of your password, your gameplay statistics and your settings. No email, no phone, no trackers, no ads."],
            ["I lost my password and my recovery code.", "Unfortunately the account cannot be recovered — there is no email on file to verify you. You are welcome to start again with a new username."],
          ].map(([q, a]) => (
            <div key={q} className="rounded-md border border-line p-4">
              <dt className="font-semibold text-fg">{q}</dt>
              <dd className="mt-1 text-fg-2">{a}</dd>
            </div>
          ))}
        </dl>
      </Section>

      <div className="flex flex-col gap-3 rounded-xl border border-accent/25 p-6 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div className="text-lg font-semibold tracking-tight">Ready to spin?</div>
          <p className="text-sm text-fg-3">A username is all it takes. Your first {formatSC(STARTING_BALANCE)} are waiting.</p>
        </div>
        <div className="flex gap-2">
          <Button variant="accent" href="/register">
            Play free
          </Button>
          <Button variant="ghost" href="/responsible-play">
            Responsible play
          </Button>
        </div>
      </div>
    </ProsePage>
  );
}