/* global React */
const { useState, useEffect } = React;
function Card({ tone = "white", tilt = 0, lift = true, style = {}, className = "", children, ...rest }) {
const toneBg = {
white: "var(--s54-white)",
cream: "var(--s54-cream)",
coral: "var(--s54-coral)",
mint: "var(--s54-mint)",
gold: "var(--s54-gold)",
lavender: "var(--s54-lavender)",
ink: "var(--s54-ink)",
}[tone] || "var(--s54-white)";
const color = tone === "ink" ? "#fff" : tone === "coral" ? "#fff" : "var(--s54-ink)";
return (
{
e.currentTarget.style.transform = `rotate(${tilt}deg) translateY(-4px) scale(1.02)`;
e.currentTarget.style.boxShadow = "10px 10px 0 0 var(--s54-ink)";
} : undefined}
onMouseLeave={lift ? (e) => {
e.currentTarget.style.transform = `rotate(${tilt}deg)`;
e.currentTarget.style.boxShadow = "6px 6px 0 0 var(--s54-ink)";
} : undefined}
{...rest}
>
{children}
);
}
function Button({ variant = "coral", size = "md", href, children, style = {}, ...rest }) {
const bg = {
coral: "var(--s54-coral)",
ghost: "var(--s54-white)",
gold: "var(--s54-gold)",
mint: "var(--s54-mint)",
ink: "var(--s54-ink)",
}[variant];
const color = variant === "coral" || variant === "ink" ? "#fff" : "var(--s54-ink)";
const sz = size === "lg" ? { height: 56, padding: "0 28px", fontSize: 16 }
: size === "sm" ? { height: 36, padding: "0 16px", fontSize: 13 }
: { height: 44, padding: "0 22px", fontSize: 14 };
const Tag = href ? "a" : "button";
return (
{ e.currentTarget.style.transform = "scale(1.05)"; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = "scale(1)"; }}
onMouseDown={(e) => { e.currentTarget.style.transform = "translate(2px,2px)"; e.currentTarget.style.boxShadow = "3px 3px 0 0 var(--s54-ink)"; }}
onMouseUp={(e) => { e.currentTarget.style.transform = "scale(1.05)"; e.currentTarget.style.boxShadow = "6px 6px 0 0 var(--s54-ink)"; }}
{...rest}
>
{children}
);
}
function IconBadge({ tone = "coral", size = 40, children, style = {} }) {
const bg = {
coral: "var(--s54-coral)", mint: "var(--s54-mint)",
gold: "var(--s54-gold)", lavender: "var(--s54-lavender)",
white: "var(--s54-white)", ink: "var(--s54-ink)",
}[tone] || tone;
const color = tone === "coral" || tone === "ink" ? "#fff" : "var(--s54-ink)";
return (
{children}
);
}
function Highlight({ children, color = "var(--s54-gold)" }) {
return (
{children}
);
}
function Header({ logo }) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 30);
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
function Countdown({ target = "2026-06-19T09:00:00+08:00", color = "var(--s54-ink)" }) {
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const ms = Math.max(0, new Date(target).getTime() - now);
const d = Math.floor(ms / 86400000);
const h = Math.floor((ms % 86400000) / 3600000);
const m = Math.floor((ms % 3600000) / 60000);
const s = Math.floor((ms % 60000) / 1000);
const units = [["Days", d], ["Hours", h], ["Minutes", m], ["Seconds", s]];
return (
{units.map(([label, val]) => (
{String(val).padStart(2, "0")}
{label}
))}