/* global React */
const { useEffect, useRef } = React;

/* Image frame with a striped fallback */
function PH({ label, dark, style, className = "", src, alt }){
  return (
    <div className={`ph ${dark ? "dark" : ""} ${className}`} style={style}>
      {src && <img src={src} alt={alt || label || ""} loading="lazy" />}
      <span className="lab">{label}</span>
    </div>
  );
}

/* SVG mountain layer — terrain silhouettes */
function MountainLayer({ kind, fill, opacity = 1, className }){
  const paths = {
    far: "M0 220 L60 180 L120 200 L200 130 L260 170 L340 100 L420 150 L520 90 L600 140 L700 110 L800 160 L900 130 L1000 170 L1100 140 L1200 180 L1280 150 L1280 320 L0 320 Z",
    mid: "M0 280 L80 240 L160 270 L240 210 L320 250 L420 180 L520 230 L640 170 L760 220 L880 200 L1000 240 L1120 210 L1200 260 L1280 230 L1280 320 L0 320 Z",
    near:"M0 300 L80 270 L160 290 L260 250 L360 285 L480 240 L600 280 L720 245 L840 290 L960 265 L1080 295 L1200 270 L1280 290 L1280 320 L0 320 Z",
    fg:  "M0 320 L0 305 C 80 295, 160 312, 240 300 S 400 280, 520 305 S 720 308, 880 290 S 1100 312, 1280 298 L1280 320 Z"
  };
  return (
    <svg className={`range ${className}`} viewBox="0 0 1280 320" preserveAspectRatio="none" aria-hidden="true">
      <path d={paths[kind]} fill={fill} opacity={opacity} />
    </svg>
  );
}

/* Snowy Kanchenjunga peaks (specific shape - jagged, snow-capped) */
function PeaksLayer({ className }){
  return (
    <svg className={`range ${className}`} viewBox="0 0 1280 320" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="peakG" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#F0E6D0" />
          <stop offset=".55" stopColor="#A9A593" />
          <stop offset="1" stopColor="#5C6464" />
        </linearGradient>
        <linearGradient id="snowG" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#FBF6E9" />
          <stop offset="1" stopColor="#D5CDB5" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* main range */}
      <path d="M0 220 L40 200 L90 180 L140 150 L190 165 L240 110 L290 130 L340 70 L390 100 L460 30 L520 80 L580 55 L640 95 L700 60 L760 110 L820 75 L880 130 L940 95 L1000 145 L1060 110 L1120 160 L1180 130 L1240 175 L1280 155 L1280 320 L0 320 Z"
            fill="url(#peakG)" />
      {/* snow caps */}
      <path d="M340 70 L390 100 L460 30 L520 80 L500 95 L460 60 L430 90 L390 115 Z" fill="#FBF6E9" />
      <path d="M580 55 L640 95 L700 60 L760 110 L735 125 L700 88 L660 115 L620 80 Z" fill="#FBF6E9" />
      <path d="M140 150 L190 165 L240 110 L290 130 L260 150 L240 132 L210 168 L170 175 Z" fill="#FBF6E9" opacity=".85" />
      {/* mist overlay */}
      <rect x="0" y="160" width="1280" height="80" fill="url(#snowG)" opacity=".4" />
    </svg>
  );
}

Object.assign(window, { PH, MountainLayer, PeaksLayer });