// TierGrid.jsx — six sponsorship cards
function TierGrid({ selectedId, onSelect }) {
  const tiers = window.TIERS;
  return (
    <section className="section" data-anchor id="tiers" style={{ borderBottom: '1px solid var(--border)' }}>
      <div className="section-narrow">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>2026–2027 Season</div>
          <h2 className="chrome-text" style={{
            fontSize: 'clamp(48px, 7vw, 96px)', margin: 0,
          }}>Sponsorship Tiers</h2>
          <p style={{
            maxWidth: 580, margin: '20px auto 0',
            fontSize: 15, color: 'var(--fg-3)',
          }}>
            Six packages scaled from program-defining to community supporter, plus a flexible Open Shot option.
            Click any tier to begin.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 18,
        }}>
          {tiers.map(t => <TierCard key={t.id} tier={t} selected={selectedId === t.id} onSelect={onSelect} />)}
        </div>
      </div>
    </section>
  );
}

function TierCard({ tier, selected, onSelect }) {
  const { popular, name, price, tagline, benefits } = tier;
  const visibleBenefits = benefits.slice(0, 7);
  const moreCount = benefits.length - visibleBenefits.length;
  const priceLabel = tier.customAmount ? 'Custom' : `$${price.toLocaleString()}`;
  const suffixLabel = tier.customAmount ? 'amount' : '/ season';

  return (
    <div className="tier-card" style={{
      position: 'relative',
      background: 'linear-gradient(180deg, #181818 0%, #0a0a0a 100%)',
      border: selected
        ? '1px solid var(--viper-platinum)'
        : popular
          ? '1px solid var(--viper-silver)'
          : '1px solid var(--viper-steel)',
      borderRadius: 6,
      padding: '28px 22px 22px',
      display: 'flex', flexDirection: 'column',
      boxShadow: selected
        ? 'inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 2px rgba(217,217,217,0.25), 0 12px 32px rgba(0,0,0,0.7)'
        : 'inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.5)',
    }}>
      {popular && (
        <div style={{
          position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
          padding: '5px 14px',
          background: 'linear-gradient(180deg, #d8d8d8 0%, #9a9a9a 50%, #4a4a4a 100%)',
          color: '#0a0a0a',
          fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 10,
          textTransform: 'uppercase', letterSpacing: '0.22em',
          borderRadius: 999,
          boxShadow: 'var(--shadow-plate)',
          borderTop: '1px solid #f4f4f4',
          whiteSpace: 'nowrap',
        }}>Most Chosen</div>
      )}

      {selected && (
        <div style={{
          position: 'absolute', top: 14, right: 14,
          width: 22, height: 22, borderRadius: '50%',
          background: 'var(--chrome-gradient)',
          display: 'grid', placeItems: 'center',
          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.6)',
        }}>
          <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
            <path d="M3 8.5L6.5 12L13 4.5" stroke="#0a0a0a" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      )}

      <div style={{ marginBottom: 18, paddingBottom: 16, borderBottom: '1px solid var(--border)' }}>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 10,
          textTransform: 'uppercase', letterSpacing: '0.22em', color: 'var(--fg-3)',
          marginBottom: 8,
        }}>{tagline}</div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 32,
          textTransform: 'uppercase', letterSpacing: '0.02em', lineHeight: 1,
          color: 'var(--viper-white)',
          margin: 0,
        }}>{name}</h3>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 12 }}>
          <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: tier.customAmount ? 42 : 48, lineHeight: 1,
            background: 'var(--chrome-gradient)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            WebkitTextStroke: '0.5px #000',
          }}>{priceLabel}</span>
          <span style={{
            fontFamily: 'var(--font-heading)', fontWeight: 500, fontSize: 11,
            textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--fg-muted)',
          }}>{suffixLabel}</span>
        </div>
      </div>

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, flex: 1 }}>
        {visibleBenefits.map((b, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            padding: '7px 0',
            fontFamily: 'var(--font-body)', fontSize: 13,
            color: 'var(--fg-2)',
            lineHeight: 1.45,
          }}>
            <span style={{
              flexShrink: 0,
              width: 5, height: 5, borderRadius: '50%',
              background: 'var(--viper-platinum)',
              marginTop: 8,
              boxShadow: '0 0 4px rgba(255,255,255,0.4)',
            }}></span>
            {b}
          </li>
        ))}
        {moreCount > 0 && (
          <li style={{
            padding: '7px 0',
            fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 11,
            textTransform: 'uppercase', letterSpacing: '0.16em',
            color: 'var(--fg-3)',
            marginLeft: 15,
          }}>+ {moreCount} more</li>
        )}
      </ul>

      <button
        onClick={() => onSelect(tier)}
        className={selected ? 'viper-btn-chrome' : 'viper-btn-ghost'}
        style={{ width: '100%', marginTop: 22 }}
      >
        {selected ? '✓ Selected' : `Select ${name}`}
      </button>
    </div>
  );
}