import type { Metadata } from "next";
import Link from "next/link";
import { Clock, Coffee, Sparkles, EyeOff, LogOut, Info } from "lucide-react";
import { Button } from "@/components/ui";
import { ProsePage, Section, Callout, Bullets } from "@/components/lobby/prose";

export const metadata: Metadata = {
  title: "Responsible play",
  description: "Spinza uses fictional credits with no cash value, but time still matters. Learn about the built-in reminders, controls and how to take a break.",
  alternates: { canonical: "/responsible-play" },
};

const TOOLS = [
  { icon: Clock, title: "Session reminder", body: "Choose 30, 60, 90 or 120 minutes and Spinza tells you how long you have been playing at that interval, every time.", href: "/settings#time" },
  { icon: Coffee, title: "Break reminder", body: "A gentle prompt to step away after long stretches of continuous play.", href: "/settings#time" },
  { icon: Sparkles, title: "Animation intensity & reduce motion", body: "Turn down particles, flashes and celebratory motion if they feel like too much.", href: "/settings#motion" },
  { icon: EyeOff, title: "Leaderboard opt-out", body: "Remove yourself from every public board and the wins feed with one switch.", href: "/settings#leaderboard" },
  { icon: LogOut, title: "Sign out anywhere", body: "Review your active sessions and sign out any device from Settings → Security.", href: "/settings#security" },
];

export default function ResponsiblePlayPage() {
  return (
    <ProsePage eyebrow="Responsible play" title="Fictional credits. Real time." lead="Nothing you do on Spinza can cost you money — there is simply no way to spend any. But casino-style games are designed to be absorbing, and we want your time here to stay fun. These are the tools and the principles behind them.">
      <Callout>
        <strong>Spinza is not gambling.</strong> Spinza Credits have no monetary value, cannot be purchased and cannot be withdrawn. No outcome on Spinza can win or lose you money. Spinza is for adults 18 and over.
      </Callout>

      <Section id="principles" title="Our commitments">
        <Bullets
          items={[
            <>
              <strong>No purchases, ever.</strong> There is no shop, no in-app payment and no premium currency. Running out of credits is never a reason to spend money, because you cannot.
            </>,
            <>
              <strong>No pressure mechanics.</strong> No countdown offers, no “last chance” pop-ups, no notifications urging you back. The daily reward waits for you; it does not chase you.
            </>,
            <>
              <strong>Honest presentation.</strong> Wins are celebrated in proportion to their size, losses are shown plainly, and every game publishes its certified return and volatility in Game Info.
            </>,
            <>
              <strong>Your data stays yours.</strong> We store a username, a password hash and gameplay statistics. No email, no advertising identifiers, no third-party trackers.
            </>,
          ]}
        />
      </Section>

      <Section id="tools" title="Built-in tools">
        <div className="grid gap-3 sm:grid-cols-2">
          {TOOLS.map((t) => (
            <Link key={t.title} href={t.href} className="surface group flex gap-3 rounded-lg p-4 transition-colors hover:bg-surface-2 focus-ring">
              <span className="grid h-10 w-10 shrink-0 place-items-center rounded-md metal text-accent-2">
                <t.icon className="h-[18px] w-[18px]" />
              </span>
              <span>
                <span className="block font-semibold text-fg group-hover:text-accent-2">{t.title}</span>
                <span className="mt-0.5 block text-[13px] leading-snug text-fg-3">{t.body}</span>
              </span>
            </Link>
          ))}
        </div>
        <p className="text-[13px] text-fg-3">All tools live in Settings and apply instantly across every device you sign in on.</p>
      </Section>

      <Section id="signs" title="Keeping it healthy">
        <p>Even without money involved, it is worth noticing how you play. A few honest questions:</p>
        <Bullets items={["Am I playing longer than I meant to, more often than I would like?", "Am I playing to escape a mood rather than for enjoyment?", "Is Spinza getting in the way of sleep, work, study or people I care about?", "Do I feel irritable when I stop, or when I cannot play?"]} />
        <p>If any of these ring true, set a shorter session reminder, turn on break reminders, or simply sign out for a while. Your credits, streaks and progress will be exactly where you left them whenever you return — there is no penalty for taking time away.</p>
      </Section>

      <Section id="minors" title="Adults only">
        <p>Spinza is for players aged 18 and over. Age is confirmed at registration and we ask that adults keep their sign-in details away from minors. If you believe a minor is using Spinza, sign out of the account from Settings → Security and revoke its other sessions.</p>
      </Section>

      <Section id="help" title="If real-money gambling is a concern">
        <p>Spinza never involves money, but if you or someone close to you struggles with real-money gambling, confidential help is available in most countries through national gambling-support helplines and services such as Gamblers Anonymous. Please reach out to a local service — they are free, confidential and used to hearing from people at every stage.</p>
        <div className="flex items-start gap-3 rounded-md border border-line p-4 text-[13px] text-fg-3">
          <Info className="mt-0.5 h-4 w-4 shrink-0" />
          <p>Spinza does not link to real-money gambling sites, does not advertise them and does not accept advertising from them.</p>
        </div>
      </Section>

      <div className="flex flex-col gap-3 rounded-xl border border-line p-6 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div className="text-lg font-semibold tracking-tight">Set your reminders</div>
          <p className="text-sm text-fg-3">Takes ten seconds and follows your account everywhere.</p>
        </div>
        <Button variant="secondary" href="/settings#time">
          Open settings
        </Button>
      </div>
    </ProsePage>
  );
}