// Cybergard AI — portrait (mobile) scene variants.
// Reuses ScoreGauge, FrameworkBadge, RAGPanel, ControlFeed from dashboard*.jsx.
// Stage is 1080×1920 in portrait.

function PortraitExcel({ start, end, copy }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const cols = 4, rows = 16;
        const cellW = 230, cellH = 60;
        const gridW = cols * cellW;
        const gridH = rows * cellH;
        const gx = (1080 - gridW) / 2;
        const gy = 420;

        const redCells = [
          { r: 1, c: 2, t: 0.3 },
          { r: 3, c: 0, t: 0.55 },
          { r: 4, c: 3, t: 0.8 },
          { r: 6, c: 1, t: 1.05 },
          { r: 8, c: 2, t: 1.3 },
          { r: 9, c: 0, t: 1.55 },
          { r: 11, c: 3, t: 1.8 },
          { r: 12, c: 1, t: 2.05 },
          { r: 14, c: 2, t: 2.3 },
        ];

        const exitFade = localTime > duration - 0.7
          ? clamp((localTime - (duration - 0.7)) / 0.7, 0, 1) : 0;
        const enterFade = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
        const shake = localTime > 2.4 ? Math.sin(localTime * 30) * clamp((localTime - 2.4) * 3, 0, 2) : 0;

        const headers = copy.headers;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            opacity: enterFade * (1 - exitFade),
            transform: `translateX(${shake}px) scale(${1 - exitFade * 0.08})`,
          }}>
            <div style={{
              position: 'absolute', top: 200, left: 0, right: 0,
              textAlign: 'center',
              fontFamily: FONT_MONO, fontSize: 18, color: CG.mute,
              letterSpacing: '0.3em', textTransform: 'uppercase',
            }}>audit_iso27001.xlsx</div>
            <div style={{
              position: 'absolute', top: 240, left: 40, right: 40,
              textAlign: 'center',
              fontFamily: FONT_TITLE, fontSize: 58, fontWeight: 700,
              color: CG.text, letterSpacing: '0.02em', lineHeight: 1.15,
            }}>{copy.title}</div>

            <div style={{
              position: 'absolute', left: gx, top: gy,
              width: gridW, height: gridH,
              background: CG.panel, border: `1px solid ${CG.line}`,
              boxShadow: '0 40px 80px rgba(0,0,0,0.5)',
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0,
                height: cellH, background: CG.panelHi,
                borderBottom: `1px solid ${CG.line}`, display: 'flex',
              }}>
                {headers.map((h, i) => (
                  <div key={i} style={{
                    width: cellW, padding: '0 18px',
                    display: 'flex', alignItems: 'center',
                    fontFamily: FONT_MONO, fontSize: 14, color: CG.dim,
                    letterSpacing: '0.1em',
                    borderRight: `1px solid ${CG.line}`,
                  }}>{h}</div>
                ))}
              </div>
              {Array.from({ length: rows - 1 }).map((_, r) =>
                Array.from({ length: cols }).map((_, c) => {
                  const cellText = c === 0
                    ? `A.${5 + (r % 9)}.${1 + ((r * 3 + c) % 12)}`
                    : c === 1
                    ? ['—', 'OK', '?', '—', 'KO'][(r + c) % 5]
                    : '··········'.slice(0, 4 + ((r * c + r) % 7));
                  const red = redCells.find(rc => rc.r === r && rc.c === c);
                  const isRed = red && localTime > red.t;
                  const flashIntensity = isRed ? clamp((localTime - red.t) / 0.25, 0, 1) : 0;
                  return (
                    <div key={`${r}-${c}`} style={{
                      position: 'absolute',
                      top: cellH * (r + 1), left: cellW * c,
                      width: cellW, height: cellH, padding: '0 18px',
                      display: 'flex', alignItems: 'center',
                      borderRight: `1px solid ${CG.line}`,
                      borderBottom: `1px solid ${CG.line}`,
                      fontFamily: c === 0 || c === 1 ? FONT_MONO : FONT_BODY,
                      fontSize: c === 0 ? 16 : 17,
                      color: isRed ? CG.crimsonSoft : (c === 1 ? CG.mute : CG.dim),
                      background: isRed ? `oklch(0.62 0.21 25 / ${flashIntensity * 0.22})` : 'transparent',
                      boxShadow: isRed ? `inset 0 0 0 1px ${CG.crimson}` : 'none',
                    }}>{cellText}</div>
                  );
                })
              )}
            </div>

            <div style={{
              position: 'absolute', bottom: 80, left: 0, right: 0,
              textAlign: 'center',
              fontFamily: FONT_MONO, fontSize: 17, color: CG.mute,
              letterSpacing: '0.18em',
            }}>{copy.bottomStrip}</div>
          </div>
        );
      }}
    </Sprite>
  );
}

function PortraitDashboard({ start, end, headline, copy }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const enter = Easing.easeOutCubic(clamp(localTime / 0.8, 0, 1));
        const exit = localTime > duration - 0.8
          ? clamp((localTime - (duration - 0.8)) / 0.8, 0, 1) : 0;

        const scoreT = clamp((localTime - 0.6) / 3.5, 0, 1);
        const score = 34 + Easing.easeOutCubic(scoreT) * 62;

        const frameworks = copy.frameworks;
        const typedProgress = clamp((localTime - 0.8) / 2.2, 0, 1);
        const feedTime = Math.max(0, localTime - 0.4);

        return (
          <div style={{
            position: 'absolute', inset: 0,
            opacity: enter * (1 - exit),
            transform: `scale(${0.98 + enter * 0.02 - exit * 0.02})`,
            padding: '60px 40px',
            display: 'flex', flexDirection: 'column', gap: 28,
            overflow: 'hidden',
          }}>
            {/* Top bar */}
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              {/* Brand logo removed — handled by the site navbar. Empty spacer keeps the live tag right-aligned via space-between. */}
              <div/>
              <div style={{
                fontFamily: FONT_MONO, fontSize: 13, color: CG.mute,
                letterSpacing: '0.22em', textAlign: 'right',
              }}>{copy.liveTag}</div>
            </div>

            {/* Score card */}
            <div style={{
              background: CG.panel, border: `1px solid ${CG.line}`,
              borderRadius: 16, padding: 32,
              display: 'flex', alignItems: 'center', gap: 32,
              boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
            }}>
              <ScoreGauge value={score} size={260} label={copy.scoreLabel}/>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontFamily: FONT_TITLE, fontSize: 19, fontWeight: 700,
                  color: CG.dim, letterSpacing: '0.18em', marginBottom: 14,
                }}>{copy.overallLabel}</div>
                <div style={{
                  fontFamily: FONT_BODY, fontSize: 22,
                  color: CG.text, lineHeight: 1.4,
                }}>
                  {Math.round(score) >= 90 ? copy.certified : copy.analyzing}
                </div>
                <div style={{
                  marginTop: 18,
                  padding: '6px 12px',
                  display: 'inline-block',
                  background: CG.crimsonTint,
                  border: `1px solid ${CG.crimson}`, borderRadius: 6,
                  fontFamily: FONT_MONO, fontSize: 13,
                  color: CG.crimsonSoft, letterSpacing: '0.15em',
                }}>+{Math.round(score - 34)}% {copy.in4h}</div>
              </div>
            </div>

            {/* Framework badges 2x2 */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
            }}>
              {frameworks.map((f, i) => {
                const active = localTime > f.activate;
                const pActive = active ? clamp((localTime - f.activate) / 0.5, 0, 1) : 0;
                return (
                  <FrameworkBadge key={i} name={f.name} sub={f.sub}
                    active={active} progress={pActive}/>
                );
              })}
            </div>

            {/* RAG + Feed stacked */}
            <div style={{
              flex: 1,
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
              minHeight: 0,
            }}>
              <div style={{ transform: 'scale(1)', transformOrigin: 'top left' }}>
                <PortraitRAG typedProgress={typedProgress} copy={copy.rag}/>
              </div>
              <div>
                <PortraitFeed localTime={feedTime} copy={copy.feed}/>
              </div>
            </div>

            {/* Headline */}
            <div style={{ textAlign: 'center' }}>
              <div style={{
                fontFamily: FONT_TITLE, fontSize: 46, fontWeight: 700,
                color: CG.text, letterSpacing: '0.04em', lineHeight: 1.15,
                opacity: clamp((localTime - 3.2) / 0.7, 0, 1),
                textShadow: `0 0 24px ${CG.crimsonGlow}`,
              }}>{headline}</div>
              <div style={{
                marginTop: 14,
                fontFamily: FONT_MONO, fontSize: 15,
                color: CG.crimsonSoft, letterSpacing: '0.3em',
                opacity: clamp((localTime - 3.6) / 0.5, 0, 1),
              }}>CYBERGARD.AI</div>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// Slim-width RAG and Feed for portrait
function PortraitRAG({ typedProgress, copy }) {
  const lines = copy.lines;
  return (
    <div style={{
      width: '100%', height: '100%',
      background: CG.panel, border: `1px solid ${CG.line}`,
      borderRadius: 14, padding: 22,
      boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
      boxSizing: 'border-box',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        paddingBottom: 14, borderBottom: `1px solid ${CG.line}`, marginBottom: 14,
      }}>
        <div style={{
          width: 10, height: 10, background: CG.crimson, borderRadius: 5,
          boxShadow: `0 0 10px ${CG.crimson}`,
        }}/>
        <div style={{
          fontFamily: FONT_MONO, fontSize: 13, color: CG.dim,
          letterSpacing: '0.22em',
        }}>{copy.title}</div>
      </div>
      {lines.map((l, i) => {
        const visible = typedProgress > l.delay;
        if (!visible) return null;
        const charP = clamp((typedProgress - l.delay) / 0.25, 0, 1);
        const chars = Math.floor(l.text.length * charP);
        const showCursor = charP < 1;
        const isAI = l.who === 'ai';
        return (
          <div key={i} style={{
            display: 'flex',
            justifyContent: isAI ? 'flex-start' : 'flex-end',
            marginBottom: 12,
          }}>
            <div style={{
              maxWidth: '92%', padding: '10px 14px',
              background: isAI ? 'transparent' : CG.crimsonTint,
              border: `1px solid ${isAI ? CG.line : CG.crimson}`,
              borderRadius: 10,
              fontFamily: FONT_BODY, fontSize: 18,
              color: isAI ? CG.text : CG.crimsonSoft,
              lineHeight: 1.35,
            }}>
              {l.text.slice(0, chars)}
              {showCursor && <span style={{
                display: 'inline-block', width: 10, height: 18,
                background: CG.crimson, marginLeft: 2, verticalAlign: 'text-bottom',
                opacity: Math.floor(Date.now() / 250) % 2,
              }}/>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function PortraitFeed({ localTime, copy }) {
  const controls = copy.controls;
  return (
    <div style={{
      width: '100%', height: '100%',
      background: CG.panel, border: `1px solid ${CG.line}`,
      borderRadius: 14, padding: 22,
      boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
      boxSizing: 'border-box',
      overflow: 'hidden',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 14, borderBottom: `1px solid ${CG.line}`, marginBottom: 12,
      }}>
        <div style={{
          fontFamily: FONT_MONO, fontSize: 13, color: CG.dim,
          letterSpacing: '0.22em',
        }}>{copy.title}</div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          fontFamily: FONT_MONO, fontSize: 12, color: CG.crimsonSoft,
          letterSpacing: '0.18em',
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: 4, background: CG.crimson,
            boxShadow: `0 0 6px ${CG.crimson}`,
            opacity: 0.5 + 0.5 * Math.sin(localTime * 4),
          }}/>LIVE
        </div>
      </div>
      {controls.slice(0, 7).map((c, i) => {
        const appearAt = i * 0.18;
        if (localTime < appearAt) return null;
        const p = clamp((localTime - appearAt) / 0.35, 0, 1);
        const eased = Easing.easeOutCubic(p);
        return (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 0',
            borderBottom: i < 6 ? `1px solid ${CG.line}` : 'none',
            opacity: eased,
            transform: `translateX(${(1 - eased) * 16}px)`,
          }}>
            <div style={{
              fontFamily: FONT_MONO, fontSize: 13, color: CG.mute,
              width: 68, letterSpacing: '0.05em',
            }}>{c.id}</div>
            <div style={{
              flex: 1, fontFamily: FONT_BODY, fontSize: 16, color: CG.text,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{c.name}</div>
            <div style={{
              padding: '3px 8px', background: CG.crimsonTint,
              border: `1px solid ${CG.crimson}`, borderRadius: 4,
              fontFamily: FONT_MONO, fontSize: 11, color: CG.crimsonSoft,
              letterSpacing: '0.15em',
              boxShadow: `0 0 10px ${CG.crimsonGlow}`,
            }}>{c.status}</div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { PortraitExcel, PortraitDashboard, PortraitRAG, PortraitFeed });