// TeamHubsB.jsx — "Your team's hub, or the all-teams floor"
// Shows TWO hubs side by side on phones: team-specific (Raiders) and All Teams (cross-fanbase).
// Emphasizes that every team gets a hub + All Teams is the always-open floor where rivalries meet.

// ── All Teams feed posts: fans from different teams mixing it up
const ALL_TEAMS_POSTS = [
  {
    name: 'Marcus D.',
    initials: 'MD',
    team: 'Chiefs',
    teamEmoji: '🏹',
    teamColor: '#E31837',
    timeAgo: '2h',
    kind: 'take',
    badgeLabel: 'HOT TAKE',
    body: "Raiders fans: your new QB room is better than your last 10 years combined. I'll say it.",
    reactions: { fire: 24, laugh: 8, rage: 3 },
    comments: 47,
  },
  {
    name: 'Priya S.',
    initials: 'PS',
    team: 'Lakers',
    teamEmoji: '🏀',
    teamColor: '#552583',
    timeAgo: '4h',
    kind: 'spotlight',
    badgeLabel: 'FAN SPOTLIGHT',
    body: "Made it to 47 Lakers home games this season. Season ticket holder since '19. AMA about the whole Westbrook era.",
    reactions: { fire: 112, laugh: 0, rage: 0 },
    comments: 23,
  },
];

const TeamBadge = ({ emoji, name, color }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 4,
    padding: '2px 7px 2px 4px', borderRadius: 999,
    background: `${color}15`, border: `1px solid ${color}30`,
    fontSize: 9, fontWeight: 700, color: color,
    letterSpacing: '0.02em',
  }}>
    <span style={{ fontSize: 10 }}>{emoji}</span>
    <span>{name}</span>
  </div>
);

const ReactionChip = ({ emoji, count, active }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 3,
    padding: '3px 8px', borderRadius: 999,
    background: active ? 'rgba(107,61,232,0.12)' : 'rgba(10,8,30,0.04)',
    border: `1px solid ${active ? 'rgba(107,61,232,0.3)' : 'rgba(10,8,30,0.06)'}`,
    fontSize: 10, fontWeight: 700,
    color: active ? 'var(--accent)' : 'var(--ink-3)',
  }}>
    <span style={{ fontSize: 11 }}>{emoji}</span>
    {count > 0 && <span>{count}</span>}
  </div>
);

// ── All Teams hub screen — the cross-fanbase floor
const AllTeamsHubScreen = () => (
  <div style={{
    height: '100%', width: '100%',
    background: '#F3F4F8',
    fontFamily: 'var(--font-sans)',
    color: 'var(--ink)',
    display: 'flex', flexDirection: 'column',
    overflow: 'hidden',
  }}>
    {/* Dark header with small team flag ticker */}
    <div style={{
      background: 'linear-gradient(180deg, #0A0B13 0%, #14121F 100%)',
      padding: '0 18px 14px',
      position: 'relative', overflow: 'hidden',
      borderBottomLeftRadius: 20, borderBottomRightRadius: 20,
    }}>
      {/* purple radial glow top-right */}
      <div style={{
        position: 'absolute', top: -40, right: -40, width: 180, height: 180,
        background: 'radial-gradient(circle, rgba(107,61,232,0.35), transparent 65%)',
        pointerEvents: 'none',
      }}/>
      <StatusBar dark/>
      <div style={{
        position: 'relative', display: 'flex',
        alignItems: 'center', justifyContent: 'center', marginTop: 4,
      }}>
        <img src="assets/logo.png" alt="SeatConnect" style={{
          height: 11, display: 'block',
          filter: 'brightness(0) invert(1)',
        }}/>
      </div>
      {/* title */}
      <div style={{ position: 'relative', marginTop: 10, textAlign: 'center' }}>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 20, fontWeight: 800, color: '#fff',
          letterSpacing: '-0.015em', lineHeight: 1.05,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          All Teams
          <span style={{
            fontSize: 8, fontFamily: 'var(--font-mono)',
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--accent-2)', fontWeight: 700,
            background: 'rgba(155,122,240,0.18)',
            padding: '3px 7px', borderRadius: 999,
          }}>Always open</span>
        </div>
        <div style={{
          fontSize: 9, fontWeight: 700, letterSpacing: '0.14em',
          color: 'rgba(255,255,255,0.55)', marginTop: 4,
          textTransform: 'uppercase',
        }}>Where every fanbase meets</div>
      </div>
    </div>

    {/* Tabs */}
    <div style={{
      display: 'flex', gap: 6, padding: '12px 14px 10px',
      overflowX: 'auto', WebkitOverflowScrolling: 'touch',
    }}>
      {[
        { label: 'Hot Takes', emoji: '🔥', active: true },
        { label: 'Spotlights', emoji: '⭐' },
        { label: 'Rivalries', emoji: '⚔️' },
        { label: 'Articles', emoji: '📰' },
      ].map(t => (
        <div key={t.label} style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          padding: '6px 11px', borderRadius: 999, flexShrink: 0,
          background: t.active ? 'rgba(107,61,232,0.14)' : '#fff',
          color: t.active ? 'var(--accent)' : 'var(--ink-2)',
          border: t.active ? '1.5px solid var(--accent)' : '1px solid rgba(10,8,30,0.08)',
          fontSize: 11, fontWeight: 700,
        }}>
          <span>{t.emoji}</span> {t.label}
        </div>
      ))}
    </div>

    {/* Feed */}
    <div style={{ flex: 1, overflow: 'hidden', padding: '0 14px' }}>
      {ALL_TEAMS_POSTS.map((p, i) => (
        <div key={i} style={{
          background: '#fff',
          borderRadius: 14,
          border: '1px solid rgba(10,8,30,0.06)',
          marginBottom: 10,
          overflow: 'hidden',
        }}>
          {/* header */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 9,
            padding: '10px 12px 8px',
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: '50%',
              background: `linear-gradient(135deg, ${p.teamColor}, ${p.teamColor}dd)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontWeight: 800, fontSize: 10,
              flexShrink: 0,
              border: '1.5px solid #fff',
              boxShadow: '0 0 0 1px rgba(10,8,30,0.08)',
            }}>{p.initials}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 11.5, fontWeight: 700, color: 'var(--ink)',
                display: 'flex', alignItems: 'center', gap: 5, flexWrap: 'wrap',
              }}>
                {p.name}
                <TeamBadge emoji={p.teamEmoji} name={p.team} color={p.teamColor}/>
              </div>
              <div style={{ fontSize: 9, color: 'var(--ink-4)', marginTop: 2, fontWeight: 500 }}>
                {p.timeAgo}
              </div>
            </div>
            <div style={{
              fontSize: 8.5, fontWeight: 800, letterSpacing: '0.1em',
              color: p.kind === 'take' ? '#DC2626' : 'var(--accent)',
              background: p.kind === 'take' ? 'rgba(220,38,38,0.1)' : 'rgba(107,61,232,0.12)',
              padding: '3px 7px', borderRadius: 999,
              textTransform: 'uppercase',
            }}>{p.badgeLabel}</div>
          </div>

          {/* body */}
          <div style={{
            padding: '0 12px 10px',
            fontSize: 12, lineHeight: 1.45, color: 'var(--ink)',
            fontWeight: 500,
          }}>{p.body}</div>

          {/* reactions */}
          <div style={{
            padding: '8px 12px 10px',
            borderTop: '1px solid rgba(10,8,30,0.06)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
          }}>
            <div style={{ display: 'flex', gap: 4, alignItems: 'center', flexWrap: 'wrap' }}>
              <ReactionChip emoji="🔥" count={p.reactions.fire} active/>
              {p.reactions.laugh > 0 && <ReactionChip emoji="😂" count={p.reactions.laugh}/>}
              {p.reactions.rage > 0 && <ReactionChip emoji="🤬" count={p.reactions.rage}/>}
            </div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600,
            }}>
              <span>💬</span> {p.comments}
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Bottom tab bar */}
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
      background: '#fff', borderTop: '1px solid rgba(10,8,30,0.06)',
      padding: '7px 0 18px',
    }}>
      {[
        { icon: '🎫', label: 'Tickets' },
        { icon: '📱', label: 'Hubs', active: true },
        { icon: '👥', label: 'Connect' },
        { icon: '💬', label: 'Inbox', badge: 2 },
        { icon: '👤', label: 'Profile' },
      ].map(t => (
        <div key={t.label} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
          position: 'relative',
        }}>
          <div style={{
            width: 34, height: 24, borderRadius: 12,
            background: t.active ? 'rgba(107,61,232,0.14)' : 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 13, position: 'relative',
            filter: t.active ? 'none' : 'grayscale(0.3) opacity(0.7)',
          }}>
            {t.icon}
            {t.badge && (
              <div style={{
                position: 'absolute', top: -1, right: 2,
                width: 12, height: 12, borderRadius: '50%',
                background: '#EF4444', color: '#fff',
                fontSize: 7, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{t.badge}</div>
            )}
          </div>
          <div style={{
            fontSize: 8, fontWeight: 600,
            color: t.active ? 'var(--accent)' : 'var(--ink-3)',
          }}>{t.label}</div>
        </div>
      ))}
    </div>
  </div>
);

// ── The section
const TeamHubsB = () => {
  // Mobile detection — render a dedicated horizontal-swipe layout below 768px.
  // Inline JSX (not CSS overrides) guarantees the swipe layout actually wins.
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth <= 768
  );
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 768px)');
    const onChange = (e) => setIsMobile(e.matches);
    mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
    setIsMobile(mq.matches);
    return () => {
      mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange);
    };
  }, []);

  // Track which phone is centered, for the pagination dots.
  const scrollerRef = React.useRef(null);
  const [activeIdx, setActiveIdx] = React.useState(0);
  React.useEffect(() => {
    if (!isMobile) return;
    const el = scrollerRef.current;
    if (!el) return;
    const onScroll = () => {
      const w = el.clientWidth;
      const idx = Math.round(el.scrollLeft / w);
      setActiveIdx(idx);
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, [isMobile]);

  // The two phone cards — rendered identically on both layouts, just wrapped
  // in different parents.
  const raidersCard = (
    <div className="sc-teamhubs-phone-card" style={{ textAlign: 'center' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '6px 14px', borderRadius: 999,
        background: '#fff', border: '1px solid var(--line)',
        boxShadow: '0 2px 6px rgba(10,8,30,0.05)',
        marginBottom: 24,
      }}>
        <span style={{ fontSize: 13 }}>🏴‍☠️</span>
        <span style={{
          fontSize: 11, fontFamily: 'var(--font-mono)',
          letterSpacing: '0.14em', textTransform: 'uppercase',
          fontWeight: 700, color: 'var(--ink-2)',
        }}>Team hub · Raiders</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <PhoneFrame width={280}>
          <RaidersHubScreen/>
        </PhoneFrame>
      </div>
      <div style={{
        fontSize: 14, color: 'var(--ink-3)', marginTop: 28,
        maxWidth: 280, margin: '28px auto 0', lineHeight: 1.55,
      }}>
        <strong style={{ color: 'var(--ink)' }}>Your fanbase, year-round.</strong><br/>
        Draft talk. Trade reactions. Ticket chat.
        The group chat you always wanted for your team.
      </div>
    </div>
  );

  const allTeamsCard = (
    <div className="sc-teamhubs-phone-card" style={{ textAlign: 'center' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '6px 14px', borderRadius: 999,
        background: 'var(--ink)', color: '#fff',
        boxShadow: '0 4px 14px rgba(107,61,232,0.2)',
        marginBottom: 24, position: 'relative',
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: 'var(--accent-2)',
          animation: 'pulse 2s ease-in-out infinite',
        }}/>
        <span style={{
          fontSize: 11, fontFamily: 'var(--font-mono)',
          letterSpacing: '0.14em', textTransform: 'uppercase',
          fontWeight: 700,
        }}>All Teams · Always open</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <PhoneFrame width={280}>
          <AllTeamsHubScreen/>
        </PhoneFrame>
      </div>
      <div style={{
        fontSize: 14, color: 'var(--ink-3)', marginTop: 28,
        maxWidth: 280, margin: '28px auto 0', lineHeight: 1.55,
      }}>
        <strong style={{ color: 'var(--ink)' }}>Where rivalries meet.</strong><br/>
        Hot takes, fan spotlights, cross-fanbase
        banter. Your team's Hub unlocking? Still here.
      </div>
    </div>
  );

  const cards = [raidersCard, allTeamsCard];

  return (
  <section id="team-hubs" style={{
    padding: '140px 0',
    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',
  }}>
    {/* purple glow top-right, consistent with the rest of the site */}
    <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 }}>
      {/* Section header — full width */}
      <div style={{ textAlign: 'center', marginBottom: 80, maxWidth: 880, margin: '0 auto 80px' }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}>Team Hubs</div>
        <h2 className="display" style={{
          fontSize: 'clamp(44px, 5.5vw, 76px)',
          margin: 0, lineHeight: 0.98, letterSpacing: '-0.035em',
        }}>
          Fandom isn't just<br/>
          on <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>gameday</em>.
        </h2>
        <p style={{
          fontSize: 19, color: 'var(--ink-3)', marginTop: 28,
          lineHeight: 1.55, maxWidth: 640, margin: '28px auto 0',
        }}>
          Every team gets its own Hub — hot takes, trade reactions, gameday chatter,
          articles, and fan spotlights. Don't see your team yet? Meet everyone at
          <em style={{ color: 'var(--accent)', fontStyle: 'italic', fontWeight: 600 }}> All Teams</em> —
          the always-open floor where rival fanbases mix it up.
        </p>
      </div>

      {/* Two phones — desktop: side-by-side grid. Mobile: true horizontal swipe scroller. */}
      {isMobile ? (
        <>
          {/* Swipe hint */}
          <div style={{
            textAlign: 'center', marginBottom: 20,
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            fontWeight: 700, color: 'var(--accent)',
          }}>
            ← Swipe to see both hubs →
          </div>

          {/* The scroller itself */}
          <div
            ref={scrollerRef}
            style={{
              display: 'flex',
              flexWrap: 'nowrap',
              overflowX: 'auto',
              overflowY: 'visible',
              scrollSnapType: 'x mandatory',
              WebkitOverflowScrolling: 'touch',
              gap: 16,
              padding: '4px 16px 28px',
              margin: '0 -20px',
              scrollbarWidth: 'none',
            }}
          >
            <style>{`
              .sc-thb-scroller::-webkit-scrollbar { display: none; }
            `}</style>
            {cards.map((card, i) => (
              <div key={i} style={{
                flex: '0 0 calc(100% - 32px)',
                maxWidth: 'calc(100% - 32px)',
                scrollSnapAlign: 'center',
                minWidth: 0,
              }}>
                {card}
              </div>
            ))}
          </div>

          {/* Pagination dots */}
          <div style={{
            display: 'flex', gap: 8, justifyContent: 'center', marginTop: 4,
          }}>
            {cards.map((_, i) => (
              <div key={i} style={{
                width: activeIdx === i ? 24 : 8,
                height: 8,
                borderRadius: 4,
                background: activeIdx === i ? 'var(--accent)' : 'rgba(10,8,30,0.18)',
                transition: 'all 240ms ease',
              }}/>
            ))}
          </div>
        </>
      ) : (
        <div className="sc-teamhubs-phones" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
          maxWidth: 1080, margin: '0 auto',
          alignItems: 'start',
        }}>
          {raidersCard}
          {allTeamsCard}
        </div>
      )}

      {/* Bottom stats strip */}
      <div style={{
        display: 'flex', gap: 36, marginTop: 80, 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 }}>1</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6 }}>Hub per team, plus All Teams</div>
        </div>
      </div>
    </div>
  </section>
  );
};

Object.assign(window, { TeamHubsB, AllTeamsHubScreen });