// Seating planner — the visual differentiator

function SeatingScreen() {
  const tables = useTables();
  const [editingId, setEditingId] = React.useState(null);
  const [placing, setPlacing] = React.useState(null);
  const [draggingGuest, setDraggingGuest] = React.useState(null);
  const editing = editingId === 'new'
    ? null
    : tables.all.find(t => t.id === editingId);
  const isAdding = editingId === 'new';

  const totalSeats  = tables.totalSeats;
  const filledSeats = tables.filledSeats;
  const unassigned  = tables.unassigned;
  const unassignedList = tables.unassignedGuests;

  // Drop a dragged guest onto a table.
  const dropOnTable = (tableId) => {
    if (!draggingGuest) return;
    const t = tables.all.find(x => x.id === tableId);
    if (!t) return;
    const seated = (t.seats || []).filter(Boolean).length;
    if (seated >= (t.capacity || 0)) return; // full — silently ignore
    tables.seatGuest(tableId, draggingGuest.name);
    setDraggingGuest(null);
  };

  return (
    <div style={{ background: W.bg, paddingBottom: 28, position: 'relative' }}>
      <div style={{ paddingTop: 56 }}/>
      <ScreenHeader eyebrow="Seating" title={`${tables.all.length} ${tables.all.length === 1 ? 'table' : 'tables'}`}/>

      {/* Hero summary */}
      <div style={{ padding: '8px 16px 16px' }}>
        <Card style={{ padding: 22 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
            <div>
              <div style={{
                fontFamily: FONT_UI, fontSize: 10.5, fontWeight: 600,
                letterSpacing: 1.4, textTransform: 'uppercase', color: W.muted,
              }}>{draggingGuest ? 'Drop on a table' : 'Seated'}</div>
              <div style={{
                fontFamily: FONT_DISPLAY, fontSize: 52, fontWeight: 500,
                color: W.ink, letterSpacing: -1.6, lineHeight: 0.95, marginTop: 6,
              }}>
                {filledSeats}
                <span style={{ color: W.faint, fontSize: 32, letterSpacing: -0.6 }}>/{totalSeats}</span>
              </div>
              <div style={{
                fontFamily: FONT_UI, fontSize: 13, color: W.ink2, marginTop: 10,
              }}>
                {unassigned} {unassigned === 1 ? 'guest' : 'guests'} still to place
              </div>
            </div>
            <ProgressRing value={filledSeats/totalSeats} size={78} stroke={6} color={W.clay}>
              <div style={{
                fontFamily: FONT_DISPLAY, fontSize: 22, color: W.ink,
                letterSpacing: -0.4, lineHeight: 1,
              }}>{Math.round((filledSeats/totalSeats)*100)}%</div>
            </ProgressRing>
          </div>

          {/* Mini floor-plan glyph */}
          <div style={{ marginTop: 22, paddingTop: 20, borderTop: `0.5px solid ${W.lineSoft}` }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 10,
            }}>
              <div style={{
                fontFamily: FONT_UI, fontSize: 11, fontWeight: 600,
                letterSpacing: 0.8, textTransform: 'uppercase', color: W.muted,
              }}>Floor plan</div>
              <div style={{
                fontFamily: FONT_UI, fontSize: 12, color: W.clay, fontWeight: 500,
              }}>Open</div>
            </div>
            <MiniFloorPlan/>
          </div>
        </Card>
      </div>

      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 8, padding: '0 22px 14px', overflowX: 'auto' }}>
        {[
          ['all', 'All tables', tables.all.length],
          ['family', 'Family', tables.all.filter(t => t.kind === 'family').length],
          ['friends', 'Friends', tables.all.filter(t => t.kind === 'friends').length],
          ['work', 'Work', tables.all.filter(t => t.kind === 'work').length],
          ['unassigned', 'Unassigned', unassigned],
        ].map(([k, label, n], i) => {
          const active = i === 0;
          return (
            <button key={k} style={{
              background: active ? W.ink : 'transparent',
              border: active ? 'none' : `0.5px solid ${W.line}`,
              color: active ? W.bg : W.ink2,
              fontFamily: FONT_UI, fontSize: 12.5, fontWeight: 500,
              padding: '7px 12px', borderRadius: 999, cursor: 'pointer',
              whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 6,
            }}>
              {label}
              <span style={{
                fontSize: 10.5, color: active ? 'rgba(245,239,226,0.55)' : W.muted, fontWeight: 600,
              }}>{n}</span>
            </button>
          );
        })}
      </div>

      {/* Table grid */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: '0 16px',
      }}>
        {tables.all.map(t => {
          const seated = (t.seats || []).filter(Boolean).length;
          const full = seated >= (t.capacity || 0);
          const isDropTarget = !!draggingGuest;
          return (
            <TableCard
              key={t.id}
              table={t}
              onClick={() => setEditingId(t.id)}
              dropHighlight={isDropTarget ? (full ? 'full' : 'open') : null}
              onDragOver={(e) => { if (!full && draggingGuest) e.preventDefault(); }}
              onDrop={(e) => { e.preventDefault(); dropOnTable(t.id); }}
            />
          );
        })}
      </div>

      {/* Add table */}
      <div style={{ padding: '16px 16px 4px' }}>
        <button onClick={() => setEditingId('new')} style={{
          width: '100%', padding: '14px 0',
          background: W.ink, color: W.bg, border: 'none', borderRadius: 999,
          cursor: 'pointer',
          fontFamily: FONT_UI, fontSize: 14, fontWeight: 500,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Icon name="plus" size={15} color={W.bg} strokeWidth={1.8}/>
          Add table
        </button>
      </div>

      {/* Unassigned */}
      <div style={{ height: 24 }}/>
      <SectionTitle
        eyebrow={`${unassignedList.length} ${unassignedList.length === 1 ? 'guest' : 'guests'}`}
        title="Unassigned"
        action={unassignedList.length > 0 ? 'Auto-place' : null}
        onAction={unassignedList.length > 0 ? () => {
          unassignedList.forEach(g => {
            const target = tables.all.find(t => (t.seats || []).filter(Boolean).length < (t.capacity || 0));
            if (target) tables.seatGuest(target.id, g.name);
          });
        } : null}/>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {unassignedList.length === 0 ? (
          <Card style={{ padding: 20, textAlign: 'center' }}>
            <div style={{
              fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 14, color: W.muted,
            }}>Everyone has a seat.</div>
          </Card>
        ) : unassignedList.map(u => (
          <Card key={u.id}
            draggable
            onDragStart={(e) => {
              setDraggingGuest(u);
              try {
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', u.id);
              } catch {}
            }}
            onDragEnd={() => setDraggingGuest(null)}
            onClick={() => setPlacing(u)}
            style={{
              padding: 12, display: 'flex', alignItems: 'center', gap: 12,
              cursor: 'grab',
              opacity: draggingGuest && draggingGuest.id === u.id ? 0.5 : 1,
              transition: 'opacity 150ms ease',
            }}>
            <div style={{
              width: 34, height: 34, borderRadius: 999,
              background: '#fbf6ea', border: `1px dashed ${W.faint}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONT_DISPLAY, fontSize: 13, color: W.muted,
              flexShrink: 0,
            }}>{initials(u.name)}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: FONT_UI, fontSize: 14, fontWeight: 500, color: W.ink,
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>{u.name}</div>
              <div style={{
                fontFamily: FONT_UI, fontSize: 11.5, color: W.muted, marginTop: 2,
              }}>{u.group || 'Ungrouped'}{u.partySize > 1 ? ` · Party of ${u.partySize}` : ''}</div>
            </div>
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 2,
              opacity: 0.5,
            }}>
              {[0,1,2].map(i => (
                <div key={i} style={{ display: 'flex', gap: 2 }}>
                  <span style={{ width: 3, height: 3, borderRadius: 999, background: W.muted }}/>
                  <span style={{ width: 3, height: 3, borderRadius: 999, background: W.muted }}/>
                </div>
              ))}
            </div>
            <button onClick={(e) => { e.stopPropagation(); setPlacing(u); }} style={{
              background: W.ink, color: W.bg, border: 'none',
              padding: '7px 12px', borderRadius: 999,
              fontFamily: FONT_UI, fontSize: 11.5, fontWeight: 500, cursor: 'pointer',
            }}>Place</button>
          </Card>
        ))}
      </div>

      {(editing || isAdding) && (
        <TableEditSheet
          table={isAdding
            ? { id: null, name: 'New table', capacity: 8, kind: 'friends', seats: [] }
            : editing}
          isNew={isAdding}
          onClose={() => setEditingId(null)}
          onSave={(patch) => {
            if (isAdding) tables.addTable(patch);
            else tables.updateTable(editing.id, patch);
            setEditingId(null);
          }}
          onDelete={isAdding ? null : () => {
            tables.deleteTable(editing.id);
            setEditingId(null);
          }}
        />
      )}

      {placing && (
        <PlaceGuestSheet
          guest={placing}
          tables={tables.all}
          onClose={() => setPlacing(null)}
          onPick={(tableId) => {
            tables.seatGuest(tableId, placing.name);
            setPlacing(null);
          }}/>
      )}
    </div>
  );
}

// Bottom sheet: pick a table to seat a guest at.
function PlaceGuestSheet({ guest, tables, onClose, onPick }) {
  return (
    <>
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0,
        background: 'rgba(29,24,18,0.36)',
        backdropFilter: 'blur(2px)',
        zIndex: 80,
        animation: 'wos-fade-in 200ms ease',
      }}/>
      <div style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        background: W.card,
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        boxShadow: '0 -16px 44px -20px rgba(29,24,18,0.4)',
        padding: '14px 0 26px',
        zIndex: 90, maxHeight: '92dvh',
        maxWidth: 640, margin: '0 auto',
        display: 'flex', flexDirection: 'column',
        animation: 'wos-sheet-rise 280ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }}>
        <div style={{
          width: 38, height: 4, borderRadius: 999, background: W.faint,
          margin: '0 auto 12px',
        }}/>
        <div style={{
          padding: '0 22px 14px',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          borderBottom: `0.5px solid ${W.lineSoft}`,
        }}>
          <div>
            <div style={{
              fontFamily: FONT_UI, fontSize: 10, fontWeight: 600,
              letterSpacing: 1.8, textTransform: 'uppercase', color: W.muted,
            }}>Seat at</div>
            <div style={{
              fontFamily: FONT_DISPLAY, fontSize: 22, fontWeight: 500,
              color: W.ink, letterSpacing: -0.2, lineHeight: 1.1, marginTop: 4,
            }}>{guest.name}</div>
          </div>
          <button onClick={onClose} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            fontFamily: FONT_UI, fontSize: 13, color: W.muted, padding: 0,
          }}>Cancel</button>
        </div>

        <div style={{
          flex: 1, overflowY: 'auto', padding: '14px 22px 0',
          display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          {tables.length === 0 ? (
            <div style={{
              padding: 20, textAlign: 'center',
              fontFamily: FONT_DISPLAY, fontStyle: 'italic', fontSize: 14, color: W.muted,
            }}>No tables yet — add one first.</div>
          ) : tables.map(t => {
            const seated = (t.seats || []).filter(Boolean).length;
            const full = seated >= t.capacity;
            const accent = TABLE_KIND_COLORS[t.kind] || W.clay;
            return (
              <button key={t.id} onClick={() => !full && onPick(t.id)} disabled={full} style={{
                width: '100%', padding: '14px 16px',
                background: W.bg,
                border: `0.5px solid ${full ? W.lineSoft : W.line}`,
                borderRadius: 14, cursor: full ? 'not-allowed' : 'pointer',
                display: 'flex', alignItems: 'center', gap: 12,
                opacity: full ? 0.5 : 1, textAlign: 'left',
              }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 999,
                  background: accent, opacity: 0.2,
                  border: `1.5px solid ${accent}`,
                  flexShrink: 0,
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: FONT_DISPLAY, fontSize: 15, color: W.ink, letterSpacing: -0.1,
                  }}>{t.name}</div>
                  <div style={{
                    fontFamily: FONT_UI, fontSize: 11.5, color: W.muted, marginTop: 2,
                  }}>{seated}/{t.capacity} seated · {t.kind}</div>
                </div>
                <div style={{
                  fontFamily: FONT_UI, fontSize: 11, fontWeight: 600,
                  letterSpacing: 1.4, color: full ? W.muted : W.clay,
                  textTransform: 'uppercase',
                }}>{full ? 'Full' : 'Place →'}</div>
              </button>
            );
          })}
          <div style={{ height: 14 }}/>
        </div>
      </div>
    </>
  );
}

// Bottom sheet for editing a table — name, capacity, kind, seats.
function TableEditSheet({ table, isNew, onClose, onSave, onDelete }) {
  const [name, setName]         = React.useState(table.name);
  const [capacity, setCapacity] = React.useState(table.capacity);
  const [kind, setKind]         = React.useState(table.kind);
  const accent = TABLE_KIND_COLORS[kind] || W.clay;
  const kinds = [
    { id: 'head',    label: 'Head'    },
    { id: 'family',  label: 'Family'  },
    { id: 'friends', label: 'Friends' },
    { id: 'work',    label: 'Work'    },
  ];
  return (
    <>
      {/* Backdrop */}
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0,
        background: 'rgba(29,24,18,0.32)',
        backdropFilter: 'blur(2px)',
        zIndex: 50,
      }}/>
      {/* Sheet */}
      <div style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        background: W.card, borderTopLeftRadius: 22, borderTopRightRadius: 22,
        boxShadow: '0 -16px 40px -20px rgba(29,24,18,0.4)',
        padding: '14px 20px 26px',
        zIndex: 60, maxHeight: '92dvh', overflowY: 'auto',
        maxWidth: 640, margin: '0 auto',
        animation: 'wos-sheet-rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }}>
        {/* grabber */}
        <div style={{
          width: 38, height: 4, borderRadius: 999, background: W.faint,
          margin: '0 auto 14px',
        }}/>

        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 16,
        }}>
          <div style={{
            fontFamily: FONT_UI, fontSize: 10, fontWeight: 600,
            letterSpacing: 1.8, textTransform: 'uppercase', color: W.muted,
          }}>{isNew ? 'New table' : `Edit table ${table.number != null ? String(table.number).padStart(2, '0') : ''}`}</div>
          <button onClick={onClose} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            fontFamily: FONT_UI, fontSize: 13, color: W.muted, padding: 0,
          }}>Cancel</button>
        </div>

        {/* Name */}
        <input value={name} onChange={(e) => setName(e.target.value)} style={{
          width: '100%', padding: '12px 14px',
          background: W.bg, border: `0.5px solid ${W.line}`, borderRadius: 12,
          fontFamily: FONT_DISPLAY, fontSize: 20, color: W.ink,
          letterSpacing: -0.2,
          outline: 'none',
          boxSizing: 'border-box',
        }}/>

        {/* Capacity stepper */}
        <div style={{
          marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '12px 14px',
          background: W.bg, border: `0.5px solid ${W.line}`, borderRadius: 12,
        }}>
          <div style={{
            fontFamily: FONT_UI, fontSize: 13, color: W.ink2,
          }}>Capacity</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button onClick={() => setCapacity(c => Math.max(2, c - 2))} style={stepBtnStyle}>−</button>
            <div style={{
              fontFamily: FONT_DISPLAY, fontSize: 22, color: W.ink, minWidth: 28,
              textAlign: 'center', letterSpacing: -0.3,
            }}>{capacity}</div>
            <button onClick={() => setCapacity(c => Math.min(14, c + 2))} style={stepBtnStyle}>+</button>
          </div>
        </div>

        {/* Kind chips */}
        <div style={{ marginTop: 12 }}>
          <div style={{
            fontFamily: FONT_UI, fontSize: 10.5, fontWeight: 600,
            letterSpacing: 1.4, textTransform: 'uppercase', color: W.muted,
            marginBottom: 8,
          }}>Group</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {kinds.map(k => {
              const active = kind === k.id;
              const c = TABLE_KIND_COLORS[k.id];
              return (
                <button key={k.id} onClick={() => setKind(k.id)} style={{
                  flex: 1, padding: '10px 0',
                  background: active ? c : W.bg,
                  color: active ? W.bg : W.ink2,
                  border: `0.5px solid ${active ? c : W.line}`,
                  borderRadius: 999, cursor: 'pointer',
                  fontFamily: FONT_UI, fontSize: 12, fontWeight: 500,
                }}>{k.label}</button>
              );
            })}
          </div>
        </div>

        {/* Live preview */}
        <div style={{
          marginTop: 16, padding: '14px 16px',
          background: W.bg, border: `0.5px solid ${W.line}`, borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 999,
            background: accent, opacity: 0.18,
            border: `1.5px solid ${accent}`,
          }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: FONT_DISPLAY, fontSize: 16, color: W.ink,
              letterSpacing: -0.1, whiteSpace: 'nowrap',
              overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{name}</div>
            <div style={{
              fontFamily: FONT_UI, fontSize: 11.5, color: W.muted, marginTop: 2,
            }}>
              {capacity} seats · {table.seats.filter(Boolean).length} placed
            </div>
          </div>
          <div style={{
            fontFamily: FONT_UI, fontSize: 10, fontWeight: 600,
            letterSpacing: 1.4, color: accent, textTransform: 'uppercase',
          }}>{kind}</div>
        </div>

        {/* Actions */}
        <div style={{ marginTop: 16, display: 'flex', gap: 8 }}>
          {onDelete && (
            <button onClick={onDelete} style={{
              flex: 1, padding: '14px 0',
              background: 'transparent', color: W.red,
              border: `0.5px solid ${W.line}`, borderRadius: 999, cursor: 'pointer',
              fontFamily: FONT_UI, fontSize: 14, fontWeight: 500,
            }}>Delete</button>
          )}
          <button onClick={onClose} style={{
            flex: 1, padding: '14px 0',
            background: W.cardSoft, color: W.ink2,
            border: `0.5px solid ${W.line}`, borderRadius: 999, cursor: 'pointer',
            fontFamily: FONT_UI, fontSize: 14, fontWeight: 500,
          }}>Cancel</button>
          <button onClick={() => onSave({ name, capacity, kind })} style={{
            flex: 2, padding: '14px 0',
            background: W.ink, color: W.bg, border: 'none', borderRadius: 999, cursor: 'pointer',
            fontFamily: FONT_UI, fontSize: 14, fontWeight: 500,
          }}>{isNew ? 'Add table' : 'Save changes'}</button>
        </div>
      </div>
      <style>{`
        @keyframes wos-sheet-rise {
          from { transform: translateY(100%); opacity: 0; }
          to   { transform: translateY(0);    opacity: 1; }
        }
      `}</style>
    </>
  );
}

const stepBtnStyle = {
  width: 30, height: 30, borderRadius: 999,
  background: W.card, border: `0.5px solid ${W.line}`,
  cursor: 'pointer',
  fontFamily: FONT_DISPLAY, fontSize: 18, color: W.ink, lineHeight: 1,
  display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
};

// One table card: round disc with seats arranged around the rim.
function TableCard({ table, onClick, dropHighlight, onDragOver, onDrop }) {
  const accent = TABLE_KIND_COLORS[table.kind] || W.clay;
  const filled = table.seats.filter(Boolean).length;
  const full = filled === table.capacity;
  const [hovering, setHovering] = React.useState(false);
  const isOpenTarget = dropHighlight === 'open';
  const isFullTarget = dropHighlight === 'full';
  return (
    <Card
      onClick={onClick}
      onDragOver={(e) => { setHovering(true); onDragOver && onDragOver(e); }}
      onDragLeave={() => setHovering(false)}
      onDrop={(e) => { setHovering(false); onDrop && onDrop(e); }}
      style={{
        padding: 14,
        borderColor: hovering && isOpenTarget ? accent
                   : isOpenTarget ? accent
                   : full ? '#e8e0cd' : W.line,
        borderWidth: hovering && isOpenTarget ? 1.5 : 0.5,
        borderStyle: isOpenTarget && !hovering ? 'dashed' : 'solid',
        background: hovering && isOpenTarget ? '#fbf3e7' : W.card,
        position: 'relative', overflow: 'hidden',
        cursor: onClick ? 'pointer' : 'default',
        opacity: isFullTarget && !hovering ? 0.55 : 1,
        transition: 'background 150ms ease, border-color 150ms ease, opacity 150ms ease',
      }}>
      <div style={{
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
        marginBottom: 10,
      }}>
        <div>
          <div style={{
            fontFamily: FONT_UI, fontSize: 9.5, fontWeight: 600,
            letterSpacing: 1.4, color: W.muted, textTransform: 'uppercase',
          }}>Table {String(table.number || '').padStart(2, '0')}</div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 16, color: W.ink,
            letterSpacing: -0.2, lineHeight: 1.1, marginTop: 2,
          }}>{table.name}</div>
        </div>
        <div style={{
          width: 6, height: 6, borderRadius: 999, background: accent, marginTop: 6,
        }}/>
      </div>

      <RoundTable seats={table.seats} accent={accent}/>

      <div style={{
        marginTop: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 18, color: W.ink, letterSpacing: -0.2,
        }}>
          {filled}<span style={{ color: W.faint }}>/{table.capacity}</span>
        </div>
        <div style={{
          fontFamily: FONT_UI, fontSize: 10.5, fontWeight: 500,
          color: full ? '#3e5439' : W.muted,
          letterSpacing: 0.4, textTransform: 'uppercase',
        }}>{full ? 'Full' : `${table.capacity - filled} open`}</div>
      </div>
    </Card>
  );
}

// SVG: round table with seats around the rim.
function RoundTable({ seats, accent }) {
  const size = 130;
  const cx = size / 2;
  const cy = size / 2;
  const tableR = 26;
  const seatR = 10;
  const orbitR = 47;
  const n = seats.length;

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '6px 0',
    }}>
      <svg width={size} height={size}>
        {/* table */}
        <circle cx={cx} cy={cy} r={tableR}
          fill="#fbf6ea" stroke={W.lineSoft} strokeWidth="1"/>
        <circle cx={cx} cy={cy} r={tableR - 5}
          fill="none" stroke={W.faint} strokeWidth="0.5" strokeDasharray="2 3"/>
        {/* seats */}
        {seats.map((s, i) => {
          const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
          const x = cx + Math.cos(angle) * orbitR;
          const y = cy + Math.sin(angle) * orbitR;
          if (!s) {
            // empty seat: outlined
            return (
              <circle key={i} cx={x} cy={y} r={seatR}
                fill={W.bg} stroke={W.faint} strokeWidth="1" strokeDasharray="2 2"/>
            );
          }
          const init = (s[0] || '').toUpperCase();
          return (
            <g key={i}>
              <circle cx={x} cy={y} r={seatR} fill={accent}/>
              <text x={x} y={y + 3.5}
                textAnchor="middle"
                fontFamily={FONT_DISPLAY}
                fontSize="11"
                fontWeight="500"
                fill="#fbf6ea">{init}</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

// Mini floor-plan glyph for the hero — 3x4 layout of round tables
function MiniFloorPlan() {
  const layout = [
    { x: 28, y: 14, r: 12, full: true,  kind: 'head' },
    { x: 80, y: 14, r: 11, full: true,  kind: 'family' },
    { x: 132,y: 14, r: 11, full: true,  kind: 'family' },
    { x: 184,y: 14, r: 11, full: false, kind: 'family' },
    { x: 236,y: 14, r: 11, full: true,  kind: 'friends' },
    { x: 288,y: 14, r: 11, full: false, kind: 'friends' },

    { x: 28, y: 56, r: 11, full: true,  kind: 'work' },
    { x: 80, y: 56, r: 11, full: false, kind: 'work' },
    { x: 132,y: 56, r: 10, full: true,  kind: 'friends' },
    { x: 184,y: 56, r: 10, full: false, kind: 'friends' },
    { x: 236,y: 56, r: 10, full: false, kind: 'friends' },
  ];
  return (
    <svg viewBox="0 0 320 90" width="100%" height="80" style={{ display: 'block' }}>
      {/* dance floor */}
      <rect x="120" y="76" width="80" height="2" rx="1" fill={W.faint} opacity="0.6"/>
      <text x="160" y="88" textAnchor="middle"
        fontFamily={FONT_UI} fontSize="7"
        letterSpacing="1.5" fill={W.muted}>DANCE FLOOR</text>
      {layout.map((t, i) => (
        <g key={i}>
          <circle cx={t.x} cy={t.y} r={t.r}
            fill={t.full ? TABLE_KIND_COLORS[t.kind] : '#fff'}
            stroke={t.full ? 'none' : TABLE_KIND_COLORS[t.kind]}
            strokeWidth="1"
            strokeDasharray={t.full ? 'none' : '2 2'}
            opacity={t.full ? 0.9 : 0.7}/>
        </g>
      ))}
    </svg>
  );
}

Object.assign(window, { SeatingScreen });