import Navbar from "@/components/Navbar";
import ParticleBackground from "@/components/ParticleBackground";
import CheckoutFlow from "@/components/CheckoutFlow";
import DepositWidget from "@/components/DepositWidget";
import Link from "next/link";

export default function CheckoutPage() {
  return (
    <>
      <ParticleBackground />
      <Navbar />
      <main className="container mx-auto px-4 py-24">
        <div className="mb-10 text-center">
          <Link
            href="/market"
            className="inline-flex items-center gap-2 text-neon-cyan hover:text-neon-purple"
          >
            ← Back to Market
          </Link>
          <h1 className="mt-6 font-orbitron text-5xl font-bold md:text-6xl">
            CHECKOUT <span className="text-neon-cyan">RITUAL</span>
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-foreground/70">
            Pay with your USD balance — funded by Bitcoin deposit. Balance is credited after on-chain
            verification. We hold your crypto and pay vendors on your behalf.
          </p>
        </div>

        {/* Deposit reminder before CheckoutFlow */}
        <div className="mx-auto mb-10 max-w-2xl">
          <DepositWidget compact />
        </div>

        <CheckoutFlow />

        <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
          <div className="glass rounded-2xl border border-white/10 p-6">
            <div className="mb-4 text-3xl">₿</div>
            <h3 className="mb-2 font-bold">Bitcoin-funded USD</h3>
            <p className="text-sm text-foreground/60">
              Send BTC to your deposit address at <Link href="/account/add-funds" className="text-neon-cyan hover:underline">Add Funds</Link>.
              After 1 confirmation we credit USD at live spot rate.
            </p>
          </div>
          <div className="glass rounded-2xl border border-white/10 p-6">
            <div className="mb-4 text-3xl">🔐</div>
            <h3 className="mb-2 font-bold">Per-handle balance</h3>
            <p className="text-sm text-foreground/60">
              USD credit is tied to your CyberLux handle — same balance across hub, market, forum, and exchange.
              Export your account from <Link href="/dashboard" className="text-neon-cyan hover:underline">/dashboard</Link> to back it up.
            </p>
          </div>
          <div className="glass rounded-2xl border border-white/10 p-6">
            <div className="mb-4 text-3xl">🧾</div>
            <h3 className="mb-2 font-bold">Vault receipt</h3>
            <p className="text-sm text-foreground/60">
              Every completed order writes a signed receipt to your <Link href="/vault" className="text-neon-cyan hover:underline">Vault</Link>.
              LUX credits earned on each purchase.
            </p>
          </div>
        </div>
      </main>
      <footer className="glass border-t border-white/10 px-4 py-8 text-center text-sm text-foreground/40">
        <p>
          Payments use USD balance funded by verified on-chain Bitcoin deposits. Configure merchant
          address in <code className="rounded bg-white/10 px-1">.env.local</code>.
          ETH and XMR deposits go through manual review.
        </p>
        <div className="mt-3 flex justify-center gap-6 text-foreground/30">
          <Link href="/account/add-funds" className="hover:text-neon-cyan">Add Funds</Link>
          <Link href="/dashboard" className="hover:text-foreground/60">Dashboard</Link>
          <Link href="/market" className="hover:text-foreground/60">Market</Link>
        </div>
      </footer>
    </>
  );
}