/* Shared UI atoms — buttons, badges, glass icons, magnetic CTA */

const { motion, useMotionValue, useSpring } = window.FM;
const L = window.Lucide;

// Magnetic primary CTA — cursor pulls the button ~6px on hover.
const MagneticPill = ({ as = 'a', href = '#', children, onClick, className = '', icon }) => {
  const ref = React.useRef(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const sx = useSpring(x, { stiffness: 220, damping: 18, mass: 0.4 });
  const sy = useSpring(y, { stiffness: 220, damping: 18, mass: 0.4 });

  const handleMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const dx = e.clientX - (r.left + r.width / 2);
    const dy = e.clientY - (r.top + r.height / 2);
    const max = 6;
    const cap = (v) => Math.max(-max, Math.min(max, v / 4));
    x.set(cap(dx));
    y.set(cap(dy));
  };
  const reset = () => { x.set(0); y.set(0); };

  const Tag = motion[as] || motion.a;
  return (
    <Tag
      ref={ref}
      href={as === 'a' ? href : undefined}
      onClick={onClick}
      onMouseMove={handleMove}
      onMouseLeave={reset}
      style={{ x: sx, y: sy }}
      className={'inline-flex items-center gap-2 rounded-full font-semibold ' + className}
    >
      {children}
      {icon}
    </Tag>
  );
};

const GradPill = ({ children, icon, href = '#', onClick, size = 'md', className = '' }) => {
  const pads = size === 'lg' ? 'px-6 py-3.5 text-[15px]' : 'px-5 py-2.5 text-[14px]';
  return (
    <MagneticPill
      href={href}
      onClick={onClick}
      className={`btn-grad text-white ${pads} ${className}`}
      icon={icon}
    >
      {children}
    </MagneticPill>
  );
};

const GhostPill = ({ children, icon, href = '#', onClick, size = 'md', className = '' }) => {
  const pads = size === 'lg' ? 'px-6 py-3.5 text-[15px]' : 'px-5 py-2.5 text-[14px]';
  return (
    <a
      href={href}
      onClick={onClick}
      className={`btn-ghost inline-flex items-center gap-2 rounded-full text-white/85 ${pads} ${className}`}
    >
      {icon}
      <span>{children}</span>
    </a>
  );
};

/* Small platform pill — icon + label, links out */
const PlatformPill = ({ icon: Icon, label, href = '#', sub }) => (
  <a
    href={href}
    className="btn-ghost group inline-flex items-center gap-2 rounded-full px-3.5 py-2 text-[12.5px] text-white/80 hover:text-white"
  >
    <Icon size={14} strokeWidth={1.75} className="text-white/70 group-hover:text-white" />
    <span className="font-medium">{label}</span>
    {sub && <span className="text-white/40 text-[11px]">· {sub}</span>}
  </a>
);

/* Section heading with eyebrow */
const Eyebrow = ({ children }) => (
  <div className="inline-flex items-center gap-2 rounded-full glass px-3 py-1 text-[11px] uppercase tracking-[0.18em] text-white/60">
    <span className="size-1.5 rounded-full bg-gradient-to-br from-sky-brand to-fuchsia-brand"></span>
    {children}
  </div>
);

/* Per-word stagger for headlines */
const WordReveal = ({ text, className = '', delay = 0, gradWords = [], shimmerWords = [], devaWords = [] }) => {
  const words = text.split(' ');
  return (
    <span className={className}>
      {words.map((w, i) => {
        const stripped = w.replace(/[.,?!—]/g, '').toLowerCase();
        const isGrad = gradWords.map(s => s.toLowerCase()).includes(stripped);
        const isShim = shimmerWords.map(s => s.toLowerCase()).includes(stripped);
        const isDeva = devaWords.includes(w);
        return (
          <motion.span
            key={i}
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4, delay: delay + i * 0.06, ease: [0.22, 1, 0.36, 1] }}
            className={
              'inline-block ' +
              (isShim ? 'gradient-text-shimmer ' : isGrad ? 'gradient-text ' : '') +
              (isDeva ? 'font-deva ' : '')
            }
          >
            {w}
            {i !== words.length - 1 ? '\u00A0' : ''}
          </motion.span>
        );
      })}
    </span>
  );
};

/* Reveal-on-scroll wrapper */
const InView = ({ children, delay = 0, y = 24, className = '', as = 'div' }) => {
  const Tag = motion[as] || motion.div;
  return (
    <Tag
      initial={{ opacity: 0, y }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-10% 0px -10% 0px' }}
      transition={{ duration: 0.55, delay, ease: [0.22, 1, 0.36, 1] }}
      className={className}
    >
      {children}
    </Tag>
  );
};

Object.assign(window, {
  MagneticPill,
  GradPill,
  GhostPill,
  PlatformPill,
  Eyebrow,
  WordReveal,
  InView,
});