// scene_expert.jsx — light palette.

function AnnotationMarker({ x, y, label, status, progress, color }) {
  if (progress <= 0) return null;
  const scale = Easing.easeOutBack(clamp(progress, 0, 1));
  const opacity = clamp(progress * 1.4, 0, 1);
  return (
    <g opacity={opacity} transform={`translate(${x}, ${y}) scale(${scale})`}>
      <circle r="20" fill={PAL.bg} stroke={color} strokeWidth="2" />
      <circle r="5" fill={color} />
      <line x1="20" y1="0" x2="68" y2="-22" stroke={color} strokeWidth="1" />
      <g transform="translate(68, -42)">
        <rect x="0" y="0" width="220" height="44" fill={PAL.bg} stroke={color} strokeWidth="1" />
        <text x="12" y="18" fill={color} fontFamily={FONT_MONO} fontSize="11"
          letterSpacing="0.12em">{status}</text>
        <text x="12" y="36" fill={PAL.ink} fontFamily={FONT_SANS} fontSize="13"
          fontWeight="500">{label}</text>
      </g>
    </g>
  );
}

function ExpertPhotos({ x, y, progress = 1 }) {
  // Two real expert photos — rendered as HTML <img> overlays for reliable rendering.
  const p1 = clamp(progress * 2, 0, 1);
  const p2 = clamp(progress * 2 - 0.5, 0, 1);
  const cards = [
    { src: 'assets/klara.jpg', name: 'Klara Bouwen', role: 'FOREST GROWTH', role2: 'MODELING LEAD', dx: 0, dy: 0, prog: p1 },
    { src: 'assets/vasily.jpg', name: 'Vasily', role: 'REMOTE SENSING', role2: 'SCIENTIST', dx: 180, dy: 40, prog: p2 },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      {cards.map((c, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: x + c.dx,
          top: y + c.dy + (1 - c.prog) * 18,
          width: 140,
          opacity: c.prog,
        }}>
          <div style={{
            width: 140, height: 170,
            border: `1.5px solid ${PAL.human}`,
            background: PAL.bg,
            padding: 0,
            boxSizing: 'content-box',
            outline: `4px solid ${PAL.bg}`,
          }}>
            <img src={c.src} alt={c.name} style={{
              width: 140, height: 170, objectFit: 'cover', display: 'block',
            }} />
          </div>
          <div style={{ marginTop: 22, borderTop: `1px solid ${PAL.human}`, paddingTop: 8 }}>
            <div style={{ fontFamily: FONT_SANS, fontSize: 15, fontWeight: 500, color: PAL.ink }}>
              {c.name}
            </div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.1em', color: PAL.inkSoft, marginTop: 4 }}>
              {c.role}
            </div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.1em', color: PAL.inkSoft }}>
              {c.role2}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function CheckStroke({ x, y, progress, color = PAL.human, size = 1 }) {
  const totalLen = 60 * size;
  const draw = clamp(progress, 0, 1) * totalLen;
  return (
    <g transform={`translate(${x}, ${y})`}>
      <path
        d={`M 0 ${10 * size} L ${16 * size} ${26 * size} L ${50 * size} ${-14 * size}`}
        fill="none" stroke={color}
        strokeWidth={3 * size}
        strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray={totalLen}
        strokeDashoffset={totalLen - draw}
      />
    </g>
  );
}

function SceneExpert() {
  const { localTime, duration } = useSprite();
  const introT = Easing.easeOutCubic(clamp(localTime / 1.0, 0, 1));
  const marker1 = clamp((localTime - 1.0) / 0.6, 0, 1);
  const marker2 = clamp((localTime - 1.8) / 0.6, 0, 1);
  const marker3 = clamp((localTime - 2.6) / 0.6, 0, 1);
  const marker4 = clamp((localTime - 3.4) / 0.6, 0, 1);
  const checkT = Easing.easeOutCubic(clamp((localTime - 4.4) / 1.0, 0, 1));
  const expertT = Easing.easeOutCubic(clamp((localTime - 0.4) / 1.0, 0, 1));
  const zoom = 1 + Easing.easeInOutCubic(clamp(localTime / duration, 0, 1)) * 0.04;
  const outT = Easing.easeInCubic(clamp((localTime - (duration - 0.5)) / 0.5, 0, 1));

  return (
    <div style={{ position: 'absolute', inset: 0, background: PAL.bg, opacity: 1 - outT }}>
      <GridPaper opacity={0.22} />
      <TopoLines opacity={0.18} color="oklch(40% 0.08 40 / 0.35)" />

      <div style={{ position: 'absolute', inset: 0, transform: `scale(${zoom})`, transformOrigin: '55% 55%' }}>
        <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0 }}>
          <g opacity={introT}>
            <rect x={940} y={340} width={700} height={580}
              fill="none" stroke={PAL.lineStrong} strokeWidth="1" />
            {/* Real platform screenshot: species canopy map */}
            <image
              href="assets/species id trees.png"
              x={940} y={340} width={700} height={580}
              preserveAspectRatio="xMidYMid slice"
              opacity="0.92"
            />
            {Array.from({ length: 0 }).map((_, c) =>
              Array.from({ length: 0 }).map((_, r) => {
                const s = ((r * 31 + c * 7) * 9301) % 233280;
                const rnd = s / 233280;
                return (
                  <rect key={`${r}-${c}`}
                    x={940 + c * 50} y={340 + r * 48}
                    width={48} height={46}
                    fill={`oklch(${40 + rnd * 18}% ${0.04 + rnd * 0.06} ${110 + rnd * 50})`}
                    opacity="0.85"
                  />
                );
              })
            )}
            {/* Stress zones as subtle translucent overlays */}
            <defs>
              <radialGradient id="exHotA" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="oklch(55% 0.2 35 / 0.4)" />
                <stop offset="100%" stopColor="oklch(55% 0.2 35 / 0)" />
              </radialGradient>
              <radialGradient id="exCoolA" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="oklch(50% 0.14 180 / 0.35)" />
                <stop offset="100%" stopColor="oklch(50% 0.14 180 / 0)" />
              </radialGradient>
            </defs>
            <ellipse cx={1100} cy={520} rx={140} ry={100} fill="url(#exCoolA)" />
            <ellipse cx={1450} cy={620} rx={170} ry={120} fill="url(#exHotA)" />
            <ellipse cx={1250} cy={780} rx={130} ry={90} fill="url(#exHotA)" />
          </g>

          <AnnotationMarker x={1100} y={500} progress={marker1}
            status={tr('exp.ann1status')} label={tr('exp.ann1label')} color={PAL.result} />
          <AnnotationMarker x={1430} y={620} progress={marker2}
            status={tr('exp.ann2status')} label={tr('exp.ann2label')} color={PAL.danger} />
          <AnnotationMarker x={1250} y={780} progress={marker3}
            status={tr('exp.ann3status')} label={tr('exp.ann3label')} color={PAL.ml} />
          <AnnotationMarker x={1050} y={820} progress={marker4}
            status={tr('exp.ann4status')} label={tr('exp.ann4label')} color={PAL.human} />

          <g opacity={checkT} transform="translate(1540, 870)">
            <rect x="-100" y="-60" width="260" height="120" fill={PAL.bg}
              stroke={PAL.human} strokeWidth="2" />
            <text x="-80" y="-30" fill={PAL.human} fontFamily={FONT_MONO} fontSize="12"
              letterSpacing="0.15em">{tr('exp.verified')}</text>
            <CheckStroke x={-70} y={20} progress={checkT} color={PAL.human} size={1.4} />
            <text x="30" y="30" fill={PAL.ink} fontFamily={FONT_SERIF} fontSize="28"
              fontStyle="italic">{tr('exp.approved')}</text>
          </g>
        </svg>
      </div>

      <ChapterHead
        num="03"
        title={<>{tr('exp.title1')}<br/>{tr('exp.title2')}</>}
        subtitle={tr('exp.subtitle')}
        color={PAL.human}
        x={60} y={230}
      />

      <ExpertPhotos x={260} y={650} progress={expertT} />

      <StepIndicator active={2} />
      <FrameChrome
        label="LAYER 03 / HUMAN"
        coords="REVIEWER · GROWTH MODELING TEAM"
        step="03"
      />
    </div>
  );
}

Object.assign(window, { SceneExpert });