Build world campaigns rewards and recaps

resources/js/components/profile/worlds/ProfileWorldStatsRow.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+const TONE_STYLES = {
+  sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
+  amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
+  emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
+  violet: 'border-violet-300/20 bg-violet-400/10 text-violet-100',
+}
+
+function StatCard({ icon, label, value, tone, hint }) {
+  return (
+    <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4 shadow-[0_18px_42px_rgba(2,6,23,0.18)]">
+      <div className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${TONE_STYLES[tone] || TONE_STYLES.sky}`}>
+        <i className={`fa-solid ${icon} text-sm`} />
+      </div>
+      <div className="mt-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
+      <div className="mt-1 text-2xl font-bold tracking-tight text-white">{value}</div>
+      {hint ? <div className="mt-2 text-xs leading-relaxed text-slate-400">{hint}</div> : null}
+    </div>
+  )
+}
+
+export default function ProfileWorldStatsRow({ summary }) {
+  const worldAppearances = summary?.world_appearances || summary?.worlds_joined || 0
+
+  return (
+    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+      <StatCard
+        icon="fa-globe"
+        label="World Appearances"
+        value={worldAppearances}
+        tone="sky"
+        hint={summary?.active_year_span?.label ? `Active across ${summary.active_year_span.label}` : 'Edition-aware creator history'}
+      />
+      <StatCard
+        icon="fa-stars"
+        label="Featured"
+        value={summary?.featured_appearances || 0}
+        tone="amber"
+        hint="Editorial features and highlighted placements"
+      />
+      <StatCard
+        icon="fa-trophy"
+        label="Wins / Finalists"
+        value={summary?.finalist_winner_appearances || 0}
+        tone="emerald"
+        hint="Higher-tier placements tied to world-linked challenges"
+      />
+      <StatCard
+        icon="fa-bolt"
+        label="Spotlights"
+        value={summary?.spotlight_appearances || 0}
+        tone="violet"
+        hint="Editorial spotlight moments across editions"
+      />
+    </div>
+  )
+}