// ============ Puhastid — App ============ const { useState, useEffect, useRef, useMemo, useCallback } = React; const SIZES = window.PUHASTID_DATA.SIZES; const PRICES = window.PUHASTID_DATA.PRICES; const COPY = window.PUHASTID_DATA.COPY; // Motion primitives (loaded from framer-motion UMD + motion-helpers.jsx) const { motion, AnimatePresence, LayoutGroup, useReducedMotion, EASE_OUT } = window.PMotion; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "forest", "bgTone": "bone", "dark": false, "font": "dm", "hSize": 1.0, "hWeight": 500, "radius": 18, "squareBtns": false, "density": "compact", "heroLayout": "default", "configStyle": "elevated", "sizePicker": "slider", "tankTone": "lime", "showEyebrow": true, "showStats": false, "showMap": true, "showTrustStrip": true } /*EDITMODE-END*/; const TANK_TONES = { lime: { top: "#D5E365", mid: "#BFD53C", bot: "#8FA426", manhole1: "#5A6D1A", manhole2: "#8FA426", manhole3: "#A7BF2E", pipe: "#5A6D1A" }, forest: { top: "#5C8466", mid: "#3B6B4A", bot: "#244A2E", manhole1: "#172E1C", manhole2: "#3B6B4A", manhole3: "#5C8466", pipe: "#172E1C" }, steel: { top: "#C9CFD6", mid: "#8A929C", bot: "#535A64", manhole1: "#2F343B", manhole2: "#535A64", manhole3: "#8A929C", pipe: "#2F343B" }, copper: { top: "#E8B895", mid: "#C77A4D", bot: "#8E4A26", manhole1: "#5C2D17", manhole2: "#8E4A26", manhole3: "#C77A4D", pipe: "#5C2D17" }, charcoal: { top: "#5A5A57", mid: "#33332F", bot: "#15140F", manhole1: "#000000", manhole2: "#33332F", manhole3: "#5A5A57", pipe: "#000000" }, cream: { top: "#FAF1DC", mid: "#E8D5A8", bot: "#B79A60", manhole1: "#7A6536", manhole2: "#B79A60", manhole3: "#E8D5A8", pipe: "#7A6536" } }; const fmtPrice = (n, lang) => { // Finnish uses space as thousands separator, € after const s = Math.round(n).toLocaleString("fi-FI").replace(/,/g, " "); return s + " €"; }; // En-dash with hair spaces on either side — proper typographic range separator. const RANGE_DASH = "\u200A\u2013\u200A"; const fmtRange = ([a, b], lang) => `${fmtPrice(a, lang)}${RANGE_DASH}${fmtPrice(b, lang)}`; // ---- Tank SVG (procedural illustration; scales with size) ---- function TankSVG({ size, tone = "lime" }) { const c = TANK_TONES[tone] || TANK_TONES.lime; // visual scale by size; min vs max const scale = 0.55 + Math.min(1, (size - 5) / 95) * 0.45; const w = 320 * scale; const h = 150 * scale; const cx = 200; const cy = 130; return ( ); } // ---- Map of Finland (real Simplemaps outline + Estonian coast strip) ---- // FI_PATHS is defined globally in map-data.js (loaded before app.jsx). // It's an array of 19 SVG path d-strings, one per Finnish region (FI01..FI19). // Real bbox (computed by simulating the path commands) is // x:[277, 723] y:[45.5, 954.5] (446 wide, 909 tall) // within the Simplemaps 1000x1000 source viewBox. We render them inside a // with translate(-140 0) so Finland centers horizontally in our 720-wide // canvas (137px margin each side) and sits in y:[45, 955], leaving y 1000-1150 // for the hand-drawn Estonian coast strip. function FinlandMap() { // Cities in the combined viewBox (720x1150). The x/y values are the // POST-translate display coords (i.e. native Simplemaps x minus 140). // Estimated by linear lat/lon→pixel mapping: // y = 954.5 - (lat - 60) * 90.9 // x = (277 + (lon - 20) * 37) - 140 (the -140 is the FI translate) // Each non-Helsinki city has `tcp` = two cubic bezier control points for // the truck leg of its route (from the Helsinki ferry landing inland). const cities = [ { x: 320, y: 939, name: "HELSINKI", days: "1 d" }, { x: 221, y: 913, name: "TURKU", days: "1 d", tcp: [[280, 950], [240, 920]] }, { x: 276, y: 818, name: "TAMPERE", days: "2 d", tcp: [[315, 885], [285, 850]] }, { x: 498, y: 718, name: "JOENSUU", days: "3 d", tcp: [[400, 870], [470, 770]] }, { x: 339, y: 499, name: "OULU", days: "2 d", tcp: [[340, 780], [335, 620]] }, { x: 349, y: 364, name: "ROVANIEMI", days: "3 d", tcp: [[345, 740], [350, 510]] }]; const tallinn = { x: 313, y: 1075 }; // post-translate, just south of Helsinki const ferry = { x: 320, y: 939 }; // Helsinki harbor — common ferry landing // Hand-drawn northern Estonia coast — only a sliver is visible. The // Tallinn peninsula recess sits at x~313 (under Helsinki). const estoniaPath = ` M 0 1150 L 0 1090 C 50 1083, 110 1077, 175 1073 C 215 1070, 250 1063, 285 1066 L 305 1068 L 320 1066 C 355 1066, 410 1072, 480 1078 C 560 1086, 650 1093, 720 1098 L 720 1150 Z `; // Route builder: ferry leg from Tallinn across the Gulf of Finland to // Helsinki harbor (slight curve to read as a sea crossing), then a road // leg with destination-specific bends so routes look like real driving // paths rather than straight arrows. const routePath = (c) => { const fLeg = `M ${tallinn.x} ${tallinn.y} C ${tallinn.x - 8} ${tallinn.y - 55}, ${ferry.x + 8} ${ferry.y + 65}, ${ferry.x} ${ferry.y}`; if (c.name === "HELSINKI") return fLeg; const [c1, c2] = c.tcp; return `${fLeg} C ${c1[0]} ${c1[1]}, ${c2[0]} ${c2[1]}, ${c.x} ${c.y}`; }; return ( ); } // ---- Header ---- function Header({ lang, setLang, scrollTo }) { const t = COPY[lang]; const reduced = useReducedMotion(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
{e.preventDefault();window.scrollTo({ top: 0, behavior: "smooth" });}}> Puhastid Eccua.fi {lang === "fi" ? "Lasikuitusäiliöt" : "Glassfiber tanks"}
); } // Shared layoutId pill backs the active language button — slides between FI/EN function LangButton({ on, onClick, children }) { const reduced = useReducedMotion(); return ( ); } // ---- Size selector variants ---- function SizeChips({ size, setSize, lang, dark }) { const reduced = useReducedMotion(); return (
{SIZES.map((s) => { const on = s === size; return ( ); })}
); } function SizeStrip({ size, setSize, lang }) { const reduced = useReducedMotion(); const ref = useRef(null); useEffect(() => { const el = ref.current?.querySelector(".chip.on"); if (el) el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }); }, [size]); return (
{SIZES.map((s) => { const on = s === size; return ( ); })}
); } function SizeSlider({ size, setSize, lang }) { const idx = SIZES.indexOf(size); const max = SIZES.length - 1; const pct = idx / max * 100; return (
{COPY[lang].cfg.sizeLabel} {size}m³
{SIZES.map((s, i) => { const left = i / max * 100; const major = [5, 25, 50, 75, 100].includes(s); return (
setSize(s)} role="button" aria-label={`${s} m³`}>
); })}
setSize(SIZES[parseInt(e.target.value, 10)])} style={{ position: "absolute", inset: 0, opacity: 0, cursor: "pointer", width: "100%", height: "100%" }} aria-label={COPY[lang].cfg.sizeLabel} />
5255075100
);} // ---- Hero + Configurator ---- function Hero({ lang, size, setSize, scrollToForm, tw }) { const t = COPY[lang]; const reduced = useReducedMotion(); const [flash, setFlash] = useState(false); const lastSize = useRef(size); useEffect(() => { if (lastSize.current !== size) { setFlash(true); const id = setTimeout(() => setFlash(false), 380); lastSize.current = size; return () => clearTimeout(id); } }, [size]); const range = PRICES[size]; // Word-by-word stagger choreography for the headline. // We re-key on lang so a language switch re-runs the reveal (matches the // "language toggle does a fast fade-out/in" feel without sliding). const hKey = `h-${lang}`; // word index counter for delays across the three headline runs let wIdx = 0; const wordsOf = (s) => String(s || "").trim().split(/\s+/).filter(Boolean); const headPre = wordsOf(t.hero.h1Pre); const headEm = wordsOf(t.hero.h1Em); const headPost = wordsOf(t.hero.h1Post); const perWord = 0.05; const headBase = 0.05; const renderWord = (word, key, italic) => { const delay = headBase + wIdx * perWord; wIdx += 1; if (reduced) { return ( {italic ? {word} : word} {" "} ); } return ( {italic ? {word} : word} {" "} ); }; // Estimated time when headline finishes — supporting content starts a hair later const headTotal = headBase + (headPre.length + headEm.length + headPost.length) * perWord + 0.3; return (
{/* Left */}
{tw.showEyebrow && ( reduced ?
{t.hero.eyebrow}
: {t.hero.eyebrow} ) }

{headPre.map((w, i) => renderWord(w, `pre-${i}`, false))} {headEm.map((w, i) => renderWord(w, `em-${i}`, true))} {headPost.map((w, i) => renderWord(w, `post-${i}`, false))}

{reduced ?

{t.hero.lead}

: {t.hero.lead} } {reduced ?
    {t.hero.features.map((f, i) =>
  • {f}
    • )}
: {t.hero.features.map((f, i) => {f} )} }
{/* Right — configurator (fades in as one block, slightly delayed) */} {reduced ?
: }
); } // Body of the configurator — split out so the Hero can wrap it in motion or not. function ConfiguratorBody({ lang, size, setSize, scrollToForm, tw, flash, range }) { const reduced = useReducedMotion(); const t = COPY[lang]; return ( {tw.sizePicker !== "slider" &&
{t.cfg.sizeLabel} {t.cfg.sizeHint} — 5 – 100 m³
} {tw.sizePicker === "strip" && } {tw.sizePicker === "slider" && } {tw.sizePicker === "chips" && }
ECCUA · {size}m³
spec glassfiber · {tw.tankTone}
{t.cfg.priceLabel} {t.cfg.priceSub}
fmtPrice(v, lang)} /> {"\u200A\u2013\u200A"} fmtPrice(v, lang)} />
); } // ---- Why cards ---- function Why({ lang, tw }) { const t = COPY[lang].why; const reduced = useReducedMotion(); // each card gets a different tasteful icon motion const iconAnims = [ { rotate: 5 }, // soil pressure: slight tilt { y: -2 }, // shield: lifts up { rotate: 30 } // clock: minute hand creep ]; return (
{tw.showEyebrow &&
— {t.num}
}

{t.h2}

{t.intro}

 {t.cards.map((c, i) => )}
); } function WhyCard({ c, i, reduced, iconAnim }) { const icons = [ , , ]; // Combine the parent StaggerReveal entrance variants with our own hover variant. const cardVariants = { hidden: { opacity: 0, y: 16 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE_OUT } } }; const iconVariants = reduced ? {} : { rest: { rotate: 0, y: 0 }, hover: { ...iconAnim, transition: { duration: 0.35, ease: EASE_OUT } } }; return ( {icons[i]} {c.n}

{c.t}

{c.d}

); } // ---- Estonia block ---- function Estonia({ lang, tw }) { const t = COPY[lang].estonia; return (
{tw.showEyebrow &&
{t.eyebrow}
}

{t.h2}

{t.p1}

{t.p2}

{tw.showStats &&
{t.stats.map((s, i) =>
{s.n}
{s.l}
)}
}
{t.card.title}
{t.card.rows.map(([k, v], i) =>
{k} {v}
)}
Tallinn 59.4370° N · 24.7536° E
); } // ---- Shipping ---- function Shipping({ lang, tw }) { const t = COPY[lang].ship; return (
{tw.showEyebrow &&
— {t.num}
}

{t.h2}

{t.intro}
{tw.showMap &&
}

{t.p1}

{t.p2}

    {t.points.map((p, i) =>
  • {p}
    • )}
{t.priceFrom && }
); } // ---- Downloads ---- function Downloads({ lang, tw }) { const t = COPY[lang].downloads; if (!t) return null; return (
{tw.showEyebrow &&
— {t.num}
}

{t.h2}

{t.intro}

 {t.items.map((it, i) =>
{it.title}
{it.meta}
 )}
); } // ---- Contact ---- function Contact({ lang, tw }) { const t = COPY[lang].contact; return (
{tw.showEyebrow &&
— {t.num}
}

{t.h2}

{t.intro}

 {t.cards.map((c, i) =>
{c.lbl}
{c.v}
{c.sub &&
{c.sub}
} )}
); } // ---- Form ---- // Where inquiries go. To change recipient, just edit this address. const INQUIRY_RECIPIENT = "info@puhastid.ee"; function InquiryForm({ lang, size, setSize, formRef }) { const t = COPY[lang].form; const reduced = useReducedMotion(); const [state, setState] = useState({ name: "", email: "", purpose: "", desc: "" }); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [loading, setLoading] = useState(false); const [submitError, setSubmitError] = useState(null); function validate() { const e = {}; if (!state.name.trim()) e.name = t.errs.name; if (!state.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email)) e.email = t.errs.email; if (!state.purpose) e.purpose = t.errs.purpose; return e; } // Sends the inquiry to INQUIRY_RECIPIENT via FormSubmit.co — a free, // no-signup form-to-email relay. FormSubmit requires a one-time // confirmation: the FIRST inquiry ever submitted will trigger an // activation email to INQUIRY_RECIPIENT; clicking the link there // activates the endpoint. Every subsequent submission is delivered // straight to the inbox. async function sendInquiry(formData) { const purposeLabel = (() => { if (formData.purpose === "waste") return lang === "fi" ? "Jätevesi (saostus / umpisäiliö)" : "Wastewater (septic / holding)"; if (formData.purpose === "fire") return lang === "fi" ? "Sammutusvesi (pelastusviranomaisen vaatima)" : "Firefighting water"; return formData.purpose || "—"; })(); const subjectPrefix = lang === "fi" ? "Tarjouspyyntö" : "Inquiry"; const payload = { _subject: `${subjectPrefix} — ${formData.name} · ${formData.size} m³ · eccua.fi`, _template: "table", // FormSubmit renders a clean HTML table _captcha: "false", // disable their CAPTCHA redirect step _replyto: formData.email, // so a reply from the inbox goes to the customer Nimi: formData.name, Sähköposti: formData.email, "Säiliön koko": `${formData.size} m³`, Käyttötarkoitus: purposeLabel, "Kuvaus ja toimitusosoite": formData.desc && formData.desc.trim() ? formData.desc : "—", Kieli: lang.toUpperCase() }; const res = await fetch("https://formsubmit.co/ajax/" + INQUIRY_RECIPIENT, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(payload) }); if (!res.ok) { throw new Error("Network response was not ok (" + res.status + ")"); } const json = await res.json().catch(() => ({})); if (json && json.success === "false") { throw new Error(json.message || "FormSubmit returned an error"); } return json; } async function onSubmit(ev) { ev.preventDefault(); const e = validate(); setErrors(e); if (Object.keys(e).length) return; setLoading(true); setSubmitError(null); try { await sendInquiry({ ...state, size }); setSubmitted(true); } catch (err) { console.error("Inquiry send failed:", err); setSubmitError( lang === "fi" ? "Pyynnön lähetys epäonnistui. Yritä uudelleen tai ota suoraan yhteyttä: " + INQUIRY_RECIPIENT : "Could not send your request. Please try again or email us directly: " + INQUIRY_RECIPIENT ); } finally { setLoading(false); } } return (
— {t.num}

{t.h2}

{t.intro}

    {t.steps.map((s, i) =>
  • {String(i + 1).padStart(2, "0")} {s}
    • )}
{COPY[lang].contact &&
{lang === "fi" ? "Tai ota suoraan yhteyttä" : "Or contact us directly"}
    {COPY[lang].contact.cards.map((c, i) => { const icons = [ // mail , , ]; const hrefs = [ "mailto:" + c.v, "tel:" + c.v.replace(/\s/g, ""), "https://maps.google.com/?q=" + encodeURIComponent((c.sub || "") + " " + c.v)]; return (
  • {icons[i]} {c.v} {c.sub && {c.sub}}
    • ); })}
}
{submitted ?

{t.successH}

{t.successP}

 :
setState({ ...state, name: e.target.value })} autoComplete="name" className={errors.name ? "has-err" : ""} /> setState({ ...state, email: e.target.value })} autoComplete="email" className={errors.email ? "has-err" : ""} />
{errors.purpose && {errors.purpose} }