// Sticky launch banner with countdown — urgency CRO lever
function LaunchBar() {
  // Promo ends Friday 22 May 2026, 23:59 Madrid time (CEST = UTC+2)
  const deadline = new Date('2026-05-22T23:59:00+02:00').getTime();
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => { document.body.classList.add('pl-has-bar'); return () => document.body.classList.remove('pl-has-bar'); }, []);

  let ms = Math.max(0, deadline - now);
  const d = Math.floor(ms / 86400000); ms -= d * 86400000;
  const h = Math.floor(ms / 3600000);  ms -= h * 3600000;
  const m = Math.floor(ms / 60000);    ms -= m * 60000;
  const s = Math.floor(ms / 1000);

  const Cell = ({ v, l }) => (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 3 }}>
      <b style={{ fontFamily: 'var(--pl-font-mono)', fontWeight: 700, fontSize: 13, color: '#fff', minWidth: 18, textAlign: 'right' }}>
        {String(v).padStart(2, '0')}
      </b>
      <span style={{ opacity: .7, fontSize: 11, fontWeight: 600 }}>{l}</span>
    </span>
  );

  return (
    <div className="pl-launchbar" style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 42, zIndex: 60,
      background: 'linear-gradient(90deg, #1a0d3a 0%, #3b1d8b 50%, #1a0d3a 100%)',
      color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      borderBottom: '1px solid rgba(255,255,255,.08)',
      fontSize: 13.5,
      gap: 16,
      padding: '0 12px',
    }}>
      <span className="pl-lb-price" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>
        <span className="pl-pill-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: '#fbbf24' }} />
        <b className="pl-lb-word" style={{ fontWeight: 700, letterSpacing: '.01em' }}>Lanzamiento</b>
        <span className="pl-lb-word" style={{ opacity: .8 }}>·</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
          <b className="pl-lb-word" style={{ textDecoration: 'line-through', opacity: .5, fontWeight: 600 }}>1.197€</b>
          <span className="pl-lb-word" style={{ opacity: .7 }}>→</span>
          <b style={{ color: '#fbbf24', fontWeight: 800, opacity: 1 }}>699€ Lifetime</b>
        </span>
      </span>
      <span className="pl-lb-sep" style={{ width: 1, height: 18, background: 'rgba(255,255,255,.15)' }} />
      <span className="pl-lb-count" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' }}>
        <span className="pl-lb-word" style={{ opacity: .7, fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em' }}>Acaba en</span>
        <Cell v={d} l="d" /> <Cell v={h} l="h" /> <Cell v={m} l="m" /> <Cell v={s} l="s" />
      </span>
      <a href="#planes" className="pl-btn pl-btn-sm pl-lb-cta" style={{
        background: '#fff', color: '#1a0d3a', padding: '6px 12px', fontSize: 12.5, marginLeft: 4, flex: '0 0 auto', whiteSpace: 'nowrap'
      }}>Quiero el lifetime →</a>
    </div>
  );
}
window.LaunchBar = LaunchBar;
