// Sigil — alchemical decorative SVG (rotating concentric rings)
const Sigil = () => (
  <svg className="fa-sigil-svg" viewBox="0 0 520 520" fill="none" stroke="currentColor" strokeWidth="1">
    <g style={{ color: "var(--fa-gold)" }}>
      <g className="fa-spin-slow" style={{ transformOrigin: "260px 260px" }}>
        <circle cx="260" cy="260" r="240" opacity="0.5" />
        <circle cx="260" cy="260" r="240" strokeDasharray="2 12" opacity="0.6" />
        {/* Cardinal ticks */}
        {Array.from({ length: 24 }).map((_, i) => {
          const a = (i * 15 * Math.PI) / 180;
          const x1 = 260 + Math.cos(a) * 232;
          const y1 = 260 + Math.sin(a) * 232;
          const x2 = 260 + Math.cos(a) * 244;
          const y2 = 260 + Math.sin(a) * 244;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} opacity="0.7" />;
        })}
      </g>
      <circle cx="260" cy="260" r="190" opacity="0.4" />
      <g className="fa-spin-rev" style={{ transformOrigin: "260px 260px" }}>
        <circle cx="260" cy="260" r="160" opacity="0.6" strokeDasharray="1 8" />
      </g>
      <circle cx="260" cy="260" r="120" opacity="0.4" />
      {/* Triangle (fire) */}
      <polygon points="260,160 346,308 174,308" opacity="0.5" />
      {/* Inverted triangle (water) */}
      <polygon points="260,360 174,212 346,212" opacity="0.35" />
      <circle cx="260" cy="260" r="60" opacity="0.6" />
      <circle cx="260" cy="260" r="6" fill="currentColor" />
    </g>
  </svg>
);

// Brand mark — uses the actual Fuente Alquimia "A" logo (transparent PNG)
const BrandMark = ({ size = 30 }) => (
  <img
    className="fa-brand-mark"
    src="assets/logo-mark.png"
    alt="Fuente Alquimia"
    style={{ height: size, width: "auto", display: "block" }}
  />
);

// Scroll-reveal hook
const useReveal = () => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && setShown(true)),
      { threshold: 0.15 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, shown];
};

const Reveal = ({ children, delay = 0, as = "div", className = "", ...rest }) => {
  const [ref, shown] = useReveal();
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={className}
      style={{
        opacity: shown ? 1 : 0,
        transform: shown ? "translateY(0)" : "translateY(28px)",
        transition: `opacity 0.9s ${delay}ms cubic-bezier(0.2,0.8,0.3,1), transform 0.9s ${delay}ms cubic-bezier(0.2,0.8,0.3,1)`,
        ...(rest.style || {}),
      }}
      {...rest}
    >
      {children}
    </Tag>
  );
};

Object.assign(window, { Sigil, BrandMark, Reveal, useReveal });