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

export default function CheckoutPage() {
  return (
    <>
      <ParticleBackground />
      <Navbar />
      <main className="container mx-auto px-4 py-24">
        <div className="mb-12 text-center">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-neon-cyan hover:text-neon-purple"
          >
            ← Back to Sanctuary
          </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">
            Each step is designed to feel like a ceremonial unlocking. Your data is encrypted in real‑time, and your payment is transformed into a visual experience.
          </p>
        </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">End‑to‑End Encryption</h3>
            <p className="text-sm text-foreground/60">
              Your payment details never touch our servers. They are encrypted client‑side before transmission.
            </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">Instant Crypto Conversion</h3>
            <p className="text-sm text-foreground/60">
              Real‑time exchange rates ensure you pay the exact amount, with no hidden fees.
            </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">Digital Art Receipt</h3>
            <p className="text-sm text-foreground/60">
              Each completed order generates a unique piece of generative art stored in your vault.
            </p>
          </div>
        </div>
      </main>
      <footer className="glass border-t border-white/10 px-4 py-8 text-center text-sm text-foreground/40">
        <p>
          Crypto checkout uses your <strong>USD balance</strong> after a Bitcoin payment is{" "}
          <strong>verified on-chain</strong>. Configure your receiving address in{" "}
          <code className="rounded bg-white/10 px-1">.env.local</code>. Guest/card paths are demo-only.
        </p>
      </footer>
    </>
  );
}