// HeroAppUI.jsx — "Buy Game Day Tickets" list view (Raiders schedule)

const UpcomingGameRow = ({ day, dateNum, month, time, opponent, opponentEmoji, opponentColor, from, listed, lightning }) => (
  <div style={{
    background: '#fff',
    borderRadius: 14,
    border: '1px solid rgba(10,8,30,0.06)',
    boxShadow: '0 1px 2px rgba(10,8,30,0.04)',
    padding: '10px 12px',
    display: 'flex', alignItems: 'center', gap: 10,
  }}>
    {/* Date cell — TBD until schedule drops */}
    <div style={{ textAlign: 'center', width: 42, flexShrink: 0 }}>
      <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>{day}</div>
      <div style={{
        fontSize: 11, fontWeight: 800, color: 'var(--accent)',
        lineHeight: 1, marginTop: 6, fontFamily: 'var(--font-mono)',
        letterSpacing: '0.08em',
      }}>TBD</div>
    </div>

    {/* Matchup — fixed 3-column grid so every row renders identically */}
    <div style={{
      flex: 1, minWidth: 0,
      padding: '6px 0',
      display: 'grid',
      gridTemplateColumns: '76px 16px 76px',
      alignItems: 'center',
      justifyContent: 'center',
      columnGap: 6,
    }}>
      {/* Left column — RAIDERS, right-aligned so it hugs the center */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 4,
        justifyContent: 'flex-end',
      }}>
        <span style={{ fontSize: 10 }}>🏴‍☠️</span>
        <span style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: '0.03em', whiteSpace: 'nowrap' }}>RAIDERS</span>
      </div>

      {/* Middle column — vs, dead-centered, fixed width */}
      <div style={{
        fontSize: 9, color: 'var(--ink-3)', fontWeight: 700,
        textTransform: 'lowercase',
        letterSpacing: '0.02em',
        textAlign: 'center',
      }}>vs</div>

      {/* Right column — opponent, left-aligned to mirror RAIDERS */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 4,
        justifyContent: 'flex-start',
      }}>
        <span style={{ fontSize: 10 }}>{opponentEmoji}</span>
        <span style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: '0.03em', color: opponentColor, whiteSpace: 'nowrap' }}>{opponent}</span>
      </div>
    </div>

    {/* Price cell */}
    <div style={{ textAlign: 'right', width: 56, flexShrink: 0 }}>
      <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--ink-3)' }}>FROM</div>
      <div style={{
        fontSize: 16, fontWeight: 800, color: 'var(--ink)',
        lineHeight: 1, marginTop: 2, fontFamily: 'var(--font-display)',
        letterSpacing: '-0.02em',
      }}>{from}</div>
      <div style={{ fontSize: 7, color: 'var(--ink-4)', marginTop: 2 }}>{listed}</div>
    </div>
  </div>
);

const HeroAppUI = () => (
  <div style={{
    width: '100%', height: '100%', background: '#F3F4F8',
    color: 'var(--ink)', fontFamily: 'var(--font-sans)',
    overflow: 'hidden', display: 'flex', flexDirection: 'column',
  }}>
    {/* Purple header band (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,
    }}>
      {/* dotted texture */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 30% 40%, rgba(255,255,255,0.08) 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.05) 1px, transparent 1px)',
        backgroundSize: '12px 12px, 18px 18px',
        opacity: 0.7, pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative' }}>
        <StatusBar dark/>
      </div>
      <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',
          }}>2</div>
        </div>
      </div>
    </div>

    {/* Title */}
    <div style={{ textAlign: 'center', padding: '14px 18px 4px' }}>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 22, fontWeight: 900, letterSpacing: '-0.015em',
        color: 'var(--ink)', lineHeight: 1.05,
      }}>BUY GAME DAY TICKETS</div>
      <div style={{
        fontSize: 10, fontWeight: 700, letterSpacing: '0.14em',
        color: 'var(--ink-3)', marginTop: 5,
      }}>NO BOTS. NO FEES. EVER.</div>
    </div>

    {/* Team selector card */}
    <div style={{
      margin: '12px 14px 0',
      background: '#fff',
      border: '1.5px solid var(--accent)',
      borderRadius: 14,
      padding: '10px 12px',
    }}>
      <div style={{
        padding: '8px 12px',
        border: '1px solid rgba(10,8,30,0.08)',
        borderRadius: 999,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      }}>
        <span style={{ fontSize: 12 }}>🏴‍☠️</span>
        <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.04em' }}>LAS VEGAS RAIDERS</span>
      </div>
      <div style={{
        marginTop: 8,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex' }}>
            <div style={{
              width: 20, height: 20, borderRadius: '50%', background: '#6B3DE8',
              border: '1.5px solid #fff', flexShrink: 0,
            }}/>
            <div style={{
              width: 20, height: 20, borderRadius: '50%', background: '#F2B90C',
              border: '1.5px solid #fff', marginLeft: -7, flexShrink: 0,
            }}/>
            <div style={{
              width: 20, height: 20, borderRadius: '50%', background: '#B9975B',
              border: '1.5px solid #fff', marginLeft: -7, flexShrink: 0,
            }}/>
          </div>
          <span style={{
            fontSize: 10, color: 'var(--ink-3)', fontWeight: 500,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>More marketplaces coming soon</span>
        </div>
        <span style={{
          fontSize: 10, fontWeight: 700, color: 'var(--accent)', whiteSpace: 'nowrap',
        }}>Find your team →</span>
      </div>
    </div>

    {/* Filter pills */}
    <div style={{
      display: 'flex', gap: 6, padding: '12px 14px 8px',
      overflowX: 'auto', WebkitOverflowScrolling: 'touch',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 4,
        padding: '6px 12px', borderRadius: 999,
        background: 'var(--accent)', color: '#fff',
        fontSize: 11, fontWeight: 700, flexShrink: 0,
      }}>
        <span style={{ fontSize: 11 }}>🎟️</span> Single
      </div>
      {[
        { emoji: '📦', label: 'Multi' },
        { emoji: '🏆', label: 'Season' },
        { emoji: '🔥', label: 'Premium' },
      ].map(t => (
        <div key={t.label} style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          padding: '6px 12px', borderRadius: 999,
          background: '#fff', color: 'var(--ink)',
          border: '1px solid rgba(10,8,30,0.08)',
          fontSize: 11, fontWeight: 700, flexShrink: 0,
        }}>
          <span style={{ fontSize: 11 }}>{t.emoji}</span> {t.label}
        </div>
      ))}
      <div style={{
        width: 28, height: 28, borderRadius: '50%',
        border: '1px solid rgba(10,8,30,0.08)', background: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 11, flexShrink: 0,
      }}>🔍</div>
    </div>

    <div style={{ padding: '0 14px 8px', fontSize: 10, color: 'var(--ink-3)' }}>
      47 tickets · 8 games
    </div>

    {/* Games list */}
    <div style={{
      padding: '0 10px',
      display: 'flex', flexDirection: 'column', gap: 6,
      flex: 1, overflow: 'hidden',
    }}>
      <UpcomingGameRow day="SUN" dateNum="5" month="OCT" time="1:25 PM"
        opponent="CHIEFS" opponentEmoji="🏈" opponentColor="#E31837"
        from="$142" listed="23 listed"/>
      <UpcomingGameRow day="SUN" dateNum="19" month="OCT" time="4:05 PM"
        opponent="BRONCOS" opponentEmoji="🐴" opponentColor="#FB4F14"
        from="$140" listed="31 listed"/>
      <UpcomingGameRow day="THU" dateNum="30" month="OCT" time="8:15 PM"
        opponent="CHARGERS" opponentEmoji="⚡" opponentColor="#0080C6"
        from="$175" listed="0 listed" lightning/>
      <UpcomingGameRow day="SUN" dateNum="9" month="NOV" time="1:00 PM"
        opponent="RAVENS" opponentEmoji="🦅" opponentColor="#241773"
        from="$132" listed="12 listed"/>
      <UpcomingGameRow day="SUN" dateNum="16" month="NOV" time="1:00 PM"
        opponent="BILLS" opponentEmoji="🦬" opponentColor="#00338D"
        from="$128" listed="18 listed"/>
    </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', active: true },
        { icon: '📱', label: 'Hubs' },
        { icon: '👥', label: 'Connect' },
        { icon: '💬', label: 'Inbox' },
        { icon: '👤', label: 'Profile' },
      ].map(t => (
        <div key={t.label} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
        }}>
          <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,
            filter: t.active ? 'none' : 'grayscale(0.3) opacity(0.7)',
          }}>
            {t.icon}
          </div>
          <div style={{
            fontSize: 8, fontWeight: 600,
            color: t.active ? 'var(--accent)' : 'var(--ink-3)',
          }}>{t.label}</div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { HeroAppUI });