// ACOLHE landing page components const { useState, useEffect, useRef } = React; const WHATS_URL = "https://wa.me/5511953985365?text=Ol%C3%A1%2C%20vim%20do%20site%20Acolhe%20Black%20e%20preciso%20de%20ajuda..."; const WHATS_URGENTE = "https://wa.me/5511953985365?text=Sofri%20racismo%20agora%20e%20preciso%20de%20ajuda%20urgente."; // ─── Reveal hook ─── function useReveal() { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.12 } ); io.observe(el); return () => io.disconnect(); }, []); return [ref, shown]; } function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {} }) { const [ref, shown] = useReveal(); return ( {children} ); } // ─── Icons (simple, geometric) ─── const Icon = { Shield: ({ size = 60, color = "currentColor", stroke = 2.2 }) => ( ), Scales: ({ size = 60, color = "currentColor", stroke = 2.2 }) => ( ), Justice: ({ size = 60, color = "currentColor", stroke = 2.2 }) => ( ), HeartMind: ({ size = 60, color = "currentColor", stroke = 2.2 }) => ( ), People: ({ size = 60, color = "currentColor", stroke = 2.2 }) => ( ), Whatsapp: ({ size = 24, color = "white" }) => ( ), Arrow: ({ size = 16, color = "currentColor" }) => ( ), Send: ({ size = 18, color = "white" }) => ( ), Close: ({ size = 18, color = "white" }) => ( ), Instagram: ({ size = 20, color = "currentColor" }) => ( ), Menu: ({ size = 22, color = "currentColor" }) => ( ), }; // ─── Logo ACOLHE ─── function AcolheLogo({ color = "white", size = 28 }) { return (

); } // ─── Dandara avatar — minimal stylized illustration in terracota tones ─── function DandaraAvatar({ size = 360, mini = false }) { return ( ); } // ─── Nav ─── function Nav() { const [scrolled, setScrolled] = useState(false); const [hidden, setHidden] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const lastY = useRef(0); useEffect(() => { const onScroll = () => { const y = window.scrollY; setScrolled(y > 40); if (y > lastY.current && y > 120) setHidden(true); else setHidden(false); lastY.current = y; }; const onMouseMove = (e) => { if (e.clientY < 60) setHidden(false); }; window.addEventListener("scroll", onScroll); window.addEventListener("mousemove", onMouseMove); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("mousemove", onMouseMove); }; }, []); const links = [ { label: "Acolhimento", href: "acolhimento.html" }, { label: "Jurídico", href: "juridico.html" }, { label: "Como funciona", href: "#Como funciona" }, { label: "Instituto", href: "instituto.html" }, ]; return ( <> {/* Mobile slide-down menu */}

{links.map(l => ( setMenuOpen(false)} style={{ fontFamily: "Inter, sans-serif", fontSize: 18, fontWeight: 600, color: "#0A0A0A", textDecoration: "none", padding: "14px 0", borderBottom: "1px solid rgba(10,10,10,0.07)", letterSpacing: "-0.01em", }}>{l.label} ))} setMenuOpen(false)} style={{ marginTop: 20, background: "#E84118", color: "white", padding: "16px 22px", borderRadius: 14, textAlign: "center", fontFamily: "Inter, sans-serif", fontSize: 16, fontWeight: 700, textDecoration: "none", letterSpacing: "0.01em", }}>Falar agora

); } // ─── Hero ─── function Hero() { const iframeRef = useRef(null); const playerRef = useRef(null); const sectionRef = useRef(null); const hasLeftRef = useRef(false); const soundInitedRef = useRef(false); const [showPlay, setShowPlay] = useState(false); const [showSoundPrompt, setShowSoundPrompt] = useState(false); useEffect(() => { let player, io; const initPlayer = () => { if (!iframeRef.current) return; player = new window.Vimeo.Player(iframeRef.current); playerRef.current = player; player.ready().then(() => { if (soundInitedRef.current) return; soundInitedRef.current = true; if (localStorage.getItem("dandara_sound") === "1") { player.setMuted(false).catch(() => {}); } else { setShowSoundPrompt(true); } }); const section = sectionRef.current; if (!section) return; io = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { if (!hasLeftRef.current) player.play().catch(() => {}); } else { player.getPaused().then(paused => { if (!paused) { player.pause(); hasLeftRef.current = true; setShowSoundPrompt(false); setShowPlay(true); } }); } }, { threshold: 0.2 } ); io.observe(section); }; if (window.Vimeo) { initPlayer(); } else { const script = document.createElement("script"); script.src = "https://player.vimeo.com/api/player.js"; script.onload = initPlayer; document.body.appendChild(script); } return () => { if (io) io.disconnect(); if (player) player.destroy().catch(() => {}); }; }, []); const handleManualPlay = () => { const player = playerRef.current; if (!player) return; player.play().catch(() => {}); setShowPlay(false); if (localStorage.getItem("dandara_sound") !== "1") setShowSoundPrompt(true); }; const activateSound = () => { const player = playerRef.current; if (!player) return; player.setMuted(false).catch(() => {}); player.setVolume(1).catch(() => {}); localStorage.setItem("dandara_sound", "1"); setShowSoundPrompt(false); }; return (

{/* texture noise */}

{/* abstract shapes */}

Atendimento ativo agora — sigiloso e gratuito

Você não está
sozinho.

Do trauma à justiça, caminhamos juntos. ACOLHE oferece apoio psicossocial e assistência jurídica especializada para vítimas de racismo no Brasil.

Você não estásozinho.

Você não está
sozinho.