// ============================================================
// Richard Petrus — Shared effects & primitives
// ============================================================
/* global React */

const { useEffect, useRef, useState } = React;

// ---------- BlurTextReveal ----------
function BlurReveal({ children, className = "", as: As = "span" }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => { if (e.isIntersecting) setInView(true); });
      },
      { threshold: 0.2 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const text = typeof children === "string" ? children : String(children);
  const words = text.split(" ");
  return (
    <As ref={ref} className={`rp-reveal ${inView ? "in" : ""} ${className}`}>
      {words.map((w, i) => (
        <span key={i} className="rp-word" style={{ "--i": i }}>{w}{i < words.length - 1 ? "\u00A0" : ""}</span>
      ))}
    </As>
  );
}

// ---------- EditorialDivider ----------
function EditorialDivider({ children }) {
  return <div className="rp-editorial-divider">{children}</div>;
}

// ---------- Mediterranean Aurora ----------
function Aurora() {
  return (
    <div className="rp-aurora" aria-hidden="true">
      <div className="rp-aurora__orb rp-aurora__orb--bronze"></div>
      <div className="rp-aurora__orb rp-aurora__orb--olive"></div>
    </div>
  );
}

// ---------- Photo placeholder ----------
function Photo({ caption, ratio = "4 / 5", style = {} }) {
  return (
    <div className="rp-photo" style={{ aspectRatio: ratio, ...style }}>
      <div className="rp-photo-label">[ {caption} ]</div>
    </div>
  );
}

// ---------- ShinyText (price) ----------
function Shiny({ children, className = "" }) {
  return <span className={`rp-shiny ${className}`}>{children}</span>;
}

// ---------- 5-star row ----------
function Stars({ n = 5 }) {
  return (
    <span className="rp-stars" aria-label={`${n} de 5`}>
      {Array.from({ length: n }).map((_, i) => <span key={i}>★</span>)}
    </span>
  );
}

// ---------- Arrow ----------
function Arrow() {
  return (
    <svg className="rp-btn-arrow" viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, {
  BlurReveal, EditorialDivider, Aurora, Photo, Shiny, Stars, Arrow
});