my-protfolio/src/components/scenes/HeroLandscapeScene.tsx

'use client';

import * as THREE from 'three';
import { useTheme } from '@/context/ThemeContext';
import { ThreeCanvas, type SceneFactory } from './ThreeCanvas';
import {
  addSoftLights,
  createMesa,
  createTree,
  fitOrthographicCamera,
  palettes,
} from './scenePrimitives';
import styles from './Scenes.module.css';

const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
  const palette = palettes[theme];
  const scene = new THREE.Scene();
  const camera = new THREE.OrthographicCamera(-12, 12, 6, -6, 0.1, 50);
  const cameraBase = new THREE.Vector3(0, 8.5, 17);
  camera.position.copy(cameraBase);
  camera.lookAt(0, 2.2, 0);
  addSoftLights(scene, theme, 15);

  const world = new THREE.Group();
  scene.add(world);

  const ground = new THREE.Mesh(
    new THREE.PlaneGeometry(30, 18),
    new THREE.MeshStandardMaterial({ color: palette.ground, roughness: 1 }),
  );
  ground.rotation.x = -Math.PI / 2;
  ground.position.set(0, -0.03, 1);
  ground.receiveShadow = true;
  world.add(ground);

  const clearing = new THREE.Mesh(
    new THREE.PlaneGeometry(7.6, 4.6),
    new THREE.MeshStandardMaterial({
      color: palette.water,
      roughness: 0.72,
      transparent: true,
      opacity: theme === 'dark' ? 0.26 : 0.18,
    }),
  );
  clearing.rotation.x = -Math.PI / 2;
  clearing.position.set(0, 0.015, 1.2);
  world.add(clearing);

  const secondaryMountains = new THREE.Group();
  const mobileDecor = new THREE.Group();
  world.add(secondaryMountains, mobileDecor);
  const mountainData = [
    [-11.3, -1.7, 4.3, 4.5, 4.0, 0], [-7.8, -2.7, 4.0, 4.1, 4.0, 0],
    [-4.8, -3.6, 2.4, 2.7, 2.5, 1], [-11.5, 3.3, 3.1, 3.3, 2.6, 1],
    [-8.8, 4.2, 3.2, 3.0, 2.5, 1], [10.2, -2.1, 4.7, 4.7, 4.3, 0],
    [7.5, -3.1, 3.8, 3.9, 3.8, 0], [4.8, -3.8, 2.3, 2.5, 2.4, 1],
    [10.8, 3.6, 3.8, 3.6, 3.1, 1], [8.1, 4.3, 3.0, 3.1, 2.5, 1],
  ] as const;

  mountainData.forEach(([x, z, width, height, depth, secondary]) => {
    const mesa = createMesa(width, height, depth, palette);
    mesa.position.set(x, 0, z);
    (secondary ? secondaryMountains : world).add(mesa);
  });

  const mobileLeftMesa = createMesa(2.2, 2.6, 2.3, palette);
  mobileLeftMesa.position.set(-3.1, 0, -0.6);
  const mobileRightMesa = createMesa(2.2, 2.8, 2.3, palette);
  mobileRightMesa.position.set(3.1, 0, -0.8);
  const mobileLeftTree = createTree(palette, 0.72);
  mobileLeftTree.position.set(-2.1, 0, 2.2);
  const mobileRightTree = createTree(palette, 0.68);
  mobileRightTree.position.set(2.1, 0, 2.4);
  mobileDecor.add(mobileLeftMesa, mobileRightMesa, mobileLeftTree, mobileRightTree);
  mobileDecor.visible = false;

  const secondaryTrees = new THREE.Group();
  world.add(secondaryTrees);
  const treeData = [
    [-5.6, -0.3, 1, 0], [-4.6, 0.2, 0.85, 0], [-3.8, -1.4, 0.72, 1],
    [-8.2, 2.0, 0.78, 1], [-7.1, 3.0, 1.0, 0], [-5.8, 3.5, 0.72, 0],
    [5.7, -0.4, 1.0, 0], [4.7, 0.2, 0.82, 0], [3.9, -1.5, 0.7, 1],
    [8.4, 2.2, 0.82, 1], [7.2, 3.2, 1.0, 0], [5.9, 3.8, 0.72, 0],
  ] as const;
  const animatedTrees: THREE.Group[] = [];
  treeData.forEach(([x, z, scale, secondary]) => {
    const tree = createTree(palette, scale, secondary === 1);
    tree.position.set(x, 0, z);
    (secondary ? secondaryTrees : world).add(tree);
    animatedTrees.push(tree);
  });

  const celestial = new THREE.Group();
  let celestialBaseY = 6.25;
  celestial.position.set(-5.8, 6.25, -1.5);
  celestial.lookAt(camera.position);
  scene.add(celestial);

  if (theme === 'light') {
    const sun = new THREE.Mesh(
      new THREE.CircleGeometry(0.62, 32),
      new THREE.MeshBasicMaterial({ color: 0xffd75a, toneMapped: false }),
    );
    celestial.add(sun);
    for (let index = 0; index < 12; index += 1) {
      const angle = (index / 12) * Math.PI * 2;
      const ray = new THREE.Mesh(
        new THREE.PlaneGeometry(0.13, 0.42),
        new THREE.MeshBasicMaterial({ color: 0xffd75a, toneMapped: false }),
      );
      ray.position.set(Math.sin(angle) * 1.05, Math.cos(angle) * 1.05, 0);
      ray.rotation.z = -angle;
      celestial.add(ray);
    }
  } else {
    const moon = new THREE.Mesh(
      new THREE.SphereGeometry(0.66, 24, 16),
      new THREE.MeshStandardMaterial({
        color: palette.snow,
        emissive: palette.accent,
        emissiveIntensity: 0.22,
        roughness: 0.8,
      }),
    );
    celestial.add(moon);
    const moonLight = new THREE.PointLight(palette.accent, 7, 16, 2);
    celestial.add(moonLight);
  }

  return {
    scene,
    camera,
    resize: (width, height) => {
      const mobile = width < 640;
      const tablet = width < 1024;
      secondaryMountains.visible = !mobile;
      secondaryTrees.visible = !mobile;
      mobileDecor.visible = mobile;
      world.scale.setScalar(mobile ? 0.9 : tablet ? 0.96 : 1);
      celestial.position.x = mobile ? -2.35 : tablet ? -4.1 : -5.8;
      celestialBaseY = mobile ? 6.8 : 6.25;
      celestial.position.y = celestialBaseY;
      fitOrthographicCamera(camera, width, height, mobile ? 14.5 : tablet ? 12.5 : 11.5);
    },
    update: (elapsed) => {
      celestial.position.y = celestialBaseY + Math.sin(elapsed * 0.55) * 0.08;
      celestial.rotation.z = theme === 'light' ? elapsed * 0.025 : 0;
      animatedTrees.forEach((tree, index) => {
        tree.rotation.z = Math.sin(elapsed * 0.7 + index) * 0.006;
      });
      if (!reduceMotion) {
        camera.position.x += (cameraBase.x + pointer.x * 0.2 - camera.position.x) * 0.035;
        camera.position.y += (cameraBase.y + pointer.y * 0.1 - camera.position.y) * 0.035;
        camera.lookAt(0, 2.2, 0);
      }
    },
  };
};

export function HeroLandscapeScene() {
  const { theme } = useTheme();
  return <ThreeCanvas className={styles.heroScene} createScene={createHeroScene} theme={theme} />;
}