// Small reusable primitives.

const Eyebrow = ({ children }) => <span className="eyebrow">{children}</span>;
const Arrow = () => <span className="arr">{"\u2192"}</span>;

// Number counter.
const useCounter = (target, duration = 1400, deps = []) => {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setN(target * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  // eslint-disable-next-line
  }, deps);
  return n;
};

// Reveal on scroll.
const Reveal = ({ children, as: Tag = "div", className = "", style, delay = 0 }) => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref}
      className={"reveal " + (seen ? "in " : "") + className}
      style={{ ...style, transitionDelay: delay ? `${delay}ms` : undefined }}>
      {children}
    </Tag>
  );
};

// Gear SVG (spins via CSS).
const GearMark = () => (
  <svg className="gear" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g stroke="currentColor" strokeWidth="1">
      <circle cx="100" cy="100" r="92" opacity="0.35" />
      <circle cx="100" cy="100" r="78" opacity="0.6" />
      <circle cx="100" cy="100" r="58" opacity="0.9" />
      <circle cx="100" cy="100" r="34" />
    </g>
    {/* teeth */}
    <g fill="currentColor">
      {Array.from({ length: 24 }).map((_, i) => {
        const a = (i / 24) * Math.PI * 2;
        const x = 100 + Math.cos(a) * 88;
        const y = 100 + Math.sin(a) * 88;
        return <rect key={i} x={x-2} y={y-5} width="4" height="10" transform={`rotate(${(i/24)*360} ${x} ${y})`} />;
      })}
    </g>
    <g stroke="currentColor" strokeWidth="0.75">
      {Array.from({ length: 12 }).map((_, i) => {
        const a = (i / 12) * Math.PI * 2;
        const x1 = 100 + Math.cos(a) * 34;
        const y1 = 100 + Math.sin(a) * 34;
        const x2 = 100 + Math.cos(a) * 58;
        const y2 = 100 + Math.sin(a) * 58;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} opacity="0.7" />;
      })}
    </g>
    {/* crosshair */}
    <g stroke="currentColor" strokeWidth="1">
      <line x1="100" y1="6" x2="100" y2="22" />
      <line x1="100" y1="178" x2="100" y2="194" />
      <line x1="6" y1="100" x2="22" y2="100" />
      <line x1="178" y1="100" x2="194" y2="100" />
    </g>
    <circle cx="100" cy="100" r="5" fill="currentColor" />
  </svg>
);

// Brand mark — the real Sitinel gear+S (loaded from /assets, recolored via CSS currentColor).
const BrandMark = ({ size = 30 }) => (
  <img src="assets/sitinel-mark.svg" alt="" width={size} height={size}
       style={{ display: "block", filter: "brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(2200%) hue-rotate(356deg) brightness(96%) contrast(99%)" }} />
);

const BrandLockup = ({ height = 30 }) => (
  <img src="assets/sitinel-lockup.svg" alt="Sitinel" height={height}
       style={{ display: "block", height, width: "auto",
                filter: "brightness(0) saturate(100%)" }} />
);

Object.assign(window, { Eyebrow, Arrow, useCounter, Reveal, GearMark, BrandMark, BrandLockup });