// FanCardsC.jsx — "The Key" — one card unlocks gated Hub + exclusive listings
// Dramatic split: Fan Card on left = literal key → Unlocked surfaces on right

const LockedSurface = ({ title, unlocked, children, style = {} }) => (
  <div style={{
    background: '#1B1F35',
    borderRadius: 18,
    padding: 18,
    color: 'white',
    position: 'relative',
    overflow: 'hidden',
    boxShadow: '0 2px 3px rgba(0,0,0,0.1), 0 20px 40px -12px rgba(0,0,0,0.4)',
    ...style,
  }}>
    {!unlocked && (
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(15, 17, 30, 0.88)',
        backdropFilter: 'blur(8px)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 10, zIndex: 2,
      }}>
        <svg width="28" height="32" viewBox="0 0 28 32" fill="none">
          <rect x="2" y="14" width="24" height="16" rx="3" stroke="#ffb066" strokeWidth="2"/>
          <path d="M7 14V9a7 7 0 0114 0v5" stroke="#ffb066" strokeWidth="2"/>
        </svg>
        <div style={{ fontSize: 11, fontWeight: 600, color: '#ffb066', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          Fan Card Required
        </div>
      </div>
    )}
    <div style={{ opacity: unlocked ? 1 : 0.5 }}>
      {children}
    </div>
  </div>
);

const FanCardsC = () => {
  const [unlocked, setUnlocked] = React.useState(false);

  return (
    <section style={{ padding: '120px 0', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        {/* Header row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, marginBottom: 60, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 560 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Fan Cards</div>
            <h2 className="display" style={{ fontSize: 'clamp(42px, 5.5vw, 72px)', margin: 0, lineHeight: 1 }}>
              Your card is<br/>
              the <em style={{ color: 'var(--accent)' }}>key</em>.
            </h2>
          </div>
          <p style={{ fontSize: 17, color: 'var(--ink-3)', lineHeight: 1.55, maxWidth: 420, margin: 0 }}>
            Optional identity, real utility. Every Fan Card you hold unlocks that
            team's Hub and the fan-only listings inside. Collect as many as your
            fandoms run deep.
          </p>
        </div>

        {/* Main demo grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: '380px 1fr', gap: 40,
          alignItems: 'start',
        }}>
          {/* LEFT: the card (the key) */}
          <div>
            <div style={{
              background: 'var(--bg)',
              border: '1px solid var(--line)',
              borderRadius: 24, padding: 24,
              boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 8px 32px -8px rgba(0,0,0,0.08)',
            }}>
              <div style={{ fontSize: 12, color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textAlign: 'center', marginBottom: 12 }}>
                YOUR FAN CARD
              </div>

              {/* The card itself */}
              <div style={{
                borderRadius: 18, overflow: 'hidden',
                background: '#1B1F35', color: 'white',
                transform: unlocked ? 'rotate(0deg) scale(1)' : 'rotate(-2deg) scale(0.98)',
                transition: 'transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)',
                boxShadow: unlocked ? '0 2px 3px rgba(0,0,0,0.08), 0 24px 50px -12px rgba(107, 61, 232, 0.5)' : '0 2px 3px rgba(0,0,0,0.1), 0 16px 36px -12px rgba(0,0,0,0.3)',
              }}>
                <div style={{ background: '#000', padding: '20px 16px 18px', textAlign: 'center' }}>
                  <div style={{ fontSize: 16, marginBottom: 5 }}>🏴‍☠️</div>
                  <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '0.05em', lineHeight: 1 }}>RAIDERS</div>
                  <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.75)', letterSpacing: '0.18em', marginTop: 5, fontWeight: 500 }}>
                    FAN SINCE 2018
                  </div>
                  <div style={{
                    width: 56, height: 56, borderRadius: '50%',
                    background: '#A5ACAF', color: '#000',
                    border: '3px solid #1B1F35',
                    margin: '14px auto -36px',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 700, fontSize: 17,
                    position: 'relative', zIndex: 2,
                  }}>MC</div>
                </div>
                <div style={{ padding: '42px 16px 16px', textAlign: 'center' }}>
                  <div style={{ fontSize: 16, fontWeight: 700 }}>Maria Carbajal</div>
                  <div style={{ fontSize: 11, color: '#8a8fa8', marginTop: 2 }}>Henderson, NV</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 5, marginTop: 12 }}>
                    {['📍 My Section', '🍔 Stadium Foodie', '🔥 Die Hard'].map((b) => (
                      <span key={b} 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}</span>
                    ))}
                  </div>
                  <div style={{ marginTop: 14, paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: 9, fontFamily: 'var(--font-mono)', color: '#6a6f88', letterSpacing: '0.15em' }}>
                    FAN CARD • #0074
                  </div>
                </div>
              </div>

              <button
                onClick={() => setUnlocked(!unlocked)}
                style={{
                  width: '100%', marginTop: 20,
                  padding: '14px 18px',
                  background: unlocked ? '#22c55e' : 'var(--accent)',
                  color: 'white', border: 'none',
                  borderRadius: 999,
                  fontSize: 14, fontWeight: 600,
                  fontFamily: 'var(--font-sans)',
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  transition: 'background 0.2s',
                }}>
                {unlocked ? '✓ Unlocked' : 'Tap to unlock'}
                {!unlocked && <span style={{ fontSize: 14 }}>→</span>}
              </button>

              <div style={{ marginTop: 14, fontSize: 12, color: 'var(--ink-4)', textAlign: 'center', lineHeight: 1.5 }}>
                Optional identity. Free to collect.<br/>Stack as many as you've got teams.
              </div>
            </div>
          </div>

          {/* RIGHT: What the card unlocks */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Team Hub preview */}
            <LockedSurface unlocked={unlocked}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16,
                  }}>🏴‍☠️</div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>Raiders Hub</div>
                    <div style={{ fontSize: 11, color: '#8a8fa8' }}>12,847 fans inside</div>
                  </div>
                </div>
                <div style={{
                  fontSize: 10, padding: '4px 9px', borderRadius: 999,
                  background: 'rgba(34, 197, 94, 0.15)', color: '#22c55e',
                  fontWeight: 700, letterSpacing: '0.08em',
                }}>● LIVE</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { n: 'Marcus J.', t: 'Anyone watching the pre-game at Sporting House tonight?', r: 12 },
                  { n: 'Priya K.', t: 'Sec 138 row 12 is CRAZY loud lately, welcome to the family 🔥', r: 34 },
                  { n: 'Devon T.', t: 'Dropping 4 tickets to Chargers game — fan-only to Raiders hub', r: 8 },
                ].map(m => (
                  <div key={m.n} style={{
                    display: 'flex', gap: 10, alignItems: 'flex-start',
                    padding: '10px 12px',
                    background: 'rgba(255,255,255,0.04)', borderRadius: 10,
                  }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%', background: 'var(--accent)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 11, fontWeight: 700, flexShrink: 0,
                    }}>{m.n[0]}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 11, fontWeight: 600 }}>{m.n}</div>
                      <div style={{ fontSize: 12, color: '#c8ccd8', marginTop: 2 }}>{m.t}</div>
                    </div>
                    <div style={{ fontSize: 10, color: '#6a6f88' }}>♥ {m.r}</div>
                  </div>
                ))}
              </div>
            </LockedSurface>

            {/* Fan-only listing */}
            <LockedSurface unlocked={unlocked}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
                <div style={{ flex: 1 }}>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 5,
                    fontSize: 9, padding: '3px 9px', borderRadius: 999,
                    background: 'rgba(255, 176, 102, 0.15)', color: '#ffb066',
                    fontWeight: 700, letterSpacing: '0.08em',
                    marginBottom: 10,
                  }}>🔒 RAIDERS FANS ONLY</div>
                  <div style={{ fontSize: 15, fontWeight: 700 }}>Raiders vs. Chargers</div>
                  <div style={{ fontSize: 11, color: '#8a8fa8', marginTop: 3 }}>Sat, Nov 8 • Allegiant Stadium</div>
                  <div style={{ display: 'flex', gap: 14, marginTop: 10, fontSize: 11, color: '#c8ccd8' }}>
                    <div><span style={{ color: '#6a6f88' }}>Section</span> 138</div>
                    <div><span style={{ color: '#6a6f88' }}>Row</span> 12</div>
                    <div><span style={{ color: '#6a6f88' }}>Seats</span> 4</div>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 9, color: '#6a6f88' }}>per seat</div>
                  <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em' }}>$245</div>
                  <div style={{
                    marginTop: 6, display: 'inline-block',
                    fontSize: 10, padding: '5px 12px', borderRadius: 999,
                    background: 'var(--accent)', color: 'white',
                    fontWeight: 600,
                  }}>Make offer</div>
                </div>
              </div>
            </LockedSurface>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FanCardsC, LockedSurface });