function SXButton({ children, onClick, block, disabled, style, variant = 'primary' }) {
  const [hov, setHov] = React.useState(false);
  const base = { display: block ? 'flex' : 'inline-flex', width: block ? '100%' : 'auto', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '15px 28px', fontSize: 15, fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, letterSpacing: '0.02em', borderRadius: 9999, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.4 : 1, border: 'none', transition: 'transform .15s,box-shadow .2s,opacity .2s', transform: hov && !disabled ? 'translateY(-1px)' : 'none' };
  const variants = {
    primary: { background: 'linear-gradient(135deg,#7B3FF2,#FF1675)', color: '#fff', boxShadow: hov && !disabled ? '0 0 32px rgba(123,63,242,.55)' : '0 0 16px rgba(123,63,242,.3)' },
    secondary: { background: hov ? 'rgba(255,255,255,.06)' : 'transparent', color: '#EFEFEF', border: '1px solid rgba(255,255,255,.18)' },
  };
  return <button type="button" disabled={disabled} onClick={disabled ? undefined : onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ ...base, ...variants[variant], ...style }}>{children}</button>;
}

function useCountdown() {
  const [msLeft, setMsLeft] = React.useState(0);
  React.useEffect(() => {
    const key = 'sx-combo-deadline';
    let deadline = Number(localStorage.getItem(key));
    if (!deadline || deadline < Date.now()) { deadline = Date.now() + 24 * 3600 * 1000; localStorage.setItem(key, String(deadline)); }
    const tick = () => setMsLeft(Math.max(0, deadline - Date.now()));
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  const h = Math.floor(msLeft / 3600000);
  const m = Math.floor((msLeft % 3600000) / 60000);
  const s = Math.floor((msLeft % 60000) / 1000);
  return { h, m, s };
}

function CountdownDigits() {
  const { h, m, s } = useCountdown();
  const pad = n => String(n).padStart(2, '0');
  return (
    <div style={{ display: 'flex', gap: 10, justifyContent: 'center', fontFamily: "'Space Grotesk', sans-serif" }}>
      {[[pad(h), 'H'], [pad(m), 'M'], [pad(s), 'S']].map(([v, l], i) => (
        <span key={i} style={{ fontSize: 34, fontWeight: 700, color: '#EFEFEF' }}>{v}<span style={{ fontSize: 16, color: '#FF4D97', marginLeft: 2 }}>{l}</span></span>
      ))}
    </div>
  );
}

window.SXButton = SXButton;
window.useCountdown = useCountdown;
window.CountdownDigits = CountdownDigits;