// HomeMobileCta — the shared mobile-only fixed "Compare Plans" CTA that slides up
// from the bottom once the hero's ZIP button and the closing CTA are both off
// screen, and hides again when either returns (or the mobile nav drawer opens).
// SINGLE implementation used by BOTH the homepage and the Texas Rates page.
// Extracted verbatim from the former inline homepage version; self-contained
// (the arrow icon and the scroll-to-plans action are inlined here).
//
// Styling lives in home.css under `.home-page .home-mobile-cta*` (mobile-only,
// fixed to the bottom; suppressed while `.site-nav__drawer.is-open`), so render
// inside a `.home-page` wrapper and load home.css on the page.
// The observed hero button is `.home-hero .home-zip__btn` on the homepage, falling
// back to the first `.home-zip__btn` on pages without `.home-hero` (e.g. Texas),
// so the homepage keeps observing exactly the same element as before.
function HomeMobileCta() {
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const heroBtn = document.querySelector('.home-hero .home-zip__btn') || document.querySelector('.home-zip__btn');
const targets = [heroBtn, document.querySelector('.home-cta')].filter(Boolean);
if (!targets.length) return;
const onScreen = new Set();
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) onScreen.add(e.target); else onScreen.delete(e.target); });
setVisible(onScreen.size === 0);
}, { threshold: 0 });
targets.forEach((t) => io.observe(t));
return () => io.disconnect();
}, []);
const onClick = () => {
const el = document.getElementById('recommended-plans');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
return (
);
}
window.HomeMobileCta = HomeMobileCta;