/* global React */
const { useState, useEffect, useRef } = React;

// Hook: in-view detection for scroll reveals
function useInView(options = { threshold: 0.15, once: true }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setInView(true);
          if (options.once) obs.disconnect();
        } else if (!options.once) {
          setInView(false);
        }
      });
    }, { threshold: options.threshold || 0.15 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

function Reveal({ children, delay = 0, className = "", as: Tag = "div", ...rest }) {
  const [ref, inView] = useInView();
  const cls = `reveal ${inView ? "in" : ""} ${delay ? `delay-${delay}` : ""} ${className}`.trim();
  return <Tag ref={ref} className={cls} {...rest}>{children}</Tag>;
}

const WA_LINK = "https://wa.me/5511985993244?text=Ol%C3%A1%20Dra.%20Fernanda%2C%20gostaria%20de%20agendar%20uma%20consulta.";

const ArrowDiagonal = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" className="arrow">
    <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const DiamondIcon = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M8 1L11 8L8 15L5 8L8 1Z" fill="currentColor" />
    <path d="M1 8L8 5L15 8L8 11L1 8Z" fill="currentColor" opacity="0.6" />
  </svg>
);

const StarRow = () => (
  <span className="tm-stars">★ ★ ★ ★ ★</span>
);

function Cta({ children = "Agendar consulta", href = WA_LINK, ...rest }) {
  return (
    <a className="cta" href={href} target="_blank" rel="noopener noreferrer" {...rest}>
      <span>{children}</span>
      <ArrowDiagonal />
    </a>
  );
}

window.useInView = useInView;
window.Reveal = Reveal;
window.Cta = Cta;
window.ArrowDiagonal = ArrowDiagonal;
window.DiamondIcon = DiamondIcon;
window.StarRow = StarRow;
window.WA_LINK = WA_LINK;