// Sponsors wall + become-a-sponsor CTA
const SponsorsSection = () => (
  <section style={{ background: 'var(--paper)', padding: '96px 0' }} id="sponsors">
    <div className="container">
      <SectionHead
        kicker="Backed By"
        title="The names on the shirt."
        right={
          <p style={{ maxWidth: 360, margin: 0, color: 'var(--muted)', fontSize: 14, lineHeight: 1.55 }}>
            Every sponsor below keeps grassroots football alive on the Fylde. Local first, always.
          </p>
        }
      />

      {/* Principal partner — full width slab */}
      <div data-sponsor-principal style={{
        background: 'var(--ink)', color: '#fff', padding: '40px 48px',
        display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', gap: 32, alignItems: 'center',
        marginBottom: 24,
      }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', fontWeight: 700 }}>
            PRINCIPAL PARTNER · 2024–27
          </div>
          <div className="display" style={{ fontSize: 56, marginTop: 8, lineHeight: 0.95 }}>QUESTA</div>
          <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.16em', marginTop: 6 }}>
            CONSTRUCTION · LANCASHIRE
          </div>
        </div>
        <div style={{ borderLeft: '1px solid rgba(255,255,255,0.15)', borderRight: '1px solid rgba(255,255,255,0.15)', padding: '0 32px' }}>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.85)', margin: 0 }}>
            "Backing the Wrens is backing this town. We've been on the front of the shirt since 2024 and we'll be there as long as they'll have us."
          </p>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--red)', marginTop: 16, fontWeight: 700 }}>
            — DAVID QUESTA · MANAGING DIRECTOR
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <Btn variant="invert" size="md">Visit Questa</Btn>
        </div>
      </div>

      {/* Tier grid */}
      {[
        { label: 'PLATINUM PARTNERS', list: SPONSORS_TIER.platinum, cols: 2, h: 140 },
        { label: 'GOLD PARTNERS', list: SPONSORS_TIER.gold, cols: 5, h: 100 },
        { label: 'SILVER PARTNERS · MATCHBALL & PLAYER SPONSORS', list: SPONSORS_TIER.silver, cols: 6, h: 76 },
      ].map(tier => (
        <div key={tier.label} style={{ marginBottom: 24 }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: '0.22em', color: 'var(--muted)', fontWeight: 700,
            marginBottom: 10, paddingBottom: 8, borderBottom: '1px solid var(--line-soft)',
          }}>{tier.label}</div>
          <div data-sponsor-tier style={{ display: 'grid', gridTemplateColumns: `repeat(${tier.cols}, 1fr)`, gap: 1, background: 'var(--line-soft)' }}>
            {tier.list.map((s, i) => (
              <div key={i} style={{
                background: '#fff', height: tier.h, padding: '12px 16px',
                display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
                textAlign: 'center', gap: 4,
              }}>
                <div className="display" style={{ fontSize: tier.h > 100 ? 26 : tier.h > 90 ? 20 : 16, lineHeight: 1.05, color: 'var(--ink)' }}>
                  {s.name.toUpperCase()}
                </div>
                {s.note && <div className="mono" style={{ fontSize: 9, letterSpacing: '0.16em', color: 'var(--muted)' }}>{s.note}</div>}
              </div>
            ))}
          </div>
        </div>
      ))}

      {/* Become a sponsor CTA */}
      <div data-sponsor-cta style={{
        marginTop: 48, background: 'var(--red)', color: '#fff',
        display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 0, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ padding: '56px 48px' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.8)', fontWeight: 700 }}>
            ▸ BECOME A SPONSOR — 2026/27 SEASON
          </div>
          <h3 className="display" style={{ fontSize: 64, margin: '12px 0 0', lineHeight: 0.95 }}>
            Get your name<br />on the shirt.
          </h3>
          <p style={{ fontSize: 15, lineHeight: 1.6, marginTop: 18, maxWidth: 540, color: 'rgba(255,255,255,0.92)' }}>
            Player sponsorships from £150. Matchball sponsors £250. Pitchside boards £600/season.
            Whatever the budget, we'll find a way to put your business in front of our community.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
            <Btn variant="invert" size="lg">Sponsor Pack 2026/27</Btn>
            <Btn variant="outlineLight" size="lg" icon={false}>Email Steve</Btn>
          </div>
        </div>
        <div data-sponsor-cta-prices style={{
          background: 'var(--ink)', padding: '40px 36px',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1,
        }}>
          {[
            ['£150', 'PLAYER SPONSOR'],
            ['£250', 'MATCHBALL'],
            ['£600', 'PITCHSIDE BOARD'],
            ['£1,500', 'KIT SLEEVE'],
          ].map(([v, k]) => (
            <div key={k} style={{ padding: '20px 16px' }}>
              <div className="display" style={{ fontSize: 40, color: '#fff', lineHeight: 1 }}>{v}</div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.18em', color: 'var(--red)', marginTop: 4, fontWeight: 700 }}>{k}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { SponsorsSection });