/* MobileCta — a sticky bottom action bar that appears on small screens after the
   user scrolls past the hero. Quick path to the two highest-value actions.
   Hidden on desktop (the header nav covers it there). */
function MobileCta({ lang }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 560);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="oasis-mobile-cta" style={{
      position: 'fixed', left: 12, right: 12, bottom: 12, zIndex: 60,
      display: 'flex', gap: 10,
      transform: show ? 'translateY(0)' : 'translateY(140%)',
      opacity: show ? 1 : 0,
      transition: 'transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out)',
    }}>
      <a href="#estimate" style={ctaStyle('var(--gold-500)', 'var(--forest-900)')}>
        <Icon name="Calculator" size={18} stroke="var(--forest-900)" strokeWidth={2.4} />
        {t(lang, 'How much?', '¿Cuánto?')}
      </a>
      <a href="#apply" style={ctaStyle('var(--forest-700)', 'var(--cream-50)')}>
        <Icon name="FileText" size={18} stroke="var(--cream-50)" strokeWidth={2.4} />
        {t(lang, 'Apply now', 'Solicitar')}
      </a>
    </div>
  );
}
function ctaStyle(bg, fg) {
  return {
    flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    padding: '16px 12px', borderRadius: 'var(--radius-pill)', textDecoration: 'none',
    background: bg, color: fg, fontFamily: 'var(--font-body)', fontWeight: 800,
    fontSize: 'var(--fs-small)', boxShadow: 'var(--shadow-lg)',
  };
}
Object.assign(window, { MobileCta });