/* global React */
// "The Good Company I Keep" (parallax depth-collage) + Toolkit (CRT TVs)

// Uploaded brand logos — floated glass tiles, depth-layered. L = near | mid | far
const LOGOS = [
  { f: "l16.jpg", L: "near", x: 22, y: 120 },
  { f: "l09.jpg", L: "near", x: 55, y: 92  },
  { f: "l11.jpg", L: "near", x: 80, y: 180 },
  { f: "l02.jpg", L: "near", x: 14, y: 430 },
  { f: "l15.jpg", L: "near", x: 46, y: 470 },
  { f: "l14.png", L: "near", x: 74, y: 440 },
  { f: "l01.jpg", L: "mid",  x: 38, y: 250 },
  { f: "l04.jpg", L: "mid",  x: 66, y: 300 },
  { f: "l06.jpg", L: "mid",  x: 90, y: 330 },
  { f: "l07.png", L: "mid",  x: 30, y: 660 },
  { f: "l13.jpg", L: "mid",  x: 60, y: 680 },
  { f: "l03.jpg", L: "far",  x: 8,  y: 250 },
  { f: "l05.jpg", L: "far",  x: 52, y: 196 },
  { f: "l08.png", L: "far",  x: 88, y: 150 },
  { f: "l10.jpg", L: "far",  x: 18, y: 650 },
  { f: "l12.png", L: "far",  x: 84, y: 640 }
];
const LAYER_CFG = {
  near: { sz: 172, op: 1,    z: 300, ax: 30, ay: 24, w: 0.16, sk: 0.10 },
  mid:  { sz: 132, op: 0.96, z: 200, ax: 22, ay: 18, w: 0.12, sk: 0.07 },
  far:  { sz: 104, op: 0.86, z: 100, ax: 15, ay: 12, w: 0.09, sk: 0.05 }
};

function Companies() {
  React.useEffect(() => {
    const sec = document.getElementById("companies");
    if (!sec) return;
    const tiles = [...sec.querySelectorAll(".logo-tile")];
    // Each tile gets a UNIQUE elliptical orbit (radiusX, radiusY, speed, phase, depth)
    // around the shared field centre. Near-layer logos get the widest radii + most depth.
    const orbits = tiles.map((t, i) => {
      const L = t.dataset.layer;
      const near = L === "near", mid = L === "mid";
      return {
        t,
        radiusX: ((near ? 250 : mid ? 175 : 120) + i * 6) * 1.5,        // unique per tile
        radiusY: ((near ? 96 : mid ? 70 : 50) + (i % 6) * 7) * 1.5,
        speed: 0.00026 + i * 0.0000145,                          // unique per tile
        phase: i * 0.66,                                         // unique start position
        dir: i % 2 === 0 ? 1 : -1,                               // alternate orbit direction
        depth: near ? 1.25 : mid ? 0.8 : 0.55,
        z: near ? 300 : mid ? 200 : 100
      };
    });
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const rest = () => orbits.forEach((o) => { o.t.style.transform = "translate(-50%, -50%) scale(1)"; });
    if (reduce) { rest(); return; }
    let raf = 0;
    const animate = (timestamp) => {
      if (document.body.dataset.motion === "0") { rest(); raf = requestAnimationFrame(animate); return; }
      orbits.forEach((o) => {
        const a = timestamp * o.speed * o.dir + o.phase;
        const x = Math.cos(a) * o.radiusX;
        const y = Math.sin(a) * o.radiusY;
        const scale = 0.85 + o.depth * 0.15 * (1 + Math.sin(a));
        o.t.style.transform = "translate(calc(-50% + " + x.toFixed(1) + "px), calc(-50% + " + y.toFixed(1) + "px)) scale(" + scale.toFixed(3) + ")";
        o.t.style.zIndex = String(o.z + Math.round(scale * 60));
      });
      raf = requestAnimationFrame(animate);
    };
    raf = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <section id="companies" style={{ paddingBlock: "var(--section-y)" }}>
      <div className="wrap">
        <SectionHead index="03 / BRANDS" tag="Trusted on" title={<React.Fragment>The good company <span className="ink-grad">I keep.</span></React.Fragment>}
          sub="Brands I've worked on and alongside — as an account executive, strategist, and collaborator across campaigns big and small." />
        <div className="logo-field">
          {LOGOS.map((g) => {
            const cfg = LAYER_CFG[g.L];
            return (
              <div key={g.f} className="logo-tile" data-layer={g.L} style={{ zIndex: cfg.z }}>
                <div className="logo-float">
                  <div className="logo-glass" style={{ width: cfg.sz, height: cfg.sz, opacity: cfg.op }}>
                    <img src={"assets/logos/" + g.f} alt="" />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const TOOL_GROUPS = [
  { group: "Creative", channel: "01", rot: "r", items: [
    ["Illustrator", "pen-tool", "Adobe"], ["Photoshop", "image", "Adobe"], ["InDesign", "layout", "Adobe"],
    ["Canva", "shapes", "Design"], ["PowerPoint", "presentation", "Microsoft"], ["Miro", "git-branch", "Whiteboard"], ["Klaviyo", "send", "Lifecycle"]
  ] },
  { group: "Social Media", channel: "02", rot: "l", items: [
    ["META Ads Mgr", "target", "Paid social"], ["Sprout", "sprout", "Scheduling"]
  ] },
  { group: "Project Management", channel: "03", rot: "r", items: [
    ["Monday.com", "calendar-days", "Ops"], ["ClickUp", "list-checks", "Tasks"], ["MS Planner", "kanban", "Microsoft"]
  ] },
  { group: "Analytics", channel: "04", rot: "l", items: [
    ["Excel", "table", "Microsoft"], ["Environics Envision", "database", "Syndicated data"], ["Tableau", "bar-chart-3", "Viz"]
  ] }
];

function Toolkit() {
  return (
    <section id="toolkit" style={{ paddingBlock: "var(--section-y)" }}>
      <div className="wrap">
        <SectionHead index="02 / TOOLS" tag="The stack" title={<React.Fragment>Four channels, <span className="ink-grad">one operator.</span></React.Fragment>}
          sub="Tune in — every tool I work in, broadcasting across four channels." align="center" />
      </div>
      <div className="crt-stack" style={{ marginTop: 60 }}>
        {TOOL_GROUPS.map((g) => (
          <div key={g.group} data-reveal style={{ width: "100%", display: "flex", justifyContent: "center" }}>
            <CrtTv group={g.group} channel={g.channel} items={g.items} rot={g.rot} />
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Companies, Toolkit });