// Strategic inline CTAs + sticky floating CTA

/* ---------- Inline CTA banner (variants) ---------- */
const CTABanner = ({ variant = 'spotlight' }) => {
  const { t } = useI18n();
  const cfg = {
    spotlight: {
      eyebrow: t('ctaBanner.eyebrow'),
      title: <>{t('ctaBanner.titlePre')}<span className="grad-text">{t('ctaBanner.titleGrad')}</span></>,
      sub: t('ctaBanner.sub'),
      btn: t('cta.applyLong'),
      accent: 'rgba(124,92,255,0.18)',
      border: 'rgba(124,92,255,0.35)',
      halo: 'radial-gradient(circle, rgba(124,92,255,0.28), transparent 60%)'
    },
    urgency: {
      eyebrow: t('ctaBannerU.eyebrow'),
      title: <>{t('ctaBannerU.title')}</>,
      sub: t('ctaBannerU.sub'),
      btn: t('ctaBannerU.btn'),
      accent: 'rgba(255,110,199,0.16)',
      border: 'rgba(255,110,199,0.35)',
      halo: 'radial-gradient(circle, rgba(255,110,199,0.28), transparent 60%)'
    }
  }[variant];

  return (
    <section className="section" style={{ paddingTop: 40, paddingBottom: 40 }}>
      <div className="container">
        <div className="cta-banner reveal" style={{
          position: 'relative', overflow: 'hidden',
          padding: '36px 40px',
          borderRadius: 'var(--r-lg)',
          background: `linear-gradient(180deg, ${cfg.accent}, var(--surface) 110%)`,
          border: `1px solid ${cfg.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 32, flexWrap: 'wrap'
        }}>
          {/* halo */}
          <div aria-hidden="true" style={{
            position: 'absolute', width: 480, height: 480,
            top: -260, right: -100, borderRadius: '50%',
            background: cfg.halo, filter: 'blur(60px)', pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative', zIndex: 1, flex: '1 1 460px', minWidth: 280 }}>
            <h3 style={{
              margin: '0 0 8px',
              fontSize: 'clamp(26px, 2.6vw, 38px)',
              fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.025em'
            }}>
              {cfg.title}
            </h3>
            <p style={{ margin: 0, color: 'var(--text-dim)', fontSize: 15, lineHeight: 1.5 }}>
              {cfg.sub}
            </p>
          </div>
          <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, flexShrink: 0 }}>
            <a href="inscricao.html" className="btn btn-primary" style={{ fontSize: 15, padding: '14px 26px', whiteSpace: 'nowrap' }}>
              {cfg.btn} <Icon name="arrow-right" size={14} />
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
        @media (max-width: 700px) {
          .cta-banner { padding: 28px 24px !important; }
          .cta-banner > div:last-child { align-items: flex-start !important; }
        }
      `}</style>
    </section>);

};

/* ---------- Sticky floating CTA ---------- */
const StickyCTA = () => {
  const { t } = useI18n();
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const hero = document.getElementById('top');
      const pricing = document.getElementById('pricing');
      const footer = document.querySelector('footer');
      const min = hero ? hero.offsetHeight * 0.85 : 600;
      const pricingTop = pricing ? pricing.getBoundingClientRect().top + window.scrollY : Infinity;
      const footerTop = footer ? footer.getBoundingClientRect().top + window.scrollY : Infinity;
      // Show after scrolling past hero, hide near pricing or footer
      setVisible(y > min && y + window.innerHeight * 0.9 < Math.min(pricingTop, footerTop));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <a
      href="inscricao.html"
      className={`sticky-cta ${visible ? 'is-visible' : ''}`}
      aria-hidden={!visible}
      style={{
        position: 'fixed',
        bottom: 24,
        right: 24,
        zIndex: 40,
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '12px 18px 12px 14px',
        borderRadius: 999,
        background: 'var(--grad-cta)',
        color: 'white',
        fontWeight: 600,
        fontSize: 14,
        boxShadow: '0 14px 36px -8px rgba(255,94,168,0.55)',
        textDecoration: 'none',
        transform: visible ? 'translateY(0)' : 'translateY(20px)',
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? 'auto' : 'none',
        transition: 'transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, box-shadow 0.25s ease'
      }}>
      
      <span style={{
        width: 28, height: 28, borderRadius: '50%',
        background: 'rgba(255,255,255,0.18)', display: 'grid', placeItems: 'center'
      }}>
        <Icon name="sparkles" size={14} />
      </span>
      {t('cta.applyLong')}
      <Icon name="arrow-right" size={14} />
    </a>);

};

Object.assign(window, { CTABanner, StickyCTA });