// scenes-v2-c.jsx — Escena WRF (modelo meteorológico regional)
// Se ubica entre Resolución 40 km (CAMS) y Downscaling.

function S6WRF() {
  const { localTime, duration } = useSprite();
  const time = useTime();

  const tKick  = Easing.easeOutCubic(clamp((localTime - 0.2) / 0.5, 0, 1));
  const tHead  = Easing.easeOutCubic(clamp((localTime - 0.6) / 0.6, 0, 1));
  const tBody  = Easing.easeOutCubic(clamp((localTime - 1.1) / 0.7, 0, 1));
  const tD1    = Easing.easeOutCubic(clamp((localTime - 1.6) / 0.5, 0, 1));
  const tD2    = Easing.easeOutCubic(clamp((localTime - 2.1) / 0.5, 0, 1));
  const tD3    = Easing.easeOutCubic(clamp((localTime - 2.6) / 0.5, 0, 1));
  const tWinds = Easing.easeOutCubic(clamp((localTime - 3.4) / 0.6, 0, 1));
  const tStats = Easing.easeOutCubic(clamp((localTime - 4.4) / 0.6, 0, 1));
  const fadeOut = clamp((duration - localTime) / 0.45, 0, 1);

  // Diagram geometry — nested domains on the right side
  const cx = 920, cy = 380;
  // D01 (outer, 18 km, NW South America)
  const d1 = { w: 340, h: 380, color: C.purple, label: 'D01 · 18 km', sub: 'NW de Sudamérica' };
  // D02 (6 km, Colombia)
  const d2 = { w: 200, h: 240, color: C.cyan,   label: 'D02 · 6 km',  sub: 'Antioquia' };
  // D03 (2 km, Valle de Aburrá)
  const d3 = { w: 100, h: 130, color: C.amber,  label: 'D03 · 2 km',  sub: 'Valle de Aburrá' };

  return (
    <SceneFade>
      <GridBg cell={48} color="rgba(255,255,255,0.018)" />

      {/* Left text column */}
      <div style={{
        position: 'absolute', left: 80, top: 130, width: 460,
        opacity: fadeOut,
      }}>
        <div style={{
          fontFamily: MONO, fontSize: 11, fontWeight: 600,
          letterSpacing: '0.26em', textTransform: 'uppercase', color: C.cyan,
          opacity: tKick, transform: 'translateY(' + ((1 - tKick) * 8) + 'px)',
        }}>
          Capítulo V · ¿Qué es WRF?
        </div>

        <div style={{
          marginTop: 18,
          fontFamily: FONT, fontSize: 42, fontWeight: 700,
          color: C.white, lineHeight: 1.1, letterSpacing: '-0.015em',
          opacity: tHead, transform: 'translateY(' + ((1 - tHead) * 14) + 'px)',
        }}>
          La <span style={{ color: C.amber }}>meteorología</span><br />
          del Valle,<br />
          hora a hora.
        </div>

        <div style={{
          marginTop: 28,
          fontFamily: FONT, fontSize: 16, fontWeight: 400,
          color: C.gray, lineHeight: 1.6, maxWidth: 420,
          opacity: tBody, transform: 'translateY(' + ((1 - tBody) * 12) + 'px)',
          textWrap: 'pretty',
        }}>
          <span style={{ color: C.white }}>WRF</span> (Weather Research and Forecasting,
          NCAR&nbsp;/&nbsp;NOAA) es un modelo atmosférico regional. SIATA lo
          opera con <span style={{ color: C.white }}>tres dominios anidados</span> que
          bajan de <span style={{ color: C.white }}>18 km a 2 km</span> hasta cubrir
          el Valle con el detalle topográfico que CAMS no puede ver.
        </div>

        <div style={{
          marginTop: 22,
          fontFamily: FONT, fontSize: 15, fontWeight: 400,
          color: C.gray, lineHeight: 1.55, maxWidth: 420,
          opacity: tBody,
          textWrap: 'pretty',
        }}>
          Lo que aporta al pronóstico de PM<span style={{ fontSize: 11 }}>2.5</span>:
          vientos, temperatura, humedad, altura de capa de mezcla y
          radiación — <span style={{ color: C.white }}>16 variables</span> que
          explican cómo se acumula o se ventila el aire dentro del cañón.
        </div>

        {/* Stats pills */}
        <div style={{
          marginTop: 30, display: 'flex', gap: 10, flexWrap: 'wrap',
          opacity: tStats,
        }}>
          {[
            { v: '2 km', l: 'dominio interno' },
            { v: '16', l: 'variables' },
            { v: 'horaria', l: 'salida' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '10px 14px',
              border: '1px solid ' + C.faint,
              borderRadius: 8, background: 'rgba(255,255,255,0.025)',
            }}>
              <div style={{ fontFamily: FONT, fontSize: 18, fontWeight: 700, color: C.white }}>{s.v}</div>
              <div style={{ fontFamily: MONO, fontSize: 10, color: C.gray, letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Right diagram: nested WRF domains */}
      <div style={{ position: 'absolute', left: cx, top: cy, opacity: fadeOut }}>

        {/* D01 outer rectangle */}
        <div style={{
          position: 'absolute', left: -d1.w / 2, top: -d1.h / 2,
          width: d1.w, height: d1.h,
          border: '1.5px solid ' + hexWithAlpha(d1.color, 0.5),
          background: hexWithAlpha(d1.color, 0.04),
          borderRadius: 4,
          opacity: tD1, transform: 'scale(' + (0.92 + 0.08 * tD1) + ')',
        }}>
          {/* Grid hatching inside D01 */}
          <svg width={d1.w} height={d1.h} style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
            {Array.from({ length: 8 }, (_, i) => (
              <line key={'h' + i} x1={0} y1={(d1.h / 8) * i} x2={d1.w} y2={(d1.h / 8) * i}
                stroke={d1.color} strokeOpacity={0.18} strokeWidth={0.6} />
            ))}
            {Array.from({ length: 7 }, (_, i) => (
              <line key={'v' + i} x1={(d1.w / 7) * i} y1={0} x2={(d1.w / 7) * i} y2={d1.h}
                stroke={d1.color} strokeOpacity={0.18} strokeWidth={0.6} />
            ))}
          </svg>
          {/* Tag */}
          <div style={{
            position: 'absolute', left: 8, top: 6,
            fontFamily: MONO, fontSize: 10, fontWeight: 700,
            color: d1.color, letterSpacing: '0.16em',
          }}>{d1.label}</div>
          <div style={{
            position: 'absolute', left: 8, top: 22,
            fontFamily: MONO, fontSize: 9, color: C.gray,
            letterSpacing: '0.08em',
          }}>{d1.sub}</div>
        </div>

        {/* D02 middle rectangle */}
        <div style={{
          position: 'absolute', left: -d2.w / 2 + 10, top: -d2.h / 2 - 10,
          width: d2.w, height: d2.h,
          border: '1.5px solid ' + hexWithAlpha(d2.color, 0.6),
          background: hexWithAlpha(d2.color, 0.06),
          borderRadius: 4,
          opacity: tD2, transform: 'scale(' + (0.9 + 0.1 * tD2) + ')',
        }}>
          <svg width={d2.w} height={d2.h} style={{ position: 'absolute', inset: 0, opacity: 0.6 }}>
            {Array.from({ length: 12 }, (_, i) => (
              <line key={'h' + i} x1={0} y1={(d2.h / 12) * i} x2={d2.w} y2={(d2.h / 12) * i}
                stroke={d2.color} strokeOpacity={0.2} strokeWidth={0.5} />
            ))}
            {Array.from({ length: 10 }, (_, i) => (
              <line key={'v' + i} x1={(d2.w / 10) * i} y1={0} x2={(d2.w / 10) * i} y2={d2.h}
                stroke={d2.color} strokeOpacity={0.2} strokeWidth={0.5} />
            ))}
          </svg>
          <div style={{
            position: 'absolute', left: 8, top: 6,
            fontFamily: MONO, fontSize: 10, fontWeight: 700,
            color: d2.color, letterSpacing: '0.16em',
          }}>{d2.label}</div>
          <div style={{
            position: 'absolute', left: 8, top: 22,
            fontFamily: MONO, fontSize: 9, color: C.gray,
            letterSpacing: '0.08em',
          }}>{d2.sub}</div>
        </div>

        {/* D03 inner rectangle — Valle de Aburrá */}
        <div style={{
          position: 'absolute', left: -d3.w / 2 + 22, top: -d3.h / 2 - 4,
          width: d3.w, height: d3.h,
          border: '2px solid ' + hexWithAlpha(d3.color, 0.85),
          background: hexWithAlpha(d3.color, 0.08),
          borderRadius: 4,
          opacity: tD3,
          transform: 'scale(' + (0.85 + 0.15 * tD3) + ')',
          boxShadow: '0 0 20px ' + hexWithAlpha(d3.color, 0.35),
        }}>
          {/* Dense grid (2 km cells) */}
          <svg width={d3.w} height={d3.h} style={{ position: 'absolute', inset: 0 }}>
            {Array.from({ length: 18 }, (_, i) => (
              <line key={'h' + i} x1={0} y1={(d3.h / 18) * i} x2={d3.w} y2={(d3.h / 18) * i}
                stroke={d3.color} strokeOpacity={0.18} strokeWidth={0.4} />
            ))}
            {Array.from({ length: 14 }, (_, i) => (
              <line key={'v' + i} x1={(d3.w / 14) * i} y1={0} x2={(d3.w / 14) * i} y2={d3.h}
                stroke={d3.color} strokeOpacity={0.18} strokeWidth={0.4} />
            ))}

            {/* Valley silhouette inside D03 */}
            <path d={'M ' + (d3.w / 2) + ' 12 C ' + (d3.w / 2 + 12) + ' 36, ' + (d3.w / 2 + 16) + ' 70, ' + (d3.w / 2 + 12) + ' 100 C ' + (d3.w / 2 + 6) + ' 120, ' + (d3.w / 2) + ' ' + (d3.h - 12) + ', ' + (d3.w / 2) + ' ' + (d3.h - 12) + ' C ' + (d3.w / 2 - 6) + ' 120, ' + (d3.w / 2 - 16) + ' 70, ' + (d3.w / 2 - 12) + ' 36 C ' + (d3.w / 2 - 8) + ' 24, ' + (d3.w / 2) + ' 12, ' + (d3.w / 2) + ' 12 Z'}
              fill={hexWithAlpha(C.white, 0.08)} stroke={C.white} strokeOpacity={0.4} strokeWidth={0.8} />

            {/* Wind vectors */}
            {tWinds > 0 && (() => {
              const arrows = [];
              for (let i = 0; i < 5; i++) {
                for (let j = 0; j < 7; j++) {
                  const ax = 10 + (d3.w - 20) * (i + 0.5) / 5;
                  const ay = 12 + (d3.h - 24) * (j + 0.5) / 7;
                  // Wind blows northward up the valley with diurnal switch
                  const phase = time * 0.6 + j * 0.3;
                  const ang = -Math.PI / 2 + Math.sin(phase) * 0.5 + (Math.random ? 0 : 0);
                  const len = 6 + 3 * Math.sin(phase + i);
                  const ex = ax + Math.cos(ang) * len;
                  const ey = ay + Math.sin(ang) * len;
                  const opa = tWinds * (0.45 + Math.sin(phase + i * 0.7) * 0.25);
                  arrows.push(
                    <g key={'a' + i + '_' + j}>
                      <line x1={ax} y1={ay} x2={ex} y2={ey}
                        stroke={C.white} strokeOpacity={opa} strokeWidth={0.9} />
                      <circle cx={ex} cy={ey} r={1.2} fill={C.white} opacity={opa} />
                    </g>
                  );
                }
              }
              return arrows;
            })()}
          </svg>

          <div style={{
            position: 'absolute', left: '50%', bottom: -22,
            transform: 'translateX(-50%)',
            fontFamily: MONO, fontSize: 10, fontWeight: 700,
            color: d3.color, letterSpacing: '0.16em',
            whiteSpace: 'nowrap',
          }}>{d3.label}</div>
        </div>

        {/* Topography hint behind everything (mountain ridges) */}
        <svg width={d1.w + 80} height={d1.h + 80} style={{
          position: 'absolute', left: -(d1.w + 80) / 2, top: -(d1.h + 80) / 2,
          opacity: 0.18, pointerEvents: 'none', zIndex: -1,
        }}>
          {Array.from({ length: 7 }, (_, i) => {
            const y = (d1.h + 80) * (i + 1) / 8;
            let path = 'M 0 ' + y;
            for (let x = 0; x <= d1.w + 80; x += 12) {
              const yy = y + Math.sin(x * 0.04 + i * 1.3) * 8 + Math.sin(x * 0.012) * 14;
              path += ' L ' + x + ' ' + yy;
            }
            return <path key={i} d={path} fill="none"
              stroke={C.amber} strokeWidth={0.6} opacity={0.35} />;
          })}
        </svg>
      </div>
    </SceneFade>
  );
}

Object.assign(window, { S6WRF });