window.sketch = (runtime) => {
  const { THREE, canvas, startFrame, width, height } = runtime;

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  camera.position.z = 5;

  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(width, height, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  // Central abstract core (identity)
  const coreGeometry = new THREE.IcosahedronGeometry(1, 0);
  const coreMaterial = new THREE.MeshPhongMaterial({
    color: 0x4a00e0,
    emissive: 0x2a0080,
    emissiveIntensity: 0.5,
    shininess: 100,
    specular: 0x888888
  });
  const core = new THREE.Mesh(coreGeometry, coreMaterial);
  scene.add(core);

  // Chaotic floating fragments (aspects of self)
  const fragmentGroup = new THREE.Group();
  scene.add(fragmentGroup);

  const fragmentCount = 20;
  const fragmentGeometries = [
    new THREE.TetrahedronGeometry(0.3),
    new THREE.OctahedronGeometry(0.25),
    new THREE.TorusGeometry(0.2, 0.08, 8, 16),
    new THREE.DodecahedronGeometry(0.2)
  ];

  for (let i = 0; i < fragmentCount; i++) {
    const geometry = fragmentGeometries[i % fragmentGeometries.length];
    const material = new THREE.MeshPhongMaterial({
      color: new THREE.Color().setHSL(i / fragmentCount, 0.7, 0.5),
      emissive: new THREE.Color().setHSL(i / fragmentCount, 0.7, 0.2),
      emissiveIntensity: 0.3,
      shininess: 50
    });
    const fragment = new THREE.Mesh(geometry, material);

    fragment.position.set(
      (Math.random() - 0.5) * 4,
      (Math.random() - 0.5) * 4,
      (Math.random() - 0.5) * 4
    );

    fragment.rotation.set(
      Math.random() * Math.PI,
      Math.random() * Math.PI,
      Math.random() * Math.PI
    );

    fragment.userData = {
      rotationSpeed: new THREE.Vector3(
        (Math.random() - 0.5) * 0.02,
        (Math.random() - 0.5) * 0.02,
        (Math.random() - 0.5) * 0.02
      ),
      orbitRadius: 1.5 + Math.random() * 2,
      orbitSpeed: 0.005 + Math.random() * 0.01,
      orbitPhase: Math.random() * Math.PI * 2,
      pulseAmplitude: 0.1 + Math.random() * 0.2,
      pulseSpeed: 0.5 + Math.random() * 0.5
    };

    fragmentGroup.add(fragment);
  }

  // Structured grid (perception/reality)
  const gridGeometry = new THREE.BufferGeometry();
  const gridVertices = [];
  const gridSize = 5;
  const gridDivisions = 10;

  for (let i = 0; i <= gridDivisions; i++) {
    const x = (i / gridDivisions - 0.5) * gridSize * 2;
    gridVertices.push(x, -gridSize, 0, x, gridSize, 0);
    gridVertices.push(-gridSize, x, 0, gridSize, x, 0);
  }

  gridGeometry.setAttribute('position', new THREE.Float32BufferAttribute(gridVertices, 3));
  const gridMaterial = new THREE.LineBasicMaterial({
    color: 0x222244,
    transparent: true,
    opacity: 0.3
  });
  const grid = new THREE.LineSegments(gridGeometry, gridMaterial);
  grid.rotation.x = Math.PI / 4;
  grid.rotation.y = Math.PI / 4;
  scene.add(grid);

  // Lights
  const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
  scene.add(ambientLight);

  const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight1.position.set(1, 1, 1);
  scene.add(directionalLight1);

  const directionalLight2 = new THREE.DirectionalLight(0x00aaff, 0.5);
  directionalLight2.position.set(-1, -1, 1);
  scene.add(directionalLight2);

  // Background gradient
  scene.background = new THREE.Color(0x0a0a1a);

  // Animation
  let time = 0;
  startFrame((dt) => {
    time += dt * 0.001;

    // Rotate core
    core.rotation.x += 0.005;
    core.rotation.y += 0.007;

    // Animate fragments
    fragmentGroup.children.forEach((fragment, i) => {
      const data = fragment.userData;

      // Orbit around core
      fragment.position.x = Math.cos(time * data.orbitSpeed + data.orbitPhase) * data.orbitRadius;
      fragment.position.y = Math.sin(time * data.orbitSpeed * 1.3 + data.orbitPhase) * data.orbitRadius * 0.7;
      fragment.position.z = Math.sin(time * data.orbitSpeed * 0.7 + data.orbitPhase) * data.orbitRadius * 0.5;

      // Rotate fragment
      fragment.rotation.x += data.rotationSpeed.x;
      fragment.rotation.y += data.rotationSpeed.y;
      fragment.rotation.z += data.rotationSpeed.z;

      // Pulse scale
      const pulse = Math.sin(time * data.pulseSpeed) * data.pulseAmplitude;
      fragment.scale.set(1 + pulse, 1 + pulse, 1 + pulse);
    });

    // Rotate grid
    grid.rotation.x += 0.002;
    grid.rotation.y += 0.003;

    // Core glow effect
    coreMaterial.emissiveIntensity = 0.5 + Math.sin(time * 2) * 0.2;

    renderer.render(scene, camera);
  });

  return () => {
    renderer.dispose();
    scene.traverse((obj) => {
      if (obj.isMesh) {
        obj.geometry.dispose();
        if (obj.material instanceof Array) {
          obj.material.forEach(m => m.dispose());
        } else {
          obj.material.dispose();
        }
      }
    });
  };
};
