From f4cdafa1453b5b23ac1c60043f254b2385d8a27b Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 23 Jul 2026 20:20:26 +0700
Subject: [PATCH] =?UTF-8?q?card:=20full=20UX=20rebuild=20=E2=80=94=20hero?=
 =?UTF-8?q?=20preview,=203-tab=20nav,=20single-column=20layout,=20inline?=
 =?UTF-8?q?=20award=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Logged-out state: proper hero with value prop copy instead of bare login form
- Hero card preview: full-width dark stage with theme-matched glow behind card
- Card slightly larger (360x227) with depth shadow
- Top tab bar: My Card / Badges (with count) / Award — replaces buried sections
- Single-column max-w-2xl layout — no more awkward 2-col grid on mobile
- Primary CTA: one big Share button, Print/Save/Copy as secondary 3-col row
- Card type as prominent 2-up tile choice, not a buried dropdown-style control
- Theme picker: 6-up square grid with emoji + label, ring on active
- Rides For + Sponsors side by side (saves vertical space)
- Stats as interactive tiles showing the actual numbers
- Skills as pill grid with live counter (X/6 selected)
- Badges tab: shows ReceivedBadgesPanel (was previously never rendered)
- Award tab: inline form, no dialog — cleaner flow, redirects to Badges on success
- AwardBadgeDialog kept for backward compat but Award tab uses AwardBadgeInline

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/index.css               |   7 +-
 src/pages/RiderCardPage.tsx | 867 +++++++++++++++++++-----------------
 2 files changed, 459 insertions(+), 415 deletions(-)

diff --git a/src/index.css b/src/index.css
index c405367..b5d84b8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -556,13 +556,14 @@ select {
 
 /* Credit-card aspect ratio: 85.6mm × 54mm = 1.586:1 */
 .rider-card {
-  width: 340px;
-  height: 214px;
-  border-radius: 12px;
+  width: 360px;
+  height: 227px;
+  border-radius: 14px;
   position: relative;
   overflow: hidden;
   flex-shrink: 0;
   font-family: 'Inter Variable', 'Inter', system-ui, sans-serif;
+  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
 }
 
 /* Holographic shimmer overlay — appears on hover/focus for screen,
diff --git a/src/pages/RiderCardPage.tsx b/src/pages/RiderCardPage.tsx
index 0a1c245..8282bd1 100644
--- a/src/pages/RiderCardPage.tsx
+++ b/src/pages/RiderCardPage.tsx
@@ -1106,23 +1106,23 @@ export default function RiderCardPage() {
   const displayName = metadata?.name ?? genUserName(user?.pubkey ?? '');
   const npub = user?.pubkey ? nip19.npubEncode(user.pubkey) : '';
 
-  // Received badges for the logged-in user
   const { data: receivedBadgeEvents = [] } = useReceivedBadges(user?.pubkey ?? '');
-
-  // Parse badge events into BadgeAward objects
   const receivedBadges: BadgeAward[] = receivedBadgeEvents.flatMap(event => {
     const skills = event.tags.filter(([k]) => k === 'skill').map(([, v]) => v);
     const spot = event.tags.find(([k]) => k === 'spot')?.[1];
     return skills.map(skill => ({
       skill,
-      witnessName: genUserName(event.pubkey), // simplified for card visual
+      witnessName: genUserName(event.pubkey),
       witnessPubkey: event.pubkey,
       spotName: spot,
       timestamp: event.created_at,
     }));
   });
 
-  // ── Form state ──────────────────────────────────────────────────────────────
+  // ── Page tab: 'card' | 'badges' | 'award' ────────────────────────────────
+  const [pageTab, setPageTab] = useState<'card' | 'badges' | 'award'>('card');
+
+  // ── Card state ────────────────────────────────────────────────────────────
   const [cardType, setCardType] = useState<'rider' | 'park'>('rider');
   const [theme, setTheme]       = useState<ThemeId>('thug');
   const [holographic, setHolographic] = useState(true);
@@ -1147,32 +1147,23 @@ export default function RiderCardPage() {
   const [copied, setCopied] = useState(false);
   const [rendering, setRendering] = useState(false);
 
-  // ── Parse recipientNpub → pubkey ─────────────────────────────────────────
   const recipientPubkey = (() => {
     if (!recipientNpub.trim()) return user?.pubkey ?? '';
     try {
       const d = nip19.decode(recipientNpub.trim());
       return d.type === 'npub' ? d.data : (user?.pubkey ?? '');
-    } catch {
-      return user?.pubkey ?? '';
-    }
+    } catch { return user?.pubkey ?? ''; }
   })();
 
-  // ── Computed card data ───────────────────────────────────────────────────────
   const cardPubkey = cardType === 'rider' ? (user?.pubkey ?? '') : recipientPubkey;
   const cardData: CardData = {
-    type: cardType,
-    theme,
-    holographic,
+    type: cardType, theme, holographic,
     name: cardType === 'rider' ? displayName : recipientName,
     nip05: metadata?.nip05,
     avatar: metadata?.picture,
     pubkey: cardPubkey,
     npub: cardPubkey ? fullNpub(cardPubkey) : '',
-    style,
-    skills,
-    sponsors,
-    ridesFor,
+    style, skills, sponsors, ridesFor,
     showSpots, showZaps, showEvents,
     spotsAdded:    stats?.spotsAdded    ?? 0,
     zapsReceived:  stats?.zapsReceived  ?? 0,
@@ -1181,103 +1172,47 @@ export default function RiderCardPage() {
       ? memberSince(metadata.created_at as number)
       : new Date().getFullYear().toString(),
     receivedBadges,
-    issuerName,
-    recipientName,
-    accessLevel,
-    validThru,
+    issuerName, recipientName, accessLevel, validThru,
   };
 
-  // ── Render card via Canvas 2D API → returns a PNG data URL ──────────────
   const renderCardToImage = useCallback(async (): Promise<string | null> => {
     setRendering(true);
     try {
-      const dataUrl = await drawCardToCanvas({
-        type: cardData.type,
-        themeId: cardData.theme,
-        name: cardData.name,
-        nip05: cardData.nip05,
-        avatarUrl: cardData.avatar,
-        pubkey: cardData.pubkey,
-        npub: cardData.npub,
-        style: cardData.style,
-        skills: cardData.skills,
-        sponsors: cardData.sponsors,
-        ridesFor: cardData.ridesFor,
-        showSpots: cardData.showSpots,
-        showZaps: cardData.showZaps,
-        showEvents: cardData.showEvents,
-        spotsAdded: cardData.spotsAdded,
-        zapsReceived: cardData.zapsReceived,
-        eventsCreated: cardData.eventsCreated,
-        memberYear: cardData.memberYear,
-        receivedBadges: cardData.receivedBadges,
-        issuerName: cardData.issuerName,
-        recipientName: cardData.recipientName,
-        accessLevel: cardData.accessLevel,
-        validThru: cardData.validThru,
+      return await drawCardToCanvas({
+        type: cardData.type, themeId: cardData.theme,
+        name: cardData.name, nip05: cardData.nip05,
+        avatarUrl: cardData.avatar, pubkey: cardData.pubkey, npub: cardData.npub,
+        style: cardData.style, skills: cardData.skills,
+        sponsors: cardData.sponsors, ridesFor: cardData.ridesFor,
+        showSpots: cardData.showSpots, showZaps: cardData.showZaps, showEvents: cardData.showEvents,
+        spotsAdded: cardData.spotsAdded, zapsReceived: cardData.zapsReceived, eventsCreated: cardData.eventsCreated,
+        memberYear: cardData.memberYear, receivedBadges: cardData.receivedBadges,
+        issuerName: cardData.issuerName, recipientName: cardData.recipientName,
+        accessLevel: cardData.accessLevel, validThru: cardData.validThru,
       });
-      return dataUrl;
-    } catch (err) {
-      console.error('Card render failed:', err);
-      return null;
-    } finally {
-      setRendering(false);
-    }
+    } catch (err) { console.error('Card render failed:', err); return null; }
+    finally { setRendering(false); }
   }, [cardData]);
 
-  // ── Print: render to image, open print window with the image ─────────────
   const handlePrint = useCallback(async () => {
     const dataUrl = await renderCardToImage();
-    if (!dataUrl) {
-      toast({ title: 'Could not render card', description: 'Try again in a moment.', variant: 'destructive' });
-      return;
-    }
-
-    // 85.6mm × 54mm in points (1mm ≈ 2.835pt)
+    if (!dataUrl) { toast({ title: 'Could not render card', variant: 'destructive' }); return; }
     const w = Math.round(85.6 * 2.835);
     const h = Math.round(54 * 2.835);
-
     const win = window.open('', '_blank', `width=${w * 2},height=${h * 2}`);
-    if (!win) {
-      toast({ title: 'Popup blocked', description: 'Allow popups for this site then try again.', variant: 'destructive' });
-      return;
-    }
-
-    win.document.write(`<!DOCTYPE html>
-<html>
-<head>
-<title>SkateSpots Rider Card</title>
-<style>
-  @page { size: 85.6mm 54mm; margin: 0; }
-  html, body { margin: 0; padding: 0; background: #000; }
-  img { display: block; width: 85.6mm; height: 54mm; }
-</style>
-</head>
-<body>
-<img src="${dataUrl}" />
-<script>
-  window.onload = function() {
-    window.focus();
-    window.print();
-  };
-</script>
-</body>
-</html>`);
+    if (!win) { toast({ title: 'Popup blocked', description: 'Allow popups for this site.', variant: 'destructive' }); return; }
+    win.document.write(`<!DOCTYPE html><html><head><title>SkateSpots Rider Card</title><style>@page{size:85.6mm 54mm;margin:0}html,body{margin:0;padding:0;background:#000}img{display:block;width:85.6mm;height:54mm}</style></head><body><img src="${dataUrl}"/><script>window.onload=function(){window.focus();window.print()}<\/script></body></html>`);
     win.document.close();
   }, [renderCardToImage, toast]);
 
-  // ── Download card as PNG ──────────────────────────────────────────────────
   const handleDownload = useCallback(async () => {
     const dataUrl = await renderCardToImage();
-    if (!dataUrl) {
-      toast({ title: 'Could not render card', variant: 'destructive' });
-      return;
-    }
+    if (!dataUrl) { toast({ title: 'Could not render card', variant: 'destructive' }); return; }
     const a = document.createElement('a');
     a.href = dataUrl;
     a.download = `skatespot-card-${cardData.npub.slice(0, 16)}.png`;
     a.click();
-  }, [renderCardToImage, cardData.licenseId, toast]);
+  }, [renderCardToImage, cardData.npub, toast]);
 
   const handleCopyNpub = useCallback(() => {
     navigator.clipboard.writeText(npub);
@@ -1285,76 +1220,59 @@ export default function RiderCardPage() {
     setTimeout(() => setCopied(false), 2000);
   }, [npub]);
 
-  // ── Share card digitally ──────────────────────────────────────────────────
   const handleShare = useCallback(async () => {
     const dataUrl = await renderCardToImage();
-    if (!dataUrl) {
-      toast({ title: 'Could not render card', variant: 'destructive' });
-      return;
-    }
-
-    // Convert data URL to File for Web Share API
+    if (!dataUrl) { toast({ title: 'Could not render card', variant: 'destructive' }); return; }
     const res = await fetch(dataUrl);
     const blob = await res.blob();
     const file = new File([blob], `skatespot-card-${cardData.name.replace(/\s+/g, '-')}.png`, { type: 'image/png' });
-
     if (navigator.share && navigator.canShare?.({ files: [file] })) {
       try {
-        await navigator.share({
-          title: `${cardData.name}'s SkateSpots Card`,
-          text: `Check out my SkateSpots Skater License 🛹\nskate-spots.org/${cardData.npub}`,
-          files: [file],
-        });
+        await navigator.share({ title: `${cardData.name}'s SkateSpots Card`, text: `Check out my SkateSpots Skater License 🛹\nskate-spots.org/${cardData.npub}`, files: [file] });
         return;
-      } catch {
-        // user cancelled or share failed — fall through to copy
-      }
+      } catch { /* fall through */ }
     }
-
-    // Fallback: copy profile link to clipboard
-    const link = `https://skate-spots.org/${cardData.npub}`;
-    await navigator.clipboard.writeText(link);
-    toast({ title: '🔗 Link copied!', description: 'Share it anywhere — the link opens your card profile.' });
+    await navigator.clipboard.writeText(`https://skate-spots.org/${cardData.npub}`);
+    toast({ title: '🔗 Link copied!' });
   }, [renderCardToImage, cardData.name, cardData.npub, toast]);
 
   const handlePublishParkCard = useCallback(() => {
-    if (!user) return;
-    if (!recipientPubkey) {
-      toast({ title: "Enter the rider's npub", variant: 'destructive' });
-      return;
-    }
-
+    if (!user || !recipientPubkey) { toast({ title: "Enter the rider's npub", variant: 'destructive' }); return; }
     const tags: string[][] = [
       ['d', `park-access-${recipientPubkey.slice(0, 16)}-${Date.now()}`],
-      ['p', recipientPubkey],
-      ['t', 'skatepark-access'],
-      ['alt', 'Skatepark Access Card'],
-      ['issuer', issuerName],
-      ['access-level', accessLevel],
-      ['theme', theme],
+      ['p', recipientPubkey], ['t', 'skatepark-access'], ['alt', 'Skatepark Access Card'],
+      ['issuer', issuerName], ['access-level', accessLevel], ['theme', theme],
     ];
     if (validThru) tags.push(['valid-thru', validThru]);
-
-    publishEvent(
-      { kind: PARK_ACCESS_CARD_KIND, content: '', tags },
-      {
-        onSuccess: () => toast({ title: '✅ Park Access Card published!', description: 'The rider can now verify it.' }),
-        onError: (e) => toast({ title: 'Publish failed', description: String(e), variant: 'destructive' }),
-      },
-    );
+    publishEvent({ kind: PARK_ACCESS_CARD_KIND, content: '', tags }, {
+      onSuccess: () => toast({ title: '✅ Park Access Card published!' }),
+      onError: (e) => toast({ title: 'Publish failed', description: String(e), variant: 'destructive' }),
+    });
   }, [user, recipientPubkey, issuerName, accessLevel, validThru, theme, publishEvent, toast]);
 
   const toggleSkill = (id: string) =>
     setSkills(prev => prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]);
 
-  // ── Render: logged out ────────────────────────────────────────────────────
+  // ── Logged out ────────────────────────────────────────────────────────────
   if (!user) {
     return (
       <Layout>
-        <div className="container max-w-lg px-4 py-20 text-center">
-          <div className="text-6xl mb-4">🛹</div>
-          <h1 className="text-3xl font-black uppercase mb-3 neon-red">Rider Card</h1>
-          <p className="text-gray-400 mb-6">Log in to generate your personal Rider Card.</p>
+        <div className="min-h-[70vh] flex flex-col items-center justify-center px-4 text-center">
+          {/* Hero */}
+          <div className="mb-8 relative">
+            <div className="absolute inset-0 blur-3xl opacity-20 bg-gradient-to-br from-[#ff0040] to-[#ccff00] rounded-full" />
+            <div className="relative text-7xl mb-4">🛹</div>
+          </div>
+          <h1 className="text-4xl font-black uppercase mb-2">
+            <span className="neon-red">RIDER</span>
+            <span className="text-white"> CARD</span>
+          </h1>
+          <p className="text-gray-400 max-w-sm mb-2">
+            Your verifiable skater identity. Nostr-signed, print-ready, impossible to fake.
+          </p>
+          <p className="text-gray-600 text-sm mb-8 max-w-xs">
+            Earn witnessed skill badges from other skaters. Get park access passes. Share your card anywhere.
+          </p>
           <LoginArea className="justify-center" />
         </div>
       </Layout>
@@ -1363,302 +1281,298 @@ export default function RiderCardPage() {
 
   return (
     <Layout>
-      <div className="container max-w-5xl px-4 py-10">
-        {/* Page header */}
-        <div className="mb-8">
-          <h1 className="text-4xl font-black uppercase mb-2">
-            <span className="neon-red">SKATE</span>
-            <span className="text-white"> CARDS</span>
+      <div className="max-w-2xl mx-auto px-4 pb-16">
+
+        {/* ── Page header ── */}
+        <div className="pt-8 pb-6 text-center">
+          <h1 className="text-3xl font-black uppercase tracking-tight mb-1">
+            <span className="neon-red">RIDER</span>
+            <span className="text-white"> CARD</span>
           </h1>
-            <p className="text-gray-400 text-sm">
-              Print-ready credit-card size (85.6 × 54 mm). QR-verified via Nostr.
-            </p>
+          <p className="text-gray-500 text-xs tracking-widest uppercase">Nostr-signed · Print-ready · QR-verified</p>
         </div>
 
-        <div className="grid lg:grid-cols-2 gap-8">
+        {/* ── Top tabs: My Card / My Badges / Award Badge ── */}
+        <div className="flex rounded-xl overflow-hidden border border-white/10 mb-8 bg-black/40">
+          {([
+            { id: 'card',   label: '🪪 My Card' },
+            { id: 'badges', label: `🏅 Badges${receivedBadges.length > 0 ? ` (${receivedBadges.length})` : ''}` },
+            { id: 'award',  label: '⭐ Award' },
+          ] as const).map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setPageTab(tab.id)}
+              className={cn(
+                'flex-1 py-3 text-xs font-black uppercase tracking-widest transition-all',
+                pageTab === tab.id
+                  ? 'bg-[#ff0040] text-white'
+                  : 'text-gray-500 hover:text-gray-300 hover:bg-white/5'
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
 
-            {/* Left: Card preview */}
-            <div className="flex flex-col items-center gap-5">
-              <RiderCardFront d={cardData} printRef={printRef} />
+        {/* ══════════════════════════════════════════════
+            TAB: MY CARD
+        ══════════════════════════════════════════════ */}
+        {pageTab === 'card' && (
+          <div className="space-y-8">
 
-              {/* Primary actions */}
-              <div className="flex gap-2 flex-wrap justify-center w-full">
-                <Button
-                  onClick={handlePrint}
-                  disabled={rendering}
-                  className="bg-[#ff0040] hover:bg-[#cc0030] gap-2 font-black uppercase flex-1 min-w-[130px]"
-                >
-                  {rendering ? <Loader2 className="h-4 w-4 animate-spin" /> : <Printer className="h-4 w-4" />}
-                  {rendering ? 'Rendering…' : 'Print'}
-                </Button>
-                <Button
-                  onClick={handleShare}
-                  disabled={rendering}
-                  className="bg-[#ccff00] hover:bg-[#b8e600] text-black gap-2 font-black uppercase flex-1 min-w-[130px]"
-                >
-                  {rendering ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
-                  Share
-                </Button>
+            {/* ── Hero card preview ── */}
+            <div className="flex flex-col items-center gap-4">
+              {/* Stage */}
+              <div
+                className="w-full rounded-2xl flex items-center justify-center py-8 relative overflow-hidden"
+                style={{ background: 'radial-gradient(ellipse at 50% 60%, rgba(255,0,64,0.08) 0%, rgba(0,0,0,0) 70%), #0a0a0a', border: '1px solid rgba(255,255,255,0.06)' }}
+              >
+                {/* Subtle glow behind card */}
+                <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-32 blur-3xl opacity-30"
+                  style={{ background: `radial-gradient(ellipse, ${theme === 'lime' ? '#ccff00' : theme === 'midnight' ? '#64a0ff' : theme === 'wood' ? '#f5c842' : theme === 'chrome' ? '#888' : theme === 'sunset' ? '#ff6020' : '#ff0040'}, transparent)` }}
+                />
+                <RiderCardFront d={cardData} printRef={printRef} />
+              </div>
+
+              {/* Primary CTA */}
+              <Button
+                onClick={handleShare}
+                disabled={rendering}
+                size="lg"
+                className="w-full h-14 bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:opacity-90 font-black uppercase text-base rounded-xl shadow-xl shadow-[#ff0040]/20 gap-2"
+              >
+                {rendering ? <Loader2 className="h-5 w-5 animate-spin" /> : <Share2 className="h-5 w-5" />}
+                {rendering ? 'Rendering…' : 'Share Card'}
+              </Button>
+
+              {/* Secondary actions row */}
+              <div className="grid grid-cols-3 gap-2 w-full">
                 <Button
                   variant="outline"
                   onClick={handleDownload}
                   disabled={rendering}
-                  className="gap-2 border-gray-700 hover:border-gray-500 flex-1 min-w-[130px]"
+                  className="gap-1.5 border-white/10 hover:border-white/30 text-xs font-bold uppercase h-10"
                 >
-                  {rendering ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
+                  <Download className="h-3.5 w-3.5" />
                   Save PNG
                 </Button>
-              </div>
-
-              {/* Secondary actions */}
-              <div className="flex gap-2 flex-wrap justify-center w-full">
+                <Button
+                  variant="outline"
+                  onClick={handlePrint}
+                  disabled={rendering}
+                  className="gap-1.5 border-white/10 hover:border-white/30 text-xs font-bold uppercase h-10"
+                >
+                  <Printer className="h-3.5 w-3.5" />
+                  Print
+                </Button>
                 <Button
                   variant="outline"
                   onClick={handleCopyNpub}
-                  className="gap-2 border-gray-700 text-xs"
+                  className="gap-1.5 border-white/10 hover:border-white/30 text-xs font-bold uppercase h-10"
                 >
-                  {copied ? <Check className="h-3 w-3 text-green-400" /> : <Copy className="h-3 w-3" />}
-                  {copied ? 'Copied!' : 'Copy npub'}
+                  {copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5" />}
+                  {copied ? 'Copied!' : 'Copy ID'}
                 </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => setShowAwardDialog(true)}
-                  className="gap-2 border-yellow-500/40 text-yellow-400 hover:bg-yellow-500/10 text-xs"
-                >
-                  <Award className="h-3 w-3" />
-                  Award Badge
-                </Button>
-                {cardType === 'park' && (
-                  <Button
-                    variant="outline"
-                    onClick={handlePublishParkCard}
-                    className="gap-2 border-[#ccff00]/40 text-[#ccff00] hover:bg-[#ccff00]/10 text-xs"
-                  >
-                    <Zap className="h-3 w-3" />
-                    Publish to Nostr
-                  </Button>
-                )}
               </div>
-
-              <p className="text-gray-600 text-xs text-center max-w-xs">
-                <strong className="text-gray-500">Share</strong> uses your device's share sheet (WhatsApp, iMessage, etc.) or copies the link. <strong className="text-gray-500">Save PNG</strong> downloads for print shops.
-              </p>
             </div>
 
-            {/* Right: Controls */}
-            <div className="space-y-5">
-
-              {/* Card type */}
-              <div>
-                <Label className="mb-2 block text-xs uppercase tracking-widest text-gray-500">Card Type</Label>
-                <div className="grid grid-cols-2 gap-2">
-                  {([
-                    { id: 'rider', label: 'Skater License', icon: User },
-                    { id: 'park',  label: 'Park Access',    icon: Building2 },
-                  ] as const).map(({ id, label, icon: Icon }) => (
-                    <button
-                      key={id}
-                      onClick={() => setCardType(id)}
-                      className={cn(
-                        'p-3 rounded-xl border text-xs font-bold uppercase flex flex-col items-center gap-1 transition-all',
-                        cardType === id
-                          ? 'bg-[#ff0040]/20 border-[#ff0040] text-white'
-                          : 'bg-black/40 border-gray-700 text-gray-400 hover:border-gray-500'
-                      )}
-                    >
-                      <Icon className="h-4 w-4" />
-                      {label}
-                    </button>
-                  ))}
-                </div>
+            {/* ── Card type toggle ── */}
+            <div>
+              <p className="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-2">Card Type</p>
+              <div className="grid grid-cols-2 gap-2">
+                {([
+                  { id: 'rider', label: 'Skater License', sub: 'Your personal rider identity', icon: User },
+                  { id: 'park',  label: 'Park Access',    sub: 'Issue passes as a park owner', icon: Building2 },
+                ] as const).map(({ id, label, sub, icon: Icon }) => (
+                  <button
+                    key={id}
+                    onClick={() => setCardType(id)}
+                    className={cn(
+                      'p-4 rounded-xl border text-left transition-all',
+                      cardType === id
+                        ? 'bg-[#ff0040]/10 border-[#ff0040]/60 text-white'
+                        : 'bg-black/30 border-white/8 text-gray-500 hover:border-white/20 hover:text-gray-300'
+                    )}
+                  >
+                    <Icon className={cn('h-5 w-5 mb-2', cardType === id ? 'text-[#ff0040]' : 'text-gray-600')} />
+                    <div className="text-xs font-black uppercase">{label}</div>
+                    <div className="text-[10px] mt-0.5 opacity-60">{sub}</div>
+                  </button>
+                ))}
               </div>
+            </div>
 
-              {/* Park access note */}
-              {cardType === 'park' && (
-                <div className="flex items-start gap-2 p-3 rounded-xl bg-blue-500/5 border border-blue-500/20 text-xs text-gray-400">
-                  <Info className="h-4 w-4 text-blue-400 flex-shrink-0 mt-0.5" />
-                  <div className="space-y-1.5">
-                    <div>
-                      <span className="font-bold text-blue-400">Park owners only.</span>{' '}
-                      Park Access Cards should only be issued by the park's own Nostr key — the same key that published the park listing on SkateSpots.
-                    </div>
-                    <div>
-                      <span className="font-bold text-gray-300">How verification works:</span>{' '}
-                      The card is a signed message on the Nostr network (like a public post only you could have written). 
-                      Anyone can scan the QR, look up the event on any Nostr relay, and see which key signed it — 
-                      if that key matches the park's registered identity, the card is genuine. 
-                      No central authority needed.
-                    </div>
-                    <div className="text-gray-500">
-                      Self-issued cards for private parks will show a mismatch warning — the park owner's key won't match.
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {/* Theme picker */}
-              <div>
-                <Label className="mb-2 flex items-center gap-2 text-xs uppercase tracking-widest text-gray-500">
-                  <Palette className="h-3 w-3" /> Theme
-                </Label>
-                <div className="grid grid-cols-3 gap-2">
-                  {THEMES.map(t => (
-                    <button
-                      key={t.id}
-                      onClick={() => setTheme(t.id)}
-                      className={cn(
-                        'p-2.5 rounded-lg border text-xs font-bold transition-all',
-                        `card-theme-${t.id}`,
-                        theme === t.id ? 'ring-2 ring-white/40 scale-105' : 'opacity-70 hover:opacity-100'
-                      )}
-                    >
-                      <div className="text-base mb-0.5">{t.emoji}</div>
-                      <div className="text-[10px] font-black">{t.label}</div>
-                      <div className="text-[9px] opacity-60">{t.desc}</div>
-                    </button>
-                  ))}
-                </div>
+            {/* ── Theme picker ── */}
+            <div>
+              <p className="text-[10px] font-black uppercase tracking-widest text-gray-600 mb-2 flex items-center gap-1.5">
+                <Palette className="h-3 w-3" /> Theme
+              </p>
+              <div className="grid grid-cols-6 gap-2">
+                {THEMES.map(t => (
+                  <button
+                    key={t.id}
+                    onClick={() => setTheme(t.id)}
+                    className={cn(
+                      'aspect-square rounded-xl border-2 transition-all flex flex-col items-center justify-center gap-0.5',
+                      `card-theme-${t.id}`,
+                      theme === t.id
+                        ? 'ring-2 ring-white/50 ring-offset-1 ring-offset-black scale-105 border-white/30'
+                        : 'border-white/10 opacity-60 hover:opacity-90'
+                    )}
+                  >
+                    <span className="text-xl">{t.emoji}</span>
+                    <span className="text-[8px] font-black uppercase opacity-80">{t.label}</span>
+                  </button>
+                ))}
               </div>
+            </div>
 
-              {/* Holographic toggle */}
-              <div className="flex items-center justify-between p-3 rounded-xl bg-black/40 border border-gray-700">
+            {/* ── Holographic toggle ── */}
+            <div className="flex items-center justify-between px-4 py-3 rounded-xl bg-white/3 border border-white/8">
+              <div>
+                <div className="text-sm font-bold">✨ Holographic Shimmer</div>
+                <div className="text-xs text-gray-500">Animated foil effect</div>
+              </div>
+              <Switch checked={holographic} onCheckedChange={setHolographic} />
+            </div>
+
+            {/* ── RIDER fields ── */}
+            {cardType === 'rider' && (
+              <div className="space-y-5">
+                <p className="text-[10px] font-black uppercase tracking-widest text-gray-600 border-t border-white/8 pt-4">Card Details</p>
+
+                {/* Style */}
                 <div>
-                  <div className="text-sm font-bold">✨ Holographic Shimmer</div>
-                  <div className="text-xs text-gray-500">Animated foil effect on screen</div>
+                  <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Skate Style</Label>
+                  <Select value={style} onValueChange={setStyle}>
+                    <SelectTrigger className="bg-black/50 border-white/10 h-11">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {STYLES.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)}
+                    </SelectContent>
+                  </Select>
                 </div>
-                <Switch checked={holographic} onCheckedChange={setHolographic} />
-              </div>
 
-              {/* ── RIDER fields ─────────────────────────────────────────── */}
-              {cardType === 'rider' && (
-                <div className="space-y-4">
-                  {/* Style */}
+                {/* Rides For + Sponsors — side by side */}
+                <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">Skate Style</Label>
-                    <Select value={style} onValueChange={setStyle}>
-                      <SelectTrigger className="bg-black/50 border-gray-700">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {STYLES.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)}
-                      </SelectContent>
-                    </Select>
-                  </div>
-
-                  {/* Rides For shop */}
-                  <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">
-                      Rides For (shop)
-                    </Label>
+                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Rides For</Label>
                     <Input
-                      placeholder="e.g. Familia Skateshop, Supra Skateboards…"
+                      placeholder="Local shop…"
                       value={ridesFor}
                       onChange={e => setRidesFor(e.target.value)}
-                      className="bg-black/50 border-gray-700 text-sm"
+                      className="bg-black/50 border-white/10 text-sm h-11"
                     />
-                    <p className="text-[11px] text-gray-600 mt-1">
-                      The local shop you represent. Different from sponsors.
-                    </p>
                   </div>
-
-                  {/* Sponsors */}
                   <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">
-                      Sponsors (brands/companies)
-                    </Label>
+                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Sponsors</Label>
                     <Input
-                      placeholder="e.g. Baker, Vans, Independent…"
+                      placeholder="Brands…"
                       value={sponsors}
                       onChange={e => setSponsors(e.target.value)}
-                      className="bg-black/50 border-gray-700 text-sm"
+                      className="bg-black/50 border-white/10 text-sm h-11"
                     />
                   </div>
-
-                  {/* Stats toggles */}
-                  <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-2 block">Show Stats</Label>
-                    <div className="grid grid-cols-3 gap-2">
-                      {[
-                        { label: `Spots (${stats?.spotsAdded ?? 0})`, state: showSpots, set: setShowSpots },
-                        { label: `Zaps (${stats?.zapsReceived ?? 0})`, state: showZaps, set: setShowZaps },
-                        { label: `Events (${stats?.eventsCreated ?? 0})`, state: showEvents, set: setShowEvents },
-                      ].map(({ label, state, set }) => (
-                        <button
-                          key={label}
-                          onClick={() => set(!state)}
-                          className={cn(
-                            'p-2 rounded-lg border text-[10px] font-bold transition-all',
-                            state
-                              ? 'bg-[#ff0040]/20 border-[#ff0040] text-white'
-                              : 'bg-black/40 border-gray-700 text-gray-500'
-                          )}
-                        >
-                          {label}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-
-                  {/* Skill badges (self-selected) */}
-                  <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-2 block">
-                      Skills (self-claimed, up to 6)
-                    </Label>
-                    <div className="flex flex-wrap gap-1.5">
-                      {SKILL_OPTIONS.map(s => (
-                        <button
-                          key={s.id}
-                          onClick={() => toggleSkill(s.id)}
-                          disabled={!skills.includes(s.id) && skills.length >= 6}
-                          className={cn(
-                            'px-2 py-1 rounded-full text-[11px] font-bold border transition-all',
-                            skills.includes(s.id)
-                              ? 'bg-[#ff0040]/20 border-[#ff0040] text-white'
-                              : 'bg-black/40 border-gray-700 text-gray-400 hover:border-gray-500 disabled:opacity-30'
-                          )}
-                        >
-                          {s.icon} {s.label}
-                        </button>
-                      ))}
-                    </div>
-                    <p className="text-[11px] text-gray-600 mt-1.5">
-                      ⭐ Gold badges on the card are <em>witnessed</em> by others — check the Badges tab.
-                    </p>
-                  </div>
                 </div>
-              )}
 
-              {/* ── PARK fields ──────────────────────────────────────────── */}
-              {cardType === 'park' && (
-                <div className="space-y-4">
+                {/* Stats toggles */}
+                <div>
+                  <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-2 block">Show on Card</Label>
+                  <div className="grid grid-cols-3 gap-2">
+                    {[
+                      { label: 'Spots', value: stats?.spotsAdded ?? 0, state: showSpots, set: setShowSpots },
+                      { label: 'Zaps ⚡', value: stats?.zapsReceived ?? 0, state: showZaps, set: setShowZaps },
+                      { label: 'Events', value: stats?.eventsCreated ?? 0, state: showEvents, set: setShowEvents },
+                    ].map(({ label, value, state, set }) => (
+                      <button
+                        key={label}
+                        onClick={() => set(!state)}
+                        className={cn(
+                          'p-3 rounded-xl border text-center transition-all',
+                          state
+                            ? 'bg-[#ff0040]/10 border-[#ff0040]/40 text-white'
+                            : 'bg-black/30 border-white/8 text-gray-600'
+                        )}
+                      >
+                        <div className={cn('text-lg font-black', state ? 'text-[#ff0040]' : 'text-gray-700')}>{value}</div>
+                        <div className="text-[9px] uppercase tracking-wide mt-0.5">{label}</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Skills */}
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <Label className="text-[10px] uppercase tracking-widest text-gray-500">Skills</Label>
+                    <span className="text-[10px] text-gray-600">{skills.length}/6 selected</span>
+                  </div>
+                  <div className="flex flex-wrap gap-1.5">
+                    {SKILL_OPTIONS.map(s => (
+                      <button
+                        key={s.id}
+                        onClick={() => toggleSkill(s.id)}
+                        disabled={!skills.includes(s.id) && skills.length >= 6}
+                        className={cn(
+                          'px-2.5 py-1.5 rounded-lg text-xs font-bold border transition-all',
+                          skills.includes(s.id)
+                            ? 'bg-[#ff0040]/15 border-[#ff0040]/50 text-white'
+                            : 'bg-black/30 border-white/8 text-gray-500 hover:border-white/20 disabled:opacity-25 disabled:cursor-not-allowed'
+                        )}
+                      >
+                        {s.icon} {s.label}
+                      </button>
+                    ))}
+                  </div>
+                  <p className="text-[10px] text-gray-600 mt-2">
+                    ⭐ Gold badges on your card come from other skaters witnessing you — see the <button onClick={() => setPageTab('badges')} className="text-yellow-500 underline">Badges tab</button>.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* ── PARK fields ── */}
+            {cardType === 'park' && (
+              <div className="space-y-5">
+                <div className="flex items-start gap-3 p-4 rounded-xl bg-blue-500/5 border border-blue-500/20 text-xs text-gray-400">
+                  <Info className="h-4 w-4 text-blue-400 flex-shrink-0 mt-0.5" />
                   <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">Park Name</Label>
+                    <span className="font-bold text-blue-300">Park owners only.</span>{' '}
+                    Issue this using the same Nostr key that published your park listing. Anyone can scan the QR and verify the signature on-chain — no central authority needed.
+                  </div>
+                </div>
+
+                <p className="text-[10px] font-black uppercase tracking-widest text-gray-600 border-t border-white/8 pt-4">Park Details</p>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Park Name</Label>
                     <Input value={issuerName} onChange={e => setIssuerName(e.target.value)}
-                      placeholder="e.g. The Berrics, FDR Skatepark…" className="bg-black/50 border-gray-700" />
+                      placeholder="The Berrics…" className="bg-black/50 border-white/10 h-11" />
                   </div>
                   <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">Rider Name (on card)</Label>
+                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Rider Name</Label>
                     <Input value={recipientName} onChange={e => setRecipientName(e.target.value)}
-                      placeholder="Full name on card" className="bg-black/50 border-gray-700" />
+                      placeholder="Name on card" className="bg-black/50 border-white/10 h-11" />
                   </div>
+                </div>
+
+                <div>
+                  <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Rider's Nostr ID (npub)</Label>
+                  <Input
+                    value={recipientNpub}
+                    onChange={e => setRecipientNpub(e.target.value)}
+                    placeholder="npub1…"
+                    className="bg-black/50 border-white/10 font-mono text-xs h-11"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">
-                      Rider's Nostr Address (npub)
-                    </Label>
-                    <Input
-                      value={recipientNpub}
-                      onChange={e => setRecipientNpub(e.target.value)}
-                      placeholder="npub1… — their Nostr identity ties the card to them"
-                      className="bg-black/50 border-gray-700 font-mono text-xs"
-                    />
-                    <p className="text-[11px] text-gray-600 mt-1">
-                      Leave blank to issue to yourself. The card is signed by <em>your</em> key as the park owner.
-                    </p>
-                  </div>
-                  <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">Access Level</Label>
+                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Access Level</Label>
                     <Select value={accessLevel} onValueChange={setAccessLevel}>
-                      <SelectTrigger className="bg-black/50 border-gray-700"><SelectValue /></SelectTrigger>
+                      <SelectTrigger className="bg-black/50 border-white/10 h-11"><SelectValue /></SelectTrigger>
                       <SelectContent>
                         {['Full Access','Supervised','Beginner Zone','Street Only','Bowl Only','Members Only'].map(l =>
                           <SelectItem key={l} value={l}>{l}</SelectItem>)}
@@ -1666,40 +1580,169 @@ export default function RiderCardPage() {
                     </Select>
                   </div>
                   <div>
-                    <Label className="text-xs uppercase tracking-widest text-gray-500 mb-1.5 block">Valid Thru</Label>
+                    <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Valid Thru</Label>
                     <Input type="text" value={validThru} onChange={e => setValidThru(e.target.value)}
-                      placeholder="e.g. 2026-12-31" className="bg-black/50 border-gray-700" />
-                  </div>
-
-                  <div className="p-3 rounded-xl bg-[#ccff00]/5 border border-[#ccff00]/20 text-xs text-gray-400 space-y-2">
-                    <div className="font-bold text-[#ccff00]">🔐 How the park verifies it's real</div>
-                    <div>
-                      When you publish this card, it's signed with your Nostr private key and broadcast to relays. 
-                      The park's staff can scan the QR on any printed card and instantly see:
-                    </div>
-                    <ul className="list-disc list-inside space-y-1 text-gray-500">
-                      <li>Who issued it (your npub)</li>
-                      <li>Who it was issued to (the rider's npub)</li>
-                      <li>The access level and expiry</li>
-                      <li>The exact timestamp it was signed</li>
-                    </ul>
-                    <div>
-                      A rider can't fake this card — they'd need your private key to forge your signature.
-                    </div>
+                      placeholder="2026-12-31" className="bg-black/50 border-white/10 h-11" />
                   </div>
                 </div>
-              )}
 
+                <Button
+                  onClick={handlePublishParkCard}
+                  className="w-full h-12 bg-[#ccff00] hover:bg-[#b8e600] text-black font-black uppercase gap-2"
+                >
+                  <Zap className="h-4 w-4" />
+                  Publish to Nostr
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ══════════════════════════════════════════════
+            TAB: MY BADGES
+        ══════════════════════════════════════════════ */}
+        {pageTab === 'badges' && (
+          <div className="space-y-6">
+            <div className="text-center py-2">
+              <p className="text-gray-400 text-sm max-w-xs mx-auto">
+                These badges were witnessed and signed by other skaters on Nostr. They appear as gold ⭐ chips on your card.
+              </p>
+            </div>
+            <ReceivedBadgesPanel pubkey={user.pubkey} />
+            <div className="pt-2 border-t border-white/8">
+              <p className="text-xs text-gray-600 text-center mb-3">Want to earn more? Skate in front of someone and ask them to witness your trick.</p>
+              <Button
+                variant="outline"
+                onClick={() => setPageTab('award')}
+                className="w-full border-yellow-500/30 text-yellow-400 hover:bg-yellow-500/10 gap-2"
+              >
+                <Award className="h-4 w-4" />
+                Award a Badge to Someone Else
+              </Button>
             </div>
           </div>
-        </div>
+        )}
 
-      {/* Award badge dialog */}
-      <AwardBadgeDialog
-        open={showAwardDialog}
-        onClose={() => setShowAwardDialog(false)}
-        issuerPubkey={user.pubkey}
-      />
+        {/* ══════════════════════════════════════════════
+            TAB: AWARD BADGE (inline, no dialog)
+        ══════════════════════════════════════════════ */}
+        {pageTab === 'award' && (
+          <div className="space-y-5">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-yellow-500/5 border border-yellow-500/20">
+              <Award className="h-5 w-5 text-yellow-400 flex-shrink-0" />
+              <div>
+                <div className="text-sm font-bold text-yellow-300">You saw it happen</div>
+                <div className="text-xs text-gray-400 mt-0.5">Sign the proof on Nostr. It becomes part of their permanent record — cryptographically tied to your key.</div>
+              </div>
+            </div>
+
+            <AwardBadgeDialog
+              open={showAwardDialog}
+              onClose={() => setShowAwardDialog(false)}
+              issuerPubkey={user.pubkey}
+            />
+
+            {/* Inline award form — replaces the dialog on this tab */}
+            <AwardBadgeInline issuerPubkey={user.pubkey} onSuccess={() => setPageTab('badges')} />
+          </div>
+        )}
+
+      </div>
     </Layout>
   );
 }
+
+// ─── Inline award form (used on the Award tab) ────────────────────────────────
+function AwardBadgeInline({ issuerPubkey, onSuccess }: { issuerPubkey: string; onSuccess: () => void }) {
+  const { mutate: publishEvent, isPending } = useNostrPublish();
+  const { toast } = useToast();
+  const [recipientNpub, setRecipientNpub] = useState('');
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const [spotName, setSpotName] = useState('');
+
+  const toggleSkill = (id: string) =>
+    setSelectedSkills(prev => prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]);
+
+  const handleAward = () => {
+    if (!recipientNpub.trim() || selectedSkills.length === 0) {
+      toast({ title: 'Add rider npub + at least one skill', variant: 'destructive' });
+      return;
+    }
+    let recipientHex = '';
+    try {
+      const decoded = nip19.decode(recipientNpub.trim());
+      if (decoded.type !== 'npub') throw new Error();
+      recipientHex = decoded.data;
+    } catch {
+      toast({ title: 'Invalid npub', variant: 'destructive' });
+      return;
+    }
+    const tags: string[][] = [
+      ['p', recipientHex], ['t', 'skill-badge'],
+      ['alt', `Skill badge awarded: ${selectedSkills.join(', ')}`],
+      ...selectedSkills.map(s => ['skill', s]),
+    ];
+    if (spotName.trim()) tags.push(['spot', spotName.trim()]);
+    publishEvent({ kind: SKILL_BADGE_KIND, content: '', tags }, {
+      onSuccess: () => {
+        toast({ title: '🏅 Badge awarded!', description: `${selectedSkills.join(', ')} sent.` });
+        setRecipientNpub(''); setSelectedSkills([]); setSpotName('');
+        onSuccess();
+      },
+      onError: (e) => toast({ title: 'Failed', description: String(e), variant: 'destructive' }),
+    });
+  };
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Rider's Nostr ID (npub)</Label>
+        <Input
+          value={recipientNpub}
+          onChange={e => setRecipientNpub(e.target.value)}
+          placeholder="npub1…"
+          className="bg-black/50 border-white/10 font-mono text-xs h-11"
+        />
+      </div>
+
+      <div>
+        <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-2 block">Skills you witnessed</Label>
+        <div className="flex flex-wrap gap-1.5">
+          {SKILL_OPTIONS.map(s => (
+            <button
+              key={s.id}
+              onClick={() => toggleSkill(s.id)}
+              className={cn(
+                'px-2.5 py-1.5 rounded-lg text-xs font-bold border transition-all',
+                selectedSkills.includes(s.id)
+                  ? 'bg-yellow-500/15 border-yellow-400/50 text-yellow-200'
+                  : 'bg-black/30 border-white/8 text-gray-500 hover:border-white/20'
+              )}
+            >
+              {s.icon} {s.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <Label className="text-[10px] uppercase tracking-widest text-gray-500 mb-1.5 block">Where did you see it? <span className="normal-case text-gray-600">(optional)</span></Label>
+        <Input
+          value={spotName}
+          onChange={e => setSpotName(e.target.value)}
+          placeholder="MACBA, The Berrics, Burnside…"
+          className="bg-black/50 border-white/10 text-sm h-11"
+        />
+      </div>
+
+      <Button
+        onClick={handleAward}
+        disabled={isPending || selectedSkills.length === 0 || !recipientNpub.trim()}
+        className="w-full h-12 bg-yellow-500 hover:bg-yellow-400 text-black font-black uppercase gap-2"
+      >
+        <Award className="h-4 w-4" />
+        {isPending ? 'Signing on Nostr…' : 'Award Badge'}
+      </Button>
+    </div>
+  );
+}