"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import ThemedLayout from "@/components/layouts/ThemedLayout";

function shortAddr(addr: string) {
  return addr.length > 12 ? `${addr.slice(0, 6)}…${addr.slice(-4)}` : addr;
}

export default function SupportPage() {
  const [copied, setCopied] = useState(false);

  // Placeholder addresses — replace with your own.
  const addresses = useMemo(
    () => ({
      BTC: "bc1qexampledonationaddress0000000000000000000000000",
      ETH: "0x000000000000000000000000000000000000dEaD",
      XMR: "4Aexamplemonerodonationaddressxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    }),
    [],
  );

  const copy = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1200);
    } catch {
      // no-op
    }
  };

  return (
    <ThemedLayout theme="editorial" siteTitle="THE OFFERING" siteSubtitle="Optional support">
      <section className="container mx-auto max-w-5xl px-4 py-12">
        <div className="theme-card rounded-3xl p-10 md:p-14">
          <div className="text-center">
            <div className="text-xs opacity-70">optional ritual</div>
            <h1 className="text-4xl font-bold md:text-5xl">
              THE <span className="theme-accent">OFFERING</span>
            </h1>
            <p className="mx-auto mt-6 max-w-3xl text-xl opacity-90">
              If this operation kept you online, throw fuel on the fire — infrastructure and mirrors cost time.
            </p>
            <p className="mx-auto mt-3 max-w-3xl text-sm opacity-70">
              Transparent tip jar — optional, no paywalls, no pressure. You choose the asset and the amount.
            </p>
          </div>

          <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
            {(["BTC", "ETH", "XMR"] as const).map((coin) => (
              <div key={coin} className="theme-card rounded-2xl p-6">
                <div className="flex items-center justify-between">
                  <div className="text-2xl font-bold theme-accent">{coin}</div>
                  <div className="text-xs opacity-70">donation address</div>
                </div>
                <div className="theme-card mt-4 rounded-xl p-4 font-mono text-xs theme-accent break-all">
                  {addresses[coin]}
                </div>
                <div className="mt-4 flex gap-3">
                  <button
                    className="theme-accent flex-1 rounded-full border-2 border-current bg-current px-5 py-3 font-bold text-white"
                    onClick={() => copy(addresses[coin])}
                  >
                    {copied ? "COPIED" : `COPY ${coin}`}
                  </button>
                  <span className="inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-3 text-sm text-foreground/60">
                    {shortAddr(addresses[coin])}
                  </span>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">
            <div className="theme-card rounded-2xl p-6">
              <div className="font-bold mb-2">What you’re supporting</div>
              <ul className="space-y-2 text-sm text-foreground/70">
                <li>- More microsites and lore leaks</li>
                <li>- More Vault unlocks and keys</li>
                <li>- More UI weirdness (the good kind)</li>
              </ul>
            </div>
            <div className="theme-card rounded-2xl p-6">
              <div className="font-bold mb-2">Where to go next</div>
              <div className="flex flex-wrap gap-3">
                <Link href="/webring" className="glass rounded-full border border-white/20 px-6 py-3 font-bold hover:border-neon-cyan">
                  Webring
                </Link>
                <Link href="/vault" className="glass rounded-full border border-white/20 px-6 py-3 font-bold hover:border-neon-green">
                  Vault
                </Link>
                <Link href="/game" className="glass rounded-full border border-white/20 px-6 py-3 font-bold hover:border-neon-pink">
                  Profit Sim
                </Link>
                <Link href="/" className="theme-accent rounded-full border-2 border-current bg-current px-6 py-3 font-bold text-white">
                  Back to CyberLux →
                </Link>
              </div>
            </div>
          </div>

          <div className="mt-12 text-center text-xs opacity-70">
            Settlement note: confirm the BTC address against the signed block on the hub each session. Same bytes, every time.
          </div>
        </div>
      </section>
    </ThemedLayout>
  );
}