/* shared.jsx — store badges, reveal hook, small helpers → window */
(function(){
  const { useState, useEffect, useRef } = React;
  const I = window.Icons;

  // entrance animation — scroll-gated so initial/above-fold content is never
  // hidden (animation only runs for elements the user scrolls down to)
  function useReveal(){
    useEffect(()=>{
      let io = null, started = false;
      const start = ()=>{
        if(started) return; started = true;
        const els = [...document.querySelectorAll('.reveal:not(.anim)')];
        io = new IntersectionObserver((entries)=>{
          entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('anim'); io.unobserve(e.target);} });
        },{threshold:.12, rootMargin:'0px 0px -10% 0px'});
        // anything already on screen at first scroll stays static-visible
        const vh = window.innerHeight || 800;
        els.forEach(el=>{ const r = el.getBoundingClientRect(); if(r.top >= vh) io.observe(el); });
      };
      window.addEventListener('scroll', start, {passive:true, once:true});
      return ()=>{ window.removeEventListener('scroll', start); if(io) io.disconnect(); };
    },[]);
  }

  function StoreBadges({stores='both', soon=false}){
    const [tapped,setTapped] = useState(null);
    const badge = (key, Ico, small, big)=>(
      <a className={'store'+(tapped===key?' tapped':'')} href="#download"
        onClick={(e)=>{e.preventDefault(); setTapped(key);}}>
        <Ico/>
        <span className="st-txt"><small>{small}</small><b>{big}</b></span>
        {soon && <span className="badge-soon">SOON</span>}
        <span className="store-coming" aria-hidden="true">Coming soon</span>
      </a>
    );
    return (
      <div className="stores">
        {badge('apple', I.Apple, 'Download on the', 'App Store')}
        {badge('play', I.Play, 'Get it on', 'Google Play')}
      </div>
    );
  }

  function SectionHead({label, title, intro}){
    return (
      <div className="reveal">
        {label && <div className="sec-label"><span className="eyebrow">{label}</span></div>}
        <h2 className="sec-title">{title}</h2>
        {intro && <p className="sec-intro">{intro}</p>}
      </div>
    );
  }

  Object.assign(window, { useReveal, StoreBadges, SectionHead });
})();