// Shared components: wordmark, nav, buttons, schematic, countdown
function Wordmark({ size = 22 }) {
// Original "V" with a diagonal inner notch — not a lightning bolt
const h = size;
const w = size * 0.92;
return (
Voltan
);
}
function Kicker({ children, className = "" }) {
return (
{children}
);
}
function Pillar({ n, labelKey, lang }) {
const L = window.COPY.hero.pillars[labelKey];
return (
{n}
{window.t(L, lang)}
);
}
function Btn({ variant = "primary", children, onClick, href, className = "" }) {
const base = "inline-flex items-center justify-center px-5 h-11 text-sm font-medium transition";
const cls = variant === "primary"
? `${base} btn-primary rounded-[2px]`
: `${base} border hairline-strong rounded-[2px] hover:bg-white/[0.04]`;
const style = variant === "secondary" ? { color: 'var(--fg)' } : undefined;
if (href) return {children};
return ;
}
// Animated DER schematic: solar → battery → gateway → grid
function SchematicDER() {
const a = 'var(--accent)';
const line = 'var(--line-strong)';
const fg = 'var(--fg-dim)';
return (
);
}
// Countdown to July 1, 2026 UTC — CSIP-AUS v1.2 mandate
function useCountdown(targetISO) {
const [now, setNow] = React.useState(() => Date.now());
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const target = new Date(targetISO).getTime();
let diff = Math.max(0, target - now);
const days = Math.floor(diff / 86400000); diff -= days * 86400000;
const hrs = Math.floor(diff / 3600000); diff -= hrs * 3600000;
const min = Math.floor(diff / 60000); diff -= min * 60000;
const sec = Math.floor(diff / 1000);
return { days, hrs, min, sec };
}
function Countdown({ lang }) {
const c = useCountdown('2026-07-01T00:00:00+10:00');
const U = window.COPY.hero.countdownUnits;
const L = window.COPY.hero.countdownLabel;
const pad = (n, w = 2) => String(n).padStart(w, '0');
const cell = (val, unit) => (
{val}
{window.t(unit, lang)}
);
return (
{window.t(L, lang)}
{cell(pad(c.days, 3), U.days)}
{cell(pad(c.hrs), U.hrs)}
{cell(pad(c.min), U.min)}
{cell(pad(c.sec), U.sec)}
);
}
// Nav
function Nav({ lang, setLang, theme, setTheme }) {
const N = window.COPY.nav;
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const items = [
['capabilities', '#capabilities'],
['technology', '#technology'],
['whyNow', '#why-now'],
['about', '#about'],
['contact', '#contact'],
];
return (
);
}
function LangToggle({ lang, setLang }) {
return (
{['en','zh'].map(k => (
))}
);
}
function ThemeToggle({ theme, setTheme }) {
const dark = theme === 'dark';
return (
);
}
// Reveal on scroll
function Reveal({ children, className = "", delay = 0 }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
setTimeout(() => el.classList.add('in'), delay);
io.unobserve(el);
}
});
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, [delay]);
return {children}
;
}
// Animated number (tweens from 0 to value when in view)
function StatNum({ value, suffix = "", duration = 1200 }) {
const [n, setN] = React.useState(0);
const [started, setStarted] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((es) => {
es.forEach(e => { if (e.isIntersecting) setStarted(true); });
}, { threshold: 0.5 });
io.observe(el);
return () => io.disconnect();
}, []);
React.useEffect(() => {
if (!started) return;
if (typeof value !== 'number') { setN(value); return; }
let raf; const t0 = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(Math.round(value * eased));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [started, value, duration]);
return {typeof value === 'number' ? n.toLocaleString() : value}{suffix};
}
Object.assign(window, { Wordmark, Kicker, Pillar, Btn, SchematicDER, Countdown, Nav, Reveal, StatNum });