const ARMS = {
  wave: { r: { d: 'M246 168c22-6 40-22 44-46', h: [294, 116], cls: 'm-wave' }, l: { d: 'M96 154c-20 4-30 24-28 44', h: [66, 206] } },
  guide: { r: { d: 'M248 172c24 8 36 32 34 56', h: [280, 240], cls: 'm-point' }, l: { d: 'M96 154c-20 4-30 24-28 44', h: [66, 206] } },
  cheer: { r: { d: 'M246 168c22-6 40-22 44-46', h: [294, 116], cls: 'm-wave' }, l: { d: 'M58 166c-20-6-36-22-40-44', h: [16, 118], cls: 'm-wave-l' } },
  rest: { r: { d: 'M248 162c20 8 30 26 28 46', h: [274, 226] }, l: { d: 'M96 154c-20 4-30 24-28 44', h: [66, 206] } }
};
const SPARKS = {
  default: [[22, 96, 'var(--lime-400)', ''], [312, 210, 'var(--coral-500)', 'spark2'], [296, 62, 'var(--sky-300)', 'spark3']],
  cheer: [[300, 246, 'var(--lime-400)', ''], [36, 252, 'var(--coral-500)', 'spark2']]
};
function Sparks({ pose }) {
  const list = SPARKS[pose] || SPARKS.default;
  return <g>{list.map(([x, y, fill, cls]) => (
    <path key={x + '-' + y} className={'spark ' + cls} d={`M${x} ${y}l7 17 17 7-17 7-7 17-7-17-17-7 17-7z`} fill={fill} strokeWidth="4"/>
  ))}</g>;
}
function Arm({ a }) {
  if (!a) return null;
  return (
    <g className={a.cls || undefined}>
      <path d={a.d} fill="none" strokeWidth="13"/>
      <circle cx={a.h[0]} cy={a.h[1]} r="16" fill="var(--white)"/>
    </g>
  );
}
function Mascot({ pose = 'wave', label, bob = true, sparks = true, className = '', style }) {
  const arms = ARMS[pose] || ARMS.wave;
  return (
    <svg className={'fig ' + (bob ? 'bob ' : '') + className} style={style} viewBox="0 0 340 350" role="img" aria-label={label || 'A smiling tooth mascot'}>
      <g stroke="var(--ink-900)" strokeWidth="5" strokeLinejoin="round" strokeLinecap="round">
        {sparks && <Sparks pose={pose}/>}
        <Arm a={arms.r}/>
        <Arm a={arms.l}/>
        <path d="M48 78C48 34 96 12 150 12s102 22 102 66c0 54-18 82-30 138-9 40-24 76-46 76-16 0-22-28-26-56-4 28-10 56-26 56-22 0-37-36-46-76C66 160 48 132 48 78Z" fill="var(--white)"/>
        <path d="M84 60c14-14 36-20 56-19" fill="none" strokeWidth="9" stroke="var(--green-100)"/>
        <circle cx="92" cy="150" r="15" fill="var(--pink-300)" strokeWidth="0"/>
        <circle cx="208" cy="150" r="15" fill="var(--pink-300)" strokeWidth="0"/>
        <g className="m-eyes" fill="var(--ink-900)" strokeWidth="0">
          <ellipse cx="122" cy="118" rx="11" ry="13"/>
          <ellipse cx="178" cy="118" rx="11" ry="13"/>
        </g>
        <path d="M126 158q24 24 48 0" fill="none" strokeWidth="9"/>
      </g>
    </svg>
  );
}
/* scroll reveal helpers */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in),.words:not(.in)');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
    }, { rootMargin: '0px 0px -12% 0px', threshold: 0.15 });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}
function Words({ text, className = '', tag = 'span' }) {
  const parts = String(text).split(' ');
  return React.createElement(tag, { className: 'words ' + className },
    parts.map((w, i) => <span key={i} style={{ '--i': i }}>{w}{i < parts.length - 1 ? ' ' : ''}</span>));
}
function SecHead({ kicker, title, accent, lede, style }) {
  return (
    <div className="sec-head" style={style}>
      <div className="kicker reveal">{kicker}</div>
      <h2 className="sh"><Words text={title}/>{accent ? <em> {accent}</em> : null}</h2>
      {lede && <p className="lede reveal" style={{ '--d': '160ms' }}>{lede}</p>}
    </div>
  );
}
Object.assign(window, { Mascot, Words, SecHead, useReveal });