/* ============ VETRA — UI helpers (icons, placeholders) ============ */

/* ---- DotLoader (adapted from shadcn dot-loader) ---- */
function DotLoader({ frames, isPlaying = true, duration = 100, repeatCount = -1, onComplete }) {
  const gridRef = React.useRef(null);
  const currentIndex = React.useRef(0);
  const repeats = React.useRef(0);
  const interval = React.useRef(null);

  const applyFrame = React.useCallback((dots, idx) => {
    const frame = frames[idx];
    if (!frame) return;
    dots.forEach((dot, i) => dot.classList.toggle("dl-active", frame.includes(i)));
  }, [frames]);

  React.useEffect(() => { currentIndex.current = 0; repeats.current = 0; }, [frames]);

  React.useEffect(() => {
    if (!isPlaying) { if (interval.current) clearInterval(interval.current); return; }
    if (currentIndex.current >= frames.length) currentIndex.current = 0;
    const els = gridRef.current?.children;
    if (!els) return;
    const dots = Array.from(els);
    interval.current = setInterval(() => {
      applyFrame(dots, currentIndex.current);
      if (currentIndex.current + 1 >= frames.length) {
        if (repeatCount !== -1 && repeats.current + 1 >= repeatCount) {
          clearInterval(interval.current); onComplete?.();
        }
        repeats.current++;
      }
      currentIndex.current = (currentIndex.current + 1) % frames.length;
    }, duration);
    return () => { if (interval.current) clearInterval(interval.current); };
  }, [frames, isPlaying, applyFrame, duration, repeatCount, onComplete]);

  return (
    <div ref={gridRef} className="dl-grid">
      {Array.from({ length: 49 }).map((_, i) => <div key={i} className="dl-dot" />)}
    </div>
  );
}
const S = ({d, ...p}) => <path d={d} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}/>;
const Svg = ({children, vb="0 0 24 24"}) => <svg viewBox={vb} fill="none" xmlns="http://www.w3.org/2000/svg">{children}</svg>;

// ---- Problem icons (line art) ----
const IcEye = () => <Svg><S d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.7"/><S d="M4 4l16 16"/></Svg>;
const IcMoney = () => <Svg><rect x="2.5" y="6" width="19" height="12" rx="2" stroke="currentColor" strokeWidth="1.7"/><circle cx="12" cy="12" r="2.6" stroke="currentColor" strokeWidth="1.7"/><S d="M5.5 9.2v-.01M18.5 14.8v.01"/></Svg>;
const IcTeam = () => <Svg><circle cx="9" cy="8.5" r="2.8" stroke="currentColor" strokeWidth="1.7"/><S d="M3.5 18.5a5.5 5.5 0 0 1 11 0"/><S d="M16 6.2a2.8 2.8 0 0 1 0 5.3M17 13.5a5.2 5.2 0 0 1 3.5 5"/></Svg>;

// ---- Pillar icons (filled-ish line on lime) ----
const IcOps = () => <Svg><rect x="3" y="4" width="18" height="16" rx="2" stroke="#1A1A1A" strokeWidth="1.7"/><S d="M3 9h18M8 4v16" stroke="#1A1A1A"/><S d="M11.5 13l1.6 1.6 3-3" stroke="#1A1A1A"/></Svg>;
const IcFin = () => <Svg><S d="M3 17l5-5 3.5 3.5L21 7" stroke="#1A1A1A"/><S d="M16 7h5v5" stroke="#1A1A1A"/></Svg>;
const IcPeople = () => <Svg><circle cx="8.5" cy="8" r="3" stroke="#1A1A1A" strokeWidth="1.7"/><S d="M3 19a5.5 5.5 0 0 1 11 0" stroke="#1A1A1A"/><circle cx="17.5" cy="9" r="2.3" stroke="#1A1A1A" strokeWidth="1.7"/><S d="M16 14.5a4.6 4.6 0 0 1 5 4.5" stroke="#1A1A1A"/></Svg>;
const IcClient = () => <Svg><S d="M21 11.5a8 8 0 1 1-3.5-6.6" stroke="#1A1A1A"/><S d="M9 11.5l2.5 2.5L21 5" stroke="#1A1A1A"/></Svg>;
const IcDoc = () => <Svg><S d="M6 3h8l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" stroke="#1A1A1A"/><S d="M14 3v4h4M8.5 12.5h7M8.5 16h7" stroke="#1A1A1A"/></Svg>;

const PILLAR_ICONS = [IcOps, IcFin, IcPeople, IcClient, IcDoc];

const IcCheck = () => <svg viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.2 4.2L19 7" stroke="#1A1A1A" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>;
const IcArrow = () => <svg className="btn-arrow" width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M5 12h13M12 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>;
const IcLinkedin = () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.76-1.95 4.02 0 4.76 2.5 4.76 5.76V21h-4v-5.3c0-1.27-.02-2.9-1.77-2.9-1.77 0-2.04 1.38-2.04 2.8V21h-4z"/></svg>;
const IcInsta = () => <svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.7"/><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.7"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor"/></svg>;

// ---- Sparkle field ----
function Sparkles({items}){
  return items.map((s,i)=>(
    <span key={i} className={"spark"+(s.lime?" lime":"")} style={{left:s.x,top:s.y,fontSize:s.s,transform:`rotate(${s.r||0}deg)`}}>✦</span>
  ));
}

// ---- Illustration placeholder ----
function Illu({tag, dim, w, h, frame="✎", splash, style}){
  return (
    <div className="illu" style={{width:w, height:h, ...style}}>
      {splash && <span className="splash" style={splash}></span>}
      <span className="illu-frame">{frame}</span>
      <span className="illu-tag">{tag}</span>
      <span className="illu-dim">{dim}</span>
    </div>
  );
}

Object.assign(window, { S, Svg, IcEye, IcMoney, IcTeam, PILLAR_ICONS, IcCheck, IcArrow, IcLinkedin, IcInsta, Sparkles, Illu });