// Shared marketing-site primitives — icons, mock fragments, reusable bits.

const MIcon = ({ name, size = 16, stroke = 1.6 }) => {
  const paths = {
    arrR: <path d="M5 12h14M13 6l6 6-6 6"/>,
    arrUR: <path d="M7 17L17 7M9 7h8v8"/>,
    chevD: <path d="M6 9l6 6 6-6"/>,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7z"/>,
    upload: <><path d="M12 16V4M6 10l6-6 6 6"/><path d="M4 20h16"/></>,
    layers: <><path d="M12 2l9 5-9 5-9-5z"/><path d="M3 12l9 5 9-5"/><path d="M3 17l9 5 9-5"/></>,
    spark: <path d="M12 3l2.4 5.6L20 11l-5.6 2.4L12 19l-2.4-5.6L4 11l5.6-2.4z"/>,
    shield: <><path d="M12 3l8 4v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z"/><path d="M9 12l2 2 4-4"/></>,
    plug: <><path d="M9 7V3M15 7V3M6 11h12v3a6 6 0 0 1-12 0z"/><path d="M12 17v4"/></>,
    chip: <><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></>,
    lock: <><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>,
    docs: <><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></>,
    bot: <><rect x="3" y="8" width="18" height="11" rx="3"/><path d="M12 4v4M8 14h.01M16 14h.01"/></>,
    flow: <><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v4M12 11H5v6M12 11h7v6"/></>,
    graph: <><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8 7l8 4M8 17l8-4M6 8v8M18 8v8"/></>,
    vendor: <><circle cx="9" cy="9" r="3"/><circle cx="17" cy="17" r="3"/><path d="M9 12v5h5"/></>,
    check: <path d="M5 12l5 5L20 7"/>,
    play: <path d="M6 4l14 8-14 8z"/>,
    twitter: <path d="M22 4.6c-.7.3-1.5.5-2.4.6.9-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.7 1A4.2 4.2 0 0 0 11.5 8c0 .3 0 .7.1 1A12 12 0 0 1 3 4s-4 9 5 13c-2 1.4-4 1.4-6 1 9 5 20 0 20-11.5 0-.3 0-.6-.1-.8.8-.6 1.5-1.3 2.1-2.1z"/>,
    li: <><rect x="2" y="2" width="20" height="20" rx="3"/><path d="M8 10v8M8 7v.01M12 18v-5a3 3 0 0 1 6 0v5"/></>,
    gh: <path d="M12 2a10 10 0 0 0-3 19.5c.5.1.7-.2.7-.5v-2c-3 .6-3.5-1.5-3.5-1.5-.5-1.2-1.2-1.5-1.2-1.5-1-.7.1-.7.1-.7 1 .1 1.6 1.2 1.6 1.2 1 1.7 2.6 1.2 3.2.9.1-.7.4-1.2.7-1.5-2.4-.3-5-1.2-5-5.4 0-1.2.4-2.2 1.1-3-.1-.3-.5-1.4.1-2.9 0 0 .9-.3 3 1a10 10 0 0 1 5.4 0c2-1.3 3-1 3-1 .6 1.5.2 2.6.1 2.9.7.8 1.1 1.8 1.1 3 0 4.2-2.6 5.1-5 5.4.4.4.8 1.1.8 2.2v3.3c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>
      {paths[name]}
    </svg>
  );
};

// Top navigation
const MNav = () => (
  <nav className="ccm-nav">
    <div className="ccm-nav-inner">
      <a href="#" className="ccm-brand">
        <span className="ccm-mark">C</span>
        ComplyChip
      </a>
      <div className="ccm-navlinks">
        <a href="#">Product <MIcon name="chevD" size={12}/></a>
        <a href="#">Solutions <MIcon name="chevD" size={12}/></a>
        <a href="#">Pricing</a>
        <a href="#">Resources <MIcon name="chevD" size={12}/></a>
      </div>
      <div style={{display:'flex', gap:8, alignItems:'center'}}>
        <a href="#" style={{fontSize:13.5, color:'var(--cc-ink-2)', padding:'8px 14px'}}>Log in</a>
        <button className="ccm-btn ccm-btn-primary" style={{height:36}}>Book a demo</button>
      </div>
    </div>
  </nav>
);

// ---- Mini product fragments used in hero & capability sections ----

// Score ring as a compact element
const MRing = ({ value = 78, size = 92, stroke = 8 }) => {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const dash = c * (1 - value / 100);
  return (
    <div style={{position:'relative', width:size, height:size, display:'inline-grid', placeItems:'center'}}>
      <svg width={size} height={size} style={{position:'absolute', inset:0}}>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--cc-line)" strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--cc-signal)" strokeWidth={stroke} fill="none"
                strokeDasharray={c} strokeDashoffset={dash} strokeLinecap="round"
                transform={`rotate(-90 ${size/2} ${size/2})`}/>
      </svg>
      <div style={{fontFamily:'var(--ccm-display)', fontSize:size*0.36, fontWeight:400, letterSpacing:'-0.025em', color:'var(--cc-ink)'}}>{value}</div>
    </div>
  );
};

// Animated count-up
const CountUp = ({ to = 100, suffix = '', duration = 1400, prefix = '' }) => {
  const [v, setV] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setV(to * eased);
          if (t < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  const display = to >= 100 ? Math.round(v) : v.toFixed(1);
  return <span ref={ref}>{prefix}{display}{suffix}</span>;
};

// Reveal-on-scroll wrapper
const Reveal = ({ children, delay = 0, as: As = 'div', ...rest }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => el.classList.add('in'), delay);
        io.disconnect();
      }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={`ccm-reveal ${rest.className||''}`} {...rest}>{children}</As>;
};

// Frame chrome wrapper around a mini product mock
const Frame = ({ url = 'app.complychip.com', children, style }) => (
  <div className="ccm-frame" style={style}>
    <div className="ccm-frame-bar">
      <div className="ccm-frame-dots"><span/><span/><span/></div>
      <div className="ccm-frame-url">{url}</div>
      <div style={{width:30}}/>
    </div>
    {children}
  </div>
);

Object.assign(window, { MIcon, MNav, MRing, CountUp, Reveal, Frame });