// Mechanisme: gallery-r3f-island-gallery
// Live demo: vanilla three.js voor lichte bundle.
// R3F-equivalent (educatief):
import { Canvas, useFrame } from '@react-three/fiber';
function Card({ index, texture }) {
  const ref = useRef();
  useFrame((s) => { ref.current.position.y = Math.sin(s.clock.elapsedTime + index) * 0.06; });
  return (
    <mesh ref={ref} position={[(index-2)*1.55, 0, -index*0.25]}>
      <planeGeometry args={[1.4, 1.9]} />
      <meshStandardMaterial map={texture} />
    </mesh>
  );
}
export default () => (
  <Canvas camera={{ position:[0,0,6], fov:45 }}>
    <ambientLight intensity={0.6}/>
    <directionalLight position={[2,3,4]} intensity={0.9}/>
    {[0,1,2,3,4].map(i => <Card key={i} index={i} texture={makeTex(i)} />)}
  </Canvas>
);

// --- VANILLA THREE (LIVE) ---
import * as THREE from 'https://esm.sh/three@0.160.0';
const host = document.querySelector('.r3f-island-mount');
const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true });
host.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 16/9, 0.1, 100);
camera.position.set(0,0,6);
scene.add(new THREE.AmbientLight(0xffffff, 0.7));
const dir = new THREE.DirectionalLight(0xffffff, 1); dir.position.set(2,3,4); scene.add(dir);
// 5 floating planes met canvas-gradient textures...

<!-- Skeleton: gallery-r3f-island-gallery -->
<section class="r3f-island-section">
  <p class="kicker">Motion Lab / Galleries / r3f island / gallery</p>
  <h2>Floating image cards.</h2>
  <div class="r3f-island-mount">
    <div class="r3f-island-fallback" hidden>
      <!-- 5 gradient placeholders bij WebGL-failure -->
    </div>
  </div>
</section>

/* Styling: gallery-r3f-island-gallery */
:root {
  --block-bg: #0A0A0A;
  --block-fg: #F4F1EB;
  --block-accent: #FF4A1C;
}
.r3f-island-section { background: var(--block-bg); color: var(--block-fg); min-height: 100vh; }
.r3f-island-mount { position: relative; width: 100%; min-height: 80vh; }
.r3f-island-mount canvas { display: block; width: 100% !important; height: 100% !important; }