const { useEffect, useRef } = React;

function App() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const prefersReducedMotion =
      typeof window !== "undefined" &&
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    let rafId = 0;
    let lastTs = 0;
    let w = 0;
    let h = 0;
    let dpr = 1;
    let orbs = [];

    const layerDefs = [
      {
        inner: "rgba(163, 230, 129, 0.09)",
        mid: "rgba(163, 230, 129, 0.025)",
        outer: "rgba(163, 230, 129, 0)",
      },
      {
        inner: "rgba(120, 165, 220, 0.07)",
        mid: "rgba(120, 165, 220, 0.02)",
        outer: "rgba(120, 165, 220, 0)",
      },
      {
        inner: "rgba(167, 139, 250, 0.06)",
        mid: "rgba(167, 139, 250, 0.018)",
        outer: "rgba(167, 139, 250, 0)",
      },
      {
        inner: "rgba(255, 255, 255, 0.05)",
        mid: "rgba(255, 255, 255, 0.012)",
        outer: "rgba(255, 255, 255, 0)",
      },
    ];

    function rand(min, max) {
      return Math.random() * (max - min) + min;
    }

    function resize() {
      dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
      w = Math.max(1, window.innerWidth);
      h = Math.max(1, window.innerHeight);

      canvas.style.width = `${w}px`;
      canvas.style.height = `${h}px`;
      canvas.width = Math.floor(w * dpr);
      canvas.height = Math.floor(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

      const minDim = Math.min(w, h);
      const n = Math.max(5, Math.min(8, Math.floor(minDim / 100) + 5));
      orbs = [];

      for (let i = 0; i < n; i++) {
        const t = (i / n) * Math.PI * 2 + 0.35;
        const def = layerDefs[i % layerDefs.length];
        const r = rand(minDim * 0.2, minDim * 0.42);
        const speed = prefersReducedMotion ? 0 : rand(3, 10);
        const ang = rand(0, Math.PI * 2);

        orbs.push({
          x: w * 0.5 + Math.cos(t) * w * 0.36 + rand(-40, 40),
          y: h * 0.48 + Math.sin(t) * h * 0.3 + rand(-35, 35),
          r,
          vx: Math.cos(ang) * speed,
          vy: Math.sin(ang) * speed,
          inner: def.inner,
          mid: def.mid,
          outer: def.outer,
        });
      }
    }

    function drawBase() {
      const g = ctx.createLinearGradient(0, 0, w, h);
      g.addColorStop(0, "#060910");
      g.addColorStop(0.4, "#0a1018");
      g.addColorStop(0.75, "#080c14");
      g.addColorStop(1, "#05070d");
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, w, h);

      const sheen = ctx.createLinearGradient(0, h, w, 0);
      sheen.addColorStop(0, "rgba(255, 255, 255, 0)");
      sheen.addColorStop(0.45, "rgba(255, 255, 255, 0.02)");
      sheen.addColorStop(1, "rgba(120, 150, 200, 0.04)");
      ctx.fillStyle = sheen;
      ctx.fillRect(0, 0, w, h);
    }

    function drawGrain() {
      ctx.fillStyle = "rgba(255, 255, 255, 0.014)";
      const step = Math.max(36, Math.min(56, Math.floor(Math.min(w, h) / 14)));
      for (let x = step * 0.5; x < w; x += step) {
        for (let y = step * 0.5; y < h; y += step) {
          ctx.fillRect(Math.floor(x), Math.floor(y), 1, 1);
        }
      }
    }

    function drawOrbs() {
      for (const o of orbs) {
        const g = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, o.r);
        g.addColorStop(0, o.inner);
        g.addColorStop(0.55, o.mid);
        g.addColorStop(1, o.outer);
        ctx.fillStyle = g;
        ctx.beginPath();
        ctx.arc(o.x, o.y, o.r, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    function drawVignette() {
      const v = ctx.createRadialGradient(
        w * 0.5,
        h * 0.42,
        Math.min(w, h) * 0.12,
        w * 0.5,
        h * 0.5,
        Math.max(w, h) * 0.58
      );
      v.addColorStop(0, "rgba(0, 0, 0, 0)");
      v.addColorStop(0.65, "rgba(0, 0, 0, 0.12)");
      v.addColorStop(1, "rgba(0, 0, 0, 0.38)");
      ctx.fillStyle = v;
      ctx.fillRect(0, 0, w, h);
    }

    function moveOrbs(dtSec) {
      const pad = 100;
      for (const o of orbs) {
        o.x += o.vx * dtSec;
        o.y += o.vy * dtSec;
        if (o.x < -pad) o.x = w + pad;
        if (o.x > w + pad) o.x = -pad;
        if (o.y < -pad) o.y = h + pad;
        if (o.y > h + pad) o.y = -pad;
      }
    }

    function drawScene() {
      ctx.clearRect(0, 0, w, h);
      drawBase();
      drawGrain();
      drawOrbs();
      drawVignette();
    }

    function step(ts) {
      const dtSec = lastTs ? Math.min(48, ts - lastTs) / 1000 : 1 / 60;
      lastTs = ts;

      moveOrbs(dtSec);
      drawScene();

      rafId = window.requestAnimationFrame(step);
    }

    function drawOnce() {
      drawScene();
    }

    function onResize() {
      resize();
      if (prefersReducedMotion) drawOnce();
    }

    resize();
    window.addEventListener("resize", onResize, { passive: true });

    if (prefersReducedMotion) {
      drawOnce();
    } else {
      rafId = window.requestAnimationFrame(step);
    }

    return () => {
      window.removeEventListener("resize", onResize);
      if (rafId) window.cancelAnimationFrame(rafId);
    };
  }, []);

  return (
    <>
      <canvas className="bg" ref={canvasRef} aria-hidden="true" />

      <main className="shell" aria-label="Arkin landing">
        <img className="logo" src="./image.png" alt="Arkin logo" />
        <p className="lead">Save Your Time, Every Time</p>
        <div className="contact" aria-label="Contact links">
          <a
            className="iconBtn"
            href="https://www.linkedin.com/company/arkin-app"
            target="_blank"
            rel="noreferrer"
            aria-label="Arkin on LinkedIn"
          >
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path
                d="M19 3A2 2 0 0 1 21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14ZM8.34 18.34V10.5H5.67v7.84h2.67ZM7 9.3a1.55 1.55 0 1 0 0-3.1 1.55 1.55 0 0 0 0 3.1Zm11.34 9.04v-4.28c0-2.29-1.22-3.35-2.85-3.35-1.31 0-1.9.72-2.23 1.23v-1.05h-2.67c.04.7 0 7.45 0 7.45h2.67v-4.16c0-.22.02-.44.08-.6.18-.44.59-.9 1.28-.9.9 0 1.26.68 1.26 1.68v3.98h2.68Z"
                fill="currentColor"
              />
            </svg>
          </a>
        </div>

        <div className="meta" role="contentinfo" aria-label="Copyright Arkin 2026">
          © Arkin 2026
        </div>
      </main>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);