Redesign Support as bento hub, restore full sidebar, Western names

- Support Center overview rebuilt as a bento grid: large live-chat hero
  tile, support team tile, mini channel tiles and a recent-tickets strip.
- Restore full workspace sidebar (Workspace/Team/Profile groups) with a
  premium golden active state; unbuilt modules show a Coming Soon view.
- Use Western names across the UI (James Carter; Emma Wilson, Liam Foster,
  Sophie Turner, Noah Mitchell) incl. tickets, threads, portal demo user.
- Remove the Allottee card from Profile; add a clean Account & identity
  card and live-editable contacts.
- Relabel "Plot" -> "House number" everywhere; drop the allotment chip in
  favour of the property category.
- Premium visual pass: brand gradients, depth, glow accents, pill tabs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/dashboard/support.tsx

@@ -61,7 +61,7 @@ export function Support() {
       <Segmented options={SECTIONS} value={section} onChange={setSection} />
 
       <div className="view-body">
-        {section === "overview" && <Overview onChannel={onChannel} />}
+        {section === "overview" && <Overview onChannel={onChannel} onSection={setSection} />}
         {section === "messages" && <MessageCenter />}
         {section === "new" && <NewTicket onDone={() => setSection("tickets")} />}
         {section === "tickets" && <MyTickets />}
@@ -79,32 +79,41 @@ export function Support() {
 /* Overview — channel cards + support team                      */
 /* ============================================================ */
 
-function Overview({ onChannel }: { onChannel: (id: string) => void }) {
-  return (
-    <div className="grid-side">
-      <div>
-        <div className="channel-grid">
-          {supportChannels.map((c) => (
-            <button key={c.id} className="channel-card" style={{ ["--accent" as string]: c.accent }} onClick={() => onChannel(c.id)}>
-              <span className="channel-ic"><Icon name={c.icon} size={22} /></span>
-              <div className="channel-status"><StatusDot status={c.status} /> {c.status === "online" ? "Available" : c.status}</div>
-              <div className="channel-title">{c.title}</div>
-              <div className="channel-desc">{c.desc}</div>
-              <div className="channel-foot">
-                <span className="channel-meta">{c.meta}</span>
-                <span className="channel-cta">{c.action} <Icon name="arrow" size={14} /></span>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
+const MINI_AREA: Record<string, string> = { ticket: "ticket", callback: "call", email: "email", help: "help" };
 
-      <div className="card">
-        <div className="card-head"><h3>Your support team</h3><Pill tone="green"><StatusDot status="online" /> 2 online</Pill></div>
+function Overview({ onChannel, onSection }: { onChannel: (id: string) => void; onSection: (s: string) => void }) {
+  const online = supportTeam.filter((a) => a.status === "online");
+  const mini = supportChannels.filter((c) => ["ticket", "callback", "email", "help"].includes(c.id));
+  const recent = ticketSeed.slice(0, 4);
+
+  return (
+    <div className="support-bento">
+      {/* Hero — live chat */}
+      <button className="bento-tile bento-chat" onClick={() => onChannel("chat")}>
+        <div className="bento-chat-top">
+          <span className="bento-chat-badge"><StatusDot status="online" /> Agents online now</span>
+          <span className="bento-chat-wait"><Icon name="clock" size={13} /> Avg wait &lt; 2 min</span>
+        </div>
+        <div className="bento-chat-mid">
+          <h2>Need a hand?<br />Chat with us live.</h2>
+          <p>Instant help from a real support specialist — no queues, no bots, no waiting on hold.</p>
+        </div>
+        <div className="bento-chat-foot">
+          <div className="bento-avstack">
+            {online.map((a) => <Avatar key={a.id} initials={a.initials} gradient={a.gradient} size={36} />)}
+            <span className="bento-av-more">+{online.length} online</span>
+          </div>
+          <span className="bento-chat-cta">Start chat <Icon name="arrow" size={16} /></span>
+        </div>
+      </button>
+
+      {/* Support team */}
+      <div className="bento-tile bento-team">
+        <div className="bento-tile-head"><h3>Your support team</h3><Pill tone="green">{online.length} online</Pill></div>
         <div className="team-list">
           {supportTeam.map((a) => (
             <div className="team-row" key={a.id}>
-              <Avatar initials={a.initials} gradient={a.gradient} size={42} status={a.status} />
+              <Avatar initials={a.initials} gradient={a.gradient} size={40} status={a.status} />
               <div className="team-txt">
                 <div className="team-name">{a.name}</div>
                 <div className="team-role">{a.role}</div>
@@ -115,6 +124,30 @@ function Overview({ onChannel }: { onChannel: (id: string) => void }) {
           ))}
         </div>
       </div>
+
+      {/* Mini channel tiles */}
+      {mini.map((c) => (
+        <button key={c.id} className="bento-tile bento-mini" style={{ ["--accent" as string]: c.accent, gridArea: MINI_AREA[c.id] }} onClick={() => onChannel(c.id)}>
+          <span className="bento-mini-ic"><Icon name={c.icon} size={20} /></span>
+          <div className="bento-mini-title">{c.title}</div>
+          <div className="bento-mini-desc">{c.desc}</div>
+          <div className="bento-mini-meta"><span>{c.meta}</span> <Icon name="arrow" size={14} /></div>
+        </button>
+      ))}
+
+      {/* Recent tickets */}
+      <div className="bento-tile bento-recent">
+        <div className="bento-tile-head"><h3>Recent tickets</h3><button className="link-inline" onClick={() => onSection("tickets")}>View all</button></div>
+        <div className="bento-ticket-row">
+          {recent.map((t) => (
+            <button key={t.id} className="bento-ticket" onClick={() => onSection("tickets")}>
+              <div className="bento-ticket-top"><span className="t-id">{t.id}</span><Pill tone={STATUS_META[t.status].tone}>{STATUS_META[t.status].label}</Pill></div>
+              <div className="bento-ticket-subj">{t.subject}</div>
+              <div className="bento-ticket-meta"><Icon name="clock" size={12} /> {t.updatedAt} · {t.department}</div>
+            </button>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }