// TeamHubsC.jsx — The Hub Directory (v2 — polished & interactive)
// A constellation of team hubs. Hover any tile to peek inside.
// Explicit "Team Hub vs All Teams" explainer built in.

const LIVE_HUBS = [
  {
    id: 'raiders',
    team: 'Las Vegas Raiders',
    emoji: '🏴‍☠️',
    league: 'NFL',
    tint: '#0A0A0A',
    tintGrad: 'linear-gradient(155deg, #0A0A0A 0%, #1a1a24 100%)',
    accent: '#C4C9CC',
    posts: [
      {
        kind: 'take',
        badge: 'HOT TAKE',
        author: 'Marcus D.',
        initials: 'MD',
        avatarBg: 'linear-gradient(135deg, #C4C9CC, #8a8f93)',
        verified: true,
        timeAgo: '1h',
        body: 'This is the draft that sets the next 5 years. Don\'t blow it.',
        reacting: 847,
      },
      {
        kind: 'thread',
        badge: 'TICKET CHAT',
        author: 'Jesse R.',
        initials: 'JR',
        avatarBg: 'linear-gradient(135deg, #e4e4e4, #a8a8a8)',
        verified: true,
        timeAgo: '3h',
        body: 'Two together for Week 4, aisle. Trading for anything Week 7+.',
        reacting: 42,
      },
      {
        kind: 'thread',
        badge: 'GAMEDAY',
        author: 'Tasha K.',
        initials: 'TK',
        avatarBg: 'linear-gradient(135deg, #C4C9CC, #5c6065)',
        verified: true,
        timeAgo: '6h',
        body: 'Sec 137 tailgate starts at 10. Fan Card holders only, bring the noise.',
        reacting: 126,
      },
    ],
    peek: [
      'Hot takes + trade reactions',
      'Gameday feed with seat-by-seat chatter',
      'Ticket chat with verified Raiders fans',
    ],
  },
  {
    id: 'athletics',
    team: "Las Vegas A's",
    emoji: '🐘',
    league: 'MLB',
    tint: '#003831',
    tintGrad: 'linear-gradient(155deg, #003831 0%, #004c44 100%)',
    accent: '#EFB21E',
    posts: [
      {
        kind: 'take',
        badge: 'HOT TAKE',
        author: 'Diego M.',
        initials: 'DM',
        avatarBg: 'linear-gradient(135deg, #EFB21E, #b88500)',
        verified: true,
        timeAgo: '2h',
        body: 'The Vegas move was the right call. Fight me.',
        reacting: 203,
      },
      {
        kind: 'thread',
        badge: 'TICKET CHAT',
        author: 'Sam O.',
        initials: 'SO',
        avatarBg: 'linear-gradient(135deg, #7FC88C, #3f8f4c)',
        verified: true,
        timeAgo: '5h',
        body: 'Pair for opening week, behind home. Fan price, no fees.',
        reacting: 58,
      },
      {
        kind: 'thread',
        badge: 'GAMEDAY',
        author: 'Alicia R.',
        initials: 'AR',
        avatarBg: 'linear-gradient(135deg, #EFB21E, #9a6e00)',
        verified: true,
        timeAgo: '9h',
        body: 'Who\'s in Sec 128 tonight? Coordinating chants by the 4th.',
        reacting: 91,
      },
    ],
    peek: [
      'Opening-week ticket swaps',
      'Threads on the Vegas move',
      'Pitcher-by-pitcher gameday chat',
    ],
  },
  {
    id: 'goldenknights',
    team: 'Vegas Golden Knights',
    emoji: '⚔️',
    league: 'NHL',
    tint: '#1F2628',
    tintGrad: 'linear-gradient(155deg, #1F2628 0%, #333F42 100%)',
    accent: '#B4975A',
    posts: [
      {
        kind: 'thread',
        badge: 'GAMEDAY',
        author: 'Tyler B.',
        initials: 'TB',
        avatarBg: 'linear-gradient(135deg, #B4975A, #8a6f3d)',
        verified: true,
        timeAgo: '22m',
        body: 'T-Mobile Arena tonight is gonna shake. Knights in 5, book it.',
        reacting: 287,
      },
      {
        kind: 'take',
        badge: 'HOT TAKE',
        author: 'Riley F.',
        initials: 'RF',
        avatarBg: 'linear-gradient(135deg, #C4C9CC, #6e7377)',
        verified: true,
        timeAgo: '1h',
        body: 'The Fortress is still the loudest barn in the league. Prove me wrong.',
        reacting: 164,
      },
      {
        kind: 'thread',
        badge: 'TICKET CHAT',
        author: 'Jordan V.',
        initials: 'JV',
        avatarBg: 'linear-gradient(135deg, #B4975A, #6a552d)',
        verified: true,
        timeAgo: '3h',
        body: 'Two at center ice for Saturday. Trading to a verified Knights fan.',
        reacting: 74,
      },
    ],
    peek: [
      'Gameday threads at T-Mobile',
      'Ticket swaps for the Fortress',
      'Deep playoff run predictions',
    ],
  },
];

const ALL_TEAMS = {
  team: 'All Teams',
  subtitle: 'Where rivalries meet',
  posts: [
    {
      badge: 'HOT TAKE',
      author: 'Marcus D.',
      initials: 'MD',
      team: 'Chiefs',
      teamEmoji: '🏹',
      teamColor: '#E31837',
      body: 'Raiders fans: your QB room is better than your last 10 years combined.',
      reacting: 24,
    },
    {
      badge: 'FAN SPOTLIGHT',
      author: 'Priya S.',
      initials: 'PS',
      team: 'Lakers',
      teamEmoji: '🏀',
      teamColor: '#552583',
      body: '47 home games this season. AMA about the Westbrook era.',
      reacting: 112,
    },
    {
      badge: 'CROSS-FANBASE',
      author: 'Jordan T.',
      initials: 'JT',
      team: 'Warriors',
      teamEmoji: '🌉',
      teamColor: '#1D428A',
      body: 'NBA finals prediction thread — I\'ll defend mine with my life.',
      reacting: 89,
    },
  ],
  peek: [
    'Hot takes across every fanbase',
    'Fan spotlights — the stories behind the jerseys',
    'Cross-rivalry threads (respectful chaos)',
  ],
};

const UNLOCKING_HUBS = [
  {
    id: 'chiefs', team: 'KC Chiefs', emoji: '🏹', league: 'NFL',
    status: 'Almost there', fansSoFar: 240, tone: '#E31837',
  },
  {
    id: 'lakers', team: 'LA Lakers', emoji: '🏀', league: 'NBA',
    status: 'Gathering fans', fansSoFar: 180, tone: '#552583',
  },
  {
    id: 'yankees', team: 'NY Yankees', emoji: '🧢', league: 'MLB',
    status: 'Joining daily', fansSoFar: 95, tone: '#0A2342',
  },
  {
    id: 'warriors', team: 'GS Warriors', emoji: '🌉', league: 'NBA',
    status: 'Gathering fans', fansSoFar: 140, tone: '#1D428A',
  },
];

// ── Avatar chip (reused)
const Avatar = ({ initials, bg, size = 24, verified }) => (
  <div style={{ position: 'relative', flexShrink: 0 }}>
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontWeight: 800,
      fontSize: size * 0.42,
      border: '1.5px solid rgba(255,255,255,0.22)',
      textShadow: '0 1px 2px rgba(0,0,0,0.3)',
    }}>{initials}</div>
    {verified && (
      <div style={{
        position: 'absolute', bottom: -2, right: -2,
        width: 10, height: 10, borderRadius: '50%',
        background: 'var(--accent-2)',
        border: '1.5px solid #fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="6" height="6" viewBox="0 0 12 12" fill="none">
          <path d="M2 6l3 3 5-6" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    )}
  </div>
);

// ── Post row inside a live hub tile
const HubPost = ({ post, onDark = true }) => (
  <div style={{
    background: onDark ? 'rgba(255,255,255,0.06)' : 'rgba(10,8,30,0.04)',
    border: `1px solid ${onDark ? 'rgba(255,255,255,0.1)' : 'rgba(10,8,30,0.08)'}`,
    borderRadius: 12,
    padding: '10px 12px',
    display: 'flex', flexDirection: 'column', gap: 8,
    backdropFilter: 'blur(10px)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <Avatar initials={post.initials} bg={post.avatarBg} size={24} verified={post.verified}/>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{
          fontSize: 11, fontWeight: 700,
          color: onDark ? '#fff' : 'var(--ink)',
        }}>{post.author}</span>
        <span style={{
          fontSize: 9, fontWeight: 500,
          color: onDark ? 'rgba(255,255,255,0.5)' : 'var(--ink-4)',
        }}>· {post.timeAgo}</span>
      </div>
      <span style={{
        fontSize: 8.5, fontWeight: 800, letterSpacing: '0.12em',
        color: post.kind === 'take' ? '#FF9E9E' : (onDark ? 'rgba(255,255,255,0.7)' : 'var(--accent)'),
        background: post.kind === 'take'
          ? 'rgba(255,80,80,0.16)'
          : (onDark ? 'rgba(255,255,255,0.1)' : 'rgba(107,61,232,0.12)'),
        padding: '2px 6px', borderRadius: 4,
        fontFamily: 'var(--font-mono)',
      }}>{post.badge}</span>
    </div>
    <div style={{
      fontSize: 12.5, lineHeight: 1.4, fontWeight: 500,
      color: onDark ? '#fff' : 'var(--ink)',
      fontStyle: post.kind === 'take' ? 'italic' : 'normal',
    }}>
      {post.kind === 'take' && <span style={{ opacity: 0.4, marginRight: 2 }}>"</span>}
      {post.body}
      {post.kind === 'take' && <span style={{ opacity: 0.4, marginLeft: 2 }}>"</span>}
    </div>
    <div style={{
      fontSize: 10, fontWeight: 600,
      color: onDark ? 'rgba(255,255,255,0.55)' : 'var(--ink-3)',
      display: 'flex', alignItems: 'center', gap: 5,
    }}>
      <span>🔥</span> {post.reacting} reacting
    </div>
  </div>
);

// ── Live hub tile (dark, team-branded, hover reveals peek drawer)
const LiveHubTile = ({ hub, featured }) => (
  <div className="hub-tile hub-tile--live" style={{
    position: 'relative',
    borderRadius: 20,
    overflow: 'hidden',
    background: hub.tintGrad,
    color: '#fff',
    minHeight: featured ? 360 : 220,
    height: '100%',
    display: 'flex', flexDirection: 'column',
    border: '1px solid rgba(255,255,255,0.08)',
    boxShadow: '0 20px 40px -16px rgba(10,8,30,0.35), 0 2px 4px rgba(10,8,30,0.1)',
    transition: 'transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease',
  }}>
    {/* Accent wash */}
    <div style={{
      position: 'absolute', top: -60, right: -60, width: 240, height: 240,
      background: `radial-gradient(circle, ${hub.accent}22, transparent 65%)`,
      pointerEvents: 'none',
    }}/>

    {/* Main content */}
    <div style={{
      position: 'relative', padding: featured ? '22px 22px 20px' : '16px 16px 14px',
      display: 'flex', flexDirection: 'column',
      flex: 1,
      gap: featured ? 18 : 12,
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: featured ? 40 : 32, height: featured ? 40 : 32,
            borderRadius: '50%',
            background: `${hub.accent}22`,
            border: `1px solid ${hub.accent}40`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: featured ? 22 : 17,
          }}>{hub.emoji}</div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: featured ? 20 : 15, letterSpacing: '-0.02em',
              lineHeight: 1.05,
            }}>{hub.team}</div>
            <div style={{
              fontSize: featured ? 10 : 9, color: 'rgba(255,255,255,0.55)',
              fontFamily: 'var(--font-mono)',
              letterSpacing: '0.16em', textTransform: 'uppercase',
              marginTop: 3, fontWeight: 600,
            }}>{hub.league} · Team Hub</div>
          </div>
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '4px 9px', borderRadius: 999,
          background: featured ? 'rgba(74,222,128,0.15)' : 'rgba(180,151,90,0.15)',
          border: featured ? '1px solid rgba(74,222,128,0.3)' : '1px solid rgba(180,151,90,0.35)',
          fontSize: 9, fontWeight: 800,
          color: featured ? '#86EFAC' : '#D9BE86',
          letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>
          {featured && (
            <span className="pulse-dot" style={{
              width: 5, height: 5, borderRadius: '50%',
              background: '#4ADE80', boxShadow: '0 0 6px #4ADE80',
            }}/>
          )}
          {featured ? 'Live' : 'Coming Soon'}
        </div>
      </div>

      {/* Posts */}
      <div style={{
        display: 'flex', flexDirection: 'column', gap: 8,
        flex: 1,
      }}>
        {hub.posts.map((p, i) => (
          <HubPost key={i} post={p}/>
        ))}
      </div>
    </div>

    {/* Hover peek drawer */}
    <div className="hub-tile__peek" style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      background: 'linear-gradient(180deg, rgba(10,8,30,0) 0%, rgba(10,8,30,0.85) 28%, rgba(10,8,30,0.96) 100%)',
      padding: '50px 18px 18px',
      transform: 'translateY(100%)',
      opacity: 0,
      transition: 'transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease',
      pointerEvents: 'none',
    }}>
      <div style={{
        fontSize: 9, fontWeight: 800, letterSpacing: '0.16em',
        color: `${hub.accent}ee`,
        textTransform: 'uppercase', fontFamily: 'var(--font-mono)',
        marginBottom: 10,
      }}>What's inside</div>
      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        display: 'flex', flexDirection: 'column', gap: 6,
      }}>
        {hub.peek.map((item, i) => (
          <li key={i} style={{
            fontSize: 12, color: 'rgba(255,255,255,0.9)',
            fontWeight: 500, lineHeight: 1.4,
            display: 'flex', gap: 8,
          }}>
            <span style={{ color: hub.accent, flexShrink: 0 }}>→</span>
            {item}
          </li>
        ))}
      </ul>
    </div>
  </div>
);

// ── All Teams tile (special — purple, always-on, cross-fanbase)
const AllTeamsTile = () => (
  <div className="hub-tile hub-tile--all" style={{
    position: 'relative',
    borderRadius: 20,
    overflow: 'hidden',
    background: 'linear-gradient(155deg, #14121F 0%, #1e1830 60%, #241a38 100%)',
    color: '#fff',
    minHeight: 360,
    height: '100%',
    display: 'flex', flexDirection: 'column',
    border: '1px solid rgba(155,122,240,0.4)',
    boxShadow: '0 0 0 1px rgba(155,122,240,0.2), 0 24px 50px -12px rgba(107,61,232,0.4), 0 4px 12px rgba(10,8,30,0.2)',
    transition: 'transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease',
  }}>
    {/* Aurora */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at 80% 10%, rgba(107,61,232,0.55), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(155,122,240,0.35), transparent 55%)',
      pointerEvents: 'none',
    }}/>

    <div style={{
      position: 'relative', padding: '22px 22px 20px',
      display: 'flex', flexDirection: 'column',
      flex: 1, gap: 18,
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            background: 'rgba(155,122,240,0.22)',
            border: '1px solid rgba(155,122,240,0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 22,
          }}>🌐</div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 20, letterSpacing: '-0.02em',
              lineHeight: 1.05,
            }}>All Teams</div>
            <div style={{
              fontSize: 10, color: '#C8B6F5',
              fontFamily: 'var(--font-mono)',
              letterSpacing: '0.16em', textTransform: 'uppercase',
              marginTop: 3, fontWeight: 600,
            }}>Cross-fanbase · The always-open floor</div>
          </div>
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '4px 9px', borderRadius: 999,
          background: 'rgba(155,122,240,0.22)', border: '1px solid rgba(155,122,240,0.5)',
          fontSize: 9, fontWeight: 800, color: '#D3C2F9',
          letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: '50%',
            background: '#9B7AF0', boxShadow: '0 0 6px #9B7AF0',
          }}/>
          Always open
        </div>
      </div>

      {/* Posts — compact, diverse fanbases */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        {ALL_TEAMS.posts.map((p, i) => (
          <div key={i} style={{
            background: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 12,
            padding: '10px 12px',
            display: 'flex', flexDirection: 'column', gap: 6,
            backdropFilter: 'blur(10px)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Avatar
                initials={p.initials}
                bg={`linear-gradient(135deg, ${p.teamColor}, ${p.teamColor}dd)`}
                size={22} verified
              />
              <div style={{ display: 'flex', alignItems: 'center', gap: 5, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: '#fff' }}>{p.author}</span>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 3,
                  padding: '1px 6px', borderRadius: 999,
                  background: `${p.teamColor}30`, border: `1px solid ${p.teamColor}50`,
                  fontSize: 8.5, fontWeight: 700, color: '#fff',
                }}>
                  <span style={{ fontSize: 9 }}>{p.teamEmoji}</span> {p.team}
                </span>
              </div>
              <span style={{
                fontSize: 8, fontWeight: 800, letterSpacing: '0.1em',
                color: '#C8B6F5',
                background: 'rgba(155,122,240,0.2)',
                padding: '2px 6px', borderRadius: 4,
                fontFamily: 'var(--font-mono)',
              }}>{p.badge}</span>
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.4, fontWeight: 500, color: '#fff' }}>
              {p.body}
            </div>
          </div>
        ))}
      </div>
    </div>

    {/* Hover peek drawer */}
    <div className="hub-tile__peek" style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      background: 'linear-gradient(180deg, rgba(20,18,31,0) 0%, rgba(20,18,31,0.9) 28%, rgba(20,18,31,0.98) 100%)',
      padding: '50px 18px 18px',
      transform: 'translateY(100%)',
      opacity: 0,
      transition: 'transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease',
      pointerEvents: 'none',
    }}>
      <div style={{
        fontSize: 9, fontWeight: 800, letterSpacing: '0.16em',
        color: '#C8B6F5',
        textTransform: 'uppercase', fontFamily: 'var(--font-mono)',
        marginBottom: 10,
      }}>What's inside</div>
      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        display: 'flex', flexDirection: 'column', gap: 6,
      }}>
        {ALL_TEAMS.peek.map((item, i) => (
          <li key={i} style={{
            fontSize: 12, color: 'rgba(255,255,255,0.92)',
            fontWeight: 500, lineHeight: 1.4,
            display: 'flex', gap: 8,
          }}>
            <span style={{ color: '#C8B6F5', flexShrink: 0 }}>→</span>
            {item}
          </li>
        ))}
      </ul>
    </div>
  </div>
);

// ── Unlocking tile — light, dashed, awareness-focused
const UnlockingHubTile = ({ hub }) => (
  <div className="hub-tile hub-tile--unlocking" style={{
    position: 'relative',
    borderRadius: 16,
    overflow: 'hidden',
    background: '#fff',
    border: '1px dashed rgba(10,8,30,0.18)',
    height: '100%',
    minHeight: 140,
    padding: '14px',
    display: 'flex', flexDirection: 'column',
    transition: 'transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease',
  }}>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      marginBottom: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 9,
          background: `${hub.tone}12`,
          border: `1px solid ${hub.tone}25`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14,
        }}>{hub.emoji}</div>
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            fontSize: 13.5, letterSpacing: '-0.015em',
            color: 'var(--ink)', lineHeight: 1.05,
          }}>{hub.team}</div>
          <div style={{
            fontSize: 8.5, color: 'var(--ink-4)',
            fontFamily: 'var(--font-mono)',
            letterSpacing: '0.16em', textTransform: 'uppercase',
            marginTop: 2, fontWeight: 600,
          }}>{hub.league}</div>
        </div>
      </div>
    </div>

    <div style={{ flex: 1 }}/>

    <div>
      <div style={{
        fontSize: 10.5, color: 'var(--ink-2)', fontWeight: 700,
        marginBottom: 6,
      }}>
        {hub.status}
      </div>
      <div style={{
        height: 3, borderRadius: 3,
        background: 'rgba(10,8,30,0.06)',
        overflow: 'hidden',
      }}>
        <div style={{
          height: '100%',
          width: `${Math.min(90, Math.max(15, (hub.fansSoFar / 250) * 100))}%`,
          background: 'linear-gradient(90deg, var(--accent), var(--accent-2))',
          borderRadius: 3,
        }}/>
      </div>
      <div style={{
        fontSize: 9.5, color: 'var(--ink-4)', marginTop: 8,
        fontWeight: 500,
      }}>
        Meanwhile →{' '}
        <span style={{
          fontWeight: 700, color: 'var(--accent)',
          borderBottom: '1px dotted var(--accent)',
        }}>All Teams</span>
      </div>
    </div>
  </div>
);

// ── "How Hubs work" explainer — the mental model
const HowHubsWorkExplainer = () => (
  <div style={{
    marginTop: 60, padding: '40px 40px 34px',
    background: '#fff',
    borderRadius: 20,
    border: '1px solid var(--line)',
    boxShadow: '0 2px 8px rgba(10,8,30,0.03)',
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute', top: -80, left: -80, width: 240, height: 240,
      background: 'radial-gradient(circle, rgba(107,61,232,0.06), transparent 65%)',
      pointerEvents: 'none',
    }}/>

    <div style={{ position: 'relative' }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: 'var(--accent)', letterSpacing: '0.18em',
        textTransform: 'uppercase', marginBottom: 12, fontWeight: 700,
      }}>How it works</div>
      <h3 style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(22px, 2.4vw, 30px)', fontWeight: 800,
        letterSpacing: '-0.02em', margin: 0, lineHeight: 1.15,
        maxWidth: 620,
      }}>
        Team Hub <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>or</em> All
        Teams — every fan has a home.
      </h3>

      <div className="sc-hub-explainer" style={{
        marginTop: 28,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
        position: 'relative',
      }}>
        {/* Step 1: Fan Card */}
        <div style={{
          padding: '20px 20px 20px 0',
          borderRight: '1px solid var(--line)',
          display: 'flex', gap: 14, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'rgba(107,61,232,0.1)',
            border: '1px solid rgba(107,61,232,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 17, flexShrink: 0,
          }}>🪪</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
              Pick your team
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 5, lineHeight: 1.5 }}>
              Claim a Fan Card for every team you root for. Verified. Free.
              This is your key to everything.
            </div>
          </div>
        </div>

        {/* Step 2: Team Hub */}
        <div style={{
          padding: '20px',
          borderRight: '1px solid var(--line)',
          display: 'flex', gap: 14, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'rgba(74,222,128,0.12)',
            border: '1px solid rgba(74,222,128,0.3)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 17, flexShrink: 0,
          }}>🏟️</div>
          <div>
            <div style={{
              fontSize: 14, fontWeight: 800, color: 'var(--ink)',
              letterSpacing: '-0.01em',
              display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap',
            }}>
              Team Hub
              <span style={{
                fontSize: 9, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em',
                color: '#16a34a', background: 'rgba(74,222,128,0.12)',
                padding: '2px 6px', borderRadius: 4, fontWeight: 700,
                textTransform: 'uppercase',
              }}>If open</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 5, lineHeight: 1.5 }}>
              Your team's own home — hot takes, trade chatter, ticket swaps,
              gameday feed. Opens as fans join.
            </div>
          </div>
        </div>

        {/* Step 3: All Teams */}
        <div style={{
          padding: '20px 0 20px 20px',
          display: 'flex', gap: 14, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'rgba(155,122,240,0.15)',
            border: '1px solid rgba(155,122,240,0.35)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 17, flexShrink: 0,
          }}>🌐</div>
          <div>
            <div style={{
              fontSize: 14, fontWeight: 800, color: 'var(--ink)',
              letterSpacing: '-0.01em',
              display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap',
            }}>
              All Teams
              <span style={{
                fontSize: 9, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em',
                color: 'var(--accent)', background: 'rgba(107,61,232,0.12)',
                padding: '2px 6px', borderRadius: 4, fontWeight: 700,
                textTransform: 'uppercase',
              }}>Always on</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 5, lineHeight: 1.5 }}>
              The cross-fanbase floor. Every fan welcome, every day.
              Share fan spotlights, swap takes across rivalries.
            </div>
          </div>
        </div>
      </div>

      {/* Unlock strip — explains how Team Hubs and marketplaces come online */}
      <div style={{
        marginTop: 24, paddingTop: 22,
        borderTop: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          color: 'var(--accent)', letterSpacing: '0.18em',
          textTransform: 'uppercase', fontWeight: 700, flexShrink: 0,
        }}>The unlock</div>
        <div style={{ flex: 1, minWidth: 280, fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)' }}>
          One Fan Card is a signal.{' '}
          <span style={{ color: 'var(--ink)', fontWeight: 700 }}>Enough Fan Cards</span>
          {' '}and your team's Hub opens, your team's marketplace goes live.{' '}
          <span style={{ color: 'var(--ink-4)' }}>Raiders got there first. Your team's turn is next.</span>
        </div>
      </div>
    </div>
  </div>
);

const TeamHubsC = () => (
  <section id="team-hubs" style={{
    padding: '140px 0 90px',
    scrollMarginTop: 80,
    background: `
      linear-gradient(180deg, var(--bg) 0%, transparent 140px),
      linear-gradient(0deg, var(--bg) 0%, transparent 140px),
      var(--bg-2)
    `,
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute', top: -200, right: -200, width: 600, height: 600,
      borderRadius: '50%', zIndex: 0,
      background: 'radial-gradient(circle, rgba(107,61,232,0.10), transparent 60%)',
      filter: 'blur(50px)',
    }}/>

    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      {/* Header */}
      <div className="sc-hub-header" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        gap: 40, flexWrap: 'wrap', marginBottom: 48,
      }}>
        <div style={{ maxWidth: 620 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>The Hub Directory</div>
          <h2 className="display" style={{
            fontSize: 'clamp(44px, 5vw, 72px)',
            margin: 0, lineHeight: 0.98, letterSpacing: '-0.035em',
          }}>
            Every team<br/>
            <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>gets a Hub</em>.
          </h2>
          <p style={{
            fontSize: 18, color: 'var(--ink-3)', marginTop: 24,
            lineHeight: 1.55, maxWidth: 540,
          }}>
            A home for every fanbase — and a cross-fanbase floor for when rivalries need a place
            to meet.
          </p>
        </div>

        {/* Legend */}
        <div style={{
          display: 'flex', gap: 18, flexWrap: 'wrap',
          padding: '12px 18px', borderRadius: 999,
          background: '#fff', border: '1px solid var(--line)',
          boxShadow: '0 2px 6px rgba(10,8,30,0.04)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: '#4ADE80', boxShadow: '0 0 5px #4ADE80',
            }}/>
            <span style={{ fontSize: 11.5, color: 'var(--ink-2)', fontWeight: 600, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>LIVE</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: '#9B7AF0', boxShadow: '0 0 5px #9B7AF0',
            }}/>
            <span style={{ fontSize: 11.5, color: 'var(--ink-2)', fontWeight: 600, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>ALWAYS ON</span>
          </div>
        </div>
      </div>

      {/* Grid */}
      <div className="sc-hub-mobile-hint" aria-hidden="true" style={{ display: 'none' }}>
        <span>Swipe to see more hubs</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
      <div className="sc-hub-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 16,
        gridAutoRows: 'minmax(160px, auto)',
      }}>
        {/* Raiders - large, featured */}
        <div style={{ gridColumn: 'span 2', gridRow: 'span 2' }}>
          <LiveHubTile hub={LIVE_HUBS[0]} featured/>
        </div>

        {/* All Teams - large, featured, always-on */}
        <div style={{ gridColumn: 'span 2', gridRow: 'span 2' }}>
          <AllTeamsTile/>
        </div>

        {/* A's - small live */}
        <div style={{ gridColumn: 'span 2' }}>
          <LiveHubTile hub={LIVE_HUBS[1]}/>
        </div>

        {/* Golden Knights - small live */}
        <div style={{ gridColumn: 'span 2' }}>
          <LiveHubTile hub={LIVE_HUBS[2]}/>
        </div>
      </div>

      {/* Explainer */}
      <HowHubsWorkExplainer />

      {/* Stats footer */}
      <div className="sc-stat-row" style={{
        display: 'flex', gap: 36, marginTop: 60, paddingTop: 32,
        borderTop: '1px solid var(--line)',
        justifyContent: 'center', flexWrap: 'wrap',
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 36, fontFamily: 'var(--font-display)', fontWeight: 900, color: 'var(--accent)', letterSpacing: '-0.025em', lineHeight: 1 }}>365</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6 }}>Days a year, not just gameday</div>
        </div>
        <div style={{ width: 1, background: 'var(--line)' }}/>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 36, fontFamily: 'var(--font-display)', fontWeight: 900, color: 'var(--accent)', letterSpacing: '-0.025em', lineHeight: 1 }}>0</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6 }}>Dead threads, ever</div>
        </div>
        <div style={{ width: 1, background: 'var(--line)' }}/>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 36, fontFamily: 'var(--font-display)', fontWeight: 900, color: 'var(--accent)', letterSpacing: '-0.025em', lineHeight: 1 }}>All</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6 }}>Fans welcome at All Teams</div>
        </div>
      </div>
    </div>

    <style>{`
      @keyframes hub-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.7); }
      }
      .pulse-dot { animation: hub-pulse 2s ease-in-out infinite; }

      .hub-tile { cursor: pointer; }
      .hub-tile--live:hover,
      .hub-tile--all:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 60px -16px rgba(10,8,30,0.45), 0 4px 12px rgba(10,8,30,0.12);
      }
      .hub-tile--all:hover {
        box-shadow: 0 0 0 1px rgba(155,122,240,0.5), 0 34px 70px -16px rgba(107,61,232,0.5), 0 4px 12px rgba(10,8,30,0.2);
      }
      .hub-tile:hover .hub-tile__peek {
        transform: translateY(0);
        opacity: 1;
      }
      .hub-tile--unlocking:hover {
        transform: translateY(-2px);
        border-color: var(--accent);
        box-shadow: 0 8px 20px -6px rgba(107,61,232,0.18);
      }
    `}</style>
  </section>
);

Object.assign(window, { TeamHubsC });