/* EntecPower corporate site — Home page content */

/* EntecPower corporate site — Home page content */

/* EntecPower corporate site — Home page content */

const getImageCoverCoords = (xPercent, yPercent, containerW, containerH, imgW = 1024, imgH = 1024) => {
  const imgRatio = imgW / imgH;
  const containerRatio = containerW / containerH;
  
  let scaledW, scaledH, offsetX, offsetY;
  if (containerRatio > imgRatio) {
    scaledW = containerW;
    scaledH = containerW / imgRatio;
    offsetX = 0;
    offsetY = (containerH - scaledH) / 2;
  } else {
    scaledW = containerH * imgRatio;
    scaledH = containerH;
    offsetX = (containerW - scaledW) / 2;
    offsetY = 0;
  }
  
  return {
    x: offsetX + (xPercent / 100) * scaledW,
    y: offsetY + (yPercent / 100) * scaledH
  };
};

const SPOT_LOCK_PX = 90;

const SCENES = [
  {
    id: 'substation',
    title: { ko: '변전소 주요 설비 안전 진단', en: 'Substation Asset Diagnostics' },
    sub: { ko: '초고압 애자련 누전 분석 및 대형 변압기 부싱 실시간 열화 진단', en: 'UHV insulator leak analysis & transformer bushing thermal degradation' },
    bg: 'company/assets/imagery/substation_day.png',
    stats: [
      { v: '98.7', u: '%', l: { ko: '진단 정밀도', en: 'PD Detection' } },
      { v: '50', u: 'm', l: { ko: '최대 검출 거리', en: 'Max Standoff' } }
    ],
    hotspots: [
      {
        x: 28, y: 38,
        type: 'thermal',
        label: { ko: '변압기 R상 부싱 접속부 과열 (CRITICAL)', en: 'Transformer R-Phase Bushing Overheat (CRITICAL)' },
        telemetry: 'TR_BUSH_R',
        temp: 84.6, db: 11, dist: 12.4,
        desc: { ko: '부싱 전극 결선 풀림에 따른 접촉저항 및 전류 집중 과열.', en: 'Overheating due to loose connector contact resistance & current load concentration.' }
      },
      {
        x: 72, y: 28,
        type: 'thermal',
        label: { ko: '변압기 S상 부싱 이상 발열 (WARNING)', en: 'Transformer S-Phase Bushing Overheat (WARNING)' },
        telemetry: 'TR_BUSH_S',
        temp: 59.3, db: 7, dist: 12.8,
        desc: { ko: '부싱 절연 노화에 따른 초기 미세 유도 열화.', en: 'Early stage induction heating due to bushing insulation degradation.' }
      },
      {
        x: 18, y: 72,
        type: 'thermal',
        label: { ko: '변압기 냉각 방열핀 상단 폐쇄 과열 (WARNING)', en: 'Transformer Radiator Fin Overheat (WARNING)' },
        telemetry: 'TR_RAD_FIN_04',
        temp: 68.5, db: 8, dist: 18.2,
        desc: { ko: '방열판 내부 냉각 오일 순환 마찰 및 배관 오염 누적에 따른 방열 방해.', en: 'Poor heat dissipation due to cooling oil flow blockage in radiator fin.' }
      },
      {
        x: 42, y: 55,
        type: 'prpd',
        label: { ko: '154kV 현수애자련 코로나 방전 (WARNING)', en: '154kV Suspension Insulator PD (WARNING)' },
        telemetry: 'INS_CHAIN_08',
        temp: 24.5, db: 46, dist: 15.6,
        desc: { ko: '애자 표면 염해 노출에 따른 누설 전류 아크 코로나 방전.', en: 'Surface leakage arc corona discharge due to salt & moisture build-up.' }
      },
      {
        x: 62, y: 68,
        type: 'prpd',
        label: { ko: '피뢰기(SA) 열화에 의한 내부 방전', en: 'Surge Arrester Internal PD' },
        telemetry: 'SURGE_ARR_B3',
        temp: 25.1, db: 41, dist: 28.3,
        desc: { ko: '피뢰기 내부 소자 노화로 인한 연속 부분방전 신호 및 누전 감지.', en: 'Continuous partial discharge inside SA housing due to element aging.' }
      },
      {
        x: 48, y: 44,
        type: 'mixed',
        label: { ko: '변압기 2차측 인입선 접촉 아크 및 과열 (DANGER)', en: 'Transformer Secondary Busway Arcing & Overheat (DANGER)' },
        telemetry: 'TR_SEC_BUSBAR',
        temp: 42.8, db: 48, dist: 19.5,
        desc: { ko: '초기 부분 방전이 지속되며 아크에 의한 금속 접촉부 온도 상승 단계 (융복합 진단 핵심 지점).', en: 'Early stage partial discharge transforming to heat due to constant arcing.' }
      }
    ]
  },
  {
    id: 'gas_plant',
    title: { ko: '석유화학 플랜트 배관 연결부', en: 'Petrochemical Pipeline Joints' },
    sub: { ko: '송유관 고압 밸브 가스 누출 및 플랜지 용접부 균열 동시 감시', en: 'High-pressure valve leaks & flange weld crack inspection' },
    bg: 'company/assets/imagery/gas_plant_day.png',
    stats: [
      { v: '0.1', u: 'l/min', l: { ko: '최소 가스 누출', en: 'Micro Leak Limit' } },
      { v: '45', u: 'm', l: { ko: '안전 측정 이격', en: 'Safe Distance' } }
    ],
    hotspots: [
      {
        x: 22, y: 48,
        type: 'thermal',
        label: { ko: '고압 증기 밸브 패킹 마찰 고열 (CRITICAL)', en: 'High-Pressure Steam Valve Overheat (CRITICAL)' },
        telemetry: 'STEAM_VALVE_02',
        temp: 92.1, db: 8, dist: 16.5,
        desc: { ko: '고압 스팀 유체 개폐 마찰 및 차단막 밀봉 성능 노후화로 인한 열화.', en: 'Friction overheat at steam block valve due to sealant degradation.' }
      },
      {
        x: 68, y: 30,
        type: 'thermal',
        label: { ko: '이송 유체 급유 배관 마찰 온도 상승', en: 'Fuel pipe friction heat' },
        telemetry: 'FEED_PIPE_V12',
        temp: 72.4, db: 11, dist: 22.8,
        desc: { ko: '이송 압력 급상승으로 인한 배관 곡관부 기계적 마찰 온도 누적.', en: 'Localized pipe friction heating from sudden product flow turbulence.' }
      },
      {
        x: 15, y: 25,
        type: 'thermal',
        label: { ko: '오일 저장 탱크 히팅 히터 오동작 고열', en: 'Oil Tank Heater Anomaly' },
        telemetry: 'OIL_TANK_H3',
        temp: 80.4, db: 7, dist: 34.0,
        desc: { ko: '탱크 하단 전기 히터 접촉 불량 및 온도 센서 고장으로 인한 지속 가열.', en: 'Uncontrolled continuous heating due to level switch failure.' }
      },
      {
        x: 38, y: 66,
        type: 'prpd',
        label: { ko: '가스 배관 연결용 플랜지 미세 가스 누출 (WARNING)', en: 'Gas Pipe Flange Micro-Leak (WARNING)' },
        telemetry: 'FLANGE_GAS_L10',
        temp: 18.2, db: 52, dist: 11.2,
        desc: { ko: '가스 고압 분출에 따른 고주파 초음파 충격음 발생. PRPD 신호 뚜렷함.', en: 'High-frequency ultrasonic impact acoustic signal from high-pressure gas escape.' }
      },
      {
        x: 58, y: 80,
        type: 'prpd',
        label: { ko: '가스 저장 기화기 안전 릴리프 밸브 바이패스', en: 'Vaporizer Relief Valve Bypass Leak' },
        telemetry: 'SAFETY_VALVE_B4',
        temp: 21.4, db: 44, dist: 29.4,
        desc: { ko: '안전밸브 노화에 따른 압력 미세 방출 가스 누출 신호 포착.', en: 'Ultrasonic leak detection showing vapor leakage from relief valve seat.' }
      },
      {
        x: 42, y: 40,
        type: 'mixed',
        label: { ko: '고압 배관 엘보 용접 크랙 가스 분출 및 가열 (DANGER)', en: 'High-Pressure Pipe Elbow Crack (DANGER)' },
        telemetry: 'PIPE_ELBOW_CRACK',
        temp: 38.5, db: 49, dist: 22.3,
        desc: { ko: '파이프 피로 파괴 미세 균열로 유체가 분출되며 주변 마찰 마모 온도와 초음파 융복합 검출.', en: 'Fluid friction and leak acoustic signature simultaneously detected at elbow weld.' }
      }
    ]
  },
  {
    id: 'datacenter',
    title: { ko: '실내 대형 데이터센터 전원 및 냉각 설비', en: 'Data Center Power & Cooling Cabinets' },
    sub: { ko: '서버 랙 PDU 단자 접촉 이상 과열 및 UPS 배터리실 아크 방전 상시 감시', en: 'PDU contact overheating & UPS room arc discharge monitoring' },
    bg: 'company/assets/imagery/datacenter_day.png',
    stats: [
      { v: '24/7', u: '상시', l: { ko: '중단 없는 감시', en: 'Non-stop Scan' } },
      { v: '15', u: 'm', l: { ko: '실내 밀착 진단', en: 'Indoor Close-Up' } }
    ],
    hotspots: [
      {
        x: 20, y: 62,
        type: 'thermal',
        label: { ko: '서버 랙 B열 전원분배 장치(PDU) 접속부 과열 (CRITICAL)', en: 'Server Rack Row B PDU Contact Overheat (CRITICAL)' },
        telemetry: 'DC_PDU_ROW_B',
        temp: 71.5, db: 10, dist: 9.8,
        desc: { ko: '과부하 전류 인입 및 PDU 단자 체결 저하에 따른 이상 고열.', en: 'High-current draw on loose PDU copper connection terminals.' }
      },
      {
        x: 55, y: 78,
        type: 'thermal',
        label: { ko: '서버 랙 C열 메인 인입선 접촉 과열', en: 'Server Rack Row C Main Contact Heat' },
        telemetry: 'DC_PDU_ROW_C',
        temp: 55.4, db: 5, dist: 10.2,
        desc: { ko: '배전 보드 커넥터 산화막 형성에 따른 저항 증가 발열.', en: 'Contact degradation and resistance heating on row distribution connector.' }
      },
      {
        x: 72, y: 22,
        type: 'thermal',
        label: { ko: '메인 항온항습 냉각 루버 팬 유닛 과열 (WARNING)', en: 'Main HVAC Cooling Fan Unit Overheat (WARNING)' },
        telemetry: 'HVAC_FAN_03',
        temp: 58.2, db: 12, dist: 14.2,
        desc: { ko: '팬 베어링 윤활 고갈로 인한 회전 마찰 부하 이상 발열 현상.', en: 'HVAC fan motor friction heat due to bearing grease drying out.' }
      },
      {
        x: 30, y: 32,
        type: 'prpd',
        label: { ko: 'UPS 백업 배터리 모듈실 내부 아크 방전 (WARNING)', en: 'UPS Backup Battery Room Internal Arc (WARNING)' },
        telemetry: 'UPS_BATTERY_PD',
        temp: 26.8, db: 42, dist: 18.5,
        desc: { ko: 'DC 버스바 절연 노후화로 인한 절연 트래킹 및 미세 아크 방전 발생.', en: 'DC busbar insulation degradation causing arc tracking & discharge.' }
      },
      {
        x: 58, y: 50,
        type: 'prpd',
        label: { ko: '천장 케이블 트레이 광역 전원선 절연 파괴', en: 'Overhead Cable Tray Cable PD' },
        telemetry: 'CABLE_TRAY_SEC3',
        temp: 24.2, db: 38, dist: 11.4,
        desc: { ko: '천장 전력 배선 트래킹 방전 신호 포착. 눈으로 보이지 않는 케이블 내부 결함.', en: 'Hidden insulation cracking inside overhead power supply cables.' }
      },
      {
        x: 38, y: 46,
        type: 'mixed',
        label: { ko: '메인 전력 버스덕트 조인트 누설 및 발열 (DANGER)', en: 'Main Bus Duct Joint Leakage & Overheat (DANGER)' },
        telemetry: 'MAIN_BUS_DUCT',
        temp: 40.2, db: 47, dist: 16.2,
        desc: { ko: '전력 배전 버스덕트 이음새의 내부 절연 틈새 미세 방전(초음파)이 열(온도 상승)로 진행 중인 단계.', en: 'Insulation tracking transitioning into contact heat at the bus duct coupling joint.' }
      }
    ]
  },
  {
    id: 'switchgear',
    title: { ko: '특고압 폐쇄형 배전반 내부', en: 'HV Closed Switchgear Panel' },
    sub: { ko: '차단 장치 내부 접속 단자 볼트 풀림 및 부분 방전 상시 감시', en: 'Cradle contact loose bolts & vacuum circuit breaker partial discharge' },
    bg: 'company/assets/imagery/switchgear_day.png',
    stats: [
      { v: '19', u: '개국', l: { ko: '글로벌 레퍼런스', en: 'Global Reference' } },
      { v: '98.7', u: '%', l: { ko: '진단 정밀도', en: 'Diagnostic Accuracy' } }
    ],
    hotspots: [
      {
        x: 25, y: 35,
        type: 'thermal',
        label: { ko: 'R상 동부스바 접속부 접촉 결함 (CRITICAL)', en: 'R-Phase Busbar Joint Thermal Defect (CRITICAL)' },
        telemetry: 'BUSBAR_JOINT_R',
        temp: 110.5, db: 9, dist: 5.4,
        desc: { ko: '볼트 조임 풀림으로 접촉 저항 급상승. 화재 위험의 특고압 접속부.', en: 'Severe contact resistance from a loose bolt leading to high thermal buildup.' }
      },
      {
        x: 65, y: 25,
        type: 'thermal',
        label: { ko: 'S상 부스바 볼트 체결 이상 발열 (WARNING)', en: 'S-Phase Busbar Joint Overheat (WARNING)' },
        telemetry: 'BUSBAR_JOINT_S',
        temp: 75.8, db: 6, dist: 5.8,
        desc: { ko: '부스바 겹침부 접촉면 산화로 인한 경미한 온도 상승.', en: 'Mild overheat from surface oxidation on busbar overlapping joints.' }
      },
      {
        x: 18, y: 68,
        type: 'thermal',
        label: { ko: '계기용 변류기(CT) primary 단자 접촉 과열', en: 'Current Transformer Primary Contact Heat' },
        telemetry: 'CT_TERM_A2',
        temp: 85.2, db: 11, dist: 6.8,
        desc: { ko: '단자 체결 불량 및 장시간 하중 노후화로 인한 이상 발열 발생.', en: 'Terminal load heating at Current Transformer connection bushings.' }
      },
      {
        x: 44, y: 55,
        type: 'prpd',
        label: { ko: '진공차단기 크래들 절연 방전 (WARNING)', en: 'VCB Cradle Insulation Discharge (WARNING)' },
        telemetry: 'VCB_CRADLE_B',
        temp: 26.8, db: 45, dist: 8.9,
        desc: { ko: '크래들 지지 절연 배리어 부분 방전. 초음파 고유 위상 신호 확인.', en: 'Partial arc discharge detected at the circuit breaker socket insulation barrier.' }
      },
      {
        x: 60, y: 72,
        type: 'prpd',
        label: { ko: '계기용 변압기(GPT) 1차측 부분방전', en: 'GPT Primary Partial Discharge' },
        telemetry: 'CT_TERM_A3',
        temp: 24.8, db: 37, dist: 7.8,
        desc: { ko: '변압기 외함 부싱 절연 파괴에 의한 소규모 방전음 감지.', en: 'Small discharge sound detected on Transformer casing bushing.' }
      },
      {
        x: 36, y: 46,
        type: 'mixed',
        label: { ko: 'VCB 접점 얼라인먼트 어긋남 아크 및 발열 (DANGER)', en: 'VCB Contact Alignment Arc & Overheat (DANGER)' },
        telemetry: 'VCB_ALIGN_FAULT',
        temp: 44.2, db: 48, dist: 6.2,
        desc: { ko: '접촉 단자 중심 정렬 결함으로 상간 절연 틈새 전기 스파크(초음파)와 접촉부 열화가 함께 진행 중인 융복합 핵심 부분.', en: 'Circuit breaker main finger contact misalignment causing electrical arcing and heat.' }
      }
    ]
  }
];

function HomeHero() {
  const { lang } = useSite();
  const [activeScene, setActiveScene] = React.useState(0);
  const [mode, setMode] = React.useState('fusion'); // 'fusion' | 'thermal' | 'ultrasound'
  const [hoveredHotspot, setHoveredHotspot] = React.useState(null);
  const [isAutoPlaying, setIsAutoPlaying] = React.useState(true);
  const [logs, setLogs] = React.useState([]);
  const [containerSize, setContainerSize] = React.useState({ width: 0, height: 0 });
  const [bgImage, setBgImage] = React.useState(null);

  const canvasRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const miniPrpdRef = React.useRef(null);
  const miniTempRef = React.useRef(null);
  const animationFrameId = React.useRef(null);
  const mouseRef = React.useRef({ x: 0, y: 0, active: false });
  const crosshairRef = React.useRef({ x: 0, y: 0 });
  const tempHistoryRef = React.useRef(Array(20).fill(24.0));
  const sceneTimerRef = React.useRef(null);
  const prpdOpacityRef = React.useRef(0);
  const activePrpdHotspotRef = React.useRef(null);
  // Web Audio API refs for ultrasound crackle sound simulation
  const audioCtxRef = React.useRef(null);
  const noiseSourceRef = React.useRef(null);
  const sparkGainRef = React.useRef(null);
  const hissGainRef = React.useRef(null);
  const masterGainRef = React.useRef(null);
  const audioTimeoutRef = React.useRef(null);
  const glitchRef = React.useRef({ active: false, frames: 0, totalFrames: 0 });

  const scene = SCENES[activeScene];
  const activeHotspots = scene.hotspots;

  // Filter hotspots based on current mode:
  // - 'thermal' shows only Red (thermal) hotspots
  // - 'ultrasound' shows only Cyan (prpd) hotspots
  // - 'fusion' shows all (Red, Cyan, and Orange) hotspots
  const visibleHotspots = activeHotspots.filter(hs => {
    if (mode === 'thermal') return hs.type === 'thermal';
    if (mode === 'ultrasound') return hs.type === 'prpd';
    return true; // fusion
  });

  // Initialize Web Audio API components for partial discharge sound synthesis
  const initAudio = React.useCallback(() => {
    if (audioCtxRef.current) return;

    try {
      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
      if (!AudioContextClass) return;

      const audioCtx = new AudioContextClass();
      audioCtxRef.current = audioCtx;

      // 1. Create a looped white noise buffer (2 seconds long)
      const bufferSize = audioCtx.sampleRate * 2;
      const noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
      const output = noiseBuffer.getChannelData(0);
      for (let i = 0; i < bufferSize; i++) {
        output[i] = Math.random() * 2 - 1;
      }

      const noiseSource = audioCtx.createBufferSource();
      noiseSource.buffer = noiseBuffer;
      noiseSource.loop = true;
      noiseSourceRef.current = noiseSource;

      // 2. Bandpass Filter (between 1.5kHz and 3.5kHz for fuller, more audible crackle)
      const filter = audioCtx.createBiquadFilter();
      filter.type = 'bandpass';
      filter.frequency.value = 2400; // Center frequency for crackle hiss
      filter.Q.value = 1.0; // Lower Q for a fuller, warmer sound

      // 3. Hiss Gain Node (for continuous background discharge hiss)
      const hissGain = audioCtx.createGain();
      hissGain.gain.setValueAtTime(0, audioCtx.currentTime);
      hissGainRef.current = hissGain;

      // 4. Spark Gain Node (for rapid crackles / electrical arcing impulses)
      const sparkGain = audioCtx.createGain();
      sparkGain.gain.setValueAtTime(0, audioCtx.currentTime);
      sparkGainRef.current = sparkGain;

      // 5. Master Gain Node (safely capped to avoid loud blasts)
      const masterGain = audioCtx.createGain();
      masterGain.gain.setValueAtTime(0, audioCtx.currentTime);
      masterGainRef.current = masterGain;

      // Connections: NoiseSource -> Filter -> Hiss/Spark Gains -> MasterGain -> Destination
      noiseSource.connect(filter);
      filter.connect(hissGain);
      filter.connect(sparkGain);
      hissGain.connect(masterGain);
      sparkGain.connect(masterGain);
      masterGain.connect(audioCtx.destination);

      // Start playing noise buffer
      noiseSource.start(0);

      // Spark scheduler loop for crackle sound simulation
      const runCrackle = () => {
        if (!audioCtxRef.current) return;
        
        const opacity = prpdOpacityRef.current;
        const now = audioCtx.currentTime;

        if (audioCtx.state === 'suspended') {
          audioTimeoutRef.current = setTimeout(runCrackle, 100);
          return;
        }

        if (opacity > 0.01) {
          // Density of sparks increases as opacity approaches 1 (hover focus)
          const nextDelay = 15 + Math.random() * (120 - 100 * opacity);
          
          // Random spark impulse volume scaled by opacity (louder than before)
          const sparkVolume = (0.35 + Math.random() * 0.5) * opacity * 0.8; 
          const duration = 0.004 + Math.random() * 0.018; // 4ms to 22ms decay duration

          sparkGain.gain.cancelScheduledValues(now);
          sparkGain.gain.setValueAtTime(0, now);
          sparkGain.gain.linearRampToValueAtTime(sparkVolume, now + 0.001);
          sparkGain.gain.exponentialRampToValueAtTime(0.0001, now + duration);

          // Soft background ionization hiss scaled by proximity (louder than before)
          hissGain.gain.setValueAtTime(opacity * 0.22, now);

          audioTimeoutRef.current = setTimeout(runCrackle, nextDelay);
        } else {
          // No active PRPD node hovered, keep output quiet
          hissGain.gain.setValueAtTime(0, now);
          sparkGain.gain.setValueAtTime(0, now);
          
          audioTimeoutRef.current = setTimeout(runCrackle, 80);
        }
      };

      runCrackle();

    } catch (err) {
      console.warn("Failed to initialize Web Audio API:", err);
    }
  }, []);

  // Cleanup Web Audio resources on unmount
  React.useEffect(() => {
    return () => {
      if (audioTimeoutRef.current) {
        clearTimeout(audioTimeoutRef.current);
      }
      if (noiseSourceRef.current) {
        try {
          noiseSourceRef.current.stop();
        } catch (e) {}
      }
      if (audioCtxRef.current) {
        audioCtxRef.current.close().catch(() => {});
        audioCtxRef.current = null;
      }
    };
  }, []);

  // Ensure Web Audio API is unlocked on first user interaction (click/tap)
  const unlockAudio = React.useCallback(() => {
    if (!audioCtxRef.current) {
      initAudio();
    } else if (audioCtxRef.current.state === 'suspended') {
      audioCtxRef.current.resume().catch(() => {});
    }
  }, [initAudio]);

  React.useEffect(() => {
    window.addEventListener('click', unlockAudio, { passive: true });
    window.addEventListener('touchstart', unlockAudio, { passive: true });
    return () => {
      window.removeEventListener('click', unlockAudio);
      window.removeEventListener('touchstart', unlockAudio);
    };
  }, [unlockAudio]);

  // Track container dimensions dynamically with ResizeObserver
  React.useEffect(() => {
    if (!containerRef.current) return;
    
    const observer = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        setContainerSize({ width, height });
      }
    });
    
    observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, []);

  // System Logs generator helper
  const addLog = React.useCallback((text, type = 'info') => {
    const time = new Date().toLocaleTimeString('ko-KR', { hour12: false });
    setLogs(prev => {
      const next = [...prev, { time, text, type }];
      if (next.length > 4) next.shift();
      return next;
    });
  }, []);

  // Load background image for canvas drawing
  React.useEffect(() => {
    setBgImage(null); // Clear previous image
    const img = new Image();
    img.src = scene.bg;
    img.onload = () => {
      setBgImage(img);
    };
  }, [scene.bg]);

  // Resize canvas when containerSize changes
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas || !containerSize.width || !containerSize.height) return;
    
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    
    canvas.width = containerSize.width * dpr;
    canvas.height = containerSize.height * dpr;
    ctx.scale(dpr, dpr);
  }, [containerSize]);

  // Initialize and handle auto-rotation
  React.useEffect(() => {
    addLog(`[SYSTEM] Initialized Fusion Diagnosis Engine.`, 'success');
    addLog(`[SECTOR] Switched to ${SCENES[activeScene].id.toUpperCase()}.`, 'info');
    setHoveredHotspot(null);
  }, [activeScene, addLog]);

  React.useEffect(() => {
    if (isAutoPlaying) {
      sceneTimerRef.current = setInterval(() => {
        setActiveScene(prev => (prev + 1) % SCENES.length);
      }, 12000);
    }
    return () => {
      if (sceneTimerRef.current) clearInterval(sceneTimerRef.current);
    };
  }, [isAutoPlaying]);

  // Mode changes logger
  React.useEffect(() => {
    addLog(`[CAMERA] Switched mode to: ${mode.toUpperCase()}`, 'warn');
  }, [mode, addLog]);

  // Canvas interaction animation loop
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let frame = 0;

    const render = () => {
      frame++;
      
      const rect = containerSize;
      if (rect.width === 0 || rect.height === 0) {
        animationFrameId.current = requestAnimationFrame(render);
        return;
      }
      
      ctx.clearRect(0, 0, rect.width, rect.height);

      // Find locked hotspot (if mouse is active and near)
      let activeHotspot = null;
      let minDistance = SPOT_LOCK_PX;

      if (mouseRef.current.active && visibleHotspots.length > 0) {
        visibleHotspots.forEach(hs => {
          const coords = getImageCoverCoords(hs.x, hs.y, rect.width, rect.height);
          const dist = Math.hypot(mouseRef.current.x - coords.x, mouseRef.current.y - coords.y);
          if (dist < minDistance) {
            minDistance = dist;
            activeHotspot = hs;
          }
        });
      }

      let targetX = mouseRef.current.x;
      let targetY = mouseRef.current.y;

      if (activeHotspot) {
        const coords = getImageCoverCoords(activeHotspot.x, activeHotspot.y, rect.width, rect.height);
        targetX = coords.x;
        targetY = coords.y;
      }

      crosshairRef.current.x += (targetX - crosshairRef.current.x) * 0.25;
      crosshairRef.current.y += (targetY - crosshairRef.current.y) * 0.25;

      // Update state if lock changes
      if (activeHotspot !== hoveredHotspot) {
        setHoveredHotspot(activeHotspot);
        if (activeHotspot) {
          addLog(`[LOCK] ${activeHotspot.telemetry} acquired. dist: ${activeHotspot.dist}m.`, 'success');
          // Trigger glitch visual on entering hotspot
          glitchRef.current = {
            active: true,
            frames: 0,
            totalFrames: (activeHotspot.type === 'prpd' || activeHotspot.type === 'mixed') ? 14 : 8,
          };
        } else {
          addLog(`[TARGET] Scan mode active. Scanning...`, 'info');
        }
      }

      // Update telemetry history refs
      if (frame % 15 === 0) {
        const curTemp = activeHotspot ? activeHotspot.temp : (24.0 + Math.random() * 0.8);
        tempHistoryRef.current.push(curTemp);
        if (tempHistoryRef.current.length > 20) tempHistoryRef.current.shift();
      }

      // Render diagnostic grid lines if in ultrasound mode
      if (mode === 'ultrasound') {
        ctx.strokeStyle = 'rgba(34, 211, 238, 0.04)';
        ctx.lineWidth = 1;
        // Draw grid
        for (let i = 0; i < rect.width; i += 50) {
          ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, rect.height); ctx.stroke();
        }
        for (let j = 0; j < rect.height; j += 50) {
          ctx.beginPath(); ctx.moveTo(0, j); ctx.lineTo(rect.width, j); ctx.stroke();
        }
      }

      // Draw inactive hotspots indicators and telemetry tags
      visibleHotspots.forEach((hs) => {
        const coords = getImageCoverCoords(hs.x, hs.y, rect.width, rect.height);
        const hX = coords.x;
        const hY = coords.y;
        const isHot = activeHotspot === hs;

        // 1. Draw inactive ambient glow for thermal/mixed hotspots (when NOT hovered)
        if ((hs.type === 'thermal' || hs.type === 'mixed') && mode !== 'ultrasound') {
          if (!isHot) {
            const radius = 35 + Math.sin(frame * 0.08) * 4;
            const intensity = 0.12;

            ctx.save();
            ctx.globalCompositeOperation = 'screen';
            const grad = ctx.createRadialGradient(hX, hY, 2, hX, hY, radius);
            grad.addColorStop(0, `rgba(239, 68, 68, ${intensity})`);
            grad.addColorStop(0.4, `rgba(247, 148, 29, ${intensity * 0.5})`);
            grad.addColorStop(1, 'rgba(0, 0, 0, 0)');
            ctx.fillStyle = grad;
            ctx.beginPath();
            ctx.arc(hX, hY, radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
          }
        }

        // 2. Draw ultrasound sonar pulsing waves for prpd/mixed hotspots (shown in Fusion / Ultrasound modes)
        if ((hs.type === 'prpd' || hs.type === 'mixed') && mode !== 'thermal') {
          const waveCount = 2;
          for (let w = 0; w < waveCount; w++) {
            const rad = ((frame * 1.0 + w * 40) % 80);
            const alpha = (1 - rad / 80) * (isHot ? 0.6 : 0.08);
            ctx.strokeStyle = hs.type === 'mixed' ? `rgba(249, 115, 22, ${alpha})` : `rgba(34, 211, 238, ${alpha})`;
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.arc(hX, hY, rad, 0, Math.PI * 2);
            ctx.stroke();
          }
        }
      });

      // 3. DRAW THERMAL LENS OVERLAY ON HOVER (For thermal and mixed hotspots)
      if (activeHotspot && (activeHotspot.type === 'thermal' || activeHotspot.type === 'mixed') && bgImage) {
        const coords = getImageCoverCoords(activeHotspot.x, activeHotspot.y, rect.width, rect.height);
        const hX = coords.x;
        const hY = coords.y;
        const radius = 75; // scope lens size

        ctx.save();
        
        // 3a. Clip drawing context inside a circle
        ctx.beginPath();
        ctx.arc(hX, hY, radius, 0, Math.PI * 2);
        ctx.clip();

        // 3b. Draw background image inside the clipped circle with grayscale and high contrast filters
        ctx.filter = 'grayscale(1) contrast(1.6) brightness(0.8)';
        
        const imgRatio = bgImage.width / bgImage.height;
        const containerRatio = rect.width / rect.height;
        let scaledW, scaledH, offsetX, offsetY;
        if (containerRatio > imgRatio) {
          scaledW = rect.width;
          scaledH = rect.width / imgRatio;
          offsetX = 0;
          offsetY = (rect.height - scaledH) / 2;
        } else {
          scaledW = rect.height * imgRatio;
          scaledH = rect.height;
          offsetX = (rect.width - scaledW) / 2;
          offsetY = 0;
        }
        ctx.drawImage(bgImage, offsetX, offsetY, scaledW, scaledH);
        
        ctx.filter = 'none';

        // 3c. Overlay thermal color mapping via 'color' global composite operation
        ctx.globalCompositeOperation = 'color';
        const thermalGrad = ctx.createRadialGradient(hX, hY, 2, hX, hY, radius);
        thermalGrad.addColorStop(0, '#ffffff');      // Center (white hot)
        thermalGrad.addColorStop(0.18, '#ffff00');   // Yellow
        thermalGrad.addColorStop(0.4, '#ff4400');    // Red-Orange
        thermalGrad.addColorStop(0.72, '#a000ff');   // Purple
        thermalGrad.addColorStop(1.0, '#0022ff');    // Blue (cool background)
        
        ctx.fillStyle = thermalGrad;
        ctx.beginPath();
        ctx.arc(hX, hY, radius, 0, Math.PI * 2);
        ctx.fill();

        ctx.restore();

        // 3d. Draw HUD lens scope borders and reticle details
        ctx.strokeStyle = activeHotspot.type === 'mixed' ? '#f97316' : '#ef4444';
        ctx.lineWidth = 2.5;
        ctx.beginPath();
        ctx.arc(hX, hY, radius, 0, Math.PI * 2);
        ctx.stroke();

        ctx.strokeStyle = activeHotspot.type === 'mixed' ? 'rgba(249, 115, 22, 0.4)' : 'rgba(239, 68, 68, 0.4)';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(hX - radius - 10, hY); ctx.lineTo(hX + radius + 10, hY);
        ctx.moveTo(hX, hY - radius - 10); ctx.lineTo(hX, hY + radius + 10);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(hX, hY, 8, 0, Math.PI * 2);
        ctx.stroke();

        // Print temperature floating label
        ctx.fillStyle = '#ffffff';
        ctx.font = 'bold 10px monospace';
        ctx.shadowColor = '#000000';
        ctx.shadowBlur = 4;
        ctx.fillText(`${activeHotspot.temp.toFixed(1)}°C`, hX - 22, hY - radius - 6);
        ctx.shadowBlur = 0;
      }

      // 4. RENDER HIGH-FIDELITY BORDERLESS PRPD GRAPH POPUP BOX ON HOVER (For prpd and mixed hotspots)
      const hasAnyActive = !!activeHotspot;
      const hasPrpdActive = activeHotspot && (activeHotspot.type === 'prpd' || activeHotspot.type === 'mixed');
      if (hasPrpdActive) {
        activePrpdHotspotRef.current = activeHotspot;
      }

      const targetPrpdOpacity = hasAnyActive ? 1 : 0;
      prpdOpacityRef.current += (targetPrpdOpacity - prpdOpacityRef.current) * 0.15;

      // Modulate audio volume based on hotspot opacity (representing lock on active hotspots)
      if (masterGainRef.current && audioCtxRef.current) {
        masterGainRef.current.gain.value = prpdOpacityRef.current * 0.8;
        
        // Auto-resume if the browser suspended the context due to inactivity/silence
        if (prpdOpacityRef.current > 0.05 && audioCtxRef.current.state === 'suspended') {
          audioCtxRef.current.resume().catch(() => {});
        }
      }

      if (prpdOpacityRef.current > 0.01 && hasPrpdActive && activePrpdHotspotRef.current) {
        const hs = activePrpdHotspotRef.current;
        const coords = getImageCoverCoords(hs.x, hs.y, rect.width, rect.height);
        const hX = coords.x;
        const hY = coords.y;
        const opacity = prpdOpacityRef.current;

        const boxW = 220;
        const boxH = 140;
        
        // Position PRPD box next to the hotspot/lens to avoid overlapping
        const radius = (hs.type === 'mixed' || hs.type === 'thermal') ? 75 : 32;
        const spacing = 15;
        let bx;
        if (hX + radius + spacing + boxW < rect.width) {
          bx = hX + radius + spacing;
        } else if (hX - radius - spacing - boxW > 0) {
          bx = hX - radius - spacing - boxW;
        } else {
          bx = Math.max(12, rect.width - boxW - 12);
        }
        const by = Math.max(12, Math.min(rect.height - boxH - 12, hY - boxH / 2));
        
        ctx.save();
        ctx.shadowColor = hs.type === 'mixed' ? `rgba(249, 115, 22, ${0.45 * opacity})` : `rgba(34, 211, 238, ${0.45 * opacity})`;
        ctx.shadowBlur = 12;
        ctx.fillStyle = `rgba(6, 15, 30, ${0.88 * opacity})`;
        // Borderless (no stroke border) round rect background
        ctx.beginPath();
        ctx.roundRect(bx, by, boxW, boxH, 8);
        ctx.fill();
        ctx.shadowBlur = 0;

        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
        ctx.font = 'bold 8.5px monospace';
        ctx.fillText(`[${hs.telemetry}] PRPD PARTIAL DISCHARGE`, bx + 10, by + 15);
        
        ctx.fillStyle = hs.type === 'mixed' ? `rgba(249, 115, 22, ${opacity})` : `rgba(34, 211, 238, ${opacity})`;
        ctx.font = '7.5px monospace';
        ctx.fillText(`LEVEL: ${hs.db} dB | DISTANCE: ${hs.dist.toFixed(1)} m`, bx + 10, by + 26);

        const gx = bx + 32;
        const gy = by + 34;
        const gw = boxW - 42;
        const gh = boxH - 54;

        ctx.strokeStyle = `rgba(255, 255, 255, ${0.12 * opacity})`;
        ctx.lineWidth = 1;
        ctx.strokeRect(gx, gy, gw, gh);

        ctx.strokeStyle = `rgba(255, 255, 255, ${0.06 * opacity})`;
        ctx.lineWidth = 0.5;
        ctx.setLineDash([2, 3]);

        for (let v = 1; v <= 3; v++) {
          const vx = gx + (gw / 4) * v;
          ctx.beginPath(); ctx.moveTo(vx, gy); ctx.lineTo(vx, gy + gh); ctx.stroke();
        }
        for (let h = 1; h <= 3; h++) {
          const hy = gy + (gh / 4) * h;
          ctx.beginPath(); ctx.moveTo(gx, hy); ctx.lineTo(gx + gw, hy); ctx.stroke();
        }
        ctx.setLineDash([]);

        ctx.fillStyle = `rgba(255, 255, 255, ${0.5 * opacity})`;
        ctx.font = '6.5px monospace';
        ctx.fillText('0°', gx - 2, gy + gh + 10);
        ctx.fillText('180°', gx + gw / 2 - 8, gy + gh + 10);
        ctx.fillText('360°', gx + gw - 12, gy + gh + 10);

        ctx.fillText('Amp', gx - 22, gy + 4);
        ctx.fillText('(pC)', gx - 22, gy + 11);
        ctx.fillText('100', gx - 16, gy + 10);
        ctx.fillText('50', gx - 12, gy + gh / 2 + 3);
        ctx.fillText('0', gx - 8, gy + gh);

        ctx.strokeStyle = `rgba(255, 255, 255, ${0.15 * opacity})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        const sineOffset = frame * 0.03;
        for (let px = 0; px <= gw; px++) {
          const phase = (px / gw) * Math.PI * 2;
          const py = (gy + gh / 2) + Math.sin(phase + sineOffset) * (gh * 0.38);
          if (px === 0) ctx.moveTo(gx + px, py);
          else ctx.lineTo(gx + px, py);
        }
        ctx.stroke();

        let prpdLcgSeedVal = 0;
        for (let i = 0; i < hs.telemetry.length; i++) prpdLcgSeedVal += hs.telemetry.charCodeAt(i);
        let prpdLcg = 777 + prpdLcgSeedVal;
        const lcgNext = () => {
          prpdLcg = (prpdLcg * 1664525 + 1013904223) % 4294967296;
          return prpdLcg / 4294967296;
        };

        const dotCount = 330;
        for (let d = 0; d < dotCount; d++) {
          const isPosHalf = lcgNext() > 0.5;
          const centerPhase = isPosHalf ? 50 : 230;
          
          const u1 = lcgNext();
          const u2 = lcgNext();
          const randNorm1 = Math.sqrt(-2.0 * Math.log(u1)) * Math.sin(2.0 * Math.PI * u2);
          
          const u3 = lcgNext();
          const u4 = lcgNext();
          const randNorm2 = Math.sqrt(-2.0 * Math.log(u3)) * Math.sin(2.0 * Math.PI * u4);

          let phaseVal = centerPhase + randNorm1 * 20;
          if (phaseVal < 0) phaseVal += 360;
          if (phaseVal > 360) phaseVal -= 360;

          let magVal = 55 + randNorm2 * 14;
          if (magVal < 2) magVal = 2;
          if (magVal > 98) magVal = 98;

          const shimmerX = Math.sin(frame * 0.08 + d) * 1.2;
          const shimmerY = Math.cos(frame * 0.08 + d) * 1.2;

          const finalPhase = phaseVal + shimmerX;
          const finalMag = magVal + shimmerY;

          const plotX = gx + (finalPhase / 360) * gw;
          const plotY = (gy + gh) - (finalMag / 100) * gh;

          if (plotX >= gx && plotX <= gx + gw && plotY >= gy && plotY <= gy + gh) {
            const targetPhase = isPosHalf ? 50 : 230;
            const dX = (finalPhase - targetPhase) / 20;
            const dY = (finalMag - 55) / 14;
            const distToCenter = Math.hypot(dX, dY);

            let dotColor = `rgba(34, 211, 238, ${opacity})`;
            if (distToCenter < 0.6) {
              dotColor = `rgba(239, 68, 68, ${opacity})`;
            } else if (distToCenter < 1.1) {
              dotColor = `rgba(249, 115, 22, ${opacity})`;
            } else if (distToCenter < 1.6) {
              dotColor = `rgba(234, 179, 8, ${opacity})`;
            }

            ctx.fillStyle = dotColor;
            ctx.fillRect(plotX, plotY, 1.2, 1.2);
          }
        }
        ctx.restore();
      }

      // 4.5. GLITCH OVERLAY (triggered on hotspot enter)
      if (glitchRef.current.active) {
        const g = glitchRef.current;
        g.frames++;
        if (g.frames >= g.totalFrames) {
          glitchRef.current.active = false;
        } else {
          const glitchProgress = g.frames / g.totalFrames;
          const intensity = (1 - glitchProgress) * (activeHotspot ? 1 : 0.5);
          const lineCount = Math.floor(6 + Math.random() * 8);
          for (let gl = 0; gl < lineCount; gl++) {
            if (Math.random() > 0.45) continue;
            const gy2 = Math.random() * rect.height;
            const glH  = 1 + Math.random() * 4;
            const glW  = 20 + Math.random() * (rect.width * 0.55);
            const glX  = Math.random() * (rect.width - glW);
            const shift = (Math.random() - 0.5) * 18;
            // Chromatic aberration style glitch slice
            ctx.save();
            ctx.globalAlpha = intensity * (0.12 + Math.random() * 0.22);
            if (bgImage) {
              const imgRatio = bgImage.width / bgImage.height;
              const containerRatio = rect.width / rect.height;
              let scaledW, scaledH, offsetX, offsetY;
              if (containerRatio > imgRatio) {
                scaledW = rect.width; scaledH = rect.width / imgRatio;
                offsetX = 0; offsetY = (rect.height - scaledH) / 2;
              } else {
                scaledW = rect.height * imgRatio; scaledH = rect.height;
                offsetX = (rect.width - scaledW) / 2; offsetY = 0;
              }
              ctx.beginPath();
              ctx.rect(glX, gy2, glW, glH);
              ctx.clip();
              // Red channel shift
              ctx.globalCompositeOperation = 'screen';
              ctx.filter = 'saturate(3) hue-rotate(0deg) brightness(1.5)';
              ctx.drawImage(bgImage, offsetX + shift, offsetY, scaledW, scaledH);
              ctx.filter = 'none';
            }
            ctx.restore();
            // Solid glitch bar
            ctx.save();
            ctx.globalAlpha = intensity * 0.08;
            ctx.fillStyle = Math.random() > 0.5 ? '#22d3ee' : '#ef4444';
            ctx.fillRect(glX, gy2, glW, glH);
            ctx.restore();
          }
          // Scanline flicker
          ctx.save();
          ctx.globalAlpha = intensity * 0.06;
          ctx.fillStyle = '#000';
          for (let sl = 0; sl < rect.height; sl += 4) {
            ctx.fillRect(0, sl, rect.width, 1);
          }
          ctx.restore();
        }
      }

      // 5. HUD LASER CROSSHAIR SCANNER (Shown when mouse is actively hovering)
      if (mouseRef.current.active) {
        const cX = crosshairRef.current.x;
        const cY = crosshairRef.current.y;

        if (activeHotspot) {
          ctx.strokeStyle = activeHotspot.type === 'thermal' ? 'rgba(239, 68, 68, 0.4)' : (activeHotspot.type === 'mixed' ? 'rgba(249, 115, 22, 0.4)' : 'rgba(34, 211, 238, 0.4)');
          ctx.lineWidth = 1;
          ctx.setLineDash([3, 4]);
          ctx.beginPath();
          ctx.moveTo(mouseRef.current.x, mouseRef.current.y);
          ctx.lineTo(cX, cY);
          ctx.stroke();
          ctx.setLineDash([]);
        }

        ctx.strokeStyle = activeHotspot ? (activeHotspot.type === 'thermal' ? '#ef4444' : (activeHotspot.type === 'mixed' ? '#f97316' : '#22d3ee')) : '#38bdf8';
        ctx.lineWidth = 1.2;
        ctx.beginPath();
        ctx.arc(cX, cY, 32, 0, Math.PI * 2);
        ctx.stroke();

        ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
        ctx.beginPath();
        ctx.arc(cX, cY, 44, 0, Math.PI * 2);
        ctx.stroke();

        ctx.strokeStyle = activeHotspot ? (activeHotspot.type === 'thermal' ? 'rgba(239, 68, 68, 0.5)' : (activeHotspot.type === 'mixed' ? 'rgba(249, 115, 22, 0.5)' : 'rgba(34, 211, 238, 0.5)')) : 'rgba(56, 189, 248, 0.5)';
        ctx.beginPath();
        ctx.moveTo(cX - 40, cY); ctx.lineTo(cX - 12, cY);
        ctx.moveTo(cX + 12, cY); ctx.lineTo(cX + 40, cY);
        ctx.moveTo(cX, cY - 40); ctx.lineTo(cX, cY - 12);
        ctx.moveTo(cX, cY + 12); ctx.lineTo(cX, cY + 40);
        ctx.stroke();

        if (activeHotspot) {
          const b = 10;
          const r = 26;
          ctx.strokeStyle = activeHotspot.type === 'thermal' ? '#ef4444' : (activeHotspot.type === 'mixed' ? '#f97316' : '#22d3ee');
          ctx.lineWidth = 2;
          
          ctx.beginPath(); ctx.moveTo(cX - r, cY - r + b); ctx.lineTo(cX - r, cY - r); ctx.lineTo(cX - r + b, cY - r); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(cX + r, cY - r + b); ctx.lineTo(cX + r, cY - r); ctx.lineTo(cX + r - b, cY - r); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(cX - r, cY + r - b); ctx.lineTo(cX - r, cY + r); ctx.lineTo(cX - r + b, cY + r); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(cX + r, cY + r - b); ctx.lineTo(cX + r, cY + r); ctx.lineTo(cX + r - b, cY + r); ctx.stroke();
          
          ctx.fillStyle = activeHotspot.type === 'thermal' ? '#ef4444' : (activeHotspot.type === 'mixed' ? '#f97316' : '#22d3ee');
          ctx.font = 'bold 9px monospace';
          ctx.fillText("LOCK TRG", cX - 22, cY + 42);
        }
      }

      drawMiniCharts(activeHotspot);

      animationFrameId.current = requestAnimationFrame(render);
    };

    const drawMiniCharts = (activeHs) => {
      // 1. PRPD mini chart
      const prpd = miniPrpdRef.current;
      if (prpd) {
        const pCtx = prpd.getContext('2d');
        pCtx.clearRect(0, 0, prpd.width, prpd.height);

        const w = prpd.width;
        const h = prpd.height;
        const baseline = h / 2;

        pCtx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
        pCtx.lineWidth = 1;
        pCtx.beginPath(); pCtx.moveTo(0, baseline); pCtx.lineTo(w, baseline); pCtx.stroke();

        pCtx.strokeStyle = activeHs && (activeHs.type === 'prpd' || activeHs.type === 'mixed') ? 'rgba(34, 211, 238, 0.7)' : 'rgba(255, 255, 255, 0.15)';
        pCtx.lineWidth = 1.2;
        pCtx.beginPath();
        for (let x = 0; x < w; x++) {
          const phi = (x / w) * Math.PI * 2 * 2;
          const y = baseline + Math.sin(phi) * (h * 0.35);
          if (x === 0) pCtx.moveTo(x, y);
          else pCtx.lineTo(x, y);
        }
        pCtx.stroke();

        pCtx.fillStyle = '#22d3ee';
        if (activeHs && (activeHs.type === 'prpd' || activeHs.type === 'mixed')) {
          for (let i = 0; i < 30; i++) {
            const x = Math.random() * w;
            const phi = (x / w) * Math.PI * 2 * 2;
            const sineVal = Math.sin(phi);
            
            if (Math.abs(sineVal) > 0.45) {
              const y = baseline + (sineVal * (h * 0.35)) - (Math.random() * h * 0.35) * Math.sign(sineVal);
              pCtx.fillRect(x, y, 1, 1);
            }
          }
        } else {
          pCtx.fillStyle = 'rgba(255, 255, 255, 0.2)';
          for (let i = 0; i < 4; i++) {
            pCtx.fillRect(Math.random() * w, h - 2 - Math.random() * 3, 0.8, 0.8);
          }
        }
      }

      // 2. Temp sparkline chart
      const temp = miniTempRef.current;
      if (temp) {
        const tCtx = temp.getContext('2d');
        tCtx.clearRect(0, 0, temp.width, temp.height);

        const w = temp.width;
        const h = temp.height;
        const history = tempHistoryRef.current;
        const maxVal = 120;
        const minVal = 10;

        if (history.length > 1) {
          tCtx.strokeStyle = activeHs && (activeHs.type === 'thermal' || activeHs.type === 'mixed') ? (activeHs.type === 'mixed' ? '#f97316' : '#ef4444') : '#10b981';
          tCtx.lineWidth = 1.5;
          tCtx.beginPath();

          for (let i = 0; i < history.length; i++) {
            const x = (i / (history.length - 1)) * w;
            const pct = (history[i] - minVal) / (maxVal - minVal);
            const y = h - (pct * h * 0.8 + h * 0.1);
            if (i === 0) tCtx.moveTo(x, y);
            else tCtx.lineTo(x, y);
          }
          tCtx.stroke();
        }
      }
    };

    render();

    return () => {
      if (animationFrameId.current) cancelAnimationFrame(animationFrameId.current);
    };
  }, [scene, mode, hoveredHotspot, addLog, containerSize, bgImage, visibleHotspots]);

  // Handle slide changes manually
  const selectScene = (idx) => {
    setIsAutoPlaying(false);
    setActiveScene(idx);
  };

  const handleMouseMove = (e) => {
    const rect = containerRef.current.getBoundingClientRect();
    mouseRef.current = {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
      active: true
    };
  };

  const handleMouseLeave = () => {
    mouseRef.current.active = false;
    setHoveredHotspot(null);
  };

  const ambientTemp = 24.1 + Math.sin(Date.now() * 0.001) * 0.4;
  const displayTemp = hoveredHotspot ? hoveredHotspot.temp : ambientTemp;
  const displayDb = hoveredHotspot ? hoveredHotspot.db : 10;
  const displayDist = hoveredHotspot ? hoveredHotspot.dist : null;

  return (
    <header
      className={`site-hero mode-${mode}`}
      ref={containerRef}
      onMouseMoveCapture={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      onClickCapture={unlockAudio}
    >
      {/* Background Slides */}
      <div className="hero-slides">
        {SCENES.map((s, idx) => (
          <div
            key={s.id}
            className={`hero-slide ${idx === activeScene ? 'active' : ''}`}
            style={{ backgroundImage: `url('${s.bg}')` }}
          />
        ))}
      </div>

      {/* Crosshair cursor layer (mousemove handled on hero via capture) */}
      <div className="hero-interactive-trigger" aria-hidden="true" />

      {/* Target Pulsing Hotspots */}
      {visibleHotspots.map((hs, idx) => {
        const color = hs.type === 'thermal' ? '#ef4444' : (hs.type === 'mixed' ? '#f97316' : '#22d3ee');
        const coords = containerSize.width ? getImageCoverCoords(hs.x, hs.y, containerSize.width, containerSize.height) : { x: 0, y: 0 };
        const isHovered = hoveredHotspot === hs;
        return (
          <div
            key={idx}
            className={`hotspot-marker ${isHovered ? 'hovered' : ''}`}
            style={{ 
              left: `${coords.x}px`, 
              top: `${coords.y}px`, 
              '--color': color,
              display: containerSize.width ? 'block' : 'none'
            }}
          >
            <div className="hotspot-ring hotspot-ring-1"></div>
            <div className="hotspot-ring hotspot-ring-2"></div>
            <div className="hotspot-dot"></div>
          </div>
        );
      })}

      {/* Canvas Diagnostic Overlay */}
      <canvas className="hero-canvas-overlay" ref={canvasRef} />

      {/* Main Hero Inner Grid */}
      <div className="site-container site-hero-inner" style={{ pointerEvents: 'none' }}>
        <div className="hero-grid-layout">
          
          {/* Left Column: B2B Marketing copy (Compact sizes for feedback) */}
          <div style={{ pointerEvents: 'none', maxWidth: 480 }}>
            <div className="site-hero-eyebrow" style={{ marginBottom: 12 }}>
              <span className="dot"></span>
              <span data-i18n="hero_eyebrow" />
            </div>
            <h1 style={{ fontSize: 'clamp(28px, 4vw, 42px)', lineHeight: 1.15, marginBottom: 14 }}>
              <span data-i18n="hero_title_l1" />
              <br />
              <span className="hl" data-i18n="hero_title_l2" />
            </h1>
            <p className="lead" style={{ fontSize: '14.5px', lineHeight: 1.6, color: '#94a3b8', marginBottom: 20, maxWidth: '44ch' }} data-i18n="hero_lead" />
            <div className="site-hero-actions" style={{ marginBottom: 28, pointerEvents: 'auto' }}>
              <a href="contact.html" className="site-btn site-btn-primary" style={{ padding: '11px 22px', fontSize: '13.5px' }}>
                <span data-i18n="cta_demo" />
                <svg className="site-btn-arrow" viewBox="0 0 16 16" fill="none" style={{ width: 14, height: 14 }}>
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" />
                </svg>
              </a>
              <a href="products.html" className="site-btn site-btn-ghost" style={{ padding: '11px 22px', fontSize: '13.5px' }} data-i18n="cta_explore" />
            </div>
            <div className="site-hero-stats" style={{ gap: 28, marginTop: 18, paddingTop: 14 }}>
              {scene.stats.map((stat, idx) => (
                <div key={idx} className="site-hero-stat">
                  <div className="v" style={{ fontSize: '26px' }}>
                    {stat.v}
                    <span className="unit" style={{ fontSize: '0.5em' }}>{stat.u}</span>
                  </div>
                  <div className="l" style={{ fontSize: '11px', marginTop: 4 }}>{lang === 'ko' ? stat.l.ko : stat.l.en}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right Column: Real-time Telemetry Glassmorphism Panel (Compact sizes for feedback) */}
          <div style={{ pointerEvents: 'none' }}>

            {/* Interactive hint label above console */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              marginBottom: 8,
              padding: '7px 14px',
              background: 'rgba(34, 211, 238, 0.07)',
              border: '1px solid rgba(34, 211, 238, 0.22)',
              borderRadius: 8,
              backdropFilter: 'blur(6px)',
              maxWidth: 390,
            }}>
              {/* Pulsing cursor icon */}
              <span style={{
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: 22,
                height: 22,
                borderRadius: '50%',
                background: 'rgba(34, 211, 238, 0.15)',
                border: '1px solid rgba(34, 211, 238, 0.4)',
                flexShrink: 0,
                animation: 'hintPulse 2s ease-in-out infinite',
              }}>
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                  <path d="M2 2L10 6L6 7L5 10L2 2Z" fill="#22d3ee" stroke="#22d3ee" strokeWidth="0.5" strokeLinejoin="round"/>
                </svg>
              </span>
              <span style={{
                fontSize: lang === 'ko' ? '15.5px' : '13.5px',
                fontWeight: lang === 'ko' ? '600' : '500',
                color: 'rgba(186, 230, 253, 0.92)',
                lineHeight: 1.45,
                letterSpacing: lang === 'ko' ? '0' : '0.01em',
                fontFamily: lang === 'ko' ? 'var(--ep-font-sans)' : 'var(--ep-font-mono)',
              }}>
                {lang === 'ko'
                  ? '직접 조준하면 진단이 시작됩니다. 마우스를 움직여 스팟에 접근하세요.'
                  : 'Aim at any marker to start diagnostics. Move your cursor to explore each spot.'}
              </span>
            </div>

            <div className="hud-panel" style={{ maxWidth: 390, gap: '10px', padding: '16px 20px', pointerEvents: 'auto' }}>
              
              {/* HUD Header */}
              <div className="hud-header" style={{ paddingBottom: 6 }}>
                <div className="hud-title" style={{ fontSize: lang === 'ko' ? '15px' : '11px', fontWeight: lang === 'ko' ? '700' : 'normal', letterSpacing: lang === 'ko' ? '0' : '.05em' }}>// {lang === 'ko' ? '융복합 센서 진단 콘솔' : 'FUSION DIAGNOSTIC CONSOLE'}</div>
                <div className={`hud-status-badge ${hoveredHotspot && (hoveredHotspot.temp > 50 || hoveredHotspot.db > 45) ? 'critical' : ''}`} style={{ fontSize: '11px', padding: '3px 8px' }}>
                  {hoveredHotspot ? ((hoveredHotspot.temp > 50 || hoveredHotspot.db > 45) ? 'WARNING: ANOMALY' : 'TARGET LOCKED') : 'AMBIENT SCANNING'}
                </div>
              </div>

              {/* Telemetry readouts */}
              <div className="hud-telemetry" style={{ gap: 8 }}>
                <div className={`hud-telemetry-item ${hoveredHotspot && (hoveredHotspot.type === 'thermal' || hoveredHotspot.type === 'mixed') ? 'critical' : ''}`} style={{ padding: '8px 12px' }}>
                  <div className="label" style={{ fontSize: '11px', display: 'flex', alignItems: 'baseline', gap: '3px' }}>
                    <span>TEMP / </span>
                    <span style={{ fontSize: lang === 'ko' ? '17px' : '11px', fontWeight: lang === 'ko' ? '700' : 'normal' }}>
                      {lang === 'ko' ? '열화상 온도' : 'THERMAL SIGNATURE'}
                    </span>
                  </div>
                  <div className="val" style={{ fontSize: '14.5px' }}>{displayTemp.toFixed(1)} <span style={{fontSize:10}}>°C</span></div>
                </div>
                <div className={`hud-telemetry-item ${hoveredHotspot && (hoveredHotspot.type === 'prpd' || hoveredHotspot.type === 'mixed') ? 'warning' : ''}`} style={{ padding: '8px 12px' }}>
                  <div className="label" style={{ fontSize: '11px', display: 'flex', alignItems: 'baseline', gap: '3px' }}>
                    <span>NOISE / </span>
                    <span style={{ fontSize: lang === 'ko' ? '17px' : '11px', fontWeight: lang === 'ko' ? '700' : 'normal' }}>
                      {lang === 'ko' ? '초음파 부분방전' : 'ULTRASONIC PARTIAL DISCHARGE'}
                    </span>
                  </div>
                  <div className="val" style={{ fontSize: '14.5px' }}>{displayDb} <span style={{fontSize:10}}>dB</span></div>
                </div>
              </div>

              {/* Telemetry Target Info (Distance display included under 50m) */}
              <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 8 }}>
                <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '8px', padding: '6px 10px', fontSize: '11px', fontFamily: 'var(--ep-font-mono)', color: '#94a3b8' }}>
                  TAG: <span style={{ color: '#fff', fontWeight: 'bold' }}>{hoveredHotspot ? hoveredHotspot.telemetry : 'NO LOCK'}</span>
                </div>
                <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: '8px', padding: '6px 10px', fontSize: '11px', fontFamily: 'var(--ep-font-mono)', color: '#94a3b8' }}>
                  DIST: <span style={{ color: '#fff', fontWeight: 'bold' }}>{displayDist ? `${displayDist.toFixed(1)} m` : '---'}</span>
                </div>
              </div>

              {/* Locked details console */}
              {hoveredHotspot ? (
                <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: '8px', padding: '10px' }}>
                  <div style={{ fontSize: lang === 'ko' ? 18 : 9.5, fontFamily: 'var(--ep-font-mono)', color: hoveredHotspot.type === 'thermal' ? '#ef4444' : (hoveredHotspot.type === 'mixed' ? '#f97316' : '#22d3ee'), fontWeight: 'bold', marginBottom: 6 }}>
                    ✦ {lang === 'ko' ? hoveredHotspot.label.ko : hoveredHotspot.label.en}
                  </div>
                  <div style={{ fontSize: lang === 'ko' ? 17 : 11, color: '#94a3b8', lineHeight: 1.5 }}>
                    {lang === 'ko' ? hoveredHotspot.desc.ko : hoveredHotspot.desc.en}
                  </div>
                </div>
              ) : (
                <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.02)', borderRadius: '8px', padding: '12px 10px', textAlign: 'center', color: '#64748b', fontSize: lang === 'ko' ? 19 : 11, lineHeight: 1.5 }}>
                  {lang === 'ko' ? '설비 노드(적/청/황색 조준선)에 마우스를 대면 실시간 융복합 진단 콘솔이 활성화됩니다.' : 'Hover over target brackets (red/cyan/orange) to trigger diagnostics HUD.'}
                </div>
              )}

              {/* Mode Toggles */}
              <div className="hud-modes" style={{ gap: 6 }}>
                <button className={`hud-mode-btn ${mode === 'fusion' ? 'active' : ''}`} style={{ padding: '6px 8px', fontSize: lang === 'ko' ? '13px' : '11px', fontWeight: lang === 'ko' ? 'bold' : 'normal' }} onClick={() => setMode('fusion')}>{lang === 'ko' ? '융복합' : 'FUSION'}</button>
                <button className={`hud-mode-btn ${mode === 'thermal' ? 'active' : ''}`} style={{ padding: '6px 8px', fontSize: lang === 'ko' ? '13px' : '11px', fontWeight: lang === 'ko' ? 'bold' : 'normal' }} onClick={() => setMode('thermal')}>{lang === 'ko' ? '열화상' : 'THERMAL'}</button>
                <button className={`hud-mode-btn ${mode === 'ultrasound' ? 'active' : ''}`} style={{ padding: '6px 8px', fontSize: lang === 'ko' ? '13px' : '11px', fontWeight: lang === 'ko' ? 'bold' : 'normal' }} onClick={() => setMode('ultrasound')}>{lang === 'ko' ? '초음파' : 'ULTRASOUND'}</button>
              </div>

              {/* Miniature telemetry charts */}
              <div className="hud-charts" style={{ gap: 8 }}>
                <div className="hud-chart-box" style={{ padding: '4px 6px' }}>
                  <div className="title" style={{ fontSize: lang === 'ko' ? '12px' : '10px' }}>{lang === 'ko' ? '초음파 PRPD 위상' : 'PRPD ULTRASOUND'}</div>
                  <canvas className="hud-chart-canvas" ref={miniPrpdRef} width={130} height={28} style={{ height: '28px' }} />
                </div>
                <div className="hud-chart-box" style={{ padding: '4px 6px' }}>
                  <div className="title" style={{ fontSize: lang === 'ko' ? '12px' : '10px' }}>{lang === 'ko' ? '열화상 온도 추이' : 'THERMAL SPARKLINE'}</div>
                  <canvas className="hud-chart-canvas" ref={miniTempRef} width={130} height={28} style={{ height: '28px' }} />
                </div>
              </div>

              {/* Real-time terminal log */}
              <div className="hud-terminal" style={{ height: 60, padding: '6px 8px', gap: 2 }}>
                {logs.map((log, idx) => (
                  <div key={idx} className={`hud-terminal-line ${log.type}`} style={{ fontSize: '11px' }}>
                    [{log.time}] {log.text}
                  </div>
                ))}
              </div>

              {/* Scene Navigation dots */}
              <div className="hero-scene-nav" style={{ marginTop: 4, paddingTop: 8, gap: 6 }}>
                {SCENES.map((s, idx) => (
                  <button
                    key={s.id}
                    className={`hero-scene-dot ${idx === activeScene ? 'active' : ''}`}
                    onClick={() => selectScene(idx)}
                    title={lang === 'ko' ? s.title.ko : s.title.en}
                  />
                ))}
              </div>

            </div>
          </div>

        </div>
      </div>
    </header>
  );
}


const VALUE_CARDS = [
  ['1','hybrid'],['2','cert'],['3','report'],['4','globe'],['5','cloud'],['6','support'],
];
function ValueIcon({ kind }) {
  const c = { viewBox:"0 0 32 32", width:"22", height:"22", fill:"none", stroke:"currentColor", strokeWidth:"1.4" };
  if (kind==='hybrid')  return <svg {...c}><circle cx="16" cy="16" r="3"/><circle cx="16" cy="16" r="7" opacity=".6"/><circle cx="16" cy="16" r="11" opacity=".3"/><path d="M16 5v3M16 24v3M5 16h3M24 16h3"/></svg>;
  if (kind==='cert')    return <svg {...c}><path d="M16 3l11 6v10c0 6-5 9-11 10C10 28 5 25 5 19V9z"/><path d="M11 16l3.5 3.5L21 13"/></svg>;
  if (kind==='report')  return <svg {...c}><rect x="7" y="4" width="18" height="24" rx="2"/><path d="M11 11h10M11 16h10M11 21h6"/></svg>;
  if (kind==='globe')   return <svg {...c}><circle cx="16" cy="16" r="11"/><path d="M5 16h22M16 5c4 3 4 19 0 22M16 5c-4 3-4 19 0 22"/></svg>;
  if (kind==='cloud')   return <svg {...c}><path d="M9 22a5 5 0 010-10 7 7 0 0114 0 5 5 0 010 10z"/><path d="M16 16v6m-3-3h6"/></svg>;
  return <svg {...c}><rect x="4" y="9" width="24" height="14" rx="2"/><path d="M9 9V7a3 3 0 016 0v2M23 9V7a3 3 0 016 0v2" transform="translate(-1,0)"/><circle cx="16" cy="16" r="2"/></svg>;
}

function HomeCoreSiteLinks() {
  const links = [
    { href: 'https://entecpower.net/products/md1000/', label: 'MD-1000', tone: 'md1000' },
    { href: 'https://entecpower.net/education/cdp/', labelKey: 'home_core_cdp', tone: 'cdp' },
    { href: 'https://entecpower.net/products/HD6G_V/', label: 'HD-6G', tone: 'hd6g' },
  ];
  return (
    <div className="site-core-links" role="navigation" aria-label="Core product sites">
      {links.map((link) => (
        <a
          key={link.href}
          className={`site-core-link site-core-link--${link.tone}`}
          href={link.href}
          target="_blank"
          rel="noopener noreferrer"
        >
          {link.labelKey ? <span data-i18n={link.labelKey} /> : link.label}
        </a>
      ))}
    </div>
  );
}

function HomeValues() {
  return (
    <section className="site-section">
      <div className="site-container">
        <div className="site-section-head">
          <div>
            <div className="site-section-label" data-i18n="home_value_label"/>
            <h2 data-i18n="home_value_title"/>
          </div>
          <div className="site-section-head-side">
            <p className="section-lead" data-i18n="home_value_lead"/>
            <HomeCoreSiteLinks />
          </div>
        </div>
        <div className="site-grid cols-3">
          {VALUE_CARDS.map(([n,k]) => (
            <div key={n} className="site-card">
              <div className="card-icon"><ValueIcon kind={k}/></div>
              <h3 data-i18n={`home_value_${n}_t`}/>
              <p data-i18n={`home_value_${n}_d`}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeProducts() {
  return (
    <section className="site-section tint">
      <div className="site-container">
        <div className="site-section-head">
          <div>
            <div className="site-section-label" data-i18n="home_products_label"/>
            <h2 data-i18n="home_products_title"/>
          </div>
          <p className="section-lead" data-i18n="home_products_lead"/>
        </div>
        <div className="site-grid cols-2">
          {/* MD-1000 */}
          <a className="site-card" href="products-md1000.html" style={{padding:0,overflow:'hidden',textDecoration:'none'}}>
            <div style={{aspectRatio:'16/10',background:'radial-gradient(ellipse at 50% 70%,rgba(34,211,238,.18),transparent 65%),#0f172a',display:'flex',alignItems:'center',justifyContent:'center',padding:24,borderBottom:'1px solid var(--ep-border)'}}>
              <img src="company/assets/imagery/md1000_fusion_detector.png" alt="MD-1000" style={{maxHeight:240,filter:'drop-shadow(0 24px 40px rgba(0,0,0,.5))'}}/>
            </div>
            <div style={{padding:'28px 28px 32px'}}>
              <span className="site-pill" data-i18n="home_md1000_pill"/>
              <h3 style={{fontFamily:'var(--site-display)',fontSize:32,fontWeight:800,letterSpacing:'-.01em',margin:'14px 0 4px',color:'var(--ep-ink)'}} data-i18n="home_md1000_title"/>
              <div style={{fontSize:14,color:'var(--site-accent)',marginBottom:14,fontWeight:600}} data-i18n="home_md1000_sub"/>
              <p style={{color:'var(--ep-muted)',fontSize:14.5,lineHeight:1.65,margin:'0 0 18px'}} data-i18n="home_md1000_desc"/>
              <span className="site-btn site-btn-ghost" style={{padding:'10px 18px',fontSize:13.5}}>
                <span data-i18n="home_product_cta"/>
                <svg className="site-btn-arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6"/></svg>
              </span>
            </div>
          </a>
          {/* HD-6G */}
          <a className="site-card" href="products-hd6g.html" style={{padding:0,overflow:'hidden',textDecoration:'none',position:'relative'}}>
            <div style={{aspectRatio:'16/10',background:'radial-gradient(ellipse at 50% 60%,rgba(247,148,29,.18),transparent 65%),#0a1422',display:'flex',alignItems:'center',justifyContent:'center',padding:24,borderBottom:'1px solid var(--ep-border)',position:'relative'}}>
              <span style={{position:'absolute',top:6,left:6,width:14,height:14,borderTop:'1px solid #f7941d',borderLeft:'1px solid #f7941d'}}></span>
              <span style={{position:'absolute',top:6,right:6,width:14,height:14,borderTop:'1px solid #f7941d',borderRight:'1px solid #f7941d'}}></span>
              <span style={{position:'absolute',bottom:6,left:6,width:14,height:14,borderBottom:'1px solid #f7941d',borderLeft:'1px solid #f7941d'}}></span>
              <span style={{position:'absolute',bottom:6,right:6,width:14,height:14,borderBottom:'1px solid #f7941d',borderRight:'1px solid #f7941d'}}></span>
              <img src="company/assets/imagery/hd6g_product.png" alt="HD-6G" style={{maxHeight:240,filter:'drop-shadow(0 24px 40px rgba(0,0,0,.6))'}}/>
            </div>
            <div style={{padding:'28px 28px 32px'}}>
              <span className="site-pill" style={{background:'rgba(247,148,29,.14)',color:'#f7941d',borderColor:'rgba(247,148,29,.32)'}} data-i18n="home_hd6g_pill"/>
              <h3 style={{fontFamily:"'Space Grotesk', var(--site-display)",fontSize:32,fontWeight:600,letterSpacing:'-.01em',margin:'14px 0 4px',color:'var(--ep-ink)'}} data-i18n="home_hd6g_title"/>
              <div style={{fontSize:14,color:'#f7941d',marginBottom:14,fontWeight:600}} data-i18n="home_hd6g_sub"/>
              <p style={{color:'var(--ep-muted)',fontSize:14.5,lineHeight:1.65,margin:'0 0 18px'}} data-i18n="home_hd6g_desc"/>
              <span className="site-btn site-btn-ghost" style={{padding:'10px 18px',fontSize:13.5}}>
                <span data-i18n="home_product_cta"/>
                <svg className="site-btn-arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6"/></svg>
              </span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

const INDUSTRY_LIST = [
  ['전력 · 송변전','Power & Transmission','power','부분방전·코로나·절연 결함을 위상-진폭 평면에서 위치 추정.'],
  ['제조 · 스마트팩토리','Manufacturing','mfg','모터·버스바·MCC를 정지 없이 점검. 95dB 환경에서도 동작.'],
  ['석유화학 · 가스','Petrochemical & Gas','chem','압축공기·스팀·가스 라인의 누출을 신속 위치 특정.'],
  ['반도체 · 데이터센터','Semiconductor & DC','data','변압기 질소가스 누설·UPS 진단. 24/7 운용.'],
  ['철도 · 교통','Rail & Transit','rail','KORAIL 운영. 변전소·차량 베어링 진단.'],
  ['특수 · 해외 광산','Mining & Special','mining','Rio Tinto 호주, 글로벌 EPC 프로젝트 대응.'],
];
function IndIcon({ k }) {
  const c = { viewBox:"0 0 32 32", width:"22", height:"22", fill:"none", stroke:"currentColor", strokeWidth:"1.3" };
  if (k==='power') return <svg {...c}><path d="M16 3 L10 12 L13 12 L8 22 L12 22 L6 30 L26 30 L20 22 L24 22 L19 12 L22 12 Z"/></svg>;
  if (k==='mfg')   return <svg {...c}><path d="M4 28V14l8 5V14l8 5V14l8 5V28Z"/><circle cx="12" cy="22" r="1.4"/><circle cx="20" cy="22" r="1.4"/></svg>;
  if (k==='data')  return <svg {...c}><rect x="5" y="6" width="22" height="6" rx="1"/><rect x="5" y="14" width="22" height="6" rx="1"/><rect x="5" y="22" width="22" height="6" rx="1"/><circle cx="9" cy="9" r=".8" fill="currentColor"/><circle cx="9" cy="17" r=".8" fill="currentColor"/><circle cx="9" cy="25" r=".8" fill="currentColor"/></svg>;
  if (k==='chem')  return <svg {...c}><path d="M13 4v8L7 26a2 2 0 002 2h14a2 2 0 002-2L19 12V4"/><path d="M11 4h10M12 20h8"/></svg>;
  if (k==='rail')  return <svg {...c}><rect x="8" y="4" width="16" height="20" rx="2"/><circle cx="12" cy="20" r="1.4" fill="currentColor"/><circle cx="20" cy="20" r="1.4" fill="currentColor"/><path d="M8 14h16M14 4v6M18 4v6"/></svg>;
  return <svg {...c}><path d="M4 26 L12 14 L18 20 L24 8 L28 14" /><circle cx="12" cy="14" r="1.4" fill="currentColor"/><circle cx="24" cy="8" r="1.4" fill="currentColor"/></svg>;
}

function HomeIndustries() {
  const { lang } = useSite();
  return (
    <section className="site-section">
      <div className="site-container">
        <div className="site-section-head">
          <div>
            <div className="site-section-label" data-i18n="home_industries_label"/>
            <h2 data-i18n="home_industries_title"/>
          </div>
          <a href="industries.html" className="site-btn site-btn-ghost" style={{alignSelf:'end'}}>
            <span data-i18n="nav_industries"/>
            <svg className="site-btn-arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6"/></svg>
          </a>
        </div>
        <div className="site-grid cols-3">
          {INDUSTRY_LIST.map(([ko,en,k,d],i) => (
            <div key={i} className="site-card" style={{padding:24}}>
              <div className="card-icon"><IndIcon k={k}/></div>
              <h3 style={{fontSize:17}}>{lang === 'ko' ? ko : en}</h3>
              <p style={{fontSize:13.5}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const PARTNERS = ['kepco','korail','hyundai_electric','posco','sgcc','datang','fujitsu'];
function HomePartners() {
  return (
    <section className="site-section tint">
      <div className="site-container">
        <div className="site-section-head">
          <div>
            <div className="site-section-label" data-i18n="home_partners_label"/>
            <h2 data-i18n="home_partners_title"/>
          </div>
          <p className="section-lead" data-i18n="home_partners_lead"/>
        </div>
        <div style={{display:'flex',flexWrap:'wrap',gap:40,alignItems:'center',justifyContent:'space-around',padding:'24px 0',borderTop:'1px solid var(--ep-border)',borderBottom:'1px solid var(--ep-border)'}}>
          {PARTNERS.map(p => (
            <img key={p} src={`company/assets/logos/partners/${p}.png`} alt={p} style={{maxHeight:42,objectFit:'contain',opacity:.85,filter:'grayscale(.5)',transition:'opacity .2s'}} onMouseOver={e=>{e.target.style.opacity='1';e.target.style.filter='grayscale(0)';}} onMouseOut={e=>{e.target.style.opacity='.85';e.target.style.filter='grayscale(.5)';}}/>
          ))}
        </div>
        <div style={{textAlign:'center',marginTop:32}}>
          <a href="partners.html" className="site-btn site-btn-ghost">
            <span>View partners & global map →</span>
          </a>
        </div>
      </div>
    </section>
  );
}

const NEWS_PREVIEW = [
  ['press','2026-04','엔텍, 글로벌 파트너십 체결','ENTEC signs global partnership','전력·제조 분야 주요 기업과 해외 공급망을 확대했습니다.','Expanded global supply network across power and manufacturing.'],
  ['update','2026-03','교육·인증 포털 v2 공개','Training portal v2 launched','19개 언어, 진단 시뮬레이터, 이수증 PDF 자동 발급.','19 languages, in-browser diagnostic simulator, auto-issued certificates.'],
  ['blog','2026-02','현장 진단 품질을 높이는 3가지 팁','3 tips for better field diagnosis','초보 점검자가 90일 안에 실전화하는 체크리스트.','A checklist that gets new inspectors production-ready in 90 days.'],
];
function HomeNews() {
  const { lang } = useSite();
  const ko = lang === 'ko';
  return (
    <section className="site-section">
      <div className="site-container">
        <div className="site-section-head">
          <div>
            <div className="site-section-label" data-i18n="home_news_label"/>
            <h2 data-i18n="home_news_title"/>
          </div>
          <a href="news.html" className="site-btn site-btn-ghost" style={{alignSelf:'end'}}>
            <span data-i18n="nav_news"/>
            <svg className="site-btn-arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6"/></svg>
          </a>
        </div>
        <div className="site-grid cols-3">
          {NEWS_PREVIEW.map(([cat,date,kt,et,kd,ed],i) => (
            <a key={i} className="site-card" href="news.html" style={{textDecoration:'none'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
                <span className="site-pill" style={{textTransform:'uppercase'}}>{cat}</span>
                <span style={{fontFamily:'var(--ep-font-mono)',fontSize:11,color:'var(--ep-muted)',letterSpacing:'.06em'}}>{date}</span>
              </div>
              <h3 style={{fontSize:17,marginBottom:10}}>{ko ? kt : et}</h3>
              <p>{ko ? kd : ed}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeHero, HomeValues, HomeProducts, HomeIndustries, HomePartners, HomeNews });
