// Sponsors wall: principal + tiers, then player sponsors, then become-a-sponsor CTA.
const SponsorsSection = () => {
  const allSquads = [
    ...(typeof MENS_SQUAD !== 'undefined' ? MENS_SQUAD : []),
    ...(typeof WOMENS_SQUAD !== 'undefined' ? WOMENS_SQUAD : []),
  ];
  const playerSponsors = allSquads.filter(
    p => p && p.sponsor && p.sponsor !== 'Academy Graduate'
  );

  return (
    <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 */}
        <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>
        ))}

        {/* Player Sponsors — placeholder data drawn from squads. Replace with real list. */}
        <div style={{ marginTop: 56 }}>
          <SectionHead
            kicker="Player Sponsors"
            title="Backing the badge, one shirt at a time."
            right={
              <p style={{ maxWidth: 380, margin: 0, color: 'var(--muted)', fontSize: 14, lineHeight: 1.55 }}>
                Each player sponsorship covers the cost of their kit, match fees and travel for the season. Cheers to everyone below - and yours could be next.
              </p>
            }
          />
          <div data-player-sponsors style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
          }}>
            {playerSponsors.map((p, i) => (
              <div key={i} style={{
                background: '#fff', border: '1px solid var(--line-soft)',
                padding: '18px 20px', display: 'grid',
                gridTemplateColumns: '36px 1fr', gap: 14, alignItems: 'center',
              }}>
                <div style={{
                  width: 36, height: 36, background: 'var(--ink)', color: '#fff',
                  fontFamily: 'Bebas Neue', fontSize: 18,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{p.no}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{
                    fontWeight: 700, fontSize: 14, color: 'var(--ink)', lineHeight: 1.2,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{p.name}</div>
                  <div className="mono" style={{
                    fontSize: 9.5, letterSpacing: '0.18em', color: 'var(--red)',
                    fontWeight: 700, marginTop: 2,
                  }}>{p.pos} · SPONSORED BY</div>
                  <div style={{
                    fontSize: 13, color: 'var(--ink-2)', marginTop: 4, fontWeight: 500,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{p.sponsor}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="mono" style={{
            marginTop: 16, fontSize: 10, letterSpacing: '0.18em', color: 'var(--muted)',
          }}>PLACEHOLDER NAMES · REAL LIST COMING SOON</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 will 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 });