/* global React */
// ============================================================
// Craque Cidadão — Home sections B: Partners, Support, Transparency teaser
// ============================================================
const { Icon: Icon2, Reveal: Reveal2, CourtLines: CourtLines2, WA_LINK: WA2 } = window;

function Partners({ onNav }) {
  const { SectionHeading, Button } = window.CraqueCidadODesignSystem_6fdc08;
  const partners = window.CC_PARTNERS;
  return (
    <section style={{ background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
        <Reveal2 style={{ textAlign: 'center' }}>
          <SectionHeading align="center" eyebrow="Parceiros"
            title="Quem joga junto transforma mais vidas."
            intro="Nossos parceiros ajudam a manter vivo o sonho de centenas de crianças e adolescentes." />
        </Reveal2>
        <div className="cc-partners-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, margin: '44px 0 40px' }}>
          {partners.map((p, i) => (
            <Reveal2 key={p.name} delay={i * 45}>
              <div title={p.name} style={{ background: p.dark ? 'var(--navy-900, #18315A)' : 'var(--surface-card)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', aspectRatio: '3 / 2', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 18, boxShadow: 'var(--shadow-xs)' }}>
                <img src={p.src} alt={p.name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }} />
              </div>
            </Reveal2>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Button variant="primary" size="lg" iconRight={<Icon2 name="arrow-right" size={18} />} onClick={() => onNav('parceiros')}>Quero ser parceiro</Button>
        </div>
      </div>
    </section>
  );
}

const SUPPORT_WAYS = [
  { icon: 'heart', title: 'Doação', text: 'Contribua com qualquer valor e ajude a manter treinos, uniformes e atividades.' },
  { icon: 'handshake', title: 'Parceria empresarial', text: 'Sua empresa apoiando o esporte e a educação na comunidade.' },
  { icon: 'hand-heart', title: 'Voluntariado', text: 'Doe seu tempo e talento. Toda ajuda conta dentro e fora da quadra.' },
  { icon: 'volleyball', title: 'Materiais esportivos', text: 'Bolas, redes, cones, uniformes e calçados para quem precisa.' },
  { icon: 'calendar-heart', title: 'Apoio em eventos', text: 'Ajude a realizar torneios, festivais e ações sociais.' },
];

function SupportCTA({ onNav }) {
  const { Button } = window.CraqueCidadODesignSystem_6fdc08;
  return (
    <section style={{ background: 'var(--surface-navy)', position: 'relative', overflow: 'hidden' }}>
      <CourtLines2 opacity={0.07} />
      <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
        <div style={{ maxWidth: 680, marginBottom: 44 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>
            <span style={{ width: 26, height: 2, background: 'currentColor' }} /> Seja um apoiador
          </span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(1.9rem, 3.4vw, 2.6rem)', lineHeight: 1.12, color: '#fff', margin: '14px 0 0' }}>
            Com a sua ajuda, mais jovens entram em quadra.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', lineHeight: 1.55, color: 'rgba(255,255,255,0.82)', margin: '14px 0 0' }}>
            Mais crianças permanecem na escola e descobrem novas possibilidades para o futuro. Escolha como você quer fazer parte.
          </p>
        </div>
        <div className="cc-support-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, marginBottom: 40 }}>
          {SUPPORT_WAYS.map((w, i) => (
            <Reveal2 key={w.title} delay={i * 70}>
              <div style={{ height: '100%', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)' }}>
                <span style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--gold-500)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                  <Icon2 name={w.icon} size={22} color="var(--navy-950)" />
                </span>
                <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, color: '#fff' }}>{w.title}</h3>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.74)' }}>{w.text}</p>
              </div>
            </Reveal2>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href={WA2} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
            <Button variant="accent" size="lg" iconLeft={<Icon2 name="heart" size={18} />}>Quero apoiar agora</Button>
          </a>
          <button onClick={() => onNav('contato')} className="cc-btn-frost"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '15px 26px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, color: '#fff', background: 'rgba(255,255,255,0.12)', border: '2px solid rgba(255,255,255,0.55)', backdropFilter: 'blur(4px)', transition: 'background var(--dur), border-color var(--dur), transform var(--dur)' }}>
            <Icon2 name="message-circle" size={18} /> Fale com a equipe
          </button>
        </div>
      </div>
    </section>
  );
}

function TransparencyTeaser({ onNav }) {
  const { SectionHeading, Button, Card } = window.CraqueCidadODesignSystem_6fdc08;
  return (
    <section style={{ background: 'var(--surface-card)' }}>
      <div className="cc-about-grid" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <Reveal2>
          <SectionHeading eyebrow="Transparência" title="Confiança é a base de toda parceria."
            intro="Acreditamos em prestação de contas clara e aberta. Documentos institucionais, relatórios e certificados disponíveis para consulta." />
          <Button variant="primary" style={{ marginTop: 24 }} iconRight={<Icon2 name="arrow-right" size={17} />} onClick={() => onNav('transparencia')}>Acessar documentos</Button>
        </Reveal2>
        <Reveal2 delay={120}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {['shield-check', 'scroll-text', 'bar-chart-3', 'award'].map((ic, i) => (
              <Card key={ic} tone={i % 2 ? 'sky' : 'paper'} padding="var(--space-5)" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: 10, background: 'var(--brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                  <Icon2 name={ic} size={20} color="var(--brand)" />
                </span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--brand-ink)' }}>
                  {['Estatuto', 'Relatórios', 'Contas', 'Certificados'][i]}
                </span>
              </Card>
            ))}
          </div>
        </Reveal2>
      </div>
    </section>
  );
}

Object.assign(window, { Partners, SupportCTA, TransparencyTeaser, SUPPORT_WAYS });