/* global React */ const { useState: useStateS, useEffect: useEffectS, useRef: useRefS, useMemo } = React; /* ========================================================= Marquee ========================================================= */ function Marquee({ items }) { const doubled = [...items, ...items]; return ( ); } /* ========================================================= Reveal wrapper — IntersectionObserver based ========================================================= */ function Reveal({ children, delay = 0, as: As = "div", className = "", ...props }) { const ref = useRefS(null); const [seen, setSeen] = useStateS(false); useEffectS(() => { if (!ref.current) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.unobserve(e.target); } }); }, { threshold: 0.15 } ); io.observe(ref.current); return () => io.disconnect(); }, []); return ( {children} ); } /* ========================================================= Step icon — different mini animated SVGs per step ========================================================= */ function StepIcon({ kind }) { if (kind === "scan") { return ( ); } if (kind === "draft") { return ( ); } if (kind === "polish") { return ( ); } if (kind === "launch") { return ( ); } return null; } /* ========================================================= Process section ========================================================= */ function Process({ t }) { const kinds = ["scan", "draft", "polish", "launch"]; return (

{t.process.eyebrow}

{t.process.title} {t.process.titleItalic} {t.process.titleEnd}

{t.process.sub}

{t.process.steps.map((s, i) => (

{s.n}

{s.h}

{s.p}

))}

); } /* ========================================================= Services ========================================================= */ function Services({ t }) { return (

{t.services.eyebrow}

{t.services.title} {t.services.titleItalic} {t.services.titleEnd}

{t.services.sub}

{t.services.cards.map((c, i) => (

{c.tag}

{c.h}

{it}

))}

); } /* ========================================================= Before / After demo — pure SVG mockups ========================================================= */ function BeforeMockup() { return ( ); } function AfterMockup() { // Visual vocabulary deliberately different from the Mijeraki homepage: // warm cream + ink + terracotta, serif headline, grounded craftsman feel. // No newspaper gimmicks — just a clean, believable handwerk site. const cream = "#f1e7d3"; const ink = "#1d1812"; const inkSoft = "#5b5042"; const brick = "#b8492a"; const sand = "#dccbab"; const sandDark = "#c4ad84"; return ( ); } function BeforeAfter({ t }) { const [pos, setPos] = useStateS(50); const wrapRef = useRefS(null); const dragging = useRefS(false); const updateFromEvent = (e) => { if (!wrapRef.current) return; const r = wrapRef.current.getBoundingClientRect(); const cx = (e.touches ? e.touches[0].clientX : e.clientX) - r.left; setPos(Math.max(0, Math.min(100, (cx / r.width) * 100))); }; useEffectS(() => { const move = (e) => dragging.current && updateFromEvent(e); const up = () => (dragging.current = false); window.addEventListener("mousemove", move); window.addEventListener("touchmove", move); window.addEventListener("mouseup", up); window.addEventListener("touchend", up); return () => { window.removeEventListener("mousemove", move); window.removeEventListener("touchmove", move); window.removeEventListener("mouseup", up); window.removeEventListener("touchend", up); }; }, []); return (

{t.ba.eyebrow}

{t.ba.title} {t.ba.titleItalic}

{t.ba.sub}

{t.ba.beforeTag} {t.ba.afterTag}

{ dragging.current = true; updateFromEvent(e); }} onTouchStart={(e) => { dragging.current = true; updateFromEvent(e); }} >

); } /* ========================================================= About ========================================================= */ function About({ t }) { return (

{t.about.portraitTitle} {t.about.portraitMeta}

{t.about.eyebrow}

{t.about.title} {t.about.titleItalic}

{t.about.body.map((p, i) => (

{p}

))}

— Michael

); } /* ========================================================= FAQ ========================================================= */ function FAQ({ t }) { const [open, setOpen] = useStateS(0); return (

{t.faq.eyebrow}

{t.faq.title} {t.faq.titleItalic}

{t.faq.items.map((item, i) => (

{item.a}

))}

); } /* ========================================================= CTA + Footer ========================================================= */ function CTA({ t }) { return (

{t.cta.status}

{t.cta.title} {t.cta.titleItalic} {t.cta.titleEnd}

{t.cta.sub}

{t.cta.email} →

); } function Footer({ t, lang, setLang }) { return ( ); } Object.assign(window, { Marquee, Reveal, Process, Services, BeforeAfter, About, FAQ, CTA, Footer });