/* 6ix Mela — countdown band (shared logic for homepage + waitlist) */
const MELA_TARGET = new Date('2026-09-12T16:00:00-04:00').getTime();
function useCountdown(target) {
  const calc = () => {
    const d = Math.max(0, target - Date.now());
    return { d: Math.floor(d / 864e5), h: Math.floor(d / 36e5) % 24, m: Math.floor(d / 6e4) % 60, s: Math.floor(d / 1e3) % 60 };
  };
  const [t, setT] = React.useState(calc());
  React.useEffect(() => { const id = setInterval(() => setT(calc()), 1000); return () => clearInterval(id); }, []);
  return t;
}
const pad2 = (n) => String(n).padStart(2, '0');

function CountBand({ onTickets }) {
  const t = useCountdown(MELA_TARGET);
  return (
    <section className="countband" id="countdown">
      <div className="cb-glow"></div>
      <div className="countband-inner">
        <span className="eyebrow">Doors 4 PM · Sat Sep 12 · '26 · Sobeys Stadium</span>
        <h2>The 6ix Goes Off In</h2>
        <div className="count">
          <div className="cd"><div className="v">{pad2(t.d)}</div><div className="l">Days</div></div>
          <div className="cd"><div className="v">{pad2(t.h)}</div><div className="l">Hours</div></div>
          <div className="cd"><div className="v">{pad2(t.m)}</div><div className="l">Mins</div></div>
          <div className="cd"><div className="v">{pad2(t.s)}</div><div className="l">Secs</div></div>
        </div>
        <div className="cb-cta">
          <button className="btn btn-primary btn-lg" onClick={onTickets}>Get Tickets <Icon name="arrow-up-right" size={18} /></button>
        </div>
      </div>
    </section>
  );
}
window.CountBand = CountBand;
window.useCountdown = useCountdown;
window.MELA_TARGET = MELA_TARGET;
window.pad2 = pad2;