// FanCardsB.jsx — "The Collection" — trading card / stack of teams
// Treats fan cards as collectibles — horizontal row of multiple teams per user

const MiniFanCard = ({ team, teamColor, teamEmoji, avatarColor, avatarInk, initials, city, since, badges = [], tilt = 0, y = 0, z = 1, width = 220 }) => (
  <div style={{
    transform: `rotate(${tilt}deg) translateY(${y}px)`,
    transformOrigin: 'center bottom',
    zIndex: z,
    position: 'relative',
    filter: z < 5 ? `brightness(${0.82 + z * 0.04})` : 'none',
  }}>
    <div style={{
      width, borderRadius: 18, overflow: 'hidden',
      background: '#1B1F35',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1), 0 24px 40px -12px rgba(0,0,0,0.35)',
      color: 'white',
      fontFamily: 'var(--font-sans)',
      border: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ background: teamColor, padding: '16px 14px 14px', textAlign: 'center' }}>
        <div style={{ fontSize: 14, marginBottom: 4 }}>{teamEmoji}</div>
        <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '0.05em', lineHeight: 1 }}>{team}</div>
        <div style={{ fontSize: 8, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.18em', marginTop: 4, fontWeight: 500 }}>
          FAN SINCE {since}
        </div>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          background: avatarColor, color: avatarInk,
          border: '3px solid #1B1F35',
          margin: '12px auto -30px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 15,
          position: 'relative', zIndex: 2,
        }}>{initials}</div>
      </div>
      <div style={{ padding: '38px 14px 16px', textAlign: 'center' }}>
        <div style={{ fontSize: 13, fontWeight: 700 }}>{initials === 'MC' ? 'Maria Carbajal' : initials === 'MJ' ? 'Marcus James' : initials === 'PK' ? 'Priya Kapoor' : initials === 'DT' ? 'Devon Taylor' : 'Alex Chen'}</div>
        <div style={{ fontSize: 10, color: '#8a8fa8', marginTop: 2 }}>{city}</div>

        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 4, marginTop: 12 }}>
          {badges.map((b, i) => (
            <span key={i} style={{
              fontSize: 8, padding: '3px 8px', borderRadius: 999,
              background: 'rgba(107,61,232,0.22)',
              border: '1px solid rgba(107,61,232,0.38)',
              fontWeight: 600,
            }}>{b}</span>
          ))}
        </div>

        <div style={{ marginTop: 14, paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          <div style={{ fontSize: 8, fontFamily: 'var(--font-mono)', color: '#6a6f88', letterSpacing: '0.15em' }}>
            FAN CARD • {team.slice(0, 3)}
          </div>
        </div>
      </div>
    </div>
  </div>
);

const FanCardsB = () => {
  const mariaCards = [
    { team: 'RAIDERS', teamColor: '#000', teamEmoji: '🏴‍☠️', avatarColor: '#A5ACAF', avatarInk: '#000', initials: 'MC', city: 'Henderson, NV', since: '2018', badges: ['📍 My Section', '🍔 Stadium Foodie'] },
    { team: 'DODGERS', teamColor: '#005A9C', teamEmoji: '⚾', avatarColor: '#EF3E42', avatarInk: '#fff', initials: 'MC', city: 'Henderson, NV', since: '2015', badges: ['🎉 Meet Ups', '🍻 Tailgate'] },
    { team: 'GOLDEN KNIGHTS', teamColor: '#B4975A', teamEmoji: '⚔️', avatarColor: '#333F42', avatarInk: '#fff', initials: 'MC', city: 'Henderson, NV', since: '2017', badges: ['🔥 Die Hard'] },
    { team: 'ATHLETICS', teamColor: '#003831', teamEmoji: '🟢', avatarColor: '#EFB21E', avatarInk: '#000', initials: 'MC', city: 'Henderson, NV', since: '2022', badges: ['✈️ Away Games'] },
    { team: 'ACES', teamColor: '#ED1C24', teamEmoji: '🏀', avatarColor: '#000', avatarInk: '#fff', initials: 'MC', city: 'Henderson, NV', since: '2023', badges: ['🎟️ Season'] },
  ];

  return (
    <section style={{ padding: '120px 0 140px', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ textAlign: 'center', maxWidth: 780 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Fan Cards</div>
        <h2 className="display" style={{ fontSize: 'clamp(42px, 5.5vw, 72px)', margin: 0, lineHeight: 1.02 }}>
          Collect one for<br/>
          every <em style={{ color: 'var(--accent)' }}>fandom</em>.
        </h2>
        <p style={{ fontSize: 19, color: 'var(--ink-3)', marginTop: 24, lineHeight: 1.55, maxWidth: 600, margin: '24px auto 0' }}>
          Fan Cards are optional. Stack as many as you've got teams — each one
          unlocks that team's Hub, exclusive fan-gated listings, and helps other
          fans find you.
        </p>
      </div>

      {/* Stack of cards — fanned out */}
      <div style={{
        marginTop: 80, padding: '0 40px',
        display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
        position: 'relative', height: 460,
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', position: 'relative' }}>
          {mariaCards.map((c, i) => {
            const center = (mariaCards.length - 1) / 2;
            const offset = i - center;
            return (
              <div key={i} style={{
                marginLeft: i === 0 ? 0 : -70,
                zIndex: 10 - Math.abs(offset),
                position: 'relative',
              }}>
                <MiniFanCard {...c}
                  tilt={offset * 6}
                  y={Math.abs(offset) * 24}
                  z={10 - Math.abs(offset)}
                  width={230}/>
              </div>
            );
          })}
        </div>
      </div>

      {/* What each card unlocks */}
      <div className="container" style={{ marginTop: 60 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
          background: 'var(--line)', borderRadius: 20, overflow: 'hidden',
          maxWidth: 980, margin: '0 auto',
          border: '1px solid var(--line)',
        }}>
          {[
            { n: '01', t: 'Access the Team Hub', d: 'Feed, chat, gameday threads. Only real fans inside.' },
            { n: '02', t: 'Fan-only listings', d: 'Sellers can gate tickets to verified members of their fanbase.' },
            { n: '03', t: 'Get discovered', d: 'Find fans in your section, your city, your level of crazy.' },
          ].map((it) => (
            <div key={it.n} style={{ background: 'var(--bg)', padding: '32px 28px' }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                color: 'var(--accent)', letterSpacing: '0.12em',
              }}>{it.n}</div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 12, letterSpacing: '-0.02em' }}>{it.t}</div>
              <div style={{ fontSize: 15, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.55 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FanCardsB, MiniFanCard });