const { useState, useEffect } = React; // ============ Tweak defaults (persisted by host) ============ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "logoSize": 72 } /*EDITMODE-END*/; // ============ Language helper ============ function useLang() { const [lang, setLangState] = useState(() => { try { return localStorage.getItem("snu-lang") || "en"; } catch (e) { return "en"; } }); useEffect(() => { document.documentElement.setAttribute("lang", lang); try { localStorage.setItem("snu-lang", lang); } catch (e) {} }, [lang]); return [lang, setLangState]; } function LangToggle({ lang, setLang }) { return (
); } // ============ Placeholder ============ function PH({ label = "Image" }) { const id = "ph-c-" + label.replace(/\W/g, ''); return ( {label.toUpperCase()} ); } // ============ Brand + Nav ============ function Brand({ onClick }) { return (
Siam Nex Up
); } const PAGE_IDS = ["home", "about", "services", "cases", "insights", "contact"]; function Nav({ page, setPage, t, lang, setLang }) { return (
); } // ============ Buffer diagram (purple/coral palette) ============ function BufferDiagram({ t }) { return ( {/* Grid */} {t.diagram.grid} {t.diagram.gridSub} {/* Arrow */} {t.diagram.gridArrow} {/* VRFB Battery — gradient fill */} {t.diagram.buffer} 500 kWh {t.diagram.bufferSub} {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => )} {/* Arrow */} {t.diagram.burst} {/* Charger */} {t.diagram.charger} 120 kW DC {/* VPP label */} {t.diagram.vpp} {t.diagram.vppSub} ); } // ============ Home ============ function HomePage({ setPage, c, t }) { return (
{t.badges.reliability} {t.badges.slogan}

{t.hero.h1Pre}{t.hero.h1Em}{t.hero.h1Post}

{t.hero.lead}

{t.hero.card1Lbl}
500kWh
{t.hero.card1K}
{t.hero.card2Lbl}
30–60%
{t.hero.card2K}
{c.hero.stats.map((s, i) =>
{s.v}{s.unit}
{s.k}
)}
{t.home.sec02Label}

{t.home.sec02Heading[0]}{t.home.sec02Heading[1]}

{t.home.sec02Body}

{c.pillars.map((p, i) =>
{p.ix}

{p.title}

{p.body}

{p.tags.map((tg, j) =>
{tg}
)}
)}
{t.home.sec03Label}

{t.home.sec03Heading[0]}{t.home.sec03Heading[1]}

{t.home.sec03Body}

{c.problems.map((p, i) =>
{p.ix}
{p.tag}

{p.title}

{p.body}

{p.cases &&
{p.cases.map((cs, j) =>
{cs.date}
{cs.loc}
{cs.what}
)}
} {p.ref &&
{p.ref}
}
)}
{t.home.sec04Label}

{t.home.sec04Heading[0]}{t.home.sec04Heading[1]}

{t.home.sec04Body}

{t.home.diagramHeading[0]}{t.home.diagramHeading[1]}{t.home.diagramHeading[2]}{t.home.diagramHeading[3]}{t.home.diagramHeading[4]}

{c.diagramCopy.body}

{c.diagramCopy.legend.map((l, i) =>
{l.step}
{l.desc}
{l.val}
)}
{t.home.sec05Label}

{t.home.sec05Heading[0]}{t.home.sec05Heading[1]}

{t.home.sec05Body}

{c.cases.map((cs, i) =>
setPage("cases")}>
{cs.badge}
{cs.meta.map((m, j) => {m})}

{cs.title}

{cs.summary}

)}
{t.home.sec06Label}

{t.home.sec06Heading[0]}{t.home.sec06Heading[1]}

{t.home.sec06Body}

{c.insights.map((ins, i) =>
setPage("insights")}>
{ins.ix} {ins.tag}

{ins.title}

{ins.body}

— {ins.author} · {ins.date}
)}

{t.home.ctaHeading[0]}{t.home.ctaHeading[1]}

{t.home.ctaBody}

); } // ============ About ============ function AboutPage({ setPage, c, t }) { return (
{t.about.label}

{t.about.h1[0]}{t.about.h1[1]}{t.about.h1[2]}

{t.about.quote}

{t.about.body1}

{t.about.body2}

{t.about.valuesLabel}

{t.about.valuesHeading[0]}{t.about.valuesHeading[1]}

{t.about.valuesBody}

{c.values.map((v, i) =>
{v.ix}

{v.title} {v.em}

{v.body}

)}
{t.about.historyLabel}

{t.about.historyHeading[0]}{t.about.historyHeading[1]}

{t.about.historyBody}

{c.timeline.map((tl, i) =>
{tl.y}
{tl.t}
{tl.d}
)}
{t.about.teamLabel}

{t.about.teamHeading[0]}{t.about.teamHeading[1]}

{t.about.teamBody}

{c.team.map((m, i) => { const featured = i === 0; return (
{m.name}

{m.name}

{m.role}

{m.bio}

— {m.origin}
); })}
{t.about.partnersLabel}

{t.about.partnersHeading[0]}{t.about.partnersHeading[1]}

{t.about.partnersBody}

{c.partners.map((p, i) =>
{p.n}
{p.role}
)}
{t.about.investorLabel}

{t.about.investorHeading[0]}{t.about.investorHeading[1]}

{t.about.investorBody}

{c.investor.map((it, i) =>
{it.v}{it.unit}
{it.k}
{it.note}
)}
); } // ============ Services ============ function ServicesPage({ setPage, c, t }) { return (
{t.services.label}

{t.services.h1[0]}{t.services.h1[1]}{t.services.h1[2]}{t.services.h1[3]}

{c.services.map((s, i) =>
0{i + 1}

{s.title[0]} {s.title[1]}

{s.body}

{s.pills.map((p, j) => {p})}
{s.stats.map((st, j) =>
{st.k} {st.v}
)}
)}

{t.services.ctaHeading[0]}{t.services.ctaHeading[1]}

{t.services.ctaBody}

); } // ============ Cases ============ function CasesPage({ setPage, c, t }) { return (
{t.cases.label}

{t.cases.h1[0]}{t.cases.h1[1]}

{c.cases.map((cs, i) =>
{cs.badge} · {cs.meta.join(' · ')}

{cs.title}

{cs.summary}

{cs.stats.map((st, j) =>
{st.v}
{st.k}
)}
)}

{t.cases.ctaHeading[0]}{t.cases.ctaHeading[1]}

{t.cases.ctaBody}

); } // ============ Insights ============ function InsightsPage({ setPage, c, t }) { const featured = c.insights[0]; const rest = c.insights.slice(1); return (
{t.insights.label}

{t.insights.h1[0]}{t.insights.h1[1]}

{featured.tag}{featured.date}

{featured.title}

{featured.body}

— {featured.author}
{rest.map((ins, i) =>
{ins.ix}

{ins.title}

{ins.author}
{ins.date}
)}
); } // ============ Contact ============ function ContactPage({ setPage, c, t }) { const [topic, setTopic] = useState(t.contact.topics[0]); const [form, setForm] = useState({ name: "", org: "", email: "", msg: "" }); const [submitted, setSubmitted] = useState(false); const canSubmit = form.name && form.email.includes("@") && form.msg.length > 4; const submit = (e) => { e.preventDefault(); if (canSubmit) setSubmitted(true); }; // If language changes mid-session and the selected topic no longer matches the language's list, reset. useEffect(() => { if (!t.contact.topics.includes(topic)) setTopic(t.contact.topics[0]); }, [t]); return (
{t.contact.label}

{t.contact.h1[0]}{t.contact.h1[1]}

{!submitted ?

{t.contact.formHeading}

{t.contact.topics.map((topicOpt) => )}
setForm({ ...form, name: e.target.value })} placeholder={t.contact.namePh} />
setForm({ ...form, org: e.target.value })} placeholder={t.contact.orgPh} />
setForm({ ...form, email: e.target.value })} placeholder={t.contact.emailPh} />