/* 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}){
    return (
      <div className="stores">
        <a className="store" href="#download" onClick={(e)=>e.preventDefault()}>
          <I.Apple/>
          <span className="st-txt"><small>Download on the</small><b>App Store</b></span>
          {soon && <span className="badge-soon">SOON</span>}
        </a>
        <a className="store" href="#download" onClick={(e)=>e.preventDefault()}>
          <I.Play/>
          <span className="st-txt"><small>Get it on</small><b>Google Play</b></span>
          {soon && <span className="badge-soon">SOON</span>}
        </a>
      </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 });
})();