// HomeStickyZip — the shared compact conversion "sticky ZIP bar" that slides in
// from the top on scroll (once the page hero has scrolled out of view). This is
// the SINGLE implementation used by BOTH the homepage and the Texas Rates page,
// so the two are identical. Extracted verbatim from the former inline homepage
// version; self-contained (the pin icon and the scroll-to-plans action are inlined
// here) so it has no page-specific dependencies.
//
// Styling lives in home.css under `.home-page .home-sticky*` (desktop-only, fixed
// to the top, z-index 60), so render <HomeStickyZip/> inside a `.home-page` wrapper
// and load home.css on the page. The submit/CTA scrolls to the Featured Plans
// section (#recommended-plans), which exists on both pages via <HomePlans/>.
function HomeStickyZip() {
  const [visible, setVisible] = React.useState(false);
  const [zip, setZip] = React.useState('');

  React.useEffect(() => {
    const onScroll = () => {
      const hero = document.querySelector('.home-hero');
      if (hero) setVisible(hero.getBoundingClientRect().bottom < 0);
      else setVisible(window.scrollY > 600);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const onSubmit = (e) => {
    e.preventDefault();
    const el = document.getElementById('recommended-plans');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className={'home-sticky' + (visible ? ' is-visible' : '')} aria-hidden={!visible}>
      <div className="home-sticky__inner">
        <a className="home-sticky__logo" href="/" aria-label="Power Texas" tabIndex={visible ? 0 : -1}>
          <img src="assets/logo-colored.svg" alt="Power Texas" />
        </a>
        <a className="home-sticky__phone" href="tel:+18005550000" tabIndex={visible ? 0 : -1}>
          <svg className="home-sticky__phone-ico" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.6 3h-2A1.6 1.6 0 0 0 3 4.6C3 13.06 9.94 20 18.4 20a1.6 1.6 0 0 0 1.6-1.6v-2a1 1 0 0 0-.76-.97l-3-.75a1 1 0 0 0-1 .34l-.66.82A12.3 12.3 0 0 1 8.9 9.4l.82-.66a1 1 0 0 0 .34-1l-.75-3A1 1 0 0 0 8.34 4Z" /></svg>
          <span>(800) 555-0000</span>
        </a>
        <form className="home-sticky__form" onSubmit={onSubmit}>
          <label htmlFor="home-sticky-zip" className="home-sr">Enter ZIP Code</label>
          <div className="home-sticky__field">
            <span className="home-sticky__pin" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" /><circle cx="12" cy="10" r="3" /></svg>
            </span>
            <input
              id="home-sticky-zip"
              className="home-sticky__input"
              type="text"
              inputMode="numeric"
              maxLength={5}
              placeholder="Enter ZIP Code"
              value={zip}
              onChange={(e) => setZip(e.target.value.replace(/\D/g, '').slice(0, 5))}
              tabIndex={visible ? 0 : -1}
            />
          </div>
          <button type="submit" className="home-sticky__btn" tabIndex={visible ? 0 : -1}>Compare Plans <span aria-hidden="true">&rarr;</span></button>
        </form>
      </div>
    </div>
  );
}

window.HomeStickyZip = HomeStickyZip;