// Atoms. Button + small icons + section header + dot strip

function Button({ children, variant = 'primary', size = '', href, onClick, type = 'button', ...rest }) {
  const cls = `btn ${variant === 'ghost' ? 'btn--ghost' : variant === 'ghost-gold' ? 'btn--ghost-gold' : ''} ${size === 'sm' ? 'btn--sm' : size === 'lg' ? 'btn--lg' : ''}`.trim();
  if (href) return <a className={cls} href={href} onClick={onClick} {...rest}>{children}</a>;
  return <button className={cls} type={type} onClick={onClick} {...rest}>{children}</button>;
}

function Eyebrow({ children, tone = 'gold', rules = true, style }) {
  const cls = `eyebrow ${tone === 'crimson' ? 'eyebrow--crimson' : tone === 'cream' ? 'eyebrow--cream' : ''}`;
  return (
    <p className={cls} style={style}>
      {rules && <span className="rule"/>}
      <span>{children}</span>
      {rules && <span className="rule"/>}
    </p>
  );
}

// Single dot-strip divider, animated on enter
function DotStrip() {
  return (
    <Reveal as="div" className="dot-strip dot-strip-anim" threshold={0.05}>
      <span/>
    </Reveal>
  );
}

// ----- Service icons (sacred geometry, gold stroke) -----
function ServiceIcon({ name }) {
  const c = "#C9951A";
  const props = { width: 44, height: 44, viewBox: "0 0 44 44", fill: "none", stroke: c, strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'light': // Light language. radiant star + circle
      return (<svg {...props}><circle cx="22" cy="22" r="6"/><g opacity="0.9"><line x1="22" y1="2" x2="22" y2="10"/><line x1="22" y1="34" x2="22" y2="42"/><line x1="2" y1="22" x2="10" y2="22"/><line x1="34" y1="22" x2="42" y2="22"/><line x1="8" y1="8" x2="13" y2="13"/><line x1="31" y1="31" x2="36" y2="36"/><line x1="36" y1="8" x2="31" y2="13"/><line x1="13" y1="31" x2="8" y2="36"/></g></svg>);
    case 'chakra': // 7-circle vertical chakra column
      return (<svg {...props}><line x1="22" y1="3" x2="22" y2="41"/>{[5,11,17,23,29,35,41].map((y,i)=><circle key={i} cx="22" cy={y-2} r="2.5"/>)}</svg>);
    case 'sound': // concentric wave arcs
      return (<svg {...props}><circle cx="22" cy="22" r="3" fill={c} stroke="none"/><path d="M11 22 a 11 11 0 0 1 22 0" /><path d="M7 22 a 15 15 0 0 1 30 0" /><path d="M3 22 a 19 19 0 0 1 38 0" /></svg>);
    case 'block': // a "removing blockage". circle with diagonal break
      return (<svg {...props}><circle cx="22" cy="22" r="14"/><path d="M12 12 L 32 32" strokeWidth="2"/><path d="M16 30 L 28 18" strokeOpacity="0.6"/></svg>);
    case 'surgery': // hexagram (six-pointed star)
      return (<svg {...props}><polygon points="22,4 36.5,30 7.5,30"/><polygon points="22,40 7.5,14 36.5,14"/></svg>);
    case 'shield': // protection. sacred shield
      return (<svg {...props}><path d="M22 4 L36 10 V22 C36 31 22 40 22 40 C22 40 8 31 8 22 V10 Z"/><path d="M16 20 L21 26 L30 16" /></svg>);
    case 'clear': // parasitic clearing. triangle with eye
      return (<svg {...props}><polygon points="22,5 39,38 5,38"/><circle cx="22" cy="28" r="3.5"/><circle cx="22" cy="28" r="1.2" fill={c} stroke="none"/></svg>);
    case 'nervous': // wave / frequency
      return (<svg {...props}><path d="M3 22 Q 9 8, 15 22 T 27 22 T 39 22" /><path d="M3 30 Q 11 22, 19 30 T 35 30" strokeOpacity="0.5"/></svg>);
    case 'multi': // dimensional. concentric squares rotated
      return (<svg {...props}><rect x="6" y="6" width="32" height="32" transform="rotate(45 22 22)"/><rect x="11" y="11" width="22" height="22" /><circle cx="22" cy="22" r="3" fill={c} stroke="none"/></svg>);
    case 'house': // home + sacred geometry overlay
      return (<svg {...props}><path d="M6 22 L22 6 L38 22 V36 H6 Z" /><circle cx="22" cy="26" r="6"/><polygon points="22,20 26.5,30 17.5,30"/></svg>);
    default: return <svg {...props}><circle cx="22" cy="22" r="14"/></svg>;
  }
}

window.Button = Button;
window.Eyebrow = Eyebrow;
window.DotStrip = DotStrip;
window.ServiceIcon = ServiceIcon;