// FanCards.jsx — premium match to real app fan card

const getInitials = (n) => n.split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0]).join('').toUpperCase();

const FanCardAppScreen = ({ name, city, team, teamColor = '#000', teamEmoji = '🏴‍☠️', avatarColor = '#A5ACAF', avatarInk = '#000', since, cardNum, prediction, badges, stm = true }) => (
  <div style={{ width: '100%', height: '100%', background: '#F5F4F9', fontFamily: 'var(--font-sans)', position: 'relative', overflow: 'hidden' }}>
    <StatusBar />
    {/* back + title row */}
    <div style={{ padding: '4px 18px 10px', display: 'flex', alignItems: 'center', position: 'relative' }}>
      <div style={{ fontSize: 17, color: '#0B0D10', lineHeight: 1 }}>←</div>
      <div style={{
        position: 'absolute', left: 0, right: 0, textAlign: 'center',
        fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em',
        pointerEvents: 'none',
      }}>Fan Card</div>
    </div>

    <div style={{
      margin: '0 12px',
      borderRadius: 18,
      background: '#1B1F35',
      padding: 4,
      boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
    }}>
      <div style={{ background: '#1B1F35', borderRadius: 15, overflow: 'hidden', color: 'white' }}>
        <div style={{ background: teamColor, padding: '14px 14px 14px', textAlign: 'center' }}>
          <div style={{ fontSize: 12, marginBottom: 3 }}>{teamEmoji}</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 800, letterSpacing: '0.04em', lineHeight: 1 }}>{team}</div>
          <div style={{ fontSize: 8, color: 'rgba(255,255,255,0.75)', letterSpacing: '0.18em', marginTop: 4, fontWeight: 500 }}>
            FAN SINCE {since}
          </div>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: avatarColor,
            border: '2.5px solid #1B1F35',
            margin: '10px auto -28px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 13, color: avatarInk,
            position: 'relative', zIndex: 2,
            letterSpacing: '0.02em',
          }}>{getInitials(name)}</div>
        </div>

        <div style={{ padding: '34px 14px 12px', textAlign: 'center' }}>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>{name}</div>
          <div style={{ fontSize: 10, color: '#8a8fa8', marginTop: 1 }}>{city}</div>

          {stm && (
            <div style={{ marginTop: 10 }}>
              <div style={{ fontSize: 8, color: '#ffb066', fontWeight: 700, letterSpacing: '0.14em', marginBottom: 5 }}>🏅 MY BADGES</div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 3,
                background: '#22c55e', color: 'white',
                padding: '3px 10px', borderRadius: 999,
                fontSize: 9, fontWeight: 700,
              }}>✓ STM</div>
            </div>
          )}

          <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '10px -4px 10px' }}/>

          <div style={{ textAlign: 'left' }}>
            <div style={{ fontSize: 8, color: '#ffb066', fontWeight: 700, letterSpacing: '0.14em', marginBottom: 5 }}>⚡ ABOUT ME</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {badges.map(b => (
                <span key={b.label} style={{
                  fontSize: 8, padding: '3px 7px', borderRadius: 999,
                  background: 'rgba(107,61,232,0.25)',
                  border: '1px solid rgba(107,61,232,0.4)',
                  fontWeight: 600, color: 'white',
                }}>{b.emoji} {b.label}</span>
              ))}
            </div>
          </div>

          {prediction && (
            <div style={{ textAlign: 'left', marginTop: 10 }}>
              <div style={{ fontSize: 8, color: '#ffb066', fontWeight: 700, letterSpacing: '0.14em', marginBottom: 3 }}>🎯 BOLD PREDICTION</div>
              <div style={{ fontSize: 10, color: 'white', fontWeight: 500 }}>"{prediction}"</div>
            </div>
          )}

          <div style={{ marginTop: 10, fontSize: 9, color: '#9B7AF0', fontWeight: 600 }}>View Full Profile →</div>
          <div style={{ fontSize: 7, fontFamily: 'var(--font-mono)', color: '#6a6f88', marginTop: 6, letterSpacing: '0.15em' }}>
            FAN CARD  #{cardNum}
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 6, padding: '10px 4px 12px' }}>
        <div style={{ flex: 1, padding: '7px', textAlign: 'center', borderRadius: 999, border: '1px solid #4a4f66', color: 'white', fontSize: 10, fontWeight: 600 }}>Message</div>
        <div style={{ flex: 1.3, padding: '7px', textAlign: 'center', borderRadius: 999, background: '#6B3DE8', color: 'white', fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
          {teamEmoji} Enter Team Hub
        </div>
      </div>
    </div>
  </div>
);

const PhoneWithFanCard = ({ cardProps, rotate = 0, scale = 1 }) => (
  <div style={{ transform: `rotate(${rotate}deg) scale(${scale})`, transformOrigin: 'center' }}>
    <PhoneFrame width={260}>
      <FanCardAppScreen {...cardProps}/>
    </PhoneFrame>
  </div>
);

const FanCards = () => (
  <section style={{ padding: '120px 0', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
    <div className="container" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Fan Cards</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: 0 }}>
            Your <em style={{ color: 'var(--accent)' }}>fandom</em>,<br/>
            your key.
          </h2>
          <p style={{ fontSize: 18, color: 'var(--ink-3)', marginTop: 20, lineHeight: 1.55, maxWidth: 460 }}>
            Fan Cards are an optional way to show off every team you root for — and
            how you root for them. Collect one per fandom. Each card is your pass
            into that team's Hub and unlocks fan-only listings from sellers who
            only want to sell to their own.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['One per team', 'Raiders, Dodgers, Knights — stack as many fandoms as you have.'],
              ['Unlocks Team Hubs', 'Your card is the key to each team’s community feed.'],
              ['Fan-only listings', 'Sellers can gate tickets to verified members of their fanbase.'],
              ['Discover your people', 'Find fans in your section, your city, your level of crazy.'],
            ].map(([t, d]) => (
              <li key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{
                  width: 24, height: 24, borderRadius: '50%',
                  background: 'var(--accent-soft)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2,
                }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M2.5 6.5L5 9L9.5 3.5" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <div>
                  <div style={{ fontWeight: 600, color: 'var(--ink)' }}>{t}</div>
                  <div style={{ color: 'var(--ink-4)', fontSize: 14, marginTop: 2 }}>{d}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <div style={{ position: 'relative', height: 680, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div style={{ position: 'absolute', left: '0%', top: 40, zIndex: 1 }}>
            <PhoneWithFanCard rotate={-9} scale={0.82} cardProps={{
              name: 'Marcus James', city: 'Las Vegas, NV', team: 'GOLDEN KNIGHTS',
              teamColor: '#B4975A', teamEmoji: '⚔️',
              avatarColor: '#333F42', avatarInk: '#fff',
              since: '2017', cardNum: '0012',
              prediction: 'Cup year. Easy.',
              badges: [
                { emoji: '🎟️', label: 'Season' },
                { emoji: '🔥', label: 'Die Hard' },
              ],
            }}/>
          </div>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <PhoneWithFanCard rotate={0} scale={0.92} cardProps={{
              name: 'Maria Carbajal', city: 'Henderson, NV', team: 'RAIDERS',
              teamColor: '#000', teamEmoji: '🏴‍☠️',
              avatarColor: '#A5ACAF', avatarInk: '#000',
              since: '2018', cardNum: '0074',
              prediction: 'Super Bowl 2028!!!',
              badges: [
                { emoji: '📍', label: 'My Section' },
                { emoji: '🍔', label: 'Stadium Foodie' },
              ],
            }}/>
          </div>
          <div style={{ position: 'absolute', right: '0%', top: 50, zIndex: 1 }}>
            <PhoneWithFanCard rotate={9} scale={0.82} cardProps={{
              name: 'Priya Kapoor', city: 'Los Angeles, CA', team: 'DODGERS',
              teamColor: '#005A9C', teamEmoji: '⚾',
              avatarColor: '#EF3E42', avatarInk: '#fff',
              since: '2020', cardNum: '0214',
              prediction: 'Repeat. Chavez Ravine.',
              badges: [
                { emoji: '🎉', label: 'Meet Ups' },
                { emoji: '🍻', label: 'Tailgate' },
              ],
            }}/>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { FanCards, FanCardAppScreen, PhoneWithFanCard });