// STICKY BOTTOM BAR with countdown
function StickyBar() {
  const target = new Date("2026-05-07T09:00:00+05:30").getTime();
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  let diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000); diff -= d * 86400000;
  const h = Math.floor(diff / 3600000);  diff -= h * 3600000;
  const m = Math.floor(diff / 60000);    diff -= m * 60000;
  const s = Math.floor(diff / 1000);
  const pad = (n) => String(n).padStart(2, "0");

  return (
    <div className="fixed bottom-0 inset-x-0 z-50">
      <div className="mx-auto max-w-[1320px] px-3 lg:px-6 pb-3 lg:pb-4">
        <div className="glass-strong rounded-2xl shadow-[0_-20px_60px_-30px_rgba(0,0,0,0.7)] overflow-hidden">

          {/* ── MOBILE layout (< lg) ── */}
          <div className="lg:hidden px-4 py-3 flex flex-col items-center gap-2">
            {/* Locations row — one line, no label */}
            <div className="flex items-center gap-2 text-[11px] text-white/90 font-medium">
              <span className="w-1.5 h-1.5 rounded-full bg-teal animate-pulse shrink-0" />
              <span className="whitespace-nowrap">07 May · Ahmedabad</span>
              <span className="text-mute/40">|</span>
              <span className="whitespace-nowrap">09 May · Mumbai</span>
            </div>
            {/* Countdown + CTA */}
            <div className="flex items-center justify-between gap-2 w-full">
              <div className="flex items-center gap-1">
                <Cell label="Days" v={pad(d)} small />
                <Sep small />
                <Cell label="Hrs" v={pad(h)} small />
                <Sep small />
                <Cell label="Min" v={pad(m)} small />
                <Sep small />
                <Cell label="Sec" v={pad(s)} accent small />
              </div>
              <a href="#tickets" className="btn-primary inline-flex items-center gap-1 rounded-xl px-3 py-2 text-[12px] whitespace-nowrap shrink-0">
                Book seat
                <Icon.ArrowRight size={12} strokeWidth={2.4} />
              </a>
            </div>
          </div>

          {/* ── DESKTOP layout (≥ lg) ── */}
          <div className="hidden lg:flex items-center gap-6 px-6 py-3.5">
            {/* Left label */}
            <div className="flex items-center gap-2.5 min-w-0 shrink">
              <span className="w-2 h-2 rounded-full bg-teal animate-pulse shadow-glow shrink-0" />
              <div className="leading-tight min-w-0">
                <div className="text-[10px] uppercase tracking-[0.18em] text-mute">Pricing closes in</div>
                <div className="flex items-center gap-x-2 mt-0.5">
                  <span className="text-[11px] text-white/90 font-medium whitespace-nowrap">📍 07 May · Ahmedabad</span>
                  <span className="text-mute/40 text-[10px]">|</span>
                  <span className="text-[11px] text-white/90 font-medium whitespace-nowrap">📍 09 May · Mumbai</span>
                  <span className="text-mute/40 text-[10px]">|</span>
                  <span className="text-[10px] text-mute/80 whitespace-nowrap">9 AM – 6 PM</span>
                </div>
              </div>
            </div>
            {/* Countdown */}
            <div className="flex items-center gap-3 ml-auto">
              <Cell label="Days" v={pad(d)} />
              <Sep />
              <Cell label="Hrs" v={pad(h)} />
              <Sep />
              <Cell label="Min" v={pad(m)} />
              <Sep />
              <Cell label="Sec" v={pad(s)} accent />
            </div>
            {/* CTA */}
            <a href="#tickets" className="btn-primary inline-flex items-center gap-2 rounded-xl px-5 py-3 text-[14px]">
              Book your seat
              <Icon.ArrowRight size={16} strokeWidth={2.4} />
            </a>
          </div>

        </div>
      </div>
    </div>
  );

}

function Cell({ label, v, accent, small }) {
  return (
    <div className={"text-center " + (small ? "min-w-[32px]" : "min-w-[44px]")}>
      <div className={"num-tabular font-semibold tracking-tight leading-none " +
        (accent
          ? (small ? "text-teal text-[16px]" : "text-teal text-[20px] lg:text-[22px]")
          : (small ? "text-white text-[16px]" : "text-white text-[20px] lg:text-[22px]"))
      }>
        {v}
      </div>
      <div className="text-[8px] lg:text-[10px] uppercase tracking-[0.15em] text-mute mt-0.5">{label}</div>
    </div>
  );
}
function Sep({ small }) {
  return <span className={"text-mute/40 leading-none -mt-3 " + (small ? "text-[14px]" : "text-[18px]")}>:</span>;
}

window.StickyBar = StickyBar;