const countdownStyles = {
  bar: {
    background: 'var(--bg-2)',
    borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
    padding: '2.5rem 4rem',
    display: 'flex', justifyContent: 'center', gap: '4rem', flexWrap: 'wrap',
  },
  unit: { textAlign: 'center' },
  num: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '3rem', fontWeight: 300, lineHeight: 1,
    color: 'var(--gold)', display: 'block',
  },
  label: {
    fontSize: '0.65rem', letterSpacing: '.2em', textTransform: 'uppercase',
    color: 'var(--fg-muted)', marginTop: '.4rem', display: 'block',
  },
};

function Countdown({ target = '2026-06-23T18:00:00' }) {
  const [t, setT] = React.useState({ d: '—', h: '—', m: '—', s: '—' });
  React.useEffect(() => {
    const tgt = new Date(target);
    const tick = () => {
      const diff = tgt - new Date();
      if (diff <= 0) return setT({ d: '00', h: '00', m: '00', s: '00' });
      const pad = (n) => String(n).padStart(2, '0');
      setT({
        d: pad(Math.floor(diff / 86400000)),
        h: pad(Math.floor((diff % 86400000) / 3600000)),
        m: pad(Math.floor((diff % 3600000) / 60000)),
        s: pad(Math.floor((diff % 60000) / 1000)),
      });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [target]);
  return (
    <div className="countdown-bar" style={countdownStyles.bar}>
      {[['Giorni', t.d], ['Ore', t.h], ['Minuti', t.m], ['Secondi', t.s]].map(([l, n]) => (
        <div key={l} style={countdownStyles.unit}>
          <span className="countdown-num" style={countdownStyles.num}>{n}</span>
          <span style={countdownStyles.label}>{l}</span>
        </div>
      ))}
    </div>
  );
}

window.Countdown = Countdown;