// Marketplace.jsx — value prop highlighting ticket types: Single, Multi, Season, Premium

const TICKET_TYPES = [
  {
    emoji: '🎟️',
    accent: '#6B3DE8',
    label: 'Single',
    tag: 'One game, one seat',
    copy: 'Grab one game at a time.',
    example: 'Raiders vs Chiefs · Oct 5',
    meta: '47 listed',
  },
  {
    emoji: '📦',
    accent: '#10B981',
    label: 'Multi-Game',
    tag: 'Pick your slate',
    copy: 'Bundle a stretch of home games. Split with friends.',
    example: '6-pack · Nov – Jan',
    meta: '12 bundles',
  },
  {
    emoji: '🏆',
    accent: '#F59E0B',
    label: 'Season',
    tag: 'Your seat, every game',
    copy: 'Full-season passes from STHs. Same seat, every week.',
    example: 'Sec 138 · Row 14 · STH',
    meta: '8 listed',
  },
  {
    emoji: '👑',
    accent: '#B9975B',
    label: 'Premium',
    tag: 'Private suites',
    copy: 'Suites from season members and verified sellers.',
    example: "Owner's Club · 4 seats",
    meta: '5 listed',
  },
];

const MarketplaceTypes = () => {
  const [active, setActive] = React.useState(0);

  return (
    <section id="marketplace-types" style={{
      padding: '40px 0 120px',
      background: 'var(--bg)',
      scrollMarginTop: 80,
      position: 'relative',
    }}>
      <div className="container">
        {/* Header */}
        <div className="sc-split-header" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 80, marginBottom: 72, alignItems: 'end',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Four ways to buy</div>
            <h2 className="display" style={{
              fontSize: 'clamp(44px, 5.5vw, 76px)',
              margin: 0, lineHeight: 0.98, letterSpacing: '-0.035em',
            }}>
              Single seat or<br/>
              <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>the whole season</em>.
            </h2>
          </div>
          <div>
            <p style={{
              fontSize: 18, color: 'var(--ink-3)',
              lineHeight: 1.55, margin: 0, maxWidth: 480,
            }}>
              Single, multi-game, full season, or premium suites — all from real fans,
              all with zero buyer fees.
            </p>
          </div>
        </div>

        {/* 4-up grid */}
        <div className="sc-card-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {TICKET_TYPES.map((t, i) => {
            const isActive = i === active;
            return (
              <div key={t.label}
                onMouseEnter={() => setActive(i)}
                style={{
                  background: isActive ? '#fff' : 'var(--card)',
                  border: `1px solid ${isActive ? t.accent : 'var(--line)'}`,
                  borderRadius: 24,
                  padding: 28,
                  cursor: 'pointer',
                  transition: 'all 0.3s cubic-bezier(.2,.8,.2,1)',
                  transform: isActive ? 'translateY(-6px)' : 'translateY(0)',
                  boxShadow: isActive
                    ? `0 20px 40px -16px ${t.accent}30, 0 0 0 3px ${t.accent}12`
                    : '0 1px 2px rgba(10,8,30,0.04)',
                  display: 'flex', flexDirection: 'column',
                  minHeight: 340,
                  position: 'relative', overflow: 'hidden',
                }}>
                {/* accent swatch */}
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 4,
                  background: t.accent,
                  opacity: isActive ? 1 : 0.5,
                }}/>

                {/* emoji + pill */}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 14,
                    background: `${t.accent}18`,
                    border: `1px solid ${t.accent}40`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 22,
                  }}>{t.emoji}</div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    color: 'var(--ink-4)', letterSpacing: '0.12em',
                    fontWeight: 600,
                  }}>0{i+1}</div>
                </div>

                {/* label */}
                <div style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                  color: t.accent, textTransform: 'uppercase', marginBottom: 8,
                }}>{t.tag}</div>
                <h3 className="display" style={{
                  fontSize: 30, margin: 0, letterSpacing: '-0.02em',
                  lineHeight: 1.02, marginBottom: 12,
                }}>{t.label}</h3>
                <p style={{
                  fontSize: 13.5, lineHeight: 1.5,
                  color: 'var(--ink-3)', margin: 0,
                  marginBottom: 20,
                }}>{t.copy}</p>

                <div style={{ flex: 1 }}/>

                {/* mini listing preview */}
                <div style={{
                  padding: '11px 13px',
                  borderRadius: 12,
                  background: isActive ? 'var(--bg-2)' : 'transparent',
                  border: '1px solid var(--line)',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 8,
                }}>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{
                      fontSize: 9, fontFamily: 'var(--font-mono)',
                      color: 'var(--ink-4)', letterSpacing: '0.1em',
                      textTransform: 'uppercase', fontWeight: 600,
                      marginBottom: 3,
                    }}>Example</div>
                    <div style={{
                      fontSize: 12, fontWeight: 600, color: 'var(--ink)',
                      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>{t.example}</div>
                  </div>
                  <div style={{
                    fontSize: 10, fontWeight: 700, color: t.accent,
                    padding: '4px 8px', borderRadius: 999,
                    background: `${t.accent}15`,
                    whiteSpace: 'nowrap', flexShrink: 0,
                  }}>{t.meta}</div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Footer strip */}
        <div style={{
          marginTop: 36,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24,
          fontSize: 13, color: 'var(--ink-3)', flexWrap: 'wrap',
        }}>
          {[
            '$0 buyer fees on every listing',
            'Chat directly with the seller',
            'Verified fans only',
          ].map(t => (
            <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{
                width: 16, height: 16, borderRadius: '50%',
                background: 'var(--accent)', color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 9, fontWeight: 800, flexShrink: 0,
              }}>✓</span>
              <span style={{ fontWeight: 500 }}>{t}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { MarketplaceTypes });