// TeamHubs.jsx — Las Vegas Raiders hub shown inside a real phone

const HUB_POSTS = [
  {
    user: 'You',
    initials: 'YU',
    timeAgo: '1w',
    verified: true,
    tag: 'NEWS',
    caption: 'Gearing up for the NFL draft 🔥',
    articleTitle: 'The state of the Raiders roster ahead of the 2026 NFL Draft',
    articleBody: 'A look at every player on the active roster with two weeks until the start of the 2026 NFL Draft.',
    articleSource: 'Las Vegas Raiders',
    likes: 1,
  },
];

const RaidersHubScreen = () => (
  <div style={{
    height: '100%', width: '100%',
    background: '#F3F4F8',
    fontFamily: 'var(--font-sans)',
    color: 'var(--ink)',
    display: 'flex', flexDirection: 'column',
    overflow: 'hidden',
  }}>
    {/* Purple header, extends to top edge */}
    <div style={{
      background: 'linear-gradient(180deg, #6B3DE8 0%, #5A2FD6 100%)',
      padding: '0 18px 14px',
      position: 'relative', overflow: 'hidden',
      borderBottomLeftRadius: 20, borderBottomRightRadius: 20,
    }}>
      {/* subtle crowd / texture effect */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.06) 1px, transparent 1px)',
        backgroundSize: '10px 10px, 16px 16px',
        opacity: 0.6, 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 style={{
          position: 'absolute', right: 0,
          width: 30, height: 30, borderRadius: '50%',
          background: 'rgba(255,255,255,0.14)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13,
        }}>
          <span style={{ color: '#fff' }}>🔔</span>
          <div style={{
            position: 'absolute', top: -2, right: -2,
            width: 13, height: 13, borderRadius: '50%',
            background: '#EF4444', color: '#fff',
            fontSize: 8, fontWeight: 800,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>3</div>
        </div>
      </div>
    </div>

    {/* Team header */}
    <div style={{ textAlign: 'center', padding: '16px 18px 12px' }}>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 22, fontWeight: 800, letterSpacing: '-0.015em',
        color: 'var(--ink)', lineHeight: 1.05,
        display: 'inline-flex', alignItems: 'center', gap: 6,
      }}>
        Las Vegas Raiders
        <span style={{ fontSize: 18 }}>🏴‍☠️</span>
      </div>
      <div style={{
        fontSize: 10, fontWeight: 700, letterSpacing: '0.14em',
        color: 'var(--ink-3)', marginTop: 4,
      }}>YOUR FAN BASE. ONE PLACE.</div>
    </div>

    {/* Tabs */}
    <div style={{
      display: 'flex', gap: 7, padding: '4px 14px 12px',
      overflowX: 'auto', WebkitOverflowScrolling: 'touch',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 5,
        padding: '7px 14px', borderRadius: 999, flexShrink: 0,
        background: 'rgba(107,61,232,0.12)', color: 'var(--accent)',
        border: '1.5px solid var(--accent)',
        fontSize: 12, fontWeight: 700,
      }}>
        <span>🎟️</span> Feed
      </div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 5,
        padding: '7px 14px', borderRadius: 999, flexShrink: 0,
        background: '#fff', color: 'var(--ink)',
        border: '1px solid rgba(10,8,30,0.08)',
        fontSize: 12, fontWeight: 700,
      }}>
        <span>📣</span> State of the Nation
      </div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 5,
        padding: '7px 14px', borderRadius: 999, flexShrink: 0,
        background: '#fff', color: 'var(--ink)',
        border: '1px solid rgba(10,8,30,0.08)',
        fontSize: 12, fontWeight: 700,
      }}>
        <span>🎫</span> Ticket Chat
      </div>
    </div>

    {/* Composer */}
    <div style={{
      padding: '0 14px 12px',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: '50%',
        background: 'linear-gradient(135deg, #0A0A0A, #222)',
        flexShrink: 0, border: '1.5px solid #fff',
      }}/>
      <div style={{
        flex: 1, padding: '8px 12px',
        border: '1px solid rgba(10,8,30,0.1)',
        borderRadius: 999,
        fontSize: 11, color: 'var(--ink-4)',
        background: '#fff',
      }}>Share with your fan base...</div>
    </div>

    {/* Post card */}
    <div style={{ flex: 1, overflow: 'hidden', padding: '0 14px' }}>
      {HUB_POSTS.map(p => (
        <div key={p.user} style={{
          background: '#fff',
          borderRadius: 16,
          border: '1px solid rgba(10,8,30,0.06)',
          boxShadow: '0 1px 2px rgba(10,8,30,0.04)',
          overflow: 'hidden',
          marginBottom: 10,
        }}>
          {/* Post header */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 9,
            padding: '11px 12px 8px',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: 'linear-gradient(135deg, #0A0A0A, #2a2a2a)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontWeight: 800, fontSize: 11,
              flexShrink: 0,
            }}>{p.initials}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 12, fontWeight: 700, color: 'var(--ink)',
                display: 'flex', alignItems: 'center', gap: 5,
              }}>
                {p.user}
                <span style={{ fontSize: 10, fontWeight: 500, color: 'var(--ink-4)' }}>· {p.timeAgo}</span>
              </div>
              {p.verified && (
                <div style={{
                  fontSize: 9, color: 'var(--accent)', fontWeight: 700,
                  display: 'flex', alignItems: 'center', gap: 3, marginTop: 1,
                }}>
                  <VerifiedBadge size={9}/> Verified Fan
                </div>
              )}
            </div>
            <div style={{
              fontSize: 9, fontWeight: 700, letterSpacing: '0.08em',
              color: 'var(--accent)',
              background: 'rgba(107,61,232,0.12)',
              padding: '3px 8px', borderRadius: 999,
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              <span>📰</span> {p.tag}
            </div>
          </div>

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

          {/* Article "image" — placeholder illustration */}
          <div style={{
            height: 130, position: 'relative', overflow: 'hidden',
            background: 'linear-gradient(180deg, #7FB3D5 0%, #AED6E5 60%, #CDE2EA 100%)',
          }}>
            {/* building silhouette */}
            <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0, height: '60%',
              background: 'linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05))',
              clipPath: 'polygon(0 100%, 0 40%, 28% 40%, 28% 20%, 58% 20%, 58% 50%, 100% 50%, 100% 100%)',
            }}/>
            {/* flag pole */}
            <div style={{
              position: 'absolute', left: '36%', top: '18%', bottom: 0,
              width: 2, background: '#cccccc',
            }}/>
            {/* raider flag */}
            <div style={{
              position: 'absolute', left: '36%', top: '20%',
              width: 38, height: 26,
              background: '#0A0A0A',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14,
            }}>🏴‍☠️</div>
            {/* second smaller flag */}
            <div style={{
              position: 'absolute', left: '22%', top: '30%',
              width: 28, height: 18,
              background: '#1a1a2e',
              opacity: 0.7,
            }}/>
          </div>

          {/* Article body */}
          <div style={{ padding: '11px 12px' }}>
            <div style={{
              fontSize: 10.5, color: 'var(--ink-3)',
              lineHeight: 1.45, marginBottom: 8,
            }}>{p.articleBody}</div>
            <div style={{
              fontSize: 13, fontWeight: 800, color: 'var(--ink)',
              letterSpacing: '-0.01em', lineHeight: 1.2,
              marginBottom: 8,
            }}>{p.articleTitle}</div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6,
              paddingTop: 9, borderTop: '1px solid rgba(10,8,30,0.06)',
            }}>
              <div style={{
                width: 18, height: 18, borderRadius: 4,
                background: '#0A0A0A',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10,
              }}>🏴‍☠️</div>
              <span style={{ fontSize: 10, color: 'var(--ink-3)', fontWeight: 600 }}>
                Las Vegas Raiders
              </span>
            </div>
          </div>

          {/* Actions */}
          <div style={{
            padding: '8px 12px 10px',
            borderTop: '1px solid rgba(10,8,30,0.06)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <div style={{
                padding: '4px 9px', borderRadius: 999,
                background: 'rgba(107,61,232,0.1)',
                border: '1px solid rgba(107,61,232,0.2)',
                fontSize: 10, fontWeight: 700, color: 'var(--accent)',
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>🔥 {p.likes}</div>
              <div style={{
                width: 24, height: 24, borderRadius: '50%',
                border: '1px solid rgba(10,8,30,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, color: 'var(--ink-3)',
              }}>+</div>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--ink-3)' }}>
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
          </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>
);

const TeamHubs = () => (
  <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',
  }}>
    {/* subtle purple blob — top-right to match the site's consistent accent position */}
    <div style={{
      position: 'absolute', top: -150, right: -150, width: 500, height: 500,
      borderRadius: '50%', zIndex: 0,
      background: 'radial-gradient(circle, rgba(107,61,232,0.08), transparent 60%)',
      filter: 'blur(40px)',
    }}/>

    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto',
        gap: 80, alignItems: 'center',
      }}>
        {/* LEFT — copy */}
        <div>
          <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: 520,
          }}>
            Team Hubs are the year-round home for your fan base. Break down the
            draft, react to trades, argue about the coaching staff, find a seatmate
            for next week's game. It's the group chat you always wanted for your team.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 32 }}>
            {[
              ['📣', 'State of the Nation', 'Daily news, takes, and debate threads.'],
              ['🎫', 'Ticket Chat', 'Trade, sell, and split tickets with real fans.'],
              ['🔥', 'Gameday Feed', 'Live reactions, photos, and seat-by-seat chatter.'],
            ].map(([i, t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 10,
                  background: 'rgba(107,61,232,0.12)',
                  border: '1px solid rgba(107,61,232,0.25)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 16, flexShrink: 0,
                }}>{i}</div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)' }}>{t}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{
            display: 'flex', gap: 36, marginTop: 40, paddingTop: 28,
            borderTop: '1px solid var(--line)',
          }}>
            <div>
              <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>
              <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>
        </div>

        {/* RIGHT — phone mockup */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneFrame width={340}>
            <RaidersHubScreen/>
          </PhoneFrame>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { TeamHubs });