import Link from "next/link";
import { ArrowRight, ShieldCheck, Sparkles, UserRound, Coins, Gamepad2, Clock, Ban } from "lucide-react";
import type { GameCard as GameCardData } from "@spinza/shared";
import { STARTING_BALANCE, formatSC } from "@spinza/shared";
import { Button } from "@/components/ui";
import { GameArt } from "./game-art";
import { GameRow } from "./game-card";
import { SiteFooter } from "./site-footer";

const FLAGSHIP = { slug: "spinza-original", name: "Spinza Original", palette: { primary: "#8b5cf6", secondary: "#22d3ee", glow: "#a78bfa", bg: "#06040f" } };

const STEPS = [
  { icon: UserRound, title: "Pick a username", body: "That is the whole sign-up. No email address, no phone number, no card. A recovery code protects your account." },
  { icon: Coins, title: `Receive ${formatSC(STARTING_BALANCE)}`, body: "Every new player starts with 10,000 Spinza Credits. They are fictional, they refill daily and they can never be bought." },
  { icon: Gamepad2, title: "Play 20 original games", body: "Cascades, expanding wilds, hold-and-respin jackpots, meters and mystery symbols — all designed and built in-house." },
];

export function Landing({ games, apiDown }: { games: GameCardData[]; apiDown: boolean }) {
  const flagship = games.find((g) => g.slug === FLAGSHIP.slug);
  const featured = games.filter((g) => g.isFeatured);
  const featuredRow = (featured.length ? featured : games).slice(0, 10);

  return (
    <div className="page py-6 lg:py-10">
      {/* ----------------------------------------------------------- hero */}
      <section className="relative overflow-hidden rounded-xl border border-line bg-bg-1" aria-labelledby="hero-title">
        <div className="absolute inset-0">
          <GameArt slug={FLAGSHIP.slug} name={FLAGSHIP.name} palette={flagship?.palette ?? FLAGSHIP.palette} variant="hero" showName={false} className="opacity-90" />
          <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(7,8,12,0.94)_0%,rgba(7,8,12,0.78)_45%,rgba(7,8,12,0.25)_100%)]" />
          <div className="absolute inset-x-0 bottom-0 h-1/2 bg-[linear-gradient(180deg,transparent,rgba(7,8,12,0.9))]" />
        </div>
        <div className="relative flex min-h-[520px] flex-col justify-end p-6 sm:min-h-[580px] sm:p-10 lg:min-h-[640px] lg:p-14">
          <div className="eyebrow mb-4 flex items-center gap-2 text-accent">
            <Sparkles className="h-3.5 w-3.5" /> Spinza Original · Fictional credits
          </div>
          <h1 id="hero-title" className="max-w-3xl text-[44px] font-semibold leading-[0.95] tracking-[-0.04em] sm:text-6xl lg:text-7xl">
            Play. <span className="shimmer-text">Spin.</span> Unlock.
          </h1>
          <p className="mt-5 max-w-xl text-base leading-relaxed text-fg-2 sm:text-lg">Twenty original casino-style games, a premium lobby and a living progression system — played entirely with fictional credits. Nothing to buy, nothing to lose.</p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button variant="accent" size="xl" href="/register" className="sm:min-w-[200px]">
              PLAY FREE
            </Button>
            <Button variant="outline" size="xl" href="/games" className="glass sm:min-w-[200px]">
              EXPLORE GAMES <ArrowRight className="h-4 w-4" />
            </Button>
          </div>
          <p className="mt-6 max-w-xl text-[13px] leading-relaxed text-fg-3">
            <span className="font-semibold text-fg-2">Virtual credits only. No deposits. No withdrawals. No cash value.</span> Spinza is for adults 18 and over. Already have an account?{" "}
            <Link href="/login" className="text-accent-2 underline-offset-4 hover:underline">
              Sign in
            </Link>
            .
          </p>
        </div>
      </section>

      {/* -------------------------------------------------- how it works */}
      <section className="mt-16 lg:mt-24" aria-labelledby="how-title">
        <div className="mb-8 max-w-2xl">
          <div className="eyebrow mb-2">How it works</div>
          <h2 id="how-title" className="text-3xl font-semibold tracking-tight sm:text-4xl">
            Three steps. Zero friction.
          </h2>
        </div>
        <ol className="grid gap-4 md:grid-cols-3">
          {STEPS.map((s, i) => (
            <li key={s.title} className="surface relative rounded-lg p-6">
              <div className="flex items-center justify-between">
                <span className="grid h-11 w-11 place-items-center rounded-md metal text-accent-2">
                  <s.icon className="h-5 w-5" />
                </span>
                <span className="font-mono text-sm text-fg-4">0{i + 1}</span>
              </div>
              <h3 className="mt-5 text-lg font-semibold tracking-tight">{s.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-fg-3">{s.body}</p>
            </li>
          ))}
        </ol>
        <div className="mt-6">
          <Link href="/how-it-works" className="tap inline-flex h-10 min-h-0 items-center gap-1 text-sm font-medium text-fg-2 hover:text-fg">
            Read the full guide <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </section>

      {/* ----------------------------------------------------- featured */}
      <section className="mt-16 lg:mt-24" aria-labelledby="featured-title">
        {featuredRow.length ? (
          <GameRow id="featured" title="Featured games" eyebrow="Tonight in the lobby" games={featuredRow} href="/games" />
        ) : (
          <div className="surface rounded-lg p-8 text-center">
            <div className="eyebrow mb-2">Featured games</div>
            <h2 id="featured-title" className="text-xl font-semibold tracking-tight">
              {apiDown ? "The lobby is warming up." : "New titles are being certified."}
            </h2>
            <p className="mx-auto mt-2 max-w-md text-sm text-fg-3">{apiDown ? "We could not reach the game service right now. Refresh in a moment — your credits and progress are safe." : "Every Spinza game is verified against its published math before it opens. Check back soon."}</p>
          </div>
        )}
      </section>

      {/* ------------------------------------------------- originals */}
      <section className="mt-16 grid gap-6 lg:mt-24 lg:grid-cols-[1.1fr_0.9fr]" aria-labelledby="originals-title">
        <div className="surface relative overflow-hidden rounded-xl p-8 sm:p-10">
          <div className="eyebrow mb-3">Original games</div>
          <h2 id="originals-title" className="text-3xl font-semibold tracking-tight sm:text-4xl">
            Built from scratch. Every reel, every rule.
          </h2>
          <p className="mt-4 max-w-lg text-[15px] leading-relaxed text-fg-2">Spinza games are not clones. Each title is designed in-house with its own symbol set, math model, feature logic and artwork — from the tumbling multipliers of Cosmic Collapse to the hold-and-respin vault of Diamond Heist. Every game is simulated across millions of rounds and certified against its published math before it reaches the lobby.</p>
          <ul className="mt-6 grid gap-2 text-sm text-fg-2 sm:grid-cols-2">
            {["Provably consistent math", "Original artwork and symbols", "Transparent Game Info on every title", "Fair, server-side outcomes"].map((t) => (
              <li key={t} className="flex items-center gap-2">
                <ShieldCheck className="h-4 w-4 text-accent" /> {t}
              </li>
            ))}
          </ul>
        </div>
        <div className="grid gap-4">
          <div className="surface rounded-xl p-8">
            <div className="flex items-center gap-2 text-accent">
              <Coins className="h-5 w-5" />
              <h3 className="text-lg font-semibold tracking-tight text-fg">What are Spinza Credits?</h3>
            </div>
            <p className="mt-3 text-sm leading-relaxed text-fg-2">Spinza Credits (SC) are a fictional currency that exists only inside Spinza. They have no monetary value and cannot be bought, sold, transferred, withdrawn or exchanged for anything. Run low and they refill through daily rewards, missions, level-ups and rescue credits — always for free.</p>
            <div className="mt-4 flex flex-wrap gap-2 text-[12px] font-semibold text-fg-3">
              {["No purchases", "No withdrawals", "No prizes", "No cash value"].map((t) => (
                <span key={t} className="inline-flex items-center gap-1 rounded-full border border-line px-2.5 py-1">
                  <Ban className="h-3 w-3" /> {t}
                </span>
              ))}
            </div>
          </div>
          <div className="surface rounded-xl p-8">
            <div className="flex items-center gap-2 text-accent">
              <Clock className="h-5 w-5" />
              <h3 className="text-lg font-semibold tracking-tight text-fg">Play responsibly</h3>
            </div>
            <p className="mt-3 text-sm leading-relaxed text-fg-2">Even with fictional credits, time matters. Spinza includes session reminders, break prompts, animation controls and an opt-out for leaderboards. Spinza is for adults 18 and over.</p>
            <Link href="/responsible-play" className="tap mt-3 inline-flex h-10 min-h-0 items-center gap-1 text-sm font-medium text-accent-2 hover:underline">
              Responsible play tools <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* -------------------------------------------------------- CTA */}
      <section className="mt-16 rounded-xl border border-accent/25 bg-[radial-gradient(ellipse_at_top,rgba(201,169,97,0.16),transparent_60%)] p-8 text-center sm:p-12 lg:mt-24">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Your first {formatSC(STARTING_BALANCE)} are waiting.</h2>
        <p className="mx-auto mt-3 max-w-md text-sm text-fg-2">Create a username, save your recovery code, and you are in the lobby in under a minute.</p>
        <div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
          <Button variant="accent" size="lg" href="/register">
            PLAY FREE
          </Button>
          <Button variant="ghost" size="lg" href="/login">
            Sign in
          </Button>
        </div>
      </section>

      <SiteFooter className="mt-16 lg:mt-24" />
    </div>
  );
}