// Shared primitives
const { useState, useEffect, useRef, useMemo } = React;

function SectionEyebrow({ label }) {
  return (
    <div className="sec-eyebrow">
      <span>{label}</span>
    </div>
  );
}

function Halo({ size = 'lg', opacity = 0.85, color = 'blue' }) {
  const dims = {
    sm: { w: 800, h: 380 },
    md: { w: 1100, h: 520 },
    lg: { w: 1400, h: 700 },
    xl: { w: 1800, h: 900 },
  }[size];
  return (
    <div className="halo-stage" aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <div className="halo" style={{ width: dims.w, height: dims.h, opacity }} />
      <div className="halo-inner" style={{ width: dims.w * 0.62, height: dims.h * 0.4 }} />
    </div>
  );
}

// Inline arrow icon
const IconArrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconCheck = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 7.5L5.5 10L11 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconPhone = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M5.6 3.2c.3-.3.3-.8 0-1.1L4.5 1A1 1 0 0 0 3 1.1c-1.6 1.8-1.5 4.5.4 7.2 1.9 2.7 4.4 3.9 6.6 3.4a1 1 0 0 0 .8-1.3l-.4-1.4a.8.8 0 0 0-1-.5l-1.4.4a.8.8 0 0 1-.8-.2 9 9 0 0 1-1.7-2.4.8.8 0 0 1 .1-.8l1-.9Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
  </svg>
);

const IconClose = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3.5 3.5L10.5 10.5M10.5 3.5L3.5 10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>
);

const IconStar = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="currentColor">
    <path d="M7 0.5l1.7 4.6 4.8 0.3-3.7 3 1.2 4.7L7 10.5 3 13.1l1.2-4.7-3.7-3 4.8-0.3z" />
  </svg>
);

// Reveal-on-scroll
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // If already in viewport on mount, reveal synchronously
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      el.classList.add('in');
      return;
    }
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        el.classList.add('in');
        obs.disconnect();
      }
    }, { threshold: 0.12 });
    obs.observe(el);
    // Fallback: ensure reveal after 1.2s no matter what
    const t = setTimeout(() => { el.classList.add('in'); obs.disconnect(); }, 1200);
    return () => { obs.disconnect(); clearTimeout(t); };
  }, []);
  return ref;
}

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

Object.assign(window, { SectionEyebrow, Halo, IconArrow, IconCheck, IconPhone, IconClose, IconStar, Reveal, useReveal });