// app.jsx — RojoNorte landing page const { useState, useEffect, useMemo, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "heroVariant": "centered", "bgTone": "paper" }/*EDITMODE-END*/; // Map bgTone → data-theme attribute on const TONE_TO_THEME = { paper: "light", charcoal: "dark", black: "black", }; function useFadeIn() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in")), { rootMargin: "0px 0px -10% 0px", threshold: 0.05 } ); io.observe(el); return () => io.disconnect(); }, []); return ref; } function FadeUp({ children, delay = 0, as: Tag = "div", className = "", style = {}, ...rest }) { const ref = useFadeIn(); return ( {children} ); } function Nav({ t, lang, setLang, theme, setTheme }) { const [menuOpen, setMenuOpen] = useState(false); const cycleTheme = () => { const order = ["paper", "charcoal", "black"]; const next = order[(order.indexOf(theme) + 1) % order.length]; setTheme(next); }; const themeIcon = theme === "paper" ? "◐" : theme === "charcoal" ? "◑" : "●"; useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const closeMenu = () => setMenuOpen(false); const navLinks = [ { href: "#services", label: t.nav.services }, { href: "#why", label: t.nav.why }, { href: "#process", label: t.nav.process }, { href: "#team", label: t.nav.team }, { href: "#cases", label: t.nav.cases }, { href: "#contact", label: t.nav.contact }, ]; return ( ); } function HeroCentered({ t }) { return (
{t.hero.kicker} {t.hero.title_a} {t.hero.title_em} {t.hero.sub} {t.hero.cta_primary} → {t.hero.cta_secondary}
{t.hero.coords.map((c, i) => {c})}
); } function HeroAsymmetric({ t }) { return (
{t.hero.kicker} {t.hero.title_a} {t.hero.title_em} {t.hero.sub} {t.hero.cta_primary} → {t.hero.cta_secondary}
{t.hero.coords.map((c, i) => {c})}
); } function Services({ t }) { return (
{t.services.eyebrow}
{t.services.title_a} {t.services.title_em} {t.services.lede}
{t.services.items.map((svc, i) => (
/{String(i + 1).padStart(2, "0")}

{svc.name}

{svc.desc}

{svc.tags.map((tag, j) => {tag})}
→ ))}
); } function Why({ t }) { return (
{t.why.eyebrow}
{t.why.title_a} {t.why.title_em} {t.why.lede}
{t.why.stats.map((s, i) => (
{s.num}{s.num_em}
{s.lbl}
{s.desc}
))}
{t.why.map.title} {t.why.map.sub}
{t.why.map.legend_origin} {t.why.map.legend_dest}
); } function Process({ t }) { return (
{t.process.eyebrow}
{t.process.title_a} {t.process.title_em}
{t.process.steps.map((s, i) => (
/{String(i + 1).padStart(2, "0")}

{s.title}

{s.desc}

{s.foot}
))}
); } function Team({ t }) { return (
{t.team.eyebrow}
{t.team.title_a} {t.team.title_em} {t.team.lede}
{t.team.members.map((m, i) => (
portrait /{String(i + 1).padStart(2, "0")}

{m.name}

{m.role} · {m.years}

{m.bg}

 ))}
{t.team.hiring.kicker}

{t.team.hiring.title}

{t.team.hiring.cta} →
); } function Cases({ t }) { const placeholders = [ "Truck dispatcher console", "Treasury dashboard", "Plant floor SCADA", ]; return (
{t.cases.eyebrow}
{t.cases.title_a} {t.cases.title_em} {t.cases.lede}
{t.cases.items.map((c, i) => (
placeholder · {placeholders[i]}
{c.tag} {c.year}

{c.name}

{c.desc}

Outcome {c.outcome}
))}
); } function CTA({ t }) { return (
{t.cta.kicker} {t.cta.title_a} {t.cta.title_em} {t.cta.sub}
); } function Footer({ t }) { return ( ); } function App() { const [tweak, setTweak] = useTweaks(TWEAK_DEFAULTS); const [lang, setLang] = useState("en"); const theme = tweak.bgTone || "paper"; useEffect(() => { document.documentElement.setAttribute("data-theme", TONE_TO_THEME[theme] || "light"); }, [theme]); const t = window.RN_CONTENT[lang]; return (