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

const CAL_LINK = "https://cal.com/futureready-ai-xha1yc/15min";
const CONTACT_EMAIL = "Ryan@getfuturereadyai.com";

const Arrow = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Check = ({ color = "currentColor" }) => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M2.5 7.2l3 3 6-6.5" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Cross = ({ color = "currentColor" }) => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path d="M3 3l6 6M9 3l-6 6" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);

// Hook: trigger when element enters viewport
function useReveal(ref, opts = {}) {
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) el.classList.add('in');
        });
      },
      { threshold: opts.threshold || 0.15, ...opts }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
}

function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  useReveal(ref);
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={`reveal ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

Object.assign(window, { Arrow, Check, Cross, Reveal, useReveal, CAL_LINK, CONTACT_EMAIL });