/* Oasis SNAP Guide — shared helpers + Lucide icon wrapper.
   Exposed on window for the other babel scripts. */

// t(lang, en, es) → pick a string by language
function t(lang, en, es) { return lang === 'es' ? es : en; }

// Inline Lucide icon by name (uses the global lucide.icons map → svg)
function Icon({ name, size = 24, stroke = 'currentColor', strokeWidth = 2, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || !window.lucide) return;
    ref.current.innerHTML = '';
    const node = window.lucide.createElement(window.lucide.icons[name] || window.lucide.icons.Circle);
    node.setAttribute('width', size);
    node.setAttribute('height', size);
    node.setAttribute('stroke', stroke);
    node.setAttribute('stroke-width', strokeWidth);
    ref.current.appendChild(node);
  }, [name, size, stroke, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', ...style }} aria-hidden="true" />;
}

// Reveal — gentle entrance. Pure CSS keyframe (see kit.css .oasis-rise) so the
// content is ALWAYS in the DOM at full opacity as a base; the animation only
// adds movement under prefers-reduced-motion: no-preference. Robust in any embed.
function Reveal({ children, delay = 0, as = 'div', style = {} }) {
  const Tag = as;
  return (
    <Tag className="oasis-rise" style={{ animationDelay: delay + 'ms', ...style }}>{children}</Tag>
  );
}

// Section heading block (eyebrow + title + optional intro)
function SectionHead({ eyebrow, title, intro, center = false, onForest = false }) {
  return (
    <div style={{ maxWidth: 720, margin: center ? '0 auto' : 0, textAlign: center ? 'center' : 'left', marginBottom: 'var(--space-10)' }}>
      {eyebrow && <div className="oasis-eyebrow" style={{ color: onForest ? 'var(--gold-400)' : 'var(--leaf-600)', marginBottom: 10 }}>{eyebrow}</div>}
      <h2 style={{
        fontSize: 'clamp(30px, 4vw, 44px)', margin: 0,
        color: onForest ? 'var(--cream-50)' : 'var(--text-strong)',
      }}>{title}</h2>
      {intro && <p style={{
        fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-normal)', marginTop: 14,
        color: onForest ? 'var(--text-on-forest-muted)' : 'var(--text-muted)',
      }}>{intro}</p>}
    </div>
  );
}

Object.assign(window, { t, Icon, Reveal, SectionHead });