feat: ship creator journey v2 and profile updates

resources/js/Pages/Collection/CollectionManage.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { Head, usePage } from '@inertiajs/react'
+import CollectionCard from '../../components/profile/collections/CollectionCard'
 import CollectionVisibilityBadge from '../../components/profile/collections/CollectionVisibilityBadge'
 
 function getCsrfToken() {

resources/js/Pages/Collection/CollectionShow.jsx

@@ -203,6 +203,25 @@ function EntityLinkCard({ item }) {
   )
 }
 
+function CollectionCover({ collection }) {
+  const coverImage = collection?.cover_image
+  const coverMaturity = collection?.cover_image_maturity || null
+  const shouldBlur = Boolean(coverMaturity?.should_blur)
+  const isMature = Boolean(coverMaturity?.is_mature_effective)
+
+  if (!coverImage) {
+    return <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,#08111f,#0f172a,#08111f)] text-slate-500"><i className="fa-solid fa-layer-group text-5xl" /></div>
+  }
+
+  return (
+    <div className="relative">
+      <img src={coverImage} alt={collection?.title} className={`aspect-[16/10] h-full w-full object-cover ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`} />
+      {isMature ? <div className="absolute left-4 top-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature cover</div> : null}
+      {shouldBlur ? <div className="absolute inset-x-4 bottom-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
+    </div>
+  )
+}
+
 function humanizeToken(value) {
   return String(value || '')
     .replaceAll('_', ' ')
@@ -745,7 +764,7 @@ export default function CollectionShow() {
           <section className="mt-6 overflow-hidden rounded-[34px] border border-white/10 bg-white/[0.04] shadow-[0_30px_90px_rgba(2,6,23,0.28)] backdrop-blur-sm">
             <div className="grid gap-6 p-5 md:p-7 xl:grid-cols-[minmax(0,1.2fr)_420px]">
               <div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-slate-950/60">
-                {collection?.cover_image ? <img src={collection.cover_image} alt={collection.title} className="aspect-[16/10] h-full w-full object-cover" /> : <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,#08111f,#0f172a,#08111f)] text-slate-500"><i className="fa-solid fa-layer-group text-5xl" /></div>}
+                <CollectionCover collection={collection} />
                 <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.8),rgba(2,6,23,0.08))]" />
               </div>
 

resources/js/Pages/Collection/FeaturedArtworksAdmin.jsx

@@ -0,0 +1,723 @@
+import React from 'react'
+import { Head, usePage } from '@inertiajs/react'
+
+function getCsrfToken() {
+  if (typeof document === 'undefined') return ''
+  return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
+}
+
+async function requestJson(url, { method = 'POST', body } = {}) {
+  const response = await fetch(url, {
+    method,
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  })
+
+  const payload = await response.json().catch(() => ({}))
+  if (!response.ok) {
+    throw new Error(payload?.message || payload?.errors?.artwork_id?.[0] || payload?.errors?.is_active?.[0] || payload?.errors?.force_hero?.[0] || 'Request failed.')
+  }
+
+  return payload
+}
+
+function isoToLocalInput(value) {
+  if (!value) return ''
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+
+  const local = new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
+  return local.toISOString().slice(0, 16)
+}
+
+function localInputToIso(value) {
+  if (!value) return null
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+
+  return date.toISOString()
+}
+
+function formatDateTime(value) {
+  if (!value) return '—'
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date)
+}
+
+function Badge({ label, tone = 'slate' }) {
+  const toneClasses = {
+    slate: 'border-white/10 bg-white/10 text-slate-100',
+    sky: 'border-sky-300/20 bg-sky-400/15 text-sky-100',
+    emerald: 'border-emerald-300/20 bg-emerald-400/15 text-emerald-100',
+    amber: 'border-amber-300/20 bg-amber-400/15 text-amber-100',
+    rose: 'border-rose-300/20 bg-rose-400/15 text-rose-100',
+  }
+
+  return (
+    <span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.slate}`}>
+      {label}
+    </span>
+  )
+}
+
+function Field({ label, help, children }) {
+  return (
+    <label className="block space-y-2">
+      <span className="text-sm font-semibold text-white">{label}</span>
+      {children}
+      {help ? <span className="block text-xs leading-relaxed text-slate-400">{help}</span> : null}
+    </label>
+  )
+}
+
+function StatCard({ label, value, tone = 'sky' }) {
+  const toneClasses = {
+    sky: 'border-sky-300/15 bg-sky-400/10 text-sky-100',
+    amber: 'border-amber-300/15 bg-amber-400/10 text-amber-100',
+    emerald: 'border-emerald-300/15 bg-emerald-400/10 text-emerald-100',
+    rose: 'border-rose-300/15 bg-rose-400/10 text-rose-100',
+  }
+
+  return (
+    <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5 backdrop-blur-sm">
+      <div className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.sky}`}>{label}</div>
+      <div className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{value}</div>
+    </div>
+  )
+}
+
+function emptyForm() {
+  return {
+    artwork_id: '',
+    priority: 100,
+    featured_at: isoToLocalInput(new Date().toISOString()),
+    expires_at: '',
+    is_active: true,
+  }
+}
+
+function mapEntryToCandidate(entry) {
+  if (!entry) return null
+
+  return {
+    ...entry.artwork,
+    medals: entry.medals,
+    eligibility: entry.eligibility,
+    existing_feature_count: entry.duplicate_count,
+    already_featured: entry.duplicate_count > 0,
+  }
+}
+
+function compareEntries(left, right, sortKey, direction) {
+  const dir = direction === 'asc' ? 1 : -1
+  const value = (entry) => {
+    switch (sortKey) {
+      case 'featured_at':
+        return new Date(entry.featured_at || 0).getTime() || 0
+      case 'expires_at':
+        return new Date(entry.expires_at || 0).getTime() || 0
+      case 'score_30d':
+        return Number(entry.medals?.score_30d || 0)
+      default:
+        return Number(entry.priority || 0)
+    }
+  }
+
+  const leftValue = value(left)
+  const rightValue = value(right)
+  if (leftValue !== rightValue) {
+    return (leftValue > rightValue ? 1 : -1) * dir
+  }
+
+  const leftFeatured = new Date(left.featured_at || 0).getTime() || 0
+  const rightFeatured = new Date(right.featured_at || 0).getTime() || 0
+  if (leftFeatured !== rightFeatured) {
+    return (leftFeatured > rightFeatured ? 1 : -1) * dir
+  }
+
+  return Number(right.id || 0) - Number(left.id || 0)
+}
+
+export default function FeaturedArtworksAdmin() {
+  const { props } = usePage()
+  const endpoints = props.endpoints || {}
+  const capabilities = props.capabilities || {}
+  const seo = props.seo || {}
+  const [entries, setEntries] = React.useState(Array.isArray(props.entries) ? props.entries : [])
+  const [winner, setWinner] = React.useState(props.winner || null)
+  const [stats, setStats] = React.useState(props.stats || {})
+  const [notice, setNotice] = React.useState('')
+  const [busy, setBusy] = React.useState('')
+  const [filter, setFilter] = React.useState('all')
+  const [sortKey, setSortKey] = React.useState('priority')
+  const [sortDirection, setSortDirection] = React.useState('desc')
+  const [listQuery, setListQuery] = React.useState('')
+  const [searchQuery, setSearchQuery] = React.useState('')
+  const [searchResults, setSearchResults] = React.useState([])
+  const [selectedArtwork, setSelectedArtwork] = React.useState(null)
+  const [editingId, setEditingId] = React.useState(null)
+  const [form, setForm] = React.useState(emptyForm())
+
+  React.useEffect(() => {
+    setEntries(Array.isArray(props.entries) ? props.entries : [])
+    setWinner(props.winner || null)
+    setStats(props.stats || {})
+  }, [props.entries, props.stats, props.winner])
+
+  function syncPayload(payload) {
+    setEntries(Array.isArray(payload.entries) ? payload.entries : [])
+    setWinner(payload.winner || null)
+    setStats(payload.stats || {})
+    if (payload.message) {
+      setNotice(payload.message)
+    }
+  }
+
+  function resetEditor() {
+    setEditingId(null)
+    setSelectedArtwork(null)
+    setSearchResults([])
+    setSearchQuery('')
+    setForm(emptyForm())
+  }
+
+  async function handleArtworkSearch(event) {
+    event.preventDefault()
+    if (!searchQuery.trim()) {
+      setSearchResults([])
+      return
+    }
+
+    setBusy('search')
+    setNotice('')
+
+    try {
+      const url = `${endpoints.search}?q=${encodeURIComponent(searchQuery.trim())}`
+      const payload = await requestJson(url, { method: 'GET' })
+      setSearchResults(Array.isArray(payload.results) ? payload.results : [])
+      if ((payload.results || []).length === 0) {
+        setNotice('No artworks matched that search.')
+      }
+    } catch (error) {
+      setNotice(error.message || 'Artwork search failed.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  function chooseArtwork(artwork) {
+    setSelectedArtwork(artwork)
+    setForm((current) => ({
+      ...current,
+      artwork_id: artwork.id,
+    }))
+  }
+
+  function editEntry(entry) {
+    setEditingId(entry.id)
+    setSelectedArtwork(mapEntryToCandidate(entry))
+    setSearchResults([])
+    setSearchQuery('')
+    setForm({
+      artwork_id: entry.artwork_id,
+      priority: entry.priority,
+      featured_at: isoToLocalInput(entry.featured_at),
+      expires_at: isoToLocalInput(entry.expires_at),
+      is_active: Boolean(entry.is_active),
+    })
+
+    if (typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault()
+    if (!editingId && !form.artwork_id) {
+      setNotice('Select an artwork first.')
+      return
+    }
+
+    setBusy('submit')
+    setNotice('')
+
+    try {
+      const payload = await requestJson(
+        editingId
+          ? endpoints.updatePattern.replace('__FEATURE__', String(editingId))
+          : endpoints.store,
+        {
+          method: editingId ? 'PATCH' : 'POST',
+          body: {
+            artwork_id: Number(form.artwork_id),
+            priority: Number(form.priority || 0),
+            featured_at: localInputToIso(form.featured_at),
+            expires_at: localInputToIso(form.expires_at),
+            is_active: Boolean(form.is_active),
+          },
+        },
+      )
+
+      syncPayload(payload)
+      resetEditor()
+    } catch (error) {
+      setNotice(error.message || 'Failed to save this featured entry.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handleToggle(entry) {
+    setBusy(`toggle-${entry.id}`)
+    setNotice('')
+
+    try {
+      const payload = await requestJson(endpoints.togglePattern.replace('__FEATURE__', String(entry.id)), {
+        method: 'PATCH',
+      })
+      syncPayload(payload)
+    } catch (error) {
+      setNotice(error.message || 'Failed to change active state.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handleDelete(entry) {
+    if (typeof window !== 'undefined' && !window.confirm(`Delete featured entry #${entry.id}?`)) {
+      return
+    }
+
+    setBusy(`delete-${entry.id}`)
+    setNotice('')
+
+    try {
+      const payload = await requestJson(endpoints.destroyPattern.replace('__FEATURE__', String(entry.id)), {
+        method: 'DELETE',
+      })
+      syncPayload(payload)
+
+      if (editingId === entry.id) {
+        resetEditor()
+      }
+    } catch (error) {
+      setNotice(error.message || 'Failed to delete this featured entry.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handleForceHero(entry) {
+    setBusy(`force-${entry.id}`)
+    setNotice('')
+
+    try {
+      const payload = await requestJson(endpoints.forceHeroPattern.replace('__FEATURE__', String(entry.id)), {
+        method: 'PATCH',
+      })
+      syncPayload(payload)
+    } catch (error) {
+      setNotice(error.message || 'Failed to change force hero state.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  const filteredEntries = React.useMemo(() => {
+    const query = listQuery.trim().toLowerCase()
+
+    return entries
+      .filter((entry) => {
+        if (filter === 'active') return Boolean(entry.is_active)
+        if (filter === 'inactive') return !entry.is_active
+        if (filter === 'expired') return Boolean(entry.is_expired)
+        if (filter === 'winner') return Boolean(entry.is_winner)
+        if (filter === 'eligible') return Boolean(entry.eligibility?.is_eligible)
+        if (filter === 'ineligible') return !entry.eligibility?.is_eligible
+        return true
+      })
+      .filter((entry) => {
+        if (!query) return true
+
+        const haystack = [
+          entry.artwork?.title,
+          entry.artwork?.owner?.display_name,
+          entry.artwork?.owner?.username,
+          entry.artwork?.id,
+        ].join(' ').toLowerCase()
+
+        return haystack.includes(query)
+      })
+      .sort((left, right) => compareEntries(left, right, sortKey, sortDirection))
+  }, [entries, filter, listQuery, sortDirection, sortKey])
+
+  const duplicateSelection = !editingId && selectedArtwork?.already_featured
+
+  return (
+    <>
+      <Head>
+        <title>{seo.title || 'Featured Artworks'}</title>
+        {seo.description ? <meta name="description" content={seo.description} /> : null}
+        {seo.robots ? <meta name="robots" content={seo.robots} /> : null}
+      </Head>
+
+      <div className="min-h-screen bg-[#07111c] text-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+          <section className="overflow-hidden rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(245,158,11,0.14),_transparent_35%),linear-gradient(180deg,_rgba(6,14,25,0.92),_rgba(8,18,32,0.96))] p-8 shadow-[0_28px_90px_rgba(2,6,23,0.45)]">
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+              <div className="max-w-3xl">
+                <div className="inline-flex rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100">Featured Artworks</div>
+                <h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">Homepage hero control, with the real winner logic exposed.</h1>
+                <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">Editors can create, update, activate, expire, and remove featured entries here. The winner summary below mirrors the public homepage selection order: priority, recent medal score, featured date, then published date.</p>
+              </div>
+              <div className="grid w-full max-w-xl grid-cols-2 gap-4 md:grid-cols-3">
+                <StatCard label="Entries" value={stats.total || 0} tone="sky" />
+                <StatCard label="Eligible" value={stats.eligible || 0} tone="emerald" />
+                <StatCard label="Expired" value={stats.expired || 0} tone="amber" />
+                <StatCard label="Active" value={stats.active || 0} tone="sky" />
+                <StatCard label="Inactive" value={stats.inactive || 0} tone="rose" />
+                <StatCard label="Not Eligible" value={stats.ineligible || 0} tone="rose" />
+              </div>
+            </div>
+          </section>
+
+          {notice ? (
+            <div className="rounded-2xl border border-sky-300/15 bg-sky-400/10 px-4 py-3 text-sm text-sky-50">
+              {notice}
+            </div>
+          ) : null}
+
+          <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
+            <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Current Homepage Hero</div>
+                  <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{winner ? winner.artwork?.title : 'No eligible featured artwork'}</h2>
+                  <p className="mt-2 max-w-2xl text-sm leading-7 text-slate-300">
+                    {winner?.selection_reason || 'There is no active, non-expired, eligible featured artwork right now.'}
+                  </p>
+                  {winner?.is_force_hero ? (
+                    <div className="mt-4 max-w-2xl rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-50">
+                      Forced by editor. This artwork bypasses the normal hero winner order until Force Hero is disabled on its featured row.
+                    </div>
+                  ) : null}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {winner ? <Badge label="Winner" tone="amber" /> : <Badge label="No Winner" tone="rose" />}
+                  {winner?.is_force_hero ? <Badge label="Force Hero" tone="amber" /> : null}
+                </div>
+              </div>
+
+              {winner ? (
+                <div className="mt-6 grid gap-6 lg:grid-cols-[220px_1fr]">
+                  <a href={winner.artwork?.canonical_url || '#'} className="overflow-hidden rounded-[24px] border border-white/10 bg-[#09121f]" target="_blank" rel="noreferrer">
+                    <img
+                      src={winner.artwork?.thumbnail?.url}
+                      alt={winner.artwork?.title || 'Winner preview'}
+                      className="h-full min-h-[180px] w-full object-cover"
+                    />
+                  </a>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Artist</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{winner.artwork?.owner?.display_name || 'Unknown'}</div>
+                      <div className="mt-1 text-sm text-slate-400">{winner.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${winner.artwork?.owner?.username || ''}`}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Medal Score (30d)</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{winner.medals?.score_30d || 0}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Priority</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{winner.priority}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Featured Since</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.featured_at)}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4 sm:col-span-2">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Published At</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.artwork?.published_at)}</div>
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+            </section>
+
+            <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{editingId ? 'Edit Entry' : 'Create Entry'}</div>
+                  <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{editingId ? `Featured entry #${editingId}` : 'Add an artwork to the featured pool'}</h2>
+                </div>
+                {editingId ? (
+                  <button type="button" onClick={resetEditor} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/5">
+                    Cancel edit
+                  </button>
+                ) : null}
+              </div>
+
+              {!editingId ? (
+                <form onSubmit={handleArtworkSearch} className="mt-6 space-y-4 rounded-[24px] border border-white/10 bg-black/20 p-4">
+                  <Field label="Artwork selector" help="Search by artwork ID, title, slug, artist, or group. Pick a result to lock it into the form.">
+                    <div className="flex gap-3">
+                      <input
+                        type="text"
+                        value={searchQuery}
+                        onChange={(event) => setSearchQuery(event.target.value)}
+                        className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                        placeholder="Try an artwork ID, title, or creator"
+                      />
+                      <button type="submit" disabled={busy === 'search'} className="rounded-2xl bg-sky-400 px-4 py-3 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-60">
+                        {busy === 'search' ? 'Searching…' : 'Search'}
+                      </button>
+                    </div>
+                  </Field>
+
+                  {searchResults.length > 0 ? (
+                    <div className="grid gap-3">
+                      {searchResults.map((artwork) => (
+                        <button
+                          type="button"
+                          key={artwork.id}
+                          onClick={() => chooseArtwork(artwork)}
+                          className={`grid gap-4 rounded-2xl border p-3 text-left transition sm:grid-cols-[88px_1fr] ${selectedArtwork?.id === artwork.id ? 'border-sky-300/40 bg-sky-400/10' : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]'}`}
+                        >
+                          <img src={artwork.thumbnail?.url} alt={artwork.title} className="h-24 w-full rounded-2xl object-cover" />
+                          <div className="space-y-2">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <span className="text-sm font-semibold text-white">{artwork.title}</span>
+                              <span className="text-xs text-slate-400">#{artwork.id}</span>
+                              {artwork.already_featured ? <Badge label="Already Featured" tone="amber" /> : null}
+                            </div>
+                            <div className="text-xs text-slate-400">{artwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {artwork.medals?.score_30d || 0}</div>
+                            <div className="flex flex-wrap gap-2">
+                              {(artwork.eligibility?.is_eligible ? [{ label: 'Eligible', tone: 'emerald' }] : [{ label: 'Not eligible', tone: 'rose' }]).concat(
+                                (artwork.eligibility?.reasons || []).map((reason) => ({
+                                  label: reason,
+                                  tone: reason === 'Missing preview' ? 'rose' : 'slate',
+                                }))
+                              ).slice(0, 4).map((badge) => (
+                                <Badge key={`${artwork.id}-${badge.label}`} label={badge.label} tone={badge.tone} />
+                              ))}
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                </form>
+              ) : null}
+
+              {selectedArtwork ? (
+                <div className="mt-6 grid gap-4 rounded-[24px] border border-white/10 bg-black/20 p-4 sm:grid-cols-[108px_1fr]">
+                  <img src={selectedArtwork.thumbnail?.url} alt={selectedArtwork.title || 'Artwork preview'} className="h-28 w-full rounded-2xl object-cover" />
+                  <div className="space-y-3">
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Selected Artwork</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{selectedArtwork.title}</div>
+                      <div className="mt-1 text-sm text-slate-400">#{selectedArtwork.id} • {selectedArtwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {selectedArtwork.medals?.score_30d || 0}</div>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {(selectedArtwork.eligibility?.is_eligible ? [{ label: 'Currently eligible', tone: 'emerald' }] : [{ label: 'Currently ineligible', tone: 'rose' }]).concat(
+                        (selectedArtwork.eligibility?.reasons || []).map((reason) => ({
+                          label: reason,
+                          tone: reason === 'Missing preview' ? 'rose' : 'slate',
+                        }))
+                      ).map((badge) => (
+                        <Badge key={`selected-${badge.label}`} label={badge.label} tone={badge.tone} />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+
+              {duplicateSelection ? (
+                <div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">
+                  This artwork already has a featured entry. Edit the existing row instead of creating a duplicate.
+                </div>
+              ) : null}
+
+              <form onSubmit={handleSubmit} className="mt-6 grid gap-4 sm:grid-cols-2">
+                <Field label="Priority" help="Higher priority always wins before medal score is considered.">
+                  <input
+                    type="number"
+                    min="0"
+                    value={form.priority}
+                    onChange={(event) => setForm((current) => ({ ...current, priority: event.target.value }))}
+                    className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                  />
+                </Field>
+
+                <Field label="Active" help="Inactive rows stay visible in admin but cannot win the homepage hero.">
+                  <label className="flex h-[52px] items-center gap-3 rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-slate-100">
+                    <input
+                      type="checkbox"
+                      checked={Boolean(form.is_active)}
+                      onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
+                      className="h-4 w-4 rounded border-white/20 bg-transparent text-sky-400 focus:ring-sky-300/30"
+                    />
+                    <span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
+                  </label>
+                </Field>
+
+                <Field label="Featured Since">
+                  <input
+                    type="datetime-local"
+                    value={form.featured_at}
+                    onChange={(event) => setForm((current) => ({ ...current, featured_at: event.target.value }))}
+                    className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                  />
+                </Field>
+
+                <Field label="Expires">
+                  <input
+                    type="datetime-local"
+                    value={form.expires_at}
+                    onChange={(event) => setForm((current) => ({ ...current, expires_at: event.target.value }))}
+                    className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                  />
+                </Field>
+
+                <div className="sm:col-span-2 flex flex-wrap gap-3">
+                  <button
+                    type="submit"
+                    disabled={busy === 'submit' || (!editingId && !selectedArtwork) || duplicateSelection}
+                    className="rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    {busy === 'submit' ? 'Saving…' : editingId ? 'Save Changes' : 'Create Featured Entry'}
+                  </button>
+                  {editingId ? (
+                    <button type="button" onClick={resetEditor} className="rounded-2xl border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
+                      Reset
+                    </button>
+                  ) : null}
+                </div>
+              </form>
+            </section>
+          </div>
+
+          <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+              <div>
+                <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Featured Pool</div>
+                <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Every featured row, with eligibility and winner state visible.</h2>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3 lg:w-[720px]">
+                <input
+                  type="text"
+                  value={listQuery}
+                  onChange={(event) => setListQuery(event.target.value)}
+                  placeholder="Filter by title, artist, or artwork ID"
+                  className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                />
+                <select value={filter} onChange={(event) => setFilter(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
+                  <option value="all">All rows</option>
+                  <option value="active">Active</option>
+                  <option value="inactive">Inactive</option>
+                  <option value="expired">Expired</option>
+                  <option value="winner">Winner</option>
+                  <option value="eligible">Eligible</option>
+                  <option value="ineligible">Not eligible</option>
+                </select>
+                <div className="grid grid-cols-[1fr_auto] gap-3">
+                  <select value={sortKey} onChange={(event) => setSortKey(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
+                    <option value="priority">Priority</option>
+                    <option value="featured_at">Featured Since</option>
+                    <option value="expires_at">Expires</option>
+                    <option value="score_30d">Medal Score (30d)</option>
+                  </select>
+                  <button type="button" onClick={() => setSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} className="rounded-2xl border border-white/10 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
+                    {sortDirection === 'desc' ? 'Desc' : 'Asc'}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 overflow-hidden rounded-[24px] border border-white/10">
+              <div className="hidden grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] gap-4 border-b border-white/10 bg-black/20 px-5 py-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 lg:grid">
+                <div>Artwork</div>
+                <div>Artist / Owner</div>
+                <div>Priority</div>
+                <div>Featured Since</div>
+                <div>Expires</div>
+                <div>Score (30d)</div>
+                <div>Status</div>
+                <div>Actions</div>
+              </div>
+
+              <div className="divide-y divide-white/10">
+                {filteredEntries.length === 0 ? (
+                  <div className="px-5 py-10 text-center text-sm text-slate-400">No featured entries match the current filter.</div>
+                ) : filteredEntries.map((entry) => (
+                  <div key={entry.id} className="grid gap-5 bg-white/[0.02] px-5 py-5 lg:grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] lg:items-center">
+                    <div className="grid gap-4 sm:grid-cols-[92px_1fr]">
+                      <a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="overflow-hidden rounded-2xl border border-white/10 bg-[#08111d]">
+                        <img src={entry.artwork?.thumbnail?.url} alt={entry.artwork?.title || 'Artwork preview'} className="h-24 w-full object-cover" />
+                      </a>
+                      <div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-semibold text-white">{entry.artwork?.title || 'Missing artwork'}</span>
+                          <span className="text-xs text-slate-400">#{entry.artwork?.id || entry.artwork_id}</span>
+                        </div>
+                        <div className="mt-2 text-xs leading-6 text-slate-400">Visibility: {entry.artwork?.visibility || '—'} • Published: {entry.artwork?.published_at ? 'Yes' : 'No'}</div>
+                        {entry.is_winner && entry.winner_reason ? <div className="mt-2 text-xs leading-6 text-amber-100">{entry.winner_reason}</div> : null}
+                      </div>
+                    </div>
+
+                    <div>
+                      <div className="text-sm font-semibold text-white">{entry.artwork?.owner?.display_name || 'Unknown'}</div>
+                      <div className="mt-1 text-xs text-slate-400">{entry.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${entry.artwork?.owner?.username || ''}`}</div>
+                    </div>
+
+                    <div className="text-sm font-semibold text-white">{entry.priority}</div>
+                    <div className="text-sm text-slate-200">{formatDateTime(entry.featured_at)}</div>
+                    <div className="text-sm text-slate-200">{formatDateTime(entry.expires_at)}</div>
+                    <div className="text-sm font-semibold text-white">{entry.medals?.score_30d || 0}</div>
+
+                    <div className="flex flex-wrap gap-2">
+                      {(entry.status_badges || []).map((badge, index) => (
+                        <Badge key={`${entry.id}-${badge.label}-${index}`} label={badge.label} tone={badge.tone} />
+                      ))}
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 lg:justify-end">
+                      <button type="button" onClick={() => editEntry(entry)} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
+                        Edit
+                      </button>
+                      {capabilities.forceHeroEnabled ? (
+                        <button type="button" onClick={() => handleForceHero(entry)} disabled={busy === `force-${entry.id}`} className={`rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition disabled:cursor-not-allowed disabled:opacity-60 ${entry.is_force_hero ? 'border-amber-300/25 text-amber-100 hover:border-amber-300/40 hover:bg-amber-400/10' : 'border-amber-300/15 text-amber-50 hover:border-amber-300/30 hover:bg-amber-400/5'}`}>
+                          {busy === `force-${entry.id}` ? 'Saving…' : entry.is_force_hero ? 'Disable Force Hero' : 'Force Hero'}
+                        </button>
+                      ) : null}
+                      <button type="button" onClick={() => handleToggle(entry)} disabled={busy === `toggle-${entry.id}`} className="rounded-full border border-sky-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-400/10 disabled:cursor-not-allowed disabled:opacity-60">
+                        {busy === `toggle-${entry.id}` ? 'Saving…' : entry.is_active ? 'Deactivate' : 'Activate'}
+                      </button>
+                      <button type="button" onClick={() => handleDelete(entry)} disabled={busy === `delete-${entry.id}`} className="rounded-full border border-rose-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-400/10 disabled:cursor-not-allowed disabled:opacity-60">
+                        {busy === `delete-${entry.id}` ? 'Deleting…' : 'Delete'}
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </>
+  )
+}