const CTA = ({ showUrgency = true }) => {
  const cc = L('cta');
  // urgency countdown — next month price reset
  const [time, setTime] = React.useState({ d:0, h:0, m:0, s:0 });

  React.useEffect(() => {
    const target = new Date();
    target.setDate(target.getDate() + 3);
    target.setHours(23, 59, 59, 0);
    const tick = () => {
      const diff = Math.max(0, target - new Date());
      const d = Math.floor(diff / 86400000);
      const h = Math.floor(diff / 3600000) % 24;
      const m = Math.floor(diff / 60000) % 60;
      const s = Math.floor(diff / 1000) % 60;
      setTime({ d, h, m, s });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="cta" className="section-pad" style={{ position:'relative', overflow:'hidden' }}>
      <div className="container">
        <div style={{
          position:'relative', overflow:'hidden',
          borderRadius:32,
          padding:'80px 60px',
          background:
            'radial-gradient(800px 500px at 20% 0%, rgba(0,228,122,0.18), transparent 60%),'+
            'radial-gradient(800px 500px at 90% 100%, rgba(0,228,122,0.12), transparent 60%),'+
            'linear-gradient(180deg, #0b1310, #060a08)',
          border:'1px solid rgba(0,228,122,0.25)',
          boxShadow:'0 40px 100px -30px rgba(0,228,122,0.4)',
          textAlign:'center'
        }} className="cta-box">
          <div className="grid-bg" style={{ opacity:0.4 }}/>

          {/* spark dots */}
          <div style={{ position:'absolute', inset:0, pointerEvents:'none' }}>
            {[
              { top:'15%', left:'10%' }, { top:'30%', right:'15%' },
              { bottom:'20%', left:'18%' }, { bottom:'30%', right:'10%' },
              { top:'60%', left:'45%' },
            ].map((s, i) => (
              <div key={i} style={{
                position:'absolute', ...s,
                width:5, height:5, borderRadius:'50%',
                background:'var(--green)',
                boxShadow:'0 0 12px var(--green-glow)',
                animation:`pulseDot 2.${i}s ease-in-out infinite`
              }}/>
            ))}
          </div>

          <div style={{ position:'relative' }}>
            {showUrgency && (
              <div className="chip" style={{ background:'rgba(255,181,71,0.08)', borderColor:'rgba(255,181,71,0.3)', color:'var(--amber)' }}>
                <Icon name="fire" size={13}/>
                {cc.urgency}
              </div>
            )}

            <h2 className="display" style={{ fontSize:'clamp(44px, 6vw, 88px)', margin:'28px 0 0', maxWidth:920, marginLeft:'auto', marginRight:'auto' }}>
              {cc.h2a}<br/>
              {cc.h2b} <span className="serif" style={{ color:'var(--green)' }}>{cc.word}</span>
            </h2>

            <p style={{ fontSize:18, color:'var(--ink-2)', marginTop:22, maxWidth:580, marginLeft:'auto', marginRight:'auto', lineHeight:1.55 }}>
              {cc.sub}
            </p>

            {/* countdown */}
            {showUrgency && (
              <div style={{
                display:'inline-flex', gap:14, marginTop:36, padding:'18px 24px',
                borderRadius:16, background:'rgba(0,0,0,0.35)', border:'1px solid var(--line)',
              }} className="countdown">
              {[
                [cc.days, time.d],
                [cc.hours, time.h],
                [cc.min, time.m],
                [cc.sec, time.s],
              ].map(([label, val], i) => (
                <React.Fragment key={label}>
                  <div style={{ textAlign:'center', minWidth:50 }}>
                    <div style={{
                      fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700,
                      fontSize:36, letterSpacing:'-0.04em', color:'var(--green)',
                      lineHeight:1
                    }}>
                      {String(val).padStart(2, '0')}
                    </div>
                    <div style={{ fontSize:10, color:'var(--ink-4)', marginTop:4, letterSpacing:'0.15em', fontFamily:"'Geist Mono',monospace" }}>
                      {label}
                    </div>
                  </div>
                  {i < 3 && <div style={{ alignSelf:'center', color:'var(--ink-4)', fontSize:24 }}>:</div>}
                </React.Fragment>
              ))}
              </div>
            )}

            <div style={{ display:'flex', gap:14, justifyContent:'center', marginTop:36, flexWrap:'wrap' }}>
              <a href="/signup" className="btn btn-primary btn-lg">
                {cc.ctaPrimary} <Icon name="arrow" size={16}/>
              </a>
              <a href="https://wa.me/5548996485048?text=Quero%20agendar%20uma%20demo%20da%20ZapFlux" target="_blank" rel="noopener" className="btn btn-ghost btn-lg">
                <Icon name="phone" size={14}/> {cc.ctaSecondary}
              </a>
            </div>

            <div style={{ marginTop:30, fontSize:13, color:'var(--ink-3)', display:'flex', justifyContent:'center', gap:24, flexWrap:'wrap' }}>
              {cc.trust.map((txt, i) => (
                <span key={i} style={{ display:'flex', gap:6, alignItems:'center' }}><Icon name="check" size={13} stroke="var(--green)"/> {txt}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width:680px) {
          .cta-box { padding: 50px 28px !important; }
          .countdown { padding: 14px 14px !important; gap: 8px !important; }
        }
      `}</style>
    </section>
  );
};

window.CTA = CTA;