// Countdown.jsx — live ticker to wedding date

function Countdown({ target = '2026-05-03T18:00:00' }) {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, new Date(target).getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);

  const units = [
    { n: days, l: 'ngày' },
    { n: hours, l: 'giờ' },
    { n: mins, l: 'phút' },
    { n: secs, l: 'giây' },
  ];

  return (
    <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32 }}>
      {units.map((u, i) => (
        <div key={i} style={{
          background: 'rgba(255, 251, 244, 0.7)',
          backdropFilter: 'blur(8px)',
          border: '1.5px solid var(--pink-200)',
          borderRadius: 'var(--r-lg)',
          padding: '16px 20px',
          minWidth: 80,
          textAlign: 'center',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 400,
            color: 'var(--pink-700)', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
          }}>{String(u.n).padStart(2, '0')}</div>
          <div style={{
            fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 600,
            letterSpacing: '.18em', textTransform: 'uppercase',
            color: 'var(--fg-3)', marginTop: 6,
          }}>{u.l}</div>
        </div>
      ))}
    </div>
  );
}

window.Countdown = Countdown;