/* EREBOROS — components (React, JSX via Babel) */ const { useState, useEffect, useRef, useMemo } = React; /* ============================================================================ Utilities ============================================================================ */ function pick(val, lang) { if (val && typeof val === "object" && ("pt" in val || "en" in val)) { return val[lang] ?? val.pt ?? val.en ?? ""; } return val; } function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { el.classList.add("is-in"); io.unobserve(el); } }); }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" } ); io.observe(el); return () => io.disconnect(); }, []); return ref; } function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) { const ref = useReveal(); return ( {children} ); } /* ============================================================================ Icons (inline SVG — no libraries) ============================================================================ */ const Icon = { Play: (p) => ( ), Pause: (p) => ( ), Next: (p) => ( ), Prev: (p) => ( ), Arrow: (p) => ( ), Spotify: (p) => ( ), Apple: (p) => ( ), Bandcamp: (p) => ( ), YouTube: (p) => ( ), Cross: (p) => ( ), Menu: (p) => ( ), }; const StoreIcon = (p) => ( ); const InstagramIcon = (p) => ( ); function iconByName(name) { if (name === "spotify") return ; if (name === "apple") return ; if (name === "bandcamp") return ; if (name === "youtube") return ; if (name === "store") return ; if (name === "instagram") return ; return null; } /* ============================================================================ Ornamental primitives ============================================================================ */ function Ornament({ label }) { return (
{label ? {label} : null}
); } function SectionHead({ num, title, kicker }) { return (
{num}

{title}

{kicker ?
{kicker}
: null} ); } /* ============================================================================ NEWSLETTER — botão na nav + popover com o form embed do MailerLite ============================================================================ */ const ML_I18N = { pt: { email: "Seu e-mail", btn: "Inscrever-se", sucH: "Obrigado!", sucP: "Você entrou na nossa lista com sucesso." }, en: { email: "Your email", btn: "Subscribe", sucH: "Thank you!", sucP: "You have successfully joined our subscriber list." }, }; function Newsletter({ lang }) { const [open, setOpen] = useState(false); const ref = useRef(null); const embedRef = useRef(null); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("keydown", onKey); // adia o listener de "clique fora" para o clique de abertura não fechar de imediato const id = setTimeout(() => document.addEventListener("mousedown", onDown), 0); return () => { document.removeEventListener("keydown", onKey); clearTimeout(id); document.removeEventListener("mousedown", onDown); }; }, [open]); // O form do MailerLite tem textos fixos; localizamos placeholder/botão/sucesso // conforme o idioma. O MutationObserver pega a hidratação assíncrona e reaplica // na troca de idioma (guardado por igualdade para não entrar em loop). useEffect(() => { const el = embedRef.current; const t = ML_I18N[lang]; if (!el || !t) return; const setText = (node, text) => { if (node && node.textContent.trim() !== text) node.textContent = text; }; const apply = () => { const input = el.querySelector('input[type="email"]'); if (input && input.placeholder !== t.email) input.placeholder = t.email; setText(el.querySelector("button.primary"), t.btn); setText(el.querySelector(".ml-form-successBody h4"), t.sucH); setText(el.querySelector(".ml-form-successBody p"), t.sucP); }; apply(); const obs = new MutationObserver(apply); obs.observe(el, { childList: true, subtree: true }); return () => obs.disconnect(); }, [lang]); return (
{lang === "pt" ? "Entre na lista" : "Join the list"}
{/* O MailerLite Universal (carregado em app.jsx) hidrata este div. */}
); } /* ============================================================================ NAV ============================================================================ */ function Nav({ lang, setLang, i18n }) { return ( ); } /* ============================================================================ HERO ============================================================================ */ function Hero({ lang, data, i18n }) { const bgRef = useRef(null); useEffect(() => { const onScroll = () => { const y = window.scrollY; if (bgRef.current) { const s = 1.05 + Math.min(y, 800) * 0.00035; // negative factor — bg moves UP slower than page scrolls content bgRef.current.style.transform = `translate3d(0, ${-y * 0.35}px, 0) scale(${s})`; } }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return (
{data.band.formed} · {data.band.origin}

Ereboros — Death Metal · Rio de Janeiro

{pick(data.band.tagline, lang)}

{pick(i18n.heroScroll, lang)}
); } /* ============================================================================ ABOUT ============================================================================ */ function About({ lang, data, i18n }) { const s = i18n.sections.about; return (
{data.about[lang].map((para, i) => (

{para}

))}
{lang === "pt" ? "Formação" : "Lineup"}
    {data.members.map((m) => (
  • {m.name} {pick(m.role, lang)}
    • ))}
{lang === "pt" ? "Formação" : "Formed"}
{data.band.formed}
{lang === "pt" ? "Origem" : "Origin"}
{data.band.origin}
); } Object.assign(window, { pick, useReveal, Reveal, Icon, iconByName, Ornament, SectionHead, Newsletter, Nav, Hero, About });