/* global React */ // ============================================================ // Craque Cidadão — Home sections A: Hero, Impact, About, Projects, Instagram // ============================================================ const { Icon, Reveal, CountUp, CourtLines, CC_LOGO, WA_LINK, IG_LINK } = window; // Decorative CSS "ball" — subtle 3D futsal sphere. function Ball({ size = 120, style = {} }) { return (
); } function FloatChip({ icon, label, value, style }) { return (
{value} {label}
); } const HERO_PHOTOS = [ { src: 'uploads/Futsal01.jpeg', alt: 'Jovens na quadra' }, { src: 'uploads/20240328_145216.jpg', alt: 'Oficina de culinária com a comunidade' }, { src: 'uploads/IMG-20240406-WA0080.jpg', alt: 'Turma em formação na sala de aula' }, { src: 'uploads/IMG-20240330-WA0163.jpg', alt: 'Entrega de certificado a participante' }, ]; function HeroSlideshow() { const [i, setI] = React.useState(0); const motionOff = window.CC_MOTION === 'off'; React.useEffect(() => { if (motionOff) return; const id = setInterval(() => setI((p) => (p + 1) % HERO_PHOTOS.length), 4200); return () => clearInterval(id); }, [motionOff]); return (
{HERO_PHOTOS.map((p, idx) => ( {p.alt} ))}
{HERO_PHOTOS.map((p, idx) => (
); } function Hero({ onNav, heroStyle = 'photo' }) { const { Button } = window.CraqueCidadODesignSystem_6fdc08; return (
Desde 2009 · Duque de Caxias/RJ

Formando craques
dentro e fora
da quadra.

A ONG Craque Cidadão usa o esporte como ferramenta de inclusão, educação e cidadania para crianças e adolescentes em situação de vulnerabilidade social.

Fale pelo WhatsApp
{heroStyle === 'card' ? (
Craque Cidadão
) : (
)}
); } function ImpactBand({ compact = false }) { const stats = window.CC_STATS; return (

Nossa ONG em fatos e números

{stats.map((s, i) => (
{s.label}
 ))}
); } function AboutBlock({ onNav }) { const { SectionHeading, Card, Button } = window.CraqueCidadODesignSystem_6fdc08; return (

Atendemos de forma individualizada cada jovem e sua família — a base sobre a qual se constrói qualquer futuro. O esporte é o caminho; a cidadania, o destino.

“O esporte carrega a magia de construir famílias e multiplicar alegria.”

); } function ProjectsPreview({ onNav }) { const { SectionHeading, Button } = window.CraqueCidadODesignSystem_6fdc08; const items = window.CC_PROJECTS; const toneBg = { brand: 'var(--brand)', navy: 'var(--navy-900)', accent: 'var(--accent)' }; return (
{items.map((p, i) => ( ))}
); } function ProjectTile({ p, bg, onNav }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => onNav && onNav('projetos')} style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', overflow: 'hidden', cursor: 'pointer', boxShadow: hover ? 'var(--shadow-lg)' : 'var(--shadow-sm)', transform: hover ? 'translateY(-4px)' : 'none', transition: 'transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)', }}>

{p.title}

{p.text}

Saiba mais →
); } // InstagramFeed — preview com cards simulados. // >> INTEGRAÇÃO FUTURA: substitua CC_IG_POSTS por dados da Instagram Graph API. // Endpoint: GET /{ig-user-id}/media?fields=caption,media_url,permalink,timestamp // Use autenticação oficial da Meta (NÃO usar scraping). Em caso de falha, // o componente mantém o fallback com os cards manuais abaixo. function InstagramFeed() { const { SectionHeading, Button } = window.CraqueCidadODesignSystem_6fdc08; const posts = window.CC_IG_POSTS; return (
{posts.map((post, i) => ( ))}
); } function IgCard({ post, idx }) { const { Badge } = window.CraqueCidadODesignSystem_6fdc08; const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none', background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', overflow: 'hidden', boxShadow: hover ? 'var(--shadow-lg)' : 'var(--shadow-sm)', transform: hover ? 'translateY(-4px)' : 'none', transition: 'transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)', }}>
{post.tag}

{post.caption}

{post.date} Ver no Instagram
); } function TestimonialVideo() { const { SectionHeading } = window.CraqueCidadODesignSystem_6fdc08; const videoRef = React.useRef(null); const [playing, setPlaying] = React.useState(false); // Persist playback position React.useEffect(() => { const v = videoRef.current; if (!v) return; const saved = parseFloat(localStorage.getItem('cc_testimonial_time') || '0'); if (saved > 0) v.currentTime = saved; const save = () => localStorage.setItem('cc_testimonial_time', v.currentTime); v.addEventListener('timeupdate', save); return () => v.removeEventListener('timeupdate', save); }, []); const handleToggle = () => { const v = videoRef.current; if (!v) return; if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); } }; return (
Depoimento
); } Object.assign(window, { Hero, ImpactBand, AboutBlock, ProjectsPreview, ProjectTile, InstagramFeed, TestimonialVideo, Ball });