// ============================================
// SPONSORS — publieke pagina met sponsors per tier
// Tiers: gold > silver > bronze > partner
// ============================================

function SponsorsPage({ navigate }) {
  const { Placeholder, Reveal, SectionHeader, Icon } = window.LM_UI;
  const { SPONSORS } = window.LM_DATA;
  const { t } = window.LM_CMS;

  const list = SPONSORS || [];

  // Groepeer per tier in de juiste volgorde
  const TIERS = [
    { id: 'gold',    label: t('sponsors.tier.gold',    'Hoofdsponsors'), accent: '#d4a017', sub: 'Onze grote partners die ons al jaren steunen.' },
    { id: 'silver',  label: t('sponsors.tier.silver',  'Sponsors'),      accent: '#9ca3af', sub: '' },
    { id: 'bronze',  label: t('sponsors.tier.bronze',  'Steungevers'),   accent: '#a16207', sub: '' },
    { id: 'partner', label: t('sponsors.tier.partner', 'Partners'),      accent: 'var(--teal-500)', sub: '' },
  ];

  const grouped = TIERS.map(tier => ({
    ...tier,
    items: list.filter(s => (s.tier || 'partner') === tier.id),
  })).filter(g => g.items.length > 0);

  return (
    <div>
      {/* ===== INTRO ===== */}
      <section className="section" style={{ paddingBottom: 32 }}>
        <div className="container">
          <SectionHeader
            eyebrow={t('sponsors.intro.eyebrow', 'Sponsors & partners')}
            title={<>{t('sponsors.intro.title1', 'Met')} <span className="grad-text">{t('sponsors.intro.title2', 'dank')}</span> {t('sponsors.intro.title3', 'aan onze sponsors.')}</>}
            subtitle={t('sponsors.intro.subtitle', 'Zonder de steun van deze bedrijven en partners is wat we doen niet mogelijk. Hartelijk dank!')}
          />
        </div>
      </section>

      {/* ===== TIERS ===== */}
      {grouped.length === 0 ? (
        <section style={{ paddingBottom: 96 }}>
          <div className="container" style={{ textAlign: 'center', color: 'var(--ink-500)' }}>
            Geen sponsors toegevoegd. Voeg ze toe via het controlepaneel → <strong>Sponsors</strong>.
          </div>
        </section>
      ) : (
        grouped.map((group, gi) => (
          <section key={group.id} style={{ paddingBottom: 64 }} className={gi % 2 === 1 ? 'section section-tinted' : 'section'}>
            <div className="container">
              <Reveal>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', marginBottom: 24 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{
                      display: 'inline-block',
                      width: 12, height: 12,
                      borderRadius: '50%',
                      background: group.accent,
                      boxShadow: `0 0 12px ${group.accent}`,
                    }} />
                    <h2 className="display" style={{ fontSize: 'clamp(24px, 3vw, 36px)', margin: 0, textTransform: 'none', letterSpacing: '-0.01em' }}>
                      {group.label}
                    </h2>
                  </div>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                    {group.items.length} {group.items.length === 1 ? 'sponsor' : 'sponsors'}
                  </span>
                </div>
                {group.sub && (
                  <p style={{ color: 'var(--ink-500)', maxWidth: 640, marginBottom: 32, marginTop: -8 }}>{group.sub}</p>
                )}
              </Reveal>

              <div className={`sponsors-grid sponsors-grid-${group.id}`} style={gridStyleFor(group.id)}>
                {group.items.map((s, i) => (
                  <Reveal key={s.id} delay={(i % 6) * 70}>
                    <SponsorCard sponsor={s} tierAccent={group.accent} size={cardSizeFor(group.id)} />
                  </Reveal>
                ))}
              </div>
            </div>
          </section>
        ))
      )}

      {/* ===== CTA: word zelf sponsor ===== */}
      <section className="section section-tinted">
        <div className="container" style={{ textAlign: 'center', maxWidth: 640 }}>
          <Reveal>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 40px)', margin: '0 0 16px', textTransform: 'none', letterSpacing: '-0.01em' }}>
              {t('sponsors.cta.title1', 'Zelf')} <span className="grad-text">{t('sponsors.cta.title2', 'sponsor')}</span> {t('sponsors.cta.title3', 'worden?')}
            </h2>
            <p style={{ color: 'var(--ink-500)', marginBottom: 28 }}>
              {t('sponsors.cta.body', 'Wil je ons steunen of een samenwerking opzetten? Neem contact op — we bekijken graag wat voor jou werkt.')}
            </p>
            <button className="btn btn-primary" onClick={() => navigate('contact')}>
              {t('sponsors.cta.button', 'Neem contact op')} <Icon.ArrowRight />
            </button>
          </Reveal>
        </div>
      </section>

      <style>{`
        .sponsors-grid-gold   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
        .sponsors-grid-silver { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
        .sponsors-grid-bronze { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
        .sponsors-grid-partner{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
      `}</style>
    </div>
  );
}

function gridStyleFor(tier) {
  return { display: 'grid', gap: 20 };
}
function cardSizeFor(tier) {
  return tier === 'gold' ? 'lg' : (tier === 'silver' ? 'md' : 'sm');
}

function SponsorCard({ sponsor, tierAccent, size = 'md' }) {
  const { Placeholder, Icon } = window.LM_UI;
  const [hovered, setHovered] = React.useState(false);
  const isLg = size === 'lg';

  const logoUrl = sponsor.logo ? sponsor.logo.replace(/^(?!\/|https?:\/\/|\/\/|data:)/, '/') : '';
  const Content = sponsor.website ? 'a' : 'div';
  const linkProps = sponsor.website ? { href: sponsor.website, target: '_blank', rel: 'noreferrer' } : {};

  return (
    <Content
      {...linkProps}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="card"
      style={{
        display: 'flex',
        flexDirection: 'column',
        padding: isLg ? 28 : (size === 'sm' ? 18 : 22),
        textDecoration: 'none',
        color: 'inherit',
        cursor: sponsor.website ? 'pointer' : 'default',
        height: '100%',
        transition: 'transform .2s, box-shadow .2s, border-color .2s',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hovered ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
        borderColor: hovered ? tierAccent : undefined,
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Subtiele tier-accent links */}
      <span style={{
        position: 'absolute',
        top: 0, left: 0, bottom: 0,
        width: 3,
        background: tierAccent,
        opacity: hovered ? 1 : 0.5,
        transition: 'opacity .2s',
      }} />

      <div style={{
        flex: '0 0 auto',
        height: isLg ? 130 : (size === 'sm' ? 80 : 100),
        marginBottom: 14,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--ink-50)',
        borderRadius: 10,
        padding: 12,
        overflow: 'hidden',
      }}>
        {logoUrl
          ? <img src={logoUrl} alt={sponsor.name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', filter: hovered ? 'none' : 'grayscale(0.2)', transition: 'filter .25s' }} />
          : <div className="mono" style={{ fontSize: 12, color: 'var(--ink-400)', letterSpacing: '0.08em', textAlign: 'center' }}>
              {sponsor.name?.toUpperCase() || 'LOGO'}
            </div>}
      </div>

      <h3 className="display" style={{
        fontSize: isLg ? 18 : 15,
        margin: '0 0 4px',
        textTransform: 'none',
        letterSpacing: '-0.005em',
        lineHeight: 1.2,
      }}>
        {sponsor.name}
      </h3>

      {sponsor.since && (
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-500)', marginBottom: 8 }}>
          Sinds {sponsor.since}
        </div>
      )}

      {sponsor.description && isLg && (
        <p style={{ fontSize: 13, color: 'var(--ink-500)', lineHeight: 1.5, margin: '6px 0 12px', flex: 1 }}>
          {sponsor.description}
        </p>
      )}

      {sponsor.website && (
        <div style={{
          marginTop: 'auto',
          paddingTop: 8,
          fontSize: 12,
          color: tierAccent,
          fontWeight: 600,
          display: 'flex',
          alignItems: 'center',
          gap: 4,
          transition: 'transform .2s',
          transform: hovered ? 'translateX(2px)' : 'translateX(0)',
        }}>
          Bezoek website <Icon.ArrowRight size={11} />
        </div>
      )}
    </Content>
  );
}

window.LM_PAGES = window.LM_PAGES || {};
window.LM_PAGES.Sponsors = SponsorsPage;