/* jiejun.org — app ("Warm Signal") */ const { useState, useEffect, useRef, useCallback } = React; /* ---- Accent palettes for Tweaks (all warm-dark friendly) ---- */ const ACCENTS = { lime: { accent: "#dcff43", soft: "#b9d92f", on: "#16140d" }, amber: { accent: "#f5b53d", soft: "#d99828", on: "#1a1409" }, coral: { accent: "#ff7a52", soft: "#e85f37", on: "#1f1109" }, sky: { accent: "#7cc4ff", soft: "#52a5e8", on: "#0b1420" } }; function applyAccent(key) { const a = ACCENTS[key] || ACCENTS.lime; const r = document.documentElement.style; r.setProperty("--accent", a.accent); r.setProperty("--accent-soft", a.soft); r.setProperty("--on-accent", a.on); } /* ---- Background themes ---- */ const THEMES = { espresso: { bg: "#16140d", bg2: "#1d1a12", s: "#221e15", s2: "#2a261b" }, ink: { bg: "#121212", bg2: "#1a1a1a", s: "#202020", s2: "#272727" }, forest: { bg: "#101512", bg2: "#161d19", s: "#1b231e", s2: "#212b25" } }; function applyTheme(key) { const th = THEMES[key] || THEMES.espresso; const r = document.documentElement.style; r.setProperty("--bg", th.bg); r.setProperty("--bg-2", th.bg2); r.setProperty("--surface", th.s); r.setProperty("--surface-2", th.s2); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "lime", "theme": "espresso", "ctaLabel": "Book a call", "bookingUrl": "", "offerPrice": "" } /*EDITMODE-END*/; /* ---- Scroll reveal hook ---- */ function useReveal(deps) { useEffect(() => { const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const canAnimate = document.visibilityState === "visible" && !reduced && "IntersectionObserver" in window; if (!canAnimate) { document.querySelectorAll(".hl").forEach((e) => e.classList.add("lit")); return; } document.documentElement.classList.add("anim"); const io = new IntersectionObserver( (entries) => { entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); en.target.querySelectorAll && en.target.querySelectorAll(".hl").forEach((h) => h.classList.add("lit")); io.unobserve(en.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" } ); document.querySelectorAll(".reveal:not(.in)").forEach((e) => io.observe(e)); const fallback = setTimeout(() => { document.querySelectorAll(".reveal:not(.in)").forEach((e) => { if (e.getBoundingClientRect().top < window.innerHeight * 1.15) e.classList.add("in"); }); document.querySelectorAll(".hl:not(.lit)").forEach((e) => e.classList.add("lit")); }, 1800); return () => {io.disconnect();clearTimeout(fallback);}; }, deps || []); } /* ---- Count-up hook for metrics ---- */ function useCountUp(target, run) { const [val, setVal] = useState(0); const ref = useRef(null); useEffect(() => { if (!run) {setVal(target);return;} const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) {setVal(target);return;} let started = false; const el = ref.current; if (!el || !("IntersectionObserver" in window)) {setVal(target);return;} const io = new IntersectionObserver((ents) => { ents.forEach((en) => { if (en.isIntersecting && !started) { started = true; const dur = 1400,t0 = performance.now(); const tick = (t) => { const p = Math.min(1, (t - t0) / dur); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(target * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); io.unobserve(en.target); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [target, run]); return [val, ref]; } /* ---- Magnetic button wrapper ---- */ function useMagnetic() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const x = e.clientX - (r.left + r.width / 2); const y = e.clientY - (r.top + r.height / 2); el.style.transform = `translate(${x * 0.18}px, ${y * 0.22}px)`; }; const onLeave = () => {el.style.transform = "";}; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); return () => {el.removeEventListener("mousemove", onMove);el.removeEventListener("mouseleave", onLeave);}; }, []); return ref; } /* ---- Icons ---- */ const Arrow = () => ; const Check = () => ; /* ---- Logo mark: clean double-J monogram on a bordered tile ---- */ const LogoMark = ({ anchor }) => ; /* ===================== HEADER ===================== */ function Header({ t, lang, setLang, ctaLabel, bookProps }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const links = [ ["help", t.nav.help], ["who", t.nav.who], ["why", t.nav.why], ["faq", t.nav.faq]]; return (
Jie Jun {t.role}
); } /* ===================== HERO ===================== */ function Hero({ t, ctaLabel, bookProps }) { const magRef = useMagnetic(); return (
); } /* ===================== MARQUEE ===================== */ function Marquee({ items }) { const loop = items.concat(items); return ( ); } /* ===================== SECTION HEAD ===================== */ function Head({ eyebrow, title, sub }) { return (

{eyebrow}

{title}

{sub &&

{sub}

}
); } /* ===================== WHO ===================== */ function Who({ t }) { return (
{t.who.items.map((it, i) =>
{it.k}

{it.t}

{t.who.forLabel}

{it.d}

)}
); } /* ===================== CORE OFFERING ===================== */ const FlowViz = ({ i }) => { if (i === 0) return ( ); if (i === 1) return ( ); return ( ); }; function Help({ t, ctaLabel, bookProps, price }) { const h = t.help; return (

{h.eyebrow}

{h.service}

{h.desc}

{price ? {price} : null} {ctaLabel}
{h.includesLabel}
    {h.includes.map((x, i) =>
  • {x}
    • )}
{h.flow.map((s, i) =>
{s.k} {s.label}

{s.t}

{s.d}

{s.step.k}

{s.step.t}

{s.step.d}

{i < h.flow.length - 1 && } )}
); } /* ===================== WHY ===================== */ function Metric({ m }) { const [val, ref] = useCountUp(m.n, true); return (
{val}{m.suffix}
{m.l}
); } function Why({ t }) { return (
{t.why.theatre.tag}

{t.why.theatre.t}

{t.why.theatre.d}

{t.why.items.map((it, i) =>
0{i + 1}

{it.t}

{it.d}

)}
{t.why.metricsNote}
{t.why.metrics.map((m, i) => )}
); } /* ===================== FAQ ===================== */ function FAQItem({ q, a, defaultOpen }) { const [open, setOpen] = useState(!!defaultOpen); return (

{a}

); } function FAQ({ t }) { return (
{t.faq.items.map((it, i) => )}
); } /* ===================== CTA / CONTACT ===================== */ function Contact({ t, ctaLabel, bookProps }) { const magRef = useMagnetic(); return (

{t.cta.eyebrow}

{t.cta.title}

{t.cta.sub}

{ctaLabel}
{t.cta.emailLabel} {t.cta.email.split('|').join('')}
); } /* ===================== FOOTER ===================== */ function Footer({ t }) { // Decode email (splits it so bots can't read the full address as text) const decodeEmail = (encoded) => { const parts = encoded.split('|'); return parts.join(''); }; const displayEmail = decodeEmail(t.cta.email); return ( ); } /* ===================== APP ===================== */ function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [lang, setLangState] = useState(() => localStorage.getItem("jj_lang") || "en"); const setLang = (l) => {setLangState(l);localStorage.setItem("jj_lang", l);}; const C = window.CONTENT[lang]; const ctaLabel = t.ctaLabel && t.ctaLabel.trim() || C.nav.cta; const bookingUrl = t.bookingUrl && t.bookingUrl.trim() || "#contact"; const bookProps = /^https?:\/\//.test(bookingUrl) ? { href: bookingUrl, target: "_blank", rel: "noopener noreferrer" } : { href: bookingUrl }; useEffect(() => {applyAccent(t.accent);}, [t.accent]); useEffect(() => {applyTheme(t.theme);}, [t.theme]); useEffect(() => {document.documentElement.lang = lang;}, [lang]); useReveal([lang]); return (