/* global React */
// ============================================================
// Craque Cidadão — pages B: Parceiros, Transparência, Galeria, Contato
// ============================================================
const { Icon: I4, Reveal: R4, WA_LINK: WA4, IG_LINK: IG4 } = window;

const PARTNER_BENEFITS = [
  { icon: 'megaphone', t: 'Marca associada a impacto', d: 'Sua empresa vinculada a uma causa social real e reconhecida na comunidade.' },
  { icon: 'bar-chart-3', t: 'Relatórios de impacto', d: 'Prestação de contas clara sobre como o apoio se transforma em resultados.' },
  { icon: 'users', t: 'Engajamento de equipe', d: 'Ações de voluntariado e integração com o time da sua empresa.' },
  { icon: 'heart-handshake', t: 'Transformação concreta', d: 'Mais jovens em quadra, na escola e com novas oportunidades de futuro.' },
];

function ParceirosPage({ onNav }) {
  const { SectionHeading, Card, Button } = window.CraqueCidadODesignSystem_6fdc08;
  const partners = window.CC_PARTNERS;
  return (
    <>
      <PageHero 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. Junte-se a esse time." />

      <section style={{ background: 'var(--surface-card)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
          <R4 style={{ marginBottom: 36 }}>
            <SectionHeading eyebrow="Nossos apoiadores" title="Empresas e instituições que jogam com a gente" />
          </R4>
          <div className="cc-partners-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {partners.map((p, i) => (
              <R4 key={p.name} delay={i * 40}>
                <div title={p.name} style={{ background: p.dark ? 'var(--navy-900, #18315A)' : 'var(--surface-page)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', aspectRatio: '3 / 2', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
                  <img src={p.src} alt={p.name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }} />
                </div>
              </R4>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--surface-page)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
          <R4 style={{ marginBottom: 40 }}>
            <SectionHeading eyebrow="Por que ser parceiro" title="O que sua empresa ganha apoiando o esporte" />
          </R4>
          <div className="cc-proj-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {PARTNER_BENEFITS.map((b, i) => (
              <R4 key={b.t} delay={i * 70}>
                <Card padding="var(--space-6)" style={{ height: '100%' }}>
                  <span style={{ width: 50, height: 50, borderRadius: 12, background: 'var(--gold-300)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                    <I4 name={b.icon} size={24} color="var(--navy-950)" />
                  </span>
                  <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, color: 'var(--brand-ink)' }}>{b.t}</h3>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)' }}>{b.d}</p>
                </Card>
              </R4>
            ))}
          </div>
        </div>
      </section>

      <ContactBand title="Quero ser parceiro" subtitle="Fale com a nossa equipe e descubra como apoiar." onNav={onNav} />
    </>
  );
}

function Transparencia({ onNav }) {
  const { SectionHeading, Card, Badge, Button } = window.CraqueCidadODesignSystem_6fdc08;
  const docs = window.CC_DOCS;
  return (
    <>
      <PageHero eyebrow="Transparência" title="Confiança é a base de toda parceria."
        intro="Acreditamos em prestação de contas clara e aberta. Aqui você encontra nossos documentos institucionais — disponibilizados conforme são publicados." />

      {/* identity block */}
      <section style={{ background: 'var(--surface-card)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
          <R4>
            <Card tone="sky" padding="var(--space-7)" style={{ display: 'flex', flexWrap: 'wrap', gap: 32, justifyContent: 'space-between', alignItems: 'center' }}>
              {[
                { l: 'Razão Social', v: 'ONG Craque Cidadão' },
                { l: 'CNPJ', v: '11.808.208/0001-58' },
                { l: 'Fundação', v: '2009' },
                { l: 'Sede', v: 'Duque de Caxias / RJ' },
              ].map((it) => (
                <div key={it.l}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 6 }}>{it.l}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, color: 'var(--brand-ink)' }}>{it.v}</div>
                </div>
              ))}
            </Card>
          </R4>

          <R4 style={{ margin: '52px 0 32px' }}>
            <SectionHeading eyebrow="Documentos" title="Acesse nossos documentos institucionais" />
          </R4>
          <div className="cc-proj-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {docs.map((d, i) => (
              <R4 key={d.title} delay={i * 60}>
                <Card padding="var(--space-6)" style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <I4 name={d.icon} size={23} color="var(--brand)" />
                    </span>
                    <Badge tone={d.available ? 'success' : 'neutral'}>{d.available ? 'Disponível' : 'Em breve'}</Badge>
                  </div>
                  <div style={{ flex: 1 }}>
                    <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--brand-ink)' }}>{d.title}</h3>
                    <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-body)' }}>{d.desc}</p>
                  </div>
                  <Button variant={d.available ? 'secondary' : 'ghost'} size="sm" disabled={!d.available}
                    as={d.available ? 'a' : 'button'}
                    href={d.available ? d.href : undefined} target={d.available ? '_blank' : undefined} rel={d.available ? 'noopener' : undefined}
                    iconLeft={<I4 name={d.available ? 'download' : 'clock'} size={15} />}
                    style={!d.available ? { color: 'var(--text-muted)', cursor: 'not-allowed' } : undefined}>
                    {d.available ? 'Baixar PDF' : 'Aguardando publicação'}
                  </Button>
                </Card>
              </R4>
            ))}
          </div>
          <R4 delay={120}>
            <p style={{ marginTop: 28, fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.6 }}>
              Precisa de um documento específico que ainda não está aqui? <a href={WA4} target="_blank" rel="noopener" style={{ color: 'var(--brand)', fontWeight: 600 }}>Fale conosco pelo WhatsApp</a> e teremos prazer em fornecer.
            </p>
          </R4>
        </div>
      </section>
    </>
  );
}

const GALLERY_FILTERS = ['Todos', 'Futsal', 'Vôlei', 'Eventos', 'Comunidade'];

function Galeria() {
  const { SectionHeading, Button } = window.CraqueCidadODesignSystem_6fdc08;
  const items = window.CC_GALLERY;
  const [filter, setFilter] = React.useState('Todos');
  const shown = filter === 'Todos' ? items : items.filter((g) => g.tag === filter);
  return (
    <>
      <PageHero eyebrow="Galeria" title="Momentos que valem por mil palavras"
        intro="Treinos, conquistas, eventos e a alegria da nossa comunidade. Acompanhe o dia a dia também pelo Instagram." />
      <section style={{ background: 'var(--surface-card)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 32 }}>
            {GALLERY_FILTERS.map((f) => (
              <button key={f} onClick={() => setFilter(f)} style={{
                padding: '9px 18px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
                border: `1.5px solid ${filter === f ? 'var(--brand)' : 'var(--border)'}`,
                background: filter === f ? 'var(--brand)' : 'transparent',
                color: filter === f ? '#fff' : 'var(--text-body)',
                transition: 'all var(--dur)',
              }}>{f}</button>
            ))}
          </div>
          <div className="cc-gallery-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {shown.map((g) => (
              <R4 key={g.n}>
                <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
                  <image-slot id={`gal-${g.n}`} shape="rect" src={g.src} placeholder={g.title}
                    style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '1 / 1' }}></image-slot>
                  <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '24px 14px 12px', background: 'linear-gradient(to top, rgba(17,36,64,0.82), transparent)', pointerEvents: 'none' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>{g.tag}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15, color: '#fff' }}>{g.title}</div>
                  </div>
                </div>
              </R4>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 44 }}>
            <a href={IG4} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
              <Button variant="primary" size="lg" iconLeft={<I4 name="instagram" size={18} />}>Ver tudo no Instagram</Button>
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

function ContactBand({ title, subtitle, onNav }) {
  const { Button } = window.CraqueCidadODesignSystem_6fdc08;
  return (
    <section style={{ background: 'var(--surface-navy)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '56px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div>
          <h2 style={{ color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, margin: 0 }}>{title}</h2>
          <p style={{ color: 'rgba(255,255,255,0.78)', margin: '8px 0 0', fontSize: 17 }}>{subtitle}</p>
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <window.WAButton size="lg">WhatsApp</window.WAButton>
          {onNav && <Button variant="accent" size="lg" onClick={() => onNav('contato')}>Formulário</Button>}
        </div>
      </div>
    </section>
  );
}

function Contato() {
  const { SectionHeading, Card, Input, Button } = window.CraqueCidadODesignSystem_6fdc08;
  const [sent, setSent] = React.useState(false);
  const info = [
    { icon: 'message-circle', l: 'WhatsApp', v: '21 96637-7153', href: WA4, color: '#25D366' },
    { icon: 'mail', l: 'E-mail', v: 'ongcraquecidadao@gmail.com', href: 'mailto:ongcraquecidadao@gmail.com', color: 'var(--brand)' },
    { icon: 'instagram', l: 'Instagram', v: '@ongcraquecidadao', href: IG4, color: 'var(--brand)' },
    { icon: 'map-pin', l: 'Endereço', v: 'Rua Doutor Furquim Mendes, 621 — Centenário, Duque de Caxias/RJ', href: null, color: 'var(--gold-600)' },
  ];
  return (
    <>
      <PageHero eyebrow="Contato" title="Fale com a Craque Cidadão"
        intro="Quer apoiar, ser parceiro, inscrever uma criança ou tirar dúvidas? Estamos por aqui." />
      <section style={{ background: 'var(--surface-card)' }}>
        <div className="cc-contact-grid" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px', display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 48, alignItems: 'start' }}>
          <R4>
            <SectionHeading eyebrow="Canais" title="Como nos encontrar" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 26 }}>
              {info.map((it) => {
                const inner = (
                  <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                      <I4 name={it.icon} size={21} color={it.color} />
                    </span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{it.l}</div>
                      <div style={{ fontSize: 15.5, color: 'var(--text-strong)', fontWeight: 600, lineHeight: 1.45, marginTop: 2 }}>{it.v}</div>
                    </div>
                  </div>
                );
                return it.href
                  ? <a key={it.l} href={it.href} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>{inner}</a>
                  : <div key={it.l}>{inner}</div>;
              })}
            </div>
            <div style={{ marginTop: 24, borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border)' }}>
              <iframe title="Mapa — sede Craque Cidadão" loading="lazy" style={{ width: '100%', height: 220, border: 0, display: 'block' }}
                src="https://www.google.com/maps?q=Rua+Doutor+Furquim+Mendes+621+Centen%C3%A1rio+Duque+de+Caxias+RJ&output=embed"></iframe>
            </div>
          </R4>

          <R4 delay={120}>
            <Card padding="var(--space-7)" style={{ boxShadow: 'var(--shadow-md)' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '36px 12px' }}>
                  <span style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--green-50)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                    <I4 name="check" size={32} color="var(--success)" />
                  </span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--brand-ink)', margin: '0 0 8px' }}>Mensagem enviada!</h3>
                  <p style={{ color: 'var(--text-body)', margin: 0 }}>Obrigado pelo contato. Responderemos em breve.</p>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--brand-ink)', margin: '0 0 4px' }}>Envie uma mensagem</h3>
                  <p style={{ color: 'var(--text-muted)', margin: '0 0 22px', fontSize: 14.5 }}>Preencha o formulário e retornaremos o contato.</p>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                    <Input label="Nome" placeholder="Seu nome" required />
                    <Input label="Telefone" placeholder="(21) 9...." />
                  </div>
                  <div style={{ marginBottom: 14 }}><Input label="E-mail" type="email" placeholder="voce@email.com" required /></div>
                  <div style={{ marginBottom: 14 }}><Input label="Assunto" placeholder="Doação, parceria, voluntariado..." /></div>
                  <div style={{ marginBottom: 22 }}><Input label="Mensagem" textarea placeholder="Como podemos ajudar?" required /></div>
                  <Button full variant="primary" size="lg" type="submit" iconRight={<I4 name="send" size={17} />}>Enviar mensagem</Button>
                </form>
              )}
            </Card>
          </R4>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ParceirosPage, Transparencia, Galeria, Contato, ContactBand });