/* global React */
const { useEffect: pUseEffect, useRef: pUseRef, useState: pUseState } = React;

/* ---------- Compass dingbat (inspired by the brand mark — original) ---------- */
function Compass({ size = 18, spin = false }) {
  return (
    <span className="compass" style={{ width: size, height: size, display: 'inline-block' }}>
      <svg viewBox="0 0 24 24" style={{ animation: spin ? 'orbit 20s linear infinite' : 'none', transformOrigin: 'center' }}>
        <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.4" />
        <path d="M12 3 L14.5 12 L12 21 L9.5 12 Z" fill="var(--accent)" />
        <circle cx="12" cy="12" r="1.5" fill="currentColor" />
      </svg>
    </span>
  );
}

/* ---------- Arrow ---------- */
function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M1 7h12M7 1l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ---------- Button ---------- */
function Btn({ children, variant = 'primary', onClick, arrow = true, href }) {
  const Tag = href ? 'a' : 'button';
  return (
    <Tag className={`btn btn-${variant}`} onClick={onClick} href={href}>
      {children}
      {arrow && <Arrow />}
    </Tag>
  );
}

/* ---------- Scroll reveal ---------- */
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {} }) {
  const ref = pUseRef(null);
  const [shown, setShown] = pUseState(false);
  pUseEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.unobserve(el); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal ${shown ? 'in' : ''} ${className}`} style={style}>
      {children}
    </Tag>
  );
}

/* ---------- Placeholder image ---------- */
function Placeholder({ label, children, aspect = '16/10', tone = 'default', style = {} }) {
  const tones = {
    default: {},
    navy: { background: 'linear-gradient(135deg, var(--navy-700), var(--navy-900))', color: 'var(--bg)' },
    accent: { background: 'linear-gradient(135deg, var(--accent), var(--navy-800))', color: '#fff' },
    cream: { background: 'linear-gradient(135deg, var(--bg-alt), var(--bg))' },
  };
  return (
    <div className="ph" style={{ aspectRatio: aspect, ...tones[tone], ...style }}>
      {label && <span className="ph-label">{label}</span>}
      <span className="ph-center">{children || '[ imagen real del cliente ]'}</span>
    </div>
  );
}

/* ---------- Counter animation ---------- */
function Counter({ to, duration = 1400 }) {
  const [n, setN] = pUseState(0);
  const ref = pUseRef(null);
  pUseEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const start = performance.now();
          const step = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.round(eased * to));
            if (p < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
          io.disconnect();
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{n}</span>;
}

Object.assign(window, { Compass, Arrow, Btn, Reveal, Placeholder, Counter });