// Countdown — ticks every second to FIFA World Cup 2026 kickoff.
// Opening match: June 11, 2026 — Estadio Azteca, Mexico City.
window.Countdown = function Countdown() {
  const target = React.useMemo(() => new Date("2026-06-11T17:00:00-05:00").getTime(), []);
  const [now, setNow] = React.useState(() => Date.now());

  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  const diff = Math.max(0, target - 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 pad = (n, w = 2) => String(n).padStart(w, "0");

  return (
    <div className="countdown">
      <div className="countdown__head">
        <span className="countdown__title">Kickoff · Opening match</span>
        <span className="countdown__live"><span className="dot" /> Live</span>
      </div>
      <div className="countdown__grid">
        <div className="countdown__cell">
          <span className="countdown__num">{pad(days, 2)}</span>
          <span className="countdown__lbl">Days</span>
        </div>
        <div className="countdown__cell">
          <span className="countdown__num">{pad(hours)}</span>
          <span className="countdown__lbl">Hours</span>
        </div>
        <div className="countdown__cell">
          <span className="countdown__num">{pad(mins)}</span>
          <span className="countdown__lbl">Minutes</span>
        </div>
        <div className="countdown__cell">
          <span className="countdown__num">{pad(secs)}</span>
          <span className="countdown__lbl">Seconds</span>
        </div>
      </div>
      <div className="countdown__foot">
        <span>Thu, <strong>June 11, 2026</strong> · Estadio Azteca</span>
        <span>104 matches · 16 host cities · 48 nations</span>
      </div>
    </div>
  );
};