solanapolis 1.0.0

package/src/components/DubaiDistrict.tsx

@@ -0,0 +1,630 @@
+"use client";
+
+import { useRef, useMemo, useEffect, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+
+// ─── Dubai District Position (northeast corner, outside main grid) ──────────
+const DUBAI_X = 260;
+const DUBAI_Z = -260;
+
+// ─── Seeded random ──────────────────────────────────────────────────────────
+function sr(seed: number) {
+  const x = Math.sin(seed * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+}
+
+// ─── Materials ──────────────────────────────────────────────────────────────
+function useDubaiMats() {
+  return useMemo(() => ({
+    chrome: new THREE.MeshStandardMaterial({ color: "#c0c8d0", metalness: 0.95, roughness: 0.1 }),
+    goldGlass: new THREE.MeshStandardMaterial({ color: "#d4a843", metalness: 0.7, roughness: 0.15, transparent: true, opacity: 0.85 }),
+    darkGlass: new THREE.MeshStandardMaterial({ color: "#1a2a3a", metalness: 0.6, roughness: 0.05, transparent: true, opacity: 0.75 }),
+    sand: new THREE.MeshStandardMaterial({ color: "#e8d5a8", roughness: 0.95 }),
+    white: new THREE.MeshStandardMaterial({ color: "#f5f0ea", roughness: 0.4 }),
+    lamboYellow: new THREE.MeshStandardMaterial({ color: "#f5c518", metalness: 0.85, roughness: 0.15 }),
+    lamboRed: new THREE.MeshStandardMaterial({ color: "#cc1100", metalness: 0.85, roughness: 0.15 }),
+    neonPink: new THREE.MeshStandardMaterial({ color: "#ff1493", emissive: "#ff1493", emissiveIntensity: 2, toneMapped: false }),
+    neonBlue: new THREE.MeshStandardMaterial({ color: "#00bfff", emissive: "#00bfff", emissiveIntensity: 2, toneMapped: false }),
+    pool: new THREE.MeshStandardMaterial({ color: "#00ccff", transparent: true, opacity: 0.6, metalness: 0.3, roughness: 0.1 }),
+  }), []);
+}
+
+// ─── BURJ KHALIFA ───────────────────────────────────────────────────────────
+function BurjKhalifa({ mats }: { mats: ReturnType<typeof useDubaiMats> }) {
+  const spireRef = useRef<THREE.Mesh>(null);
+
+  useFrame(({ clock }) => {
+    if (spireRef.current) {
+      const t = clock.getElapsedTime();
+      (spireRef.current.material as THREE.MeshStandardMaterial).emissiveIntensity =
+        1.5 + Math.sin(t * 3) * 1.0;
+    }
+  });
+
+  return (
+    <group>
+      {/* Base podium */}
+      <mesh position={[0, 2, 0]} material={mats.white} castShadow>
+        <boxGeometry args={[18, 4, 18]} />
+      </mesh>
+      {/* Lower section */}
+      <mesh position={[0, 20, 0]} material={mats.chrome} castShadow>
+        <boxGeometry args={[12, 36, 12]} />
+      </mesh>
+      {/* Mid taper */}
+      <mesh position={[0, 48, 0]} material={mats.goldGlass} castShadow>
+        <boxGeometry args={[8, 20, 8]} />
+      </mesh>
+      {/* Upper taper */}
+      <mesh position={[0, 66, 0]} material={mats.chrome} castShadow>
+        <boxGeometry args={[5, 16, 5]} />
+      </mesh>
+      {/* Needle section */}
+      <mesh position={[0, 82, 0]} material={mats.chrome} castShadow>
+        <cylinderGeometry args={[0.3, 2.5, 16, 8]} />
+      </mesh>
+      {/* Spire tip — pulsing */}
+      <mesh ref={spireRef} position={[0, 94, 0]}>
+        <sphereGeometry args={[0.6, 8, 8]} />
+        <meshStandardMaterial color="#ff6600" emissive="#ff6600" emissiveIntensity={2} toneMapped={false} />
+      </mesh>
+      {/* Y-shaped wings */}
+      {[0, 120, 240].map((angle) => (
+        <mesh
+          key={angle}
+          position={[
+            Math.sin((angle * Math.PI) / 180) * 7,
+            25,
+            Math.cos((angle * Math.PI) / 180) * 7,
+          ]}
+          rotation={[0, (angle * Math.PI) / 180, 0]}
+          material={mats.darkGlass}
+          castShadow
+        >
+          <boxGeometry args={[2, 30, 6]} />
+        </mesh>
+      ))}
+      {/* Window strips */}
+      {[12, 24, 36, 48, 60, 70].map((y, i) => (
+        <mesh key={i} position={[6.1, y, 0]} material={mats.darkGlass}>
+          <planeGeometry args={[0.5, 3]} />
+        </mesh>
+      ))}
+    </group>
+  );
+}
+
+// ─── LAMBORGHINI (parked) ───────────────────────────────────────────────────
+function Lambo({ mats, color }: { mats: ReturnType<typeof useDubaiMats>; color: "yellow" | "red" }) {
+  const mat = color === "yellow" ? mats.lamboYellow : mats.lamboRed;
+  return (
+    <group>
+      {/* Body */}
+      <mesh position={[0, 0.4, 0]} material={mat} castShadow>
+        <boxGeometry args={[1.8, 0.5, 4.5]} />
+      </mesh>
+      {/* Windshield wedge */}
+      <mesh position={[0, 0.75, -0.3]} material={mats.darkGlass}>
+        <boxGeometry args={[1.6, 0.3, 1.5]} />
+      </mesh>
+      {/* Wheels */}
+      {[[-0.9, 0.2, 1.4], [0.9, 0.2, 1.4], [-0.9, 0.2, -1.4], [0.9, 0.2, -1.4]].map((p, i) => (
+        <mesh key={i} position={p as [number, number, number]} rotation={[0, 0, Math.PI / 2]}>
+          <cylinderGeometry args={[0.22, 0.22, 0.15, 12]} />
+          <meshStandardMaterial color="#222" metalness={0.5} roughness={0.4} />
+        </mesh>
+      ))}
+      {/* Headlights */}
+      <mesh position={[0.5, 0.5, 2.26]}>
+        <sphereGeometry args={[0.12, 6, 6]} />
+        <meshStandardMaterial color="#ffffaa" emissive="#ffffaa" emissiveIntensity={1.5} toneMapped={false} />
+      </mesh>
+      <mesh position={[-0.5, 0.5, 2.26]}>
+        <sphereGeometry args={[0.12, 6, 6]} />
+        <meshStandardMaterial color="#ffffaa" emissive="#ffffaa" emissiveIntensity={1.5} toneMapped={false} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── INFLUENCER (walking figure with selfie stick + phone) ──────────────────
+function Influencer({
+  startX, startZ, seed, label, emoji,
+}: {
+  startX: number; startZ: number; seed: number; label: string; emoji: string;
+}) {
+  const groupRef = useRef<THREE.Group>(null);
+  const phase = useRef(sr(seed) * Math.PI * 2);
+  const radius = 6 + sr(seed + 1) * 10;
+  const speed = 0.15 + sr(seed + 2) * 0.2;
+  const skinTone = useMemo(() => {
+    const tones = ["#f5cba7", "#d4a574", "#8d5524", "#c68642", "#f1c27d"];
+    return tones[Math.floor(sr(seed + 3) * tones.length)];
+  }, [seed]);
+  const outfitColor = useMemo(() => {
+    const fits = ["#ff1493", "#00bfff", "#ffd700", "#ff4500", "#7b68ee", "#00ff7f"];
+    return fits[Math.floor(sr(seed + 4) * fits.length)];
+  }, [seed]);
+
+  useFrame(({ clock }) => {
+    if (!groupRef.current) return;
+    const t = clock.getElapsedTime();
+    phase.current += speed * 0.016;
+    const x = startX + Math.sin(phase.current) * radius;
+    const z = startZ + Math.cos(phase.current * 0.7) * radius;
+    groupRef.current.position.set(x, 0, z);
+    // Bounce walk
+    groupRef.current.position.y = Math.abs(Math.sin(t * 4 + seed)) * 0.15;
+    // Face direction
+    const dx = Math.cos(phase.current) * radius * speed;
+    const dz = -Math.sin(phase.current * 0.7) * radius * speed * 0.7;
+    if (Math.abs(dx) > 0.001 || Math.abs(dz) > 0.001) {
+      groupRef.current.rotation.y = Math.atan2(dx, dz);
+    }
+  });
+
+  return (
+    <group ref={groupRef}>
+      {/* Body */}
+      <mesh position={[0, 0.7, 0]} castShadow>
+        <capsuleGeometry args={[0.25, 0.5, 4, 8]} />
+        <meshStandardMaterial color={outfitColor} />
+      </mesh>
+      {/* Head */}
+      <mesh position={[0, 1.25, 0]} castShadow>
+        <sphereGeometry args={[0.2, 8, 8]} />
+        <meshStandardMaterial color={skinTone} />
+      </mesh>
+      {/* Sunglasses */}
+      <mesh position={[0, 1.3, 0.18]}>
+        <boxGeometry args={[0.35, 0.08, 0.05]} />
+        <meshStandardMaterial color="#111" />
+      </mesh>
+      {/* Selfie stick arm */}
+      <mesh position={[0.35, 1.4, 0.3]} rotation={[0.3, 0, 0.5]}>
+        <cylinderGeometry args={[0.02, 0.02, 1.2, 4]} />
+        <meshStandardMaterial color="#888" metalness={0.8} />
+      </mesh>
+      {/* Phone on stick */}
+      <mesh position={[0.7, 1.9, 0.6]} rotation={[0.3, 0, 0.5]}>
+        <boxGeometry args={[0.2, 0.35, 0.03]} />
+        <meshStandardMaterial color="#222" emissive="#334488" emissiveIntensity={0.5} />
+      </mesh>
+      {/* Name + emoji tag */}
+      <Html center position={[0, 1.8, 0]} distanceFactor={18} style={{ pointerEvents: "none" }}>
+        <div className="px-1.5 py-0.5 rounded bg-black/80 border border-pink-500/40 whitespace-nowrap backdrop-blur-sm">
+          <span className="text-[8px] font-bold text-pink-400">{emoji} {label}</span>
+        </div>
+      </Html>
+    </group>
+  );
+}
+
+// ─── PAPARAZZI FLASH ────────────────────────────────────────────────────────
+function PaparazziFlashes() {
+  const flashesRef = useRef<THREE.InstancedMesh>(null);
+  const count = 12;
+  const dummy = useMemo(() => new THREE.Object3D(), []);
+  const flashData = useMemo(() =>
+    Array.from({ length: count }, (_, i) => ({
+      x: (sr(i * 7) - 0.5) * 40,
+      z: (sr(i * 13) - 0.5) * 40,
+      phase: sr(i * 19) * Math.PI * 2,
+      interval: 1.5 + sr(i * 23) * 3,
+    })),
+    [],
+  );
+
+  useFrame(({ clock }) => {
+    if (!flashesRef.current) return;
+    const t = clock.getElapsedTime();
+    for (let i = 0; i < count; i++) {
+      const f = flashData[i];
+      const flash = Math.sin((t + f.phase) * (Math.PI * 2 / f.interval));
+      const on = flash > 0.92; // brief burst
+      dummy.position.set(f.x, on ? 1.5 : -10, f.z);
+      dummy.scale.setScalar(on ? 1.5 + Math.random() * 0.5 : 0.01);
+      dummy.updateMatrix();
+      flashesRef.current.setMatrixAt(i, dummy.matrix);
+      flashesRef.current.setColorAt(i, new THREE.Color(on ? "#ffffff" : "#000000"));
+    }
+    flashesRef.current.instanceMatrix.needsUpdate = true;
+    if (flashesRef.current.instanceColor) flashesRef.current.instanceColor.needsUpdate = true;
+  });
+
+  return (
+    <instancedMesh ref={flashesRef} args={[undefined, undefined, count]}>
+      <sphereGeometry args={[0.4, 6, 6]} />
+      <meshBasicMaterial color="#ffffff" transparent opacity={0.9} toneMapped={false} />
+    </instancedMesh>
+  );
+}
+
+// ─── EXPLOSIONS / FIREWORKS ─────────────────────────────────────────────────
+interface Boom {
+  id: number;
+  x: number;
+  z: number;
+  birth: number;
+  color: string;
+  scale: number;
+  type: "explosion" | "firework";
+}
+
+function Explosions() {
+  const [booms, setBooms] = useState<Boom[]>([]);
+  const nextId = useRef(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const id = nextId.current++;
+      const type = Math.random() > 0.4 ? "firework" : "explosion";
+      const colors = type === "firework"
+        ? ["#ff1493", "#00bfff", "#ffd700", "#7b68ee", "#ff4500", "#00ff7f"]
+        : ["#ff4500", "#ff6600", "#ffcc00"];
+      setBooms((prev) => [
+        ...prev.slice(-8),
+        {
+          id,
+          x: (Math.random() - 0.5) * 50,
+          z: (Math.random() - 0.5) * 50,
+          birth: Date.now(),
+          color: colors[Math.floor(Math.random() * colors.length)],
+          scale: 1 + Math.random() * 2,
+          type,
+        },
+      ]);
+    }, 800 + Math.random() * 1500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <group>
+      {booms.map((b) => (
+        <BoomEffect key={b.id} boom={b} onDone={() => setBooms((p) => p.filter((x) => x.id !== b.id))} />
+      ))}
+    </group>
+  );
+}
+
+function BoomEffect({ boom, onDone }: { boom: Boom; onDone: () => void }) {
+  const ref = useRef<THREE.Mesh>(null);
+  const particlesRef = useRef<THREE.Points>(null);
+  const age = useRef(0);
+  const maxAge = boom.type === "firework" ? 2.5 : 1.5;
+
+  const particleGeo = useMemo(() => {
+    const count = boom.type === "firework" ? 40 : 20;
+    const positions = new Float32Array(count * 3);
+    const velocities: number[] = [];
+    for (let i = 0; i < count; i++) {
+      positions[i * 3] = 0;
+      positions[i * 3 + 1] = 0;
+      positions[i * 3 + 2] = 0;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.random() * Math.PI;
+      const spd = 3 + Math.random() * 8;
+      velocities.push(
+        Math.sin(phi) * Math.cos(theta) * spd,
+        Math.cos(phi) * spd * 0.7 + 2,
+        Math.sin(phi) * Math.sin(theta) * spd,
+      );
+    }
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+    (geo as any)._velocities = velocities;
+    return geo;
+  }, [boom.type]);
+
+  useFrame((_, delta) => {
+    age.current += delta;
+    if (age.current > maxAge) {
+      onDone();
+      return;
+    }
+    const t = age.current / maxAge;
+
+    // Expanding glow sphere
+    if (ref.current) {
+      const s = boom.scale * (boom.type === "firework" ? t * 4 : (1 - t) * 3 + t * 6);
+      ref.current.scale.setScalar(s);
+      (ref.current.material as THREE.MeshBasicMaterial).opacity = Math.max(0, 1 - t * 1.2);
+    }
+
+    // Particles
+    if (particlesRef.current) {
+      const pos = particlesRef.current.geometry.attributes.position;
+      const vels = (particlesRef.current.geometry as any)._velocities as number[];
+      for (let i = 0; i < pos.count; i++) {
+        pos.setXYZ(
+          i,
+          vels[i * 3] * age.current,
+          vels[i * 3 + 1] * age.current - 4.9 * age.current * age.current,
+          vels[i * 3 + 2] * age.current,
+        );
+      }
+      pos.needsUpdate = true;
+      (particlesRef.current.material as THREE.PointsMaterial).opacity = Math.max(0, 1 - t);
+    }
+  });
+
+  const y = boom.type === "firework" ? 15 + Math.random() * 20 : 2;
+
+  return (
+    <group position={[boom.x, y, boom.z]}>
+      {/* Central flash */}
+      <mesh ref={ref}>
+        <sphereGeometry args={[0.5, 8, 8]} />
+        <meshBasicMaterial color={boom.color} transparent opacity={1} toneMapped={false} />
+      </mesh>
+      {/* Particles */}
+      <points ref={particlesRef} geometry={particleGeo}>
+        <pointsMaterial color={boom.color} size={0.4} transparent opacity={1} toneMapped={false} sizeAttenuation />
+      </points>
+    </group>
+  );
+}
+
+// ─── FLOATING EMOJI REACTIONS ───────────────────────────────────────────────
+function FloatingEmojis() {
+  const [emojis, setEmojis] = useState<{ id: number; x: number; z: number; emoji: string; birth: number }[]>([]);
+  const nextId = useRef(0);
+
+  useEffect(() => {
+    const reactions = ["🔥", "💰", "😂", "💎", "🚀", "👑", "📸", "💸", "🤑", "🏎️", "💅", "✨", "🍾", "💀", "🫡"];
+    const interval = setInterval(() => {
+      setEmojis((prev) => [
+        ...prev.slice(-6),
+        {
+          id: nextId.current++,
+          x: (Math.random() - 0.5) * 35,
+          z: (Math.random() - 0.5) * 35,
+          emoji: reactions[Math.floor(Math.random() * reactions.length)],
+          birth: Date.now(),
+        },
+      ]);
+    }, 600 + Math.random() * 1200);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <group>
+      {emojis.map((e) => (
+        <FloatingEmoji
+          key={e.id}
+          x={e.x}
+          z={e.z}
+          emoji={e.emoji}
+          birth={e.birth}
+          onDone={() => setEmojis((p) => p.filter((x) => x.id !== e.id))}
+        />
+      ))}
+    </group>
+  );
+}
+
+function FloatingEmoji({ x, z, emoji, birth, onDone }: {
+  x: number; z: number; emoji: string; birth: number; onDone: () => void;
+}) {
+  const ref = useRef<THREE.Group>(null);
+
+  useFrame(() => {
+    if (!ref.current) return;
+    const age = (Date.now() - birth) / 1000;
+    if (age > 3) { onDone(); return; }
+    ref.current.position.y = 3 + age * 4;
+    ref.current.scale.setScalar(Math.max(0, 1 - age / 3));
+  });
+
+  return (
+    <group ref={ref} position={[x, 3, z]}>
+      <Html center distanceFactor={20} style={{ pointerEvents: "none" }}>
+        <div className="text-2xl select-none drop-shadow-lg">{emoji}</div>
+      </Html>
+    </group>
+  );
+}
+
+// ─── INFINITY POOL ──────────────────────────────────────────────────────────
+function InfinityPool({ mats }: { mats: ReturnType<typeof useDubaiMats> }) {
+  const waterRef = useRef<THREE.Mesh>(null);
+
+  useFrame(({ clock }) => {
+    if (!waterRef.current) return;
+    waterRef.current.position.y = 0.15 + Math.sin(clock.getElapsedTime() * 1.5) * 0.03;
+  });
+
+  return (
+    <group position={[20, 0, 15]}>
+      {/* Pool basin */}
+      <mesh position={[0, -0.1, 0]} material={mats.white}>
+        <boxGeometry args={[12, 0.5, 6]} />
+      </mesh>
+      {/* Water surface */}
+      <mesh ref={waterRef} position={[0, 0.15, 0]} rotation={[-Math.PI / 2, 0, 0]} material={mats.pool}>
+        <planeGeometry args={[11.5, 5.5]} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── NEON SIGN ──────────────────────────────────────────────────────────────
+function DubaiSign({ mats }: { mats: ReturnType<typeof useDubaiMats> }) {
+  return (
+    <group position={[0, 0, 25]}>
+      {/* Arch */}
+      <mesh position={[0, 5, 0]} material={mats.chrome}>
+        <torusGeometry args={[6, 0.3, 8, 32, Math.PI]} />
+      </mesh>
+      {/* Pillars */}
+      <mesh position={[-6, 2.5, 0]} material={mats.chrome}>
+        <cylinderGeometry args={[0.3, 0.3, 5, 8]} />
+      </mesh>
+      <mesh position={[6, 2.5, 0]} material={mats.chrome}>
+        <cylinderGeometry args={[0.3, 0.3, 5, 8]} />
+      </mesh>
+      {/* Sign text */}
+      <Html center position={[0, 7, 0.5]} distanceFactor={30} style={{ pointerEvents: "none" }}>
+        <div className="text-3xl font-black tracking-widest whitespace-nowrap"
+          style={{
+            background: "linear-gradient(90deg, #ff1493, #ffd700, #00bfff)",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            textShadow: "0 0 20px rgba(255,20,147,0.5)",
+            filter: "drop-shadow(0 0 10px rgba(255,215,0,0.4))",
+          }}
+        >
+          DUBAI MARINA
+        </div>
+      </Html>
+      {/* Neon strips */}
+      <mesh position={[0, 5, 0.4]}>
+        <torusGeometry args={[6.3, 0.08, 4, 32, Math.PI]} />
+        <meshStandardMaterial color="#ff1493" emissive="#ff1493" emissiveIntensity={3} toneMapped={false} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── PALM TREES ─────────────────────────────────────────────────────────────
+function PalmTree({ x, z, seed }: { x: number; z: number; seed: number }) {
+  const lean = (sr(seed) - 0.5) * 0.3;
+  const height = 5 + sr(seed + 1) * 4;
+  const frondRef = useRef<THREE.Group>(null);
+
+  useFrame(({ clock }) => {
+    if (frondRef.current) {
+      frondRef.current.rotation.z = Math.sin(clock.getElapsedTime() * 0.8 + seed) * 0.05;
+    }
+  });
+
+  return (
+    <group position={[x, 0, z]} rotation={[0, 0, lean]}>
+      {/* Trunk */}
+      <mesh position={[0, height / 2, 0]}>
+        <cylinderGeometry args={[0.15, 0.25, height, 6]} />
+        <meshStandardMaterial color="#8B7355" roughness={0.9} />
+      </mesh>
+      {/* Fronds */}
+      <group ref={frondRef} position={[0, height, 0]}>
+        {Array.from({ length: 7 }, (_, i) => {
+          const a = (i / 7) * Math.PI * 2;
+          return (
+            <mesh key={i} position={[Math.cos(a) * 1.5, -0.3, Math.sin(a) * 1.5]} rotation={[0.6, a, 0]}>
+              <boxGeometry args={[0.6, 0.05, 3]} />
+              <meshStandardMaterial color="#2d5a27" />
+            </mesh>
+          );
+        })}
+      </group>
+    </group>
+  );
+}
+
+// ─── INFLUENCER DEFINITIONS ─────────────────────────────────────────────────
+const INFLUENCERS = [
+  { label: "CryptoQueen", emoji: "👑", sx: -8, sz: 8, seed: 100 },
+  { label: "LamboLord", emoji: "🏎️", sx: 12, sz: -5, seed: 200 },
+  { label: "NFTBae", emoji: "💅", sx: -15, sz: -10, seed: 300 },
+  { label: "DeFiDaddy", emoji: "💰", sx: 5, sz: 15, seed: 400 },
+  { label: "MoonBoi", emoji: "🚀", sx: -5, sz: -18, seed: 500 },
+  { label: "YachtClub", emoji: "⛵", sx: 18, sz: 8, seed: 600 },
+  { label: "ShillMaster", emoji: "📢", sx: -18, sz: 0, seed: 700 },
+  { label: "RugPullRick", emoji: "💀", sx: 10, sz: -15, seed: 800 },
+];
+
+// ─── MAIN COMPONENT ────────────────────────────────────────────────────────
+export default function DubaiDistrict() {
+  const mats = useDubaiMats();
+
+  return (
+    <group position={[DUBAI_X, 0, DUBAI_Z]}>
+      {/* Sand island base */}
+      <mesh position={[0, -0.2, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
+        <circleGeometry args={[55, 32]} />
+        <meshStandardMaterial color="#e8d5a8" roughness={0.95} />
+      </mesh>
+
+      {/* Burj Khalifa centerpiece */}
+      <BurjKhalifa mats={mats} />
+
+      {/* Neon entrance sign */}
+      <DubaiSign mats={mats} />
+
+      {/* Lambos parked out front */}
+      <group position={[-6, 0, 20]} rotation={[0, 0.3, 0]}>
+        <Lambo mats={mats} color="yellow" />
+      </group>
+      <group position={[6, 0, 18]} rotation={[0, -0.2, 0]}>
+        <Lambo mats={mats} color="red" />
+      </group>
+
+      {/* Infinity pool */}
+      <InfinityPool mats={mats} />
+
+      {/* Palm trees scattered around */}
+      {[
+        [-25, 10], [-20, -15], [25, -10], [18, 20], [-10, 22],
+        [30, 5], [-28, -5], [15, -22], [-5, -25], [22, 18],
+      ].map(([x, z], i) => (
+        <PalmTree key={i} x={x} z={z} seed={i * 37} />
+      ))}
+
+      {/* Influencers walking around taking selfies */}
+      {INFLUENCERS.map((inf) => (
+        <Influencer key={inf.label} startX={inf.sx} startZ={inf.sz} seed={inf.seed} label={inf.label} emoji={inf.emoji} />
+      ))}
+
+      {/* Camera flashes from paparazzi */}
+      <PaparazziFlashes />
+
+      {/* Explosions and fireworks constantly going off */}
+      <Explosions />
+
+      {/* Floating emoji reactions rising up */}
+      <FloatingEmojis />
+
+      {/* Spotlight beams rotating from the tower */}
+      <SpotlightBeams />
+
+      {/* District label */}
+      <Html center position={[0, 100, 0]} distanceFactor={60} style={{ pointerEvents: "none" }}>
+        <div className="text-center">
+          <div className="text-4xl mb-1">🏙️</div>
+          <div className="px-3 py-1 rounded-full bg-gradient-to-r from-pink-500/80 via-amber-400/80 to-cyan-400/80 backdrop-blur-sm border border-white/20">
+            <span className="text-sm font-black text-white tracking-wider drop-shadow-lg">
+              DUBAI MARINA
+            </span>
+          </div>
+        </div>
+      </Html>
+    </group>
+  );
+}
+
+// ─── ROTATING SPOTLIGHT BEAMS ───────────────────────────────────────────────
+function SpotlightBeams() {
+  const beam1 = useRef<THREE.Mesh>(null);
+  const beam2 = useRef<THREE.Mesh>(null);
+
+  useFrame(({ clock }) => {
+    const t = clock.getElapsedTime();
+    if (beam1.current) beam1.current.rotation.y = t * 0.5;
+    if (beam2.current) beam2.current.rotation.y = -t * 0.3 + 2;
+  });
+
+  const beamGeo = useMemo(() => new THREE.CylinderGeometry(0.1, 4, 60, 8, 1, true), []);
+
+  return (
+    <group position={[0, 50, 0]}>
+      <mesh ref={beam1} geometry={beamGeo} rotation={[0, 0, 0.4]}>
+        <meshBasicMaterial color="#ff1493" transparent opacity={0.08} side={THREE.DoubleSide} toneMapped={false} />
+      </mesh>
+      <mesh ref={beam2} geometry={beamGeo} rotation={[0, 0, -0.4]}>
+        <meshBasicMaterial color="#00bfff" transparent opacity={0.08} side={THREE.DoubleSide} toneMapped={false} />
+      </mesh>
+    </group>
+  );
+}