/* embeddedTR — inline icon set (stroke, currentColor) + small helpers */
const { useState, useEffect, useRef } = React;

const Ic = ({ d, size = 22, sw = 1.6, fill = "none", children, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
    strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" {...p}>
    {d ? <path d={d} /> : children}
  </svg>
);

const Icons = {
  share:   (p) => <Ic {...p}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></Ic>,
  article: (p) => <Ic {...p}><path d="M4 4h11l5 5v11a0 0 0 0 1 0 0H4z"/><path d="M14 4v5h5M8 13h8M8 17h6"/></Ic>,
  qa:      (p) => <Ic {...p}><path d="M21 11.5a8.4 8.4 0 0 1-12 7.6L3 21l1.9-6A8.5 8.5 0 1 1 21 11.5z"/><path d="M9.2 9.3a2.8 2.8 0 0 1 5.4 1c0 1.9-2.8 2.4-2.8 2.4"/><path d="M12 16.2h.01"/></Ic>,
  learn:   (p) => <Ic {...p}><path d="M12 4L2 9l10 5 10-5-10-5z"/><path d="M6 11v5c0 1 2.7 2.5 6 2.5s6-1.5 6-2.5v-5"/></Ic>,
  chip:    (p) => <Ic {...p}><rect x="7" y="7" width="10" height="10" rx="1.5"/><path d="M10 7V4M14 7V4M10 20v-3M14 20v-3M7 10H4M7 14H4M20 10h-3M20 14h-3"/></Ic>,
  star:    (p) => <Ic {...p}><path d="M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 17l-5.3 2.8 1-5.8L3.5 9.7l5.9-.9z"/></Ic>,
  fork:    (p) => <Ic {...p}><circle cx="6" cy="5" r="2.4"/><circle cx="18" cy="5" r="2.4"/><circle cx="12" cy="19" r="2.4"/><path d="M6 7.4v3.1a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V7.4M12 13.5v3.1"/></Ic>,
  arrow:   (p) => <Ic {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Ic>,
  arrowUp: (p) => <Ic {...p}><path d="M12 19V5M6 11l6-6 6 6"/></Ic>,
  check:   (p) => <Ic {...p}><path d="M20 6L9 17l-5-5"/></Ic>,
  search:  (p) => <Ic {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></Ic>,
  menu:    (p) => <Ic {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Ic>,
  close:   (p) => <Ic {...p}><path d="M6 6l12 12M18 6L6 18"/></Ic>,
  sun:     (p) => <Ic {...p}><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2.2M12 19.8V22M4.2 4.2l1.6 1.6M18.2 18.2l1.6 1.6M2 12h2.2M19.8 12H22M4.2 19.8l1.6-1.6M18.2 5.8l1.6-1.6"/></Ic>,
  moon:    (p) => <Ic {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></Ic>,
  terminal:(p) => <Ic {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></Ic>,
  github:  (p) => <Ic {...p} fill="currentColor" stroke="none"><path d="M12 2C6.5 2 2 6.6 2 12.3c0 4.5 2.9 8.4 6.8 9.7.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.3 9.3 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5 4-1.3 6.8-5.2 6.8-9.7C22 6.6 17.5 2 12 2z"/></Ic>,
  youtube: (p) => <Ic {...p} fill="currentColor" stroke="none"><path d="M23.5 6.5a3 3 0 0 0-2.1-2.1C19.5 3.9 12 3.9 12 3.9s-7.5 0-9.4.5A3 3 0 0 0 .5 6.5 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.5 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.5zM9.6 15.6V8.4l6.3 3.6z"/></Ic>,
  play:    (p) => <Ic {...p} fill="currentColor" stroke="none"><path d="M8 5.5v13l11-6.5z"/></Ic>,
  bolt:    (p) => <Ic {...p}><path d="M13 2L4.5 13.5H11l-1 8.5 8.5-11.5H12z"/></Ic>,
  book:    (p) => <Ic {...p}><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5"/></Ic>,
  users:   (p) => <Ic {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3 20a6 6 0 0 1 12 0M16 4.2a3.2 3.2 0 0 1 0 6.1M15 20a6 6 0 0 1 6-6"/></Ic>,
};

/* reveal on scroll — scroll/rect based (robust even when IntersectionObserver
   doesn't fire in hidden/preview iframes) */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const nodes = el.classList.contains("reveal") ? [el] : Array.from(el.querySelectorAll(".reveal"));
    const check = () => {
      const vh = window.innerHeight || 800;
      let pending = false;
      nodes.forEach((n) => {
        if (n.classList.contains("in")) return;
        const r = n.getBoundingClientRect();
        if (r.top < vh * 0.94 && r.bottom > 0) n.classList.add("in");
        else pending = true;
      });
      if (!pending) { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); }
    };
    check();
    const t1 = setTimeout(check, 200);
    const t2 = setTimeout(check, 700);
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    return () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); clearTimeout(t1); clearTimeout(t2); };
  }, []);
  return ref;
}

/* count-up number — scroll/rect triggered with setTimeout safety */
function Counter({ to, suffix = "", dur = 1400 }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let raf, safety, started = false;
    const run = () => {
      if (started) return; started = true;
      window.removeEventListener("scroll", check);
      const t0 = performance.now();
      const tick = (t) => {
        const p = Math.min(1, (t - t0) / dur);
        const e = 1 - Math.pow(1 - p, 3);
        setN(Math.round(to * e));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      safety = setTimeout(() => setN(to), dur + 150); // guarantee final value
    };
    const check = () => {
      const vh = window.innerHeight || 800;
      const r = el.getBoundingClientRect();
      if (r.top < vh * 0.9 && r.bottom > 0) run();
    };
    check();
    const t1 = setTimeout(check, 300);
    window.addEventListener("scroll", check, { passive: true });
    return () => { window.removeEventListener("scroll", check); cancelAnimationFrame(raf); clearTimeout(safety); clearTimeout(t1); };
  }, [to]);
  return <span ref={ref}>{n.toLocaleString("tr-TR")}{suffix}</span>;
}

/* animated oscilloscope trace — sine (default) or square ("blink") */
function Waveform({ h = 70, color, shape = "sine" }) {
  const ref = useRef(null);
  useEffect(() => {
    const path = ref.current; if (!path) return;
    let raf, ph = 0, reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
    const W = 300;
    const mod2 = (v) => ((Math.floor(v) % 2) + 2) % 2;
    const draw = () => {
      let d = "";
      if (shape === "square") {
        const period = 58, top = 7, bot = h - 7;
        let prev = null;
        for (let x = 0; x <= W; x += 1) {
          const y = mod2(x / period + ph) === 0 ? top : bot;
          if (prev === null) { d = "M" + x + " " + y; }
          else if (y !== prev) { d += " L" + x + " " + prev + " L" + x + " " + y; }
          else { d += " L" + x + " " + y; }
          prev = y;
        }
        ph += 0.018;
      } else {
        for (let x = 0; x <= W; x += 4) {
          const y = h / 2 + Math.sin(x / 18 + ph) * (h / 2 - 6) * Math.sin(x / 120 + ph / 3);
          d += (x === 0 ? "M" : "L") + x + " " + y.toFixed(1) + " ";
        }
        ph += 0.06;
      }
      path.setAttribute("d", d);
      if (!reduce) raf = requestAnimationFrame(draw);
    };
    draw();
    return () => cancelAnimationFrame(raf);
  }, [shape, h]);
  return (
    <svg viewBox={`0 0 300 ${h}`} width="100%" height={h} preserveAspectRatio="none" aria-hidden="true">
      <path ref={ref} fill="none" stroke={color || "var(--accent)"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity="0.9" />
    </svg>
  );
}

/* ---- Brand mark: vector circuit-tree badge (replaces the raster logo) ---- */
function BrandMark({ size = 40, className = "" }) {
  const id = React.useMemo(() => "bm" + Math.random().toString(36).slice(2, 7), []);
  return (
    <svg className={"brandmark " + className} width={size} height={size} viewBox="0 0 44 44"
      fill="none" role="img" aria-label="embeddedTR">
      <defs>
        <linearGradient id={id + "b"} x1="0" y1="0" x2="44" y2="44" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#2a201d" />
          <stop offset="1" stopColor="#16110f" />
        </linearGradient>
      </defs>
      {/* badge */}
      <rect x="1.5" y="1.5" width="41" height="41" rx="12" fill={`url(#${id}b)`} />
      <rect x="1.5" y="1.5" width="41" height="41" rx="12" stroke="var(--accent)" strokeOpacity=".42" strokeWidth="1.4" />
      <rect x="3.5" y="3.5" width="37" height="37" rx="10" stroke="rgba(255,255,255,.06)" strokeWidth="1" />
      {/* circuit traces */}
      <g stroke="var(--accent)" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 33.5V21" />
        <path d="M22 21V11.5" />
        <path d="M22 22.5L14.5 17.5V11.5" />
        <path d="M22 22.5L29.5 17.5V11.5" />
      </g>
      {/* base pad */}
      <rect x="17.6" y="32.2" width="8.8" height="3.4" rx="1.7" fill="var(--accent)" />
      {/* nodes */}
      <g fill="var(--accent)">
        <circle cx="22" cy="11.5" r="2.5" />
        <circle cx="14.5" cy="11.5" r="2.5" />
        <circle cx="29.5" cy="11.5" r="2.5" />
        <circle cx="22" cy="21.7" r="1.7" fill="#fff" fillOpacity=".92" />
      </g>
    </svg>
  );
}

/* full lockup: mark + wordmark + online dot */
function BrandLockup({ size = 38, withDot = true }) {
  return (
    <span className="brand">
      <BrandMark size={size} />
      <span className="brand__word">embedded<b>TR</b></span>
      {withDot && <span className="brand__dot" title="online" />}
    </span>
  );
}

Object.assign(window, { Icons, useReveal, Counter, Waveform, BrandMark, BrandLockup });
