/* Primitives: small UI helpers shared by multiple sections */

const INNOVEEV_PATHS = [
  "M0 13.9625V0H2.54465V13.9625H0Z",
  "M10.8598 3.602C11.9937 3.602 12.8843 3.92751 13.5339 4.57852C14.1857 5.22954 14.5116 6.13218 14.5116 7.28537V13.9625H12.1901V7.81646C12.1901 7.09692 11.9848 6.52728 11.5741 6.10755C11.1633 5.68568 10.6165 5.47367 9.93566 5.47367C9.07182 5.47367 8.36199 5.7435 7.80619 6.28315C7.25261 6.82067 6.97582 7.51558 6.97582 8.36897V13.9625H4.65885V3.94036H6.67225L6.95797 5.59359H6.97582C7.40105 4.96292 7.93565 4.47359 8.57851 4.12453C9.22137 3.77653 9.98142 3.602 10.8598 3.602Z",
  "M22.4786 3.602C23.6126 3.602 24.5032 3.92751 25.1527 4.57852C25.8045 5.22954 26.1304 6.13218 26.1304 7.28537V13.9625H23.809V7.81646C23.809 7.09692 23.6036 6.52728 23.1929 6.10755C22.7822 5.68568 22.2353 5.47367 21.5545 5.47367C20.6907 5.47367 19.9808 5.7435 19.425 6.28315C18.8715 6.82067 18.5947 7.51558 18.5947 8.36897V13.9625H16.2777V3.94036H18.2911L18.5768 5.59359H18.5947C19.0199 4.96292 19.5545 4.47359 20.1974 4.12453C20.8402 3.77653 21.6003 3.602 22.4786 3.602Z",
  "M33.1912 14.3566C32.0573 14.3566 31.0617 14.1339 30.2046 13.6884C29.3497 13.2409 28.6867 12.6091 28.2135 11.7953C27.7425 10.9816 27.5081 10.0372 27.5081 8.96001C27.5081 7.86999 27.7425 6.91703 28.2135 6.10326C28.6867 5.28949 29.3497 4.65989 30.2046 4.21446C31.0617 3.76903 32.0573 3.54631 33.1912 3.54631C34.3396 3.54631 35.3385 3.76903 36.1867 4.21446C37.0372 4.65989 37.6979 5.28949 38.1689 6.10326C38.6421 6.91703 38.8787 7.86999 38.8787 8.96001C38.8787 10.0372 38.6421 10.9816 38.1689 11.7953C37.6979 12.6091 37.0372 13.2409 36.1867 13.6884C35.3385 14.1339 34.3396 14.3566 33.1912 14.3566ZM33.1912 12.4678C34.218 12.4678 35.0394 12.1498 35.6555 11.5127C36.2716 10.8766 36.5796 10.0254 36.5796 8.96001C36.5796 7.89783 36.2716 7.05194 35.6555 6.4202C35.0394 5.78953 34.218 5.47366 33.1912 5.47366C32.1521 5.47366 31.3273 5.78953 30.718 6.4202C30.1108 7.05194 29.8072 7.89783 29.8072 8.96001C29.8072 10.0254 30.1108 10.8766 30.718 11.5127C31.3273 12.1498 32.1521 12.4678 33.1912 12.4678Z",
  "M43.109 13.9626L39.0643 3.94037H41.484L44.5644 12.0909H44.6045L47.6849 3.94037H50.0644L46.0019 13.9626H43.109Z",
  "M56.2665 14.3566C55.1024 14.3566 54.0656 14.1232 53.1549 13.6584C52.2442 13.1937 51.5321 12.547 51.021 11.7183C50.5087 10.8906 50.2531 9.9451 50.2531 8.88292C50.2531 7.83251 50.4852 6.90739 50.9495 6.10754C51.4138 5.30555 52.0589 4.67916 52.887 4.22731C53.7174 3.77331 54.6649 3.54631 55.7308 3.54631C56.7844 3.54631 57.704 3.76903 58.4897 4.21446C59.2777 4.65989 59.8915 5.2745 60.329 6.05615C60.7665 6.83565 60.9853 7.73829 60.9853 8.76299C60.9853 8.8947 60.9775 9.03925 60.963 9.19558C60.9507 9.35298 60.9317 9.4911 60.9049 9.61103H52.6549C52.762 10.5051 53.1504 11.2279 53.8201 11.7782C54.4919 12.3297 55.329 12.6048 56.329 12.6048C57.0667 12.6048 57.7397 12.4485 58.3469 12.1337C58.9563 11.8168 59.4116 11.4227 59.713 10.9516L61.2531 11.8553C60.8837 12.592 60.2442 13.1937 59.3335 13.6584C58.4228 14.1232 57.4004 14.3566 56.2665 14.3566ZM52.6549 8.09485H58.6058C58.5221 7.20184 58.223 6.51228 57.7085 6.02616C57.1962 5.54112 56.5366 5.29806 55.7308 5.29806C54.9094 5.29806 54.2174 5.55825 53.6549 6.07756C53.0946 6.59473 52.762 7.26716 52.6549 8.09485Z",
  "M68.2548 14.3566C67.0908 14.3566 66.0539 14.1232 65.1432 13.6584C64.2325 13.1937 63.5204 12.547 63.0093 11.7183C62.497 10.8906 62.2414 9.9451 62.2414 8.88292C62.2414 7.83251 62.4736 6.90739 62.9379 6.10754C63.4021 5.30555 64.0472 4.67916 64.8754 4.22731C65.7057 3.77331 66.6533 3.54631 67.7191 3.54631C68.7727 3.54631 69.6923 3.76903 70.4781 4.21446C71.266 4.65989 71.8799 5.2745 72.3174 6.05615C72.7549 6.83565 72.9736 7.73829 72.9736 8.76299C72.9736 8.8947 72.9658 9.03925 72.9513 9.19558C72.939 9.35298 72.92 9.4911 72.8933 9.61103H64.6432C64.7504 10.5051 65.1388 11.2279 65.8084 11.7782C66.4803 12.3297 67.3173 12.6048 68.3173 12.6048C69.0551 12.6048 69.7281 12.4485 70.3352 12.1337C70.9446 11.8168 71.3999 11.4227 71.7013 10.9516L73.2415 11.8553C72.8721 12.592 72.2325 13.1937 71.3218 13.6584C70.4111 14.1232 69.3888 14.3566 68.2548 14.3566ZM64.6432 8.09485H70.5941C70.5104 7.20184 70.2113 6.51228 69.6968 6.02616C69.1845 5.54112 68.5249 5.29806 67.7191 5.29806C66.8977 5.29806 66.2057 5.55825 65.6432 6.07756C65.083 6.59473 64.7504 7.26716 64.6432 8.09485Z",
  "M77.3907 13.9626L73.346 3.94037H75.7657L78.846 12.0909H78.8862L81.9666 3.94037H84.3461L80.2835 13.9626H77.3907Z",
];

function Brand({ size = 22, withName = true, name }) {
  // size = wordmark height in px. SVG aspect 85:15.
  const w = Math.round(size * (85 / 15));
  return (
    <span className="brand" style={{ height: size }}>
      <svg
        className="brand__mark"
        width={w}
        height={size}
        viewBox="0 0 85 15"
        fill="currentColor"
        aria-label={name || "Innoveev"}
      >
        {INNOVEEV_PATHS.map((d, i) => <path key={i} d={d} />)}
      </svg>
    </span>
  );
}

function Counter({ to = 0, suffix = "", prefix = "", duration = 1600 }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  const startedRef = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !startedRef.current) {
            startedRef.current = true;
            const start = performance.now();
            const tick = (now) => {
              const t = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - t, 3);
              setVal(Math.round(to * eased));
              if (t < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);

  return (
    <span ref={ref}>
      {prefix}
      {val.toLocaleString("en-US")}
      <span className="suffix">{suffix}</span>
    </span>
  );
}

function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let done = false;
    const show = () => {
      if (done) return;
      done = true;
      setTimeout(() => setShown(true), delay);
      io.disconnect();
      window.removeEventListener("scroll", check);
    };
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) show();
        });
      },
      { threshold: 0.15 }
    );
    // Fallback for contexts where IO callbacks are throttled or never run
    // (offscreen iframes, print, some embeds): plain rect math on scroll.
    const check = () => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.92 && r.bottom > 0) show();
    };
    io.observe(el);
    window.addEventListener("scroll", check, { passive: true });
    check();
    return () => {
      io.disconnect();
      window.removeEventListener("scroll", check);
    };
  }, [delay]);

  return (
    <Tag ref={ref} className={`reveal ${shown ? "reveal--in" : ""} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Tag({ children }) {
  return (
    <span className="tag">
      <span className="dot"></span>
      {children}
    </span>
  );
}

/* Stripey/diagonal placeholder backdrop used for project visuals */
function StripeBackdrop({ hue1, hue2 }) {
  return (
    <svg viewBox="0 0 400 160" preserveAspectRatio="none">
      <defs>
        <linearGradient id={`g-${hue1}-${hue2}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={`oklch(0.7 0.15 ${hue1})`} />
          <stop offset="100%" stopColor={`oklch(0.55 0.18 ${hue2})`} />
        </linearGradient>
        <pattern id={`p-${hue1}`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <rect width="14" height="14" fill={`url(#g-${hue1}-${hue2})`} />
          <line x1="0" y1="0" x2="0" y2="14" stroke="rgba(255,255,255,0.12)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#p-${hue1})`} />
    </svg>
  );
}

Object.assign(window, { Brand, Counter, Reveal, Arrow, Tag, StripeBackdrop });