// FanCardsF.jsx — "Passport" — horizontal membership card with stamps
// Playful; cards you collect like travel stamps

const PassportStamp = ({ team, teamColor, emoji, rotate = 0, opacity = 1 }) => (
  <div style={{
    transform: `rotate(${rotate}deg)`,
    opacity,
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    width: 92, height: 92, borderRadius: '50%',
    border: `2px solid ${teamColor}`,
    background: `${teamColor}15`,
    color: teamColor,
    fontFamily: 'var(--font-mono)',
    fontSize: 8, fontWeight: 700,
    letterSpacing: '0.1em', textTransform: 'uppercase',
    textAlign: 'center', padding: 4,
    position: 'relative',
  }}>
    <div style={{ fontSize: 24, marginBottom: 4 }}>{emoji}</div>
    <div style={{ lineHeight: 1.1 }}>{team}</div>
    <div style={{ fontSize: 7, opacity: 0.7, marginTop: 3 }}>FAN • 2024</div>
  </div>
);

const FanCardsF = () => (
  <section style={{ padding: '120px 0 140px', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Fan Cards</div>
          <h2 className="display" style={{ fontSize: 'clamp(44px, 5.5vw, 76px)', margin: 0 }}>
            Your<br/>
            <em style={{ color: 'var(--accent)' }}>fandom</em><br/>
            passport.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-3)', marginTop: 20, lineHeight: 1.55, maxWidth: 440 }}>
            Collect a Fan Card for every team you love. Each one's a stamp in your
            passport — your key into that Team Hub and the fan-gated listings inside.
            Optional, free, unlimited.
          </p>
          <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, maxWidth: 440 }}>
            {[
              ['🔓', 'Unlocks Hubs'],
              ['🎟️', 'Fan-only seats'],
              ['📍', 'Find your section'],
              ['🆓', 'Always free'],
            ].map(([e, t]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ fontSize: 18 }}>{e}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)', fontWeight: 500 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>

        {/* The passport */}
        <div style={{ position: 'relative' }}>
          <div style={{
            background: 'linear-gradient(155deg, #1A1735 0%, #2C1E5C 100%)',
            borderRadius: 16,
            padding: 28,
            color: 'white',
            boxShadow: '0 4px 8px rgba(0,0,0,0.1), 0 40px 80px -20px rgba(107, 61, 232, 0.35)',
            position: 'relative',
            overflow: 'hidden',
            border: '1px solid rgba(155, 122, 240, 0.3)',
          }}>
            {/* corner watermark */}
            <div style={{
              position: 'absolute', top: 20, right: 20,
              fontFamily: 'var(--font-mono)', fontSize: 10,
              opacity: 0.35, letterSpacing: '0.2em', textTransform: 'uppercase',
              textAlign: 'right',
            }}>
              SeatConnect<br/>
              Fan Passport<br/>
              001
            </div>

            {/* Header band */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 6, paddingBottom: 20, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
              <div style={{
                width: 58, height: 58, borderRadius: '50%',
                background: '#A5ACAF', color: '#000',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: 17,
                border: '3px solid rgba(255,255,255,0.9)',
              }}>MC</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', opacity: 0.6, letterSpacing: '0.16em' }}>HOLDER</div>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em', marginTop: 2 }}>Maria Carbajal</div>
                <div style={{ fontSize: 11, opacity: 0.75, marginTop: 1 }}>Henderson, NV • Joined 2024</div>
              </div>
              <div style={{
                padding: '4px 10px', borderRadius: 4,
                background: 'rgba(34, 197, 94, 0.2)', color: '#7FE07F',
                fontSize: 9, fontWeight: 700, letterSpacing: '0.1em',
              }}>VERIFIED</div>
            </div>

            {/* "Stamps collected" */}
            <div style={{ padding: '24px 0' }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                opacity: 0.6, letterSpacing: '0.16em', textTransform: 'uppercase',
                marginBottom: 18,
                display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Fandoms Stamped</span>
                <span style={{ color: '#FFD84D' }}>05 / UNLIMITED</span>
              </div>

              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'space-around' }}>
                <PassportStamp team="Raiders" teamColor="#C0C0C0" emoji="🏴‍☠️" rotate={-8}/>
                <PassportStamp team="Dodgers" teamColor="#6BAED6" emoji="⚾" rotate={5}/>
                <PassportStamp team="Knights" teamColor="#DBBE72" emoji="⚔️" rotate={-3}/>
                <PassportStamp team="Athletics" teamColor="#7FC88C" emoji="🟢" rotate={8}/>
                <PassportStamp team="Aces" teamColor="#F47F7F" emoji="🏀" rotate={-6}/>
              </div>
            </div>

            {/* Footer */}
            <div style={{
              paddingTop: 18,
              borderTop: '1px solid rgba(255,255,255,0.12)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
              fontFamily: 'var(--font-mono)', fontSize: 9,
              letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.7,
            }}>
              <span>Issued: Las Vegas, NV</span>
              <span>ID • 07-2024-0074</span>
              <span>Exp: Never</span>
            </div>

            {/* perforated edge */}
            <div style={{
              position: 'absolute', left: 20, right: 20, top: 100,
              borderTop: '1px dashed rgba(255,255,255,0.1)',
              pointerEvents: 'none',
              display: 'none',
            }}/>
          </div>

          {/* Floating "Add a fandom" badge */}
          <div style={{
            position: 'absolute', right: -20, bottom: -20,
            padding: '14px 20px', borderRadius: 999,
            background: 'var(--bg)', border: '1px solid var(--line)',
            fontSize: 13, fontWeight: 600, color: 'var(--ink)',
            boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ fontSize: 16 }}>＋</span>
            Add a fandom
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { FanCardsF, PassportStamp });