// Shared primitives - logo, icons, animated helpers
const { useState, useEffect, useRef, useMemo } = React;

// Compact mark echoing the logo's language (hex + eye + up-arrow) - original composition
function LogoMark({ size = 36 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
      <defs>
        <linearGradient id="lm-grad" x1="0" x2="1" y1="1" y2="0">
          <stop offset="0%" stopColor="#1E9FD4" />
          <stop offset="100%" stopColor="#2BE876" />
        </linearGradient>
      </defs>
      {/* Hex frame */}
      <path d="M24 3 L42 13 V35 L24 45 L6 35 V13 Z" stroke="url(#lm-grad)" strokeWidth="1.4" fill="none" opacity="0.6" />
      {/* Up-right stroke */}
      <path d="M12 32 L22 22 L26 26 L36 14" stroke="url(#lm-grad)" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M30 14 L36 14 L36 20" stroke="url(#lm-grad)" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      {/* Eye dot */}
      <circle cx="24" cy="24" r="2.4" fill="#F5C542" />
      <circle cx="24" cy="24" r="5.5" stroke="#F5C542" strokeWidth="0.9" fill="none" opacity="0.7" />
    </svg>
  );
}

function Eyebrow({ children, tone = "" }) {
  return <div className={"eyebrow " + tone}>{children}</div>;
}

// Subtle scrolling hex backdrop for any section
function HexBackdrop() {
  return <div className="hex-grid" aria-hidden="true" />;
}

// Ticker/counter that animates to target
function useCountUp(target, duration = 1400, start = 0) {
  const [v, setV] = useState(start);
  useEffect(() => {
    let raf, t0;
    function tick(t) {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(start + (target - start) * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  return v;
}

function useInView(ref, opts = { threshold: 0.05, rootMargin: "0px 0px -10% 0px" }) {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    // If already in viewport on mount, fire immediately
    const rect = ref.current.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      setSeen(true);
      return;
    }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return seen;
}

// Simple SVG line chart used in hero console
function MiniChart({ data, w = 520, h = 220, stroke = "#2BE876", fill = "rgba(43,232,118,0.18)", gridColor = "#163544" }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const pad = 20;
  const pts = data.map((v, i) => {
    const x = pad + (i / (data.length - 1)) * (w - pad * 2);
    const y = h - pad - ((v - min) / (max - min || 1)) * (h - pad * 2);
    return [x, y];
  });
  const d = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
  const area = d + ` L ${w - pad},${h - pad} L ${pad},${h - pad} Z`;
  // gridlines
  const ys = [0.25, 0.5, 0.75];
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%">
      <defs>
        <linearGradient id="mc-f" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={stroke} stopOpacity="0.35" />
          <stop offset="100%" stopColor={stroke} stopOpacity="0" />
        </linearGradient>
      </defs>
      {ys.map((y, i) => (
        <line key={i} x1={pad} x2={w - pad} y1={pad + y * (h - pad * 2)} y2={pad + y * (h - pad * 2)} stroke={gridColor} strokeDasharray="3 5" strokeWidth="0.7" />
      ))}
      <path d={area} fill="url(#mc-f)" />
      <path d={d} fill="none" stroke={stroke} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
      {pts.map((p, i) => i === pts.length - 1 && (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r="8" fill={stroke} opacity="0.2" />
          <circle cx={p[0]} cy={p[1]} r="4" fill={stroke} />
        </g>
      ))}
    </svg>
  );
}

Object.assign(window, { LogoMark, Eyebrow, HexBackdrop, useCountUp, useInView, MiniChart });
