/* Shared hooks + SVG helpers used across section components.
   This script runs first (before any section file) and registers everything
   on window.AAS so other files can pull what they need. */

const { useState: useState_shared, useEffect: useEffect_shared } = React;

/* Single source of breakpoint truth. Components branch off these flags so
   layouts collapse cleanly without touching the global stylesheet.
   isXs : <480px (small phone)
   isSm : <640px (phone)
   isMd : <960px (tablet / small laptop)
   isLg : <1240px (below container max-width) */
const useViewport = () => {
  const [w, setW] = useState_shared(typeof window !== 'undefined' ? window.innerWidth : 1240);
  useEffect_shared(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return { w, isXs: w < 480, isSm: w < 640, isMd: w < 960, isLg: w < 1240 };
};

/* Hand-drawn SVG helpers */
const ArrowLeft = ({ w = 160 }) => (
  <svg width={w} height={w*0.36} viewBox="0 0 160 60" fill="none" style={{display:'block'}}>
    <path d="M5 35 C 35 10, 80 5, 145 28" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
    <path d="M135 18 L 148 28 L 138 38" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </svg>
);

const ArrowRight = ({ w = 160 }) => (
  <svg width={w} height={w*0.36} viewBox="0 0 160 60" fill="none" style={{display:'block', transform:'scaleX(-1)'}}>
    <path d="M5 35 C 35 10, 80 5, 145 28" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
    <path d="M135 18 L 148 28 L 138 38" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </svg>
);

const Squiggle = ({ w = 120, color = 'currentColor' }) => (
  <svg width={w} height="14" viewBox="0 0 120 14" fill="none">
    <path d="M2 8 Q 12 2, 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 118 8" stroke={color} strokeWidth="1.5" fill="none" strokeLinecap="round"/>
  </svg>
);

const StarSpark = ({ size = 18, color = '#1a1a1a' }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
    <path d="M10 1 L11.6 8.4 L19 10 L11.6 11.6 L10 19 L8.4 11.6 L1 10 L8.4 8.4 Z" fill={color}/>
  </svg>
);

window.AAS = window.AAS || {};
Object.assign(window.AAS, { useViewport, ArrowLeft, ArrowRight, Squiggle, StarSpark });