/* global React, COPY */ const { useState, useEffect, useRef } = React; /* ===================================================== Brand + small atoms ===================================================== */ function BrandMark({ size = 32 }) { return ( ); } function Arrow({ kind = "right" }) { if (kind === "ne") { return ( ); } return ( ); } /* ===================================================== Nav ===================================================== */ function Nav({ lang, setLang, active, t }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } /* ===================================================== Hero ===================================================== */ function Hero({ t, lang }) { return (
{t.hero.eyebrow}

{t.hero.headline_pre} {t.hero.headline_grad} {t.hero.headline_post}

{t.hero.sub}

{t.cta.primary} {t.cta.secondary}
{t.hero.stat1.num}
{t.hero.stat1.label}
{t.hero.stat2.num}
{t.hero.stat2.label}
{t.hero.stat3.num}
{t.hero.stat3.label}
); } function HeroVisual({ lang }) { const labels = lang === "th" ? { project: "โครงการ Q2 2026", metric: "ผลตอบแทนการลงทุน", status: "ดำเนินการ" } : { project: "Q2 2026 Engagement", metric: "Return on investment", status: "Live" }; return ( ); } /* ===================================================== Trusted ===================================================== */ function Trusted({ t }) { return (
{t.trusted.label}
{COPY.trusted.logos.map(name =>
{name}
)}
); } /* ===================================================== About ===================================================== */ function About({ t }) { return (
{t.about.eyebrow}

{t.about.title}

{t.about.lead}

{t.about.body}

{t.about.values.map(v => (
{v.k}

{v.t}

{v.d}

))}
); } /* ===================================================== Expertise ===================================================== */ function Expertise({ t }) { return (
{t.expertise.eyebrow}

{t.expertise.title}

{t.expertise.areas.map(a => (
{a.n}

{a.t}

{a.d}

{a.tags.map(tag => {tag})}
))}
); } /* ===================================================== Product ===================================================== */ function Product({ t }) { return (
{t.product.eyebrow}

{t.product.title}

{t.product.sub}

{t.product.items.map(p => (
{p.tag}

{p.name}

{p.tagline}

{p.desc}

    {p.bullets.map(b =>
  • {b}
    • )}
))}
); } /* ===================================================== Cases ===================================================== */ function Cases({ t }) { return (
{t.cases.eyebrow}

{t.cases.title}

{t.cases.items.map(c => (
{c.industry}
{c.client}

{c.headline}

{c.body}

{c.metrics.map((m, i) => (
{m.k}
{m.v}
))}
))}
); } /* ===================================================== Team ===================================================== */ function Team({ t, lang }) { return (
{t.team.eyebrow}

{t.team.title}

{t.team.lead ?

{t.team.lead}

: null}
{t.team.members.map((m, i) => (
{String(i + 1).padStart(2, "0")}

{m.role}

"{m.tagline}"

{lang === "th" ? "ความเชี่ยวชาญและโครงการ" : "Expertise & Projects"}
    {m.bullets.map((bl, j) => (
  • {bl.h} — {bl.b}
    • ))}
))}
); } /* ===================================================== Contact ===================================================== */ function Contact({ t, lang }) { const [sent, setSent] = useState(false); const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 4000); }; const L = t.contact.labels; return (
{t.contact.eyebrow}

{t.contact.title}

{t.contact.sub}

{lang === "th" ? "ที่อยู่" : "Address"}
{t.contact.info.address}
{lang === "th" ? "โทรศัพท์" : "Phone"}
{t.contact.info.phone}
{lang === "th" ? "อีเมล" : "Email"}
{t.contact.info.email}
{lang === "th" ? "เวลาทำการ" : "Hours"}
{t.contact.info.hours}
{sent && ✓ {lang === "th" ? "ส่งข้อความเรียบร้อย — เราจะติดต่อกลับใน 1 วันทำการ" : "Message sent — we'll respond within 1 business day"}}
); } /* ===================================================== Footer ===================================================== */ function Footer({ t, lang }) { return ( ); } /* ===================================================== Active section observer (for nav highlight) ===================================================== */ function useActiveSection() { const [active, setActive] = useState("home"); useEffect(() => { const ids = ["home", "about", "expertise", "product", "cases", "contact"]; const sections = ids.map(id => document.getElementById(id)).filter(Boolean); const io = new IntersectionObserver((entries) => { const visible = entries.filter(e => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio); if (visible[0]) setActive(visible[0].target.id); }, { rootMargin: "-30% 0px -50% 0px", threshold: [0, 0.25, 0.5] }); sections.forEach(s => io.observe(s)); return () => io.disconnect(); }, []); return active; } /* ===================================================== App ===================================================== */ const DEFAULTS = /*EDITMODE-BEGIN*/{ "language": "auto" }/*EDITMODE-END*/; function detectLang() { if (typeof navigator !== "undefined") { const l = (navigator.language || navigator.userLanguage || "en").toLowerCase(); if (l.startsWith("th")) return "th"; } return "en"; } function App() { const tweaks = (window.useTweaks || (() => [DEFAULTS, () => {}]))(DEFAULTS); const [tw, setTweak] = tweaks; const initialLang = tw.language === "auto" ? detectLang() : tw.language; const [lang, setLangState] = useState(initialLang); const setLang = (l) => { setLangState(l); setTweak("language", l); }; useEffect(() => { if (tw.language && tw.language !== "auto" && tw.language !== lang) { setLangState(tw.language); } }, [tw.language]); useEffect(() => { document.documentElement.setAttribute("lang", lang); document.body.setAttribute("lang", lang); document.title = lang === "th" ? "ดิจิทัลทรานฟอร์ม — ที่ปรึกษาดิจิทัลทรานส์ฟอร์เมชัน" : "Digitaltransform — Digital transformation for Thai businesses"; }, [lang]); const t = { nav: COPY.nav[lang], cta: COPY.cta[lang], hero: COPY.hero[lang], trusted: { label: COPY.trusted[lang].label }, about: COPY.about[lang], expertise: COPY.expertise[lang], product: COPY.product[lang], cases: COPY.cases[lang], team: COPY.team[lang], contact: COPY.contact[lang], footer: COPY.footer[lang], }; const active = useActiveSection(); const TweaksPanel = window.TweaksPanel; const TweakSection = window.TweakSection; const TweakRadio = window.TweakRadio; return ( <> {lang === "th" ? "ข้ามไปยังเนื้อหาหลัก" : "Skip to main content"}