// scene_results.jsx — light palette.

function LayerCard({ y, progress, num, label, color, content }) {
  if (progress <= 0) return null;
  const scale = 0.92 + 0.08 * Easing.easeOutCubic(clamp(progress, 0, 1));
  const opacity = clamp(progress * 1.4, 0, 1);
  return (
    <g opacity={opacity} transform={`translate(1250, ${y}) scale(${scale})`}>
      <rect x={-380} y={-34} width={760} height={68}
        fill={PAL.bgSoft} stroke={color} strokeWidth="1" />
      <text x={-360} y={-8} fill={color} fontFamily={FONT_MONO} fontSize="11"
        letterSpacing="0.15em">0{num} / {label.toUpperCase()}</text>
      <text x={-360} y={22} fill={PAL.ink} fontFamily={FONT_SANS} fontSize="15">
        {content}
      </text>
      <circle cx={350} cy={0} r={8} fill={color} />
    </g>
  );
}

function SceneResults() {
  const { localTime, duration } = useSprite();
  const introT = Easing.easeOutCubic(clamp(localTime / 0.8, 0, 1));
  const l1 = clamp((localTime - 0.5) / 0.5, 0, 1);
  const l2 = clamp((localTime - 0.9) / 0.5, 0, 1);
  const l3 = clamp((localTime - 1.3) / 0.5, 0, 1);
  const l4 = clamp((localTime - 1.7) / 0.5, 0, 1);
  const compress = Easing.easeInOutCubic(clamp((localTime - 2.4) / 1.0, 0, 1));
  const report = Easing.easeOutCubic(clamp((localTime - 3.2) / 1.2, 0, 1));
  const ping = Easing.easeOutBack(clamp((localTime - 4.5) / 0.6, 0, 1));
  const outT = Easing.easeInCubic(clamp((localTime - (duration - 0.4)) / 0.4, 0, 1));

  const baseY = [430, 520, 610, 700];
  const layersOpacity = 1 - compress;
  const cardW = 780 * (0.4 + 0.6 * report);
  const cardH = 520 * (0.4 + 0.6 * report);
  const cardCX = 1250;

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

      <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0 }}>
        <g opacity={layersOpacity}>
          <LayerCard num="1" label={tr('res.layer1')} color={PAL.sat}
            y={baseY[0] - compress * (baseY[0] - 600)}
            progress={l1}
            content={tr('res.content1')}
          />
          <LayerCard num="2" label={tr('res.layer2')} color={PAL.ml}
            y={baseY[1] - compress * (baseY[1] - 600)}
            progress={l2}
            content={tr('res.content2')}
          />
          <LayerCard num="3" label={tr('res.layer3')} color={PAL.human}
            y={baseY[2] - compress * (baseY[2] - 600)}
            progress={l3}
            content={tr('res.content3')}
          />
          <LayerCard num="4" label={tr('res.layer4')} color={PAL.result}
            y={baseY[3] - compress * (baseY[3] - 600)}
            progress={l4}
            content={tr('res.content4')}
          />
        </g>

        {report > 0 && (
          <g opacity={report}>
            <rect
              x={cardCX - cardW / 2} y={600 - cardH / 2}
              width={cardW} height={cardH}
              fill={PAL.bgSoft} stroke={PAL.result} strokeWidth="1.5"
            />
            <text x={cardCX - cardW / 2 + 40} y={600 - cardH / 2 + 48}
              fill={PAL.result} fontFamily={FONT_MONO} fontSize="12"
              letterSpacing="0.15em">
              SYMBIOSE REPORT · #SR-2026-04-22
            </text>
            <text x={cardCX - cardW / 2 + 40} y={600 - cardH / 2 + 110}
              fill={PAL.ink} fontFamily={FONT_SERIF} fontSize="54"
              fontStyle="italic">
              Plot A-7142
            </text>
            <text x={cardCX - cardW / 2 + 40} y={600 - cardH / 2 + 144}
              fill={PAL.inkSoft} fontFamily={FONT_SANS} fontSize="16">
              April 2026 · 248.6 ha · Luxembourg
            </text>
            <line x1={cardCX - cardW / 2 + 40} y1={600 - cardH / 2 + 178}
              x2={cardCX + cardW / 2 - 40} y2={600 - cardH / 2 + 178}
              stroke={PAL.lineStrong} />

            {report > 0.6 && (
              <g opacity={(report - 0.6) / 0.4}>
                {[
                  { label: tr('res.kpi1'), value: '+8.4%', color: PAL.result },
                  { label: tr('res.kpi2'), value: '78.3%', color: PAL.ink },
                  { label: tr('res.kpi3'), value: '12', color: PAL.ml },
                  { label: tr('res.kpi4'), value: '96%', color: PAL.human },
                ].map((kpi, i) => {
                  const colX = cardCX - cardW / 2 + 40 + i * (cardW - 80) / 4;
                  const topY = 600 - cardH / 2 + 220;
                  return (
                    <g key={i}>
                      <text x={colX} y={topY} fill={PAL.inkSoft}
                        fontFamily={FONT_MONO} fontSize="10" letterSpacing="0.12em">
                        {kpi.label}
                      </text>
                      <text x={colX} y={topY + 48} fill={kpi.color}
                        fontFamily={FONT_SERIF} fontSize="46" fontStyle="italic">
                        {kpi.value}
                      </text>
                    </g>
                  );
                })}
              </g>
            )}

            {report > 0.8 && (
              <g opacity={(report - 0.8) / 0.2} transform={`translate(${cardCX - cardW / 2 + 40}, ${600 + cardH / 2 - 140})`}>
                <text x={0} y={-16} fill={PAL.inkSoft}
                  fontFamily={FONT_MONO} fontSize="10" letterSpacing="0.12em">
                  {tr('res.growthIndex')}
                </text>
                {(() => {
                  const w = cardW - 80;
                  const h = 80;
                  const pts = Array.from({ length: 13 }, (_, i) => {
                    const v = 0.3 + Math.sin(i * 0.6) * 0.15 + i * 0.04;
                    return [i * w / 12, h - v * h];
                  });
                  const d = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x} ${y}`).join(' ');
                  return (
                    <g>
                      <line x1={0} y1={h} x2={w} y2={h} stroke={PAL.line} />
                      <path d={d} fill="none" stroke={PAL.result} strokeWidth="2" />
                      {pts.map(([x, y], i) => (
                        <circle key={i} cx={x} cy={y} r={3} fill={PAL.result} />
                      ))}
                    </g>
                  );
                })()}
              </g>
            )}

            <g transform={`translate(${cardCX + cardW / 2 - 180}, ${600 - cardH / 2 + 80})`}>
              <rect x="0" y="0" width="140" height="52" fill="none" stroke={PAL.result} strokeWidth="1.5" />
              <text x="70" y="20" fill={PAL.result} fontFamily={FONT_MONO} fontSize="10"
                letterSpacing="0.15em" textAnchor="middle">{tr('res.status')}</text>
              <text x="70" y="42" fill={PAL.ink} fontFamily={FONT_SANS} fontSize="16"
                fontWeight="500" textAnchor="middle">{tr('res.delivered')}</text>
            </g>
          </g>
        )}
      </svg>

      {ping > 0.01 && (
        <div style={{
          position: 'absolute', right: 120,
          top: 280 - (1 - ping) * 40, width: 360,
          opacity: clamp(ping, 0, 1),
          background: PAL.bgSoft,
          border: `1px solid ${PAL.result}`,
          padding: '18px 22px',
          fontFamily: FONT_SANS,
        }}>
          <div style={{
            fontFamily: FONT_MONO, fontSize: 11,
            color: PAL.result, letterSpacing: '0.15em', marginBottom: 8,
          }}>
            ◉ NEW · SYMBIOSE
          </div>
          <div style={{ color: PAL.ink, fontSize: 16, fontWeight: 500, marginBottom: 4 }}>
            {tr('res.notifTitle')}
          </div>
          <div style={{ color: PAL.inkSoft, fontSize: 13 }}>
            {tr('res.notifSub')}
          </div>
        </div>
      )}

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

      <StepIndicator active={3} />
      <FrameChrome
        label="LAYER 04 / OUT"
        coords="ETA < 48 HRS · PDF · API · ALERTS"
        step="04"
      />
    </div>
  );
}

function SceneOutro() {
  const { localTime } = useSprite();
  const logoT = Easing.easeOutCubic(clamp(localTime / 0.9, 0, 1));
  const tagT = Easing.easeOutCubic(clamp((localTime - 0.6) / 0.9, 0, 1));
  const ctaT = Easing.easeOutCubic(clamp((localTime - 1.1) / 0.8, 0, 1));

  return (
    <div style={{
      position: 'absolute', inset: 0, background: PAL.bg,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
    }}>
      <GridPaper opacity={0.18} />
      <TopoLines opacity={0.1} />

      <img src="assets/symbiose-logo.png" alt="Symbiose" style={{
        height: 260, width: 'auto',
        opacity: logoT, transform: `translateY(${(1 - logoT) * 20}px)`,
        position: 'relative', zIndex: 1,
      }} />

      <svg width="180" height="180" style={{
        opacity: 0,
        position: 'relative', zIndex: 1,
      }}>
        <circle cx="90" cy="90" r="70" fill="none" stroke={PAL.result} strokeWidth="1.5" />
        <path d="M 90 20 A 70 70 0 0 1 90 160" fill="none" stroke={PAL.sat} strokeWidth="8" strokeLinecap="round" />
        <path d="M 90 20 A 70 70 0 0 0 90 160" fill="none" stroke={PAL.result} strokeWidth="8" strokeLinecap="round" />
        <circle cx="90" cy="90" r="6" fill={PAL.ink} />
      </svg>

      <div style={{
        marginTop: 40, fontFamily: FONT_SERIF, fontSize: 120,
        fontStyle: 'italic', color: PAL.ink,
        letterSpacing: '-0.02em',
        opacity: logoT, transform: `translateY(${(1 - logoT) * 30}px)`,
        position: 'relative', zIndex: 1,
      }}>
        Symbiose
      </div>
      <div style={{
        marginTop: 16, fontFamily: FONT_MONO, fontSize: 14,
        color: PAL.inkSoft, letterSpacing: '0.3em',
        opacity: tagT, position: 'relative', zIndex: 1,
      }}>
        {tr('outro.tagline')}
      </div>
    </div>
  );
}

Object.assign(window, { SceneResults, SceneOutro });