/* AUTOPILOT — main app */ const { useEffect, useState } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "accent": "#E60000", "fontPair": "grotesk", "bodyFont": "inter", "headerFont": "inter", "buttonFont": "inter", "caseHeader": "none", "caseBody": "none", "caseButton": "none", "splineOn": true, "taglineMode": "stack", "taglineMainSize": 86, "taglineSubSize": 14, "titleSize": 36, "cardSize": 18, "leadSize": 18, "leadFont": "inter", "bodySize": 14, "bodyLine": 1.55, "labelSize": 12, "uiSize": 14, "numFont": "grotesk", "numSize": 48, "lang": "EN", "headerThaiFont": "prompt", "bodyThaiFont": "prompt", "buttonThaiFont": "noto", "leadThaiFont": "prompt", "numThaiFont": "prompt", "eyebrowFont": "mono", "eyebrowThaiFont": "noto", "headerThaiWeight": "300", "bodyThaiWeight": "300", "buttonThaiWeight": "400", "leadThaiWeight": "300", "numThaiWeight": "300", "eyebrowThaiWeight": "400" }/*EDITMODE-END*/; // Latin font stacks. Thai font is layered in at runtime via // buildFontStack() so every text group (header / body / button / lead / // num / eyebrow) can pair independently. EN mode: browser does per-glyph // fallback (Latin → Latin font, Thai → Thai font). TH mode: Thai font // wins for both Latin and Thai chars so the page reads as one language. const FONT_PAIRS = { grotesk: { display: '"Space Grotesk", sans-serif', body: '"JetBrains Mono", monospace', label: 'Grotesk + Mono' }, }; const BODY_FONTS = { inter: { stack: '"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif', label: 'Inter (default)' }, mono: { stack: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace', label: 'JetBrains Mono' }, }; const DISPLAY_FONTS = { inter: { stack: '"Inter", "Helvetica Neue", Arial, sans-serif', label: 'Inter (default)' }, grotesk: { stack: '"Space Grotesk", "Helvetica Neue", Arial, sans-serif', label: 'Space Grotesk' }, jetbrains: { stack: '"JetBrains Mono", ui-monospace, monospace', label: 'JetBrains Mono' }, }; // Thai fonts loaded from Google Fonts in index.html. Pick any per group // in the dev tweaks panel. All have Latin glyphs too, but they're inserted // AFTER the Latin font in the stack so Latin chars stay in Inter/Grotesk. const THAI_FONTS = { noto: { stack: '"Noto Sans Thai"', label: 'Noto Sans Thai (default)' }, kanit: { stack: '"Kanit"', label: 'Kanit' }, prompt: { stack: '"Prompt"', label: 'Prompt' }, }; // Thai font weight options — applied only in TH mode, overriding the // per-group CSS weight variables. Browser does nearest-weight fallback // for fonts that don't expose every weight (e.g., Mitr has no Thin). const THAI_WEIGHTS = [ { value: '100', label: 'Thin (100)' }, { value: '300', label: 'Light (300)' }, { value: '400', label: 'Regular (400)' }, { value: '500', label: 'Medium (500)' }, { value: '600', label: 'SemiBold (600)' }, { value: '700', label: 'Bold (700)' }, ]; // Build the runtime font stack. In EN mode the Latin font wins for Latin // chars and the Thai font cascades for Thai codepoints. In TH mode the // Thai font wins for everything — Latin text inside Thai sentences also // renders in the chosen Thai font (Noto Sans Thai and Kanit both have // Latin glyphs), so the page reads as one cohesive language switch. // Falls back to the first key in THAI_FONTS if the requested key is // unknown, so stale tweak values from previous palettes don't break. function buildFontStack(latinStack, thaiKey, lang) { const thai = (THAI_FONTS[thaiKey] || Object.values(THAI_FONTS)[0]).stack; if (lang === 'TH') return `${thai}, ${latinStack}`; const i = latinStack.indexOf(','); if (i === -1) return `${latinStack}, ${thai}`; return `${latinStack.slice(0, i + 1)} ${thai},${latinStack.slice(i + 1)}`; } // Visitor-facing language preference. Independent of useTweaks because // useTweaks posts to the Antigravity bundler host (which rewrites source // on disk) and does NOT persist to browser localStorage. First visit: // auto-detect from navigator.languages; Thai browsers land in TH, all // others in EN. User's manual choice is sticky across visits. const LANG_STORAGE_KEY = 'autopilot-lang'; function useLang() { const [lang, setLangState] = useState(() => { try { const saved = localStorage.getItem(LANG_STORAGE_KEY); if (saved === 'EN' || saved === 'TH') return saved; } catch (e) { /* localStorage may be blocked (private mode, file://) */ } const langs = (typeof navigator !== 'undefined') ? (navigator.languages || [navigator.language || '']) : []; return langs.some(l => (l || '').toLowerCase().startsWith('th')) ? 'TH' : 'EN'; }); const setLang = (v) => { if (v !== 'EN' && v !== 'TH') return; try { localStorage.setItem(LANG_STORAGE_KEY, v); } catch (e) {} setLangState(v); }; return [lang, setLang]; } function App() { const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : useFallback(TWEAK_DEFAULTS); const [lang, setLang] = useLang(); const t = window.I18N[lang] || window.I18N.EN; useEffect(() => { const root = document.documentElement; root.dataset.theme = tweaks.theme; root.dataset.lang = lang; // Set so screen readers switch voice, browser translate // UI doesn't offer to translate already-localized content, and search // engines understand intent. root.lang = (lang === 'TH') ? 'th' : 'en'; if (t && t.meta && t.meta.title) document.title = t.meta.title; const fp = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS.grotesk; // --font-display is the global display fallback — pair it with the // header Thai font choice so it stays consistent with --font-header. root.style.setProperty('--font-display', buildFontStack(fp.display, tweaks.headerThaiFont, lang)); const bf = BODY_FONTS[tweaks.bodyFont] || BODY_FONTS.inter; root.style.setProperty('--font-body', buildFontStack(bf.stack, tweaks.bodyThaiFont, lang)); const hf = DISPLAY_FONTS[tweaks.headerFont] || DISPLAY_FONTS.inter; root.style.setProperty('--font-header', buildFontStack(hf.stack, tweaks.headerThaiFont, lang)); const btf = DISPLAY_FONTS[tweaks.buttonFont] || DISPLAY_FONTS.grotesk; root.style.setProperty('--font-button', buildFontStack(btf.stack, tweaks.buttonThaiFont, lang)); root.style.setProperty('--case-header', tweaks.caseHeader || 'none'); root.style.setProperty('--case-body', tweaks.caseBody || 'none'); root.style.setProperty('--case-button', tweaks.caseButton || 'none'); root.style.setProperty('--accent', tweaks.accent); root.style.setProperty('--accent-soft', hexA(tweaks.accent, 0.12)); root.style.setProperty('--tagline-main-size', `clamp(40px, ${(tweaks.taglineMainSize || 80) / 14}vw, ${tweaks.taglineMainSize || 80}px)`); root.style.setProperty('--tagline-sub-size', `${tweaks.taglineSubSize || 14}px`); // Typography library — each slider rebuilds one CSS variable. The clamp() // ranges keep responsive scaling on smaller screens; the user-controlled // value sets the desktop max so changing one slider updates every place // that style is used across the page. const titleMax = tweaks.titleSize || 42; const leadVal = tweaks.leadSize || 20; const bodyLg = Math.max(13, Math.min(28, (tweaks.bodySize || 15) + 4)); root.style.setProperty('--text-title-size', `clamp(26px, 3.1vw, ${titleMax}px)`); root.style.setProperty('--text-card-size', `${tweaks.cardSize || 18}px`); // Lead size: direct px so the slider applies at any value (the previous // clamp had a 20px floor that ignored values below it). root.style.setProperty('--text-lead-size', `${leadVal}px`); root.style.setProperty('--text-body-size', `${tweaks.bodySize || 15}px`); root.style.setProperty('--text-body-size-large', `clamp(${tweaks.bodySize || 15}px, 1.5vw, ${bodyLg}px)`); root.style.setProperty('--text-body-line', String(tweaks.bodyLine || 1.55)); root.style.setProperty('--text-label-size', `${tweaks.labelSize || 11}px`); root.style.setProperty('--text-ui-size', `${tweaks.uiSize || 14}px`); // Eyebrow label font — overrides the CSS default (var(--font-mono)) so // both Latin and Thai eyebrow fonts can be tuned independently of body. const eyeF = BODY_FONTS[tweaks.eyebrowFont] || BODY_FONTS.mono; root.style.setProperty('--text-label-family', buildFontStack(eyeF.stack, tweaks.eyebrowThaiFont, lang)); // Lead font dropdown — pick the Inter / Grotesk / JetBrains stack and // write it to the variable that every Lead Paragraph reads. const leadF = DISPLAY_FONTS[tweaks.leadFont] || DISPLAY_FONTS.inter; root.style.setProperty('--text-lead-family', buildFontStack(leadF.stack, tweaks.leadThaiFont, lang)); // Big Number font + size — controls .why-num and .result-stat together. const numF = DISPLAY_FONTS[tweaks.numFont] || DISPLAY_FONTS.grotesk; root.style.setProperty('--text-num-family', buildFontStack(numF.stack, tweaks.numThaiFont, lang)); root.style.setProperty('--text-num-size', `${tweaks.numSize || 48}px`); // Per-group Thai weight overrides — Thai fonts often need a different // weight than the matching Latin to look balanced. Apply only in TH // mode; in EN mode, clear the inline overrides so the CSS root // defaults (declared at the top of styles.css) take over again. // Header tweak controls THREE related weight variables: --text-title // (h2/h3 etc.), --text-mega (.display-1, .hero-mark, .cta h2), and // --text-card (.cap-card h3, .faq-q, .why-spine-title). Conceptually // they're all heading-weight; we collapse them into one user control. const weightMap = [ ['--text-title-weight', tweaks.headerThaiWeight], ['--text-mega-weight', tweaks.headerThaiWeight], ['--text-card-weight', tweaks.headerThaiWeight], ['--text-body-weight', tweaks.bodyThaiWeight], ['--text-ui-weight', tweaks.buttonThaiWeight], ['--text-lead-weight', tweaks.leadThaiWeight], ['--text-num-weight', tweaks.numThaiWeight], ['--text-label-weight', tweaks.eyebrowThaiWeight], ]; if (lang === 'TH') { weightMap.forEach(([cssVar, val]) => { if (val) root.style.setProperty(cssVar, String(val)); }); } else { weightMap.forEach(([cssVar]) => root.style.removeProperty(cssVar)); } }, [tweaks, lang]); // Defer non-critical chrome (side nav, sticky mobile bar) until after // first paint so they don't add to the initial layout cost. The page // is fully usable without them — they're enhancements. const [chromeReady, setChromeReady] = useState(false); useEffect(() => { let id; const mount = () => setChromeReady(true); if ('requestIdleCallback' in window) { id = window.requestIdleCallback(mount, { timeout: 1200 }); return () => window.cancelIdleCallback && window.cancelIdleCallback(id); } id = setTimeout(mount, 250); return () => clearTimeout(id); }, []); // scroll reveal observer useEffect(() => { const els = document.querySelectorAll('.reveal'); els.forEach(el => el.classList.add('reveal-pre')); requestAnimationFrame(() => { els.forEach(el => { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight && r.bottom > 0) el.classList.add('in'); }); }); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0, rootMargin: '0px 0px -10% 0px' }); els.forEach(el => { if (!el.classList.contains('in')) io.observe(el); }); const tt = setTimeout(() => { document.querySelectorAll('.reveal-pre:not(.in)').forEach(el => el.classList.add('in')); }, 2000); return () => { io.disconnect(); clearTimeout(tt); }; }, [tweaks.splineOn, tweaks.taglineMode]); return ( <> {chromeReady && window.SideNav && } {window.LangSwitchFloat && } {window.Tools && } {window.Pricing && }