// FanCardsD.jsx — "Gallery wall" — 3-column grid of full cards from different fans
// Profile-page energy; showcases diversity of fans + teams

const FanCardsD = () => {
  const fans = [
    {
      name: 'Maria Carbajal', city: 'Henderson, NV',
      team: 'RAIDERS', teamColor: '#000', teamEmoji: '🏴‍☠️',
      avatarColor: '#A5ACAF', avatarInk: '#000', initials: 'MC',
      since: '2018', cardNum: '0074',
      prediction: 'Super Bowl 2028!!!',
      badges: [
        { emoji: '📍', label: 'My Section' },
        { emoji: '🍔', label: 'Stadium Foodie' },
      ],
      quote: '"Found my best friends in sec 138."',
    },
    {
      name: 'Marcus James', city: 'Las Vegas, NV',
      team: 'GOLDEN KNIGHTS', teamColor: '#B4975A', teamEmoji: '⚔️',
      avatarColor: '#333F42', avatarInk: '#fff', initials: 'MJ',
      since: '2017', cardNum: '0012',
      prediction: 'Cup year. Easy.',
      badges: [
        { emoji: '🎟️', label: 'Season' },
        { emoji: '🔥', label: 'Die Hard' },
      ],
      quote: '"Hub\'s basically my second group chat."',
    },
    {
      name: 'Priya Kapoor', city: 'Los Angeles, CA',
      team: 'DODGERS', teamColor: '#005A9C', teamEmoji: '⚾',
      avatarColor: '#EF3E42', avatarInk: '#fff', initials: 'PK',
      since: '2020', cardNum: '0214',
      prediction: 'Repeat. Chavez Ravine.',
      badges: [
        { emoji: '🎉', label: 'Meet Ups' },
        { emoji: '🍻', label: 'Tailgate' },
      ],
      quote: '"Saved $300 on playoff tickets last year."',
    },
  ];

  return (
    <section style={{ padding: '120px 0', background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 60px' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Fan Cards</div>
          <h2 className="display" style={{ fontSize: 'clamp(44px, 5.5vw, 72px)', margin: 0 }}>
            Meet the <em style={{ color: 'var(--accent)' }}>fans</em>.
          </h2>
          <p style={{ fontSize: 18, color: 'var(--ink-3)', marginTop: 20, lineHeight: 1.55 }}>
            Every Fan Card is optional — a free way to show who you root for and how.
            Collect one per team. Each unlocks that Hub and fan-only listings inside.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {fans.map((f, i) => (
            <div key={f.cardNum} style={{
              background: 'var(--bg)',
              border: '1px solid var(--line)',
              borderRadius: 24, padding: 20,
              boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
            }}>
              {/* The card */}
              <div style={{ background: '#1B1F35', borderRadius: 16, overflow: 'hidden', color: 'white' }}>
                <div style={{ background: f.teamColor, padding: '20px 16px 18px', textAlign: 'center' }}>
                  <div style={{ fontSize: 15, marginBottom: 5 }}>{f.teamEmoji}</div>
                  <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '0.04em', lineHeight: 1, fontFamily: 'var(--font-sans)' }}>
                    {f.team}
                  </div>
                  <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.75)', letterSpacing: '0.18em', marginTop: 5, fontWeight: 500 }}>
                    FAN SINCE {f.since}
                  </div>
                  <div style={{
                    width: 52, height: 52, borderRadius: '50%',
                    background: f.avatarColor, color: f.avatarInk,
                    border: '3px solid #1B1F35',
                    margin: '12px auto -34px',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 700, fontSize: 16,
                    position: 'relative', zIndex: 2,
                  }}>{f.initials}</div>
                </div>
                <div style={{ padding: '42px 16px 16px', textAlign: 'center' }}>
                  <div style={{ fontSize: 15, fontWeight: 700 }}>{f.name}</div>
                  <div style={{ fontSize: 11, color: '#8a8fa8', marginTop: 2 }}>{f.city}</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 4, marginTop: 12 }}>
                    {f.badges.map(b => (
                      <span key={b.label} style={{
                        fontSize: 9, padding: '4px 9px', borderRadius: 999,
                        background: 'rgba(107,61,232,0.25)',
                        border: '1px solid rgba(107,61,232,0.4)',
                        fontWeight: 600,
                      }}>{b.emoji} {b.label}</span>
                    ))}
                  </div>
                  <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: 8, fontFamily: 'var(--font-mono)', color: '#6a6f88', letterSpacing: '0.15em' }}>
                    FAN CARD • #{f.cardNum}
                  </div>
                </div>
              </div>

              {/* Quote below card */}
              <div style={{
                marginTop: 16, padding: '12px 4px',
                fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.4,
                fontStyle: 'italic', textAlign: 'center',
                fontFamily: 'var(--font-display)',
              }}>
                {f.quote}
                <div style={{
                  fontFamily: 'var(--font-sans)', fontSize: 11,
                  color: 'var(--ink-4)', marginTop: 6, fontStyle: 'normal',
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                }}>
                  — {f.name.split(' ')[0]}, {f.team.toLowerCase()}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* value pills under grid */}
        <div style={{
          marginTop: 48, display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center',
        }}>
          {[
            'Optional — only for fans who want one',
            'One per team — stack as many fandoms as you have',
            'Unlocks Team Hubs + fan-gated listings',
            'Free forever',
          ].map(t => (
            <div key={t} style={{
              padding: '10px 18px', borderRadius: 999,
              background: 'var(--bg)', border: '1px solid var(--line)',
              fontSize: 13, color: 'var(--ink-2)', fontWeight: 500,
            }}>{t}</div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FanCardsD });