/* ============================================================
   Marketing video — process scenes
   Build / Integrate / Deploy — primitives + scene wrappers
   used by Marketing Video.html. Driven by useTime/useSprite.
   ============================================================ */

/* ------------------------------------------------------------
   Browser-window chrome
   ------------------------------------------------------------ */
function BrowserChrome({ url='localhost:3000', height=44, badge }){
  return (
    <div style={{
      height, display:'flex', alignItems:'center', gap:14,
      padding:'0 18px',
      background: BRAND.bg2,
      borderBottom:`1px solid ${BRAND.line}`,
      fontFamily: BRAND.fontMono,
    }}>
      <span style={{ display:'flex', gap:7 }}>
        <span style={{ width:11, height:11, borderRadius:'50%', background:'#ff5f57' }} />
        <span style={{ width:11, height:11, borderRadius:'50%', background:'#febc2e' }} />
        <span style={{ width:11, height:11, borderRadius:'50%', background:'#28c840' }} />
      </span>
      <div style={{
        flex:1, height:26,
        background: BRAND.bg,
        borderRadius: 6,
        border:`1px solid ${BRAND.line}`,
        display:'flex', alignItems:'center', padding:'0 12px',
        fontSize: 13, color: BRAND.textMute,
      }}>
        <span style={{ color: BRAND.accent2, marginRight:8 }}>●</span>
        {url}
      </div>
      {badge}
    </div>
  );
}

/* ------------------------------------------------------------
   Code editor
   `code` is an array of arrays of tokens: [{t:'...', c:'k'|'s'|'c'|'v'|'p'|'n'|'f'|'o'}]
   ------------------------------------------------------------ */
const CODE_COLORS = {
  k: '#c084fc', s: '#86efac', c: '#6e685e',
  v: '#7fa9ff', p: '#fb923c', n: '#fcd34d',
  f: '#a78bfa', o: '#ece8e0',
};
function CodeLine({ tokens }){
  return (
    <span>{tokens.map((tok, i) => (
      <span key={i} style={{ color: CODE_COLORS[tok.c] || CODE_COLORS.o }}>{tok.t}</span>
    ))}</span>
  );
}
function CodeEditor({ x, y, width, height, fileName, fileColor, code, entryDelay=0, lineDelay=0.16 }){
  const { localTime } = useSprite();
  const t = Easing.easeOutCubic(clamp((localTime - entryDelay) / 0.6, 0, 1));
  return (
    <div style={{
      position:'absolute', left:x, top:y, width, height,
      borderRadius: 16, overflow:'hidden',
      background:`linear-gradient(180deg, ${BRAND.bg1}, ${BRAND.bg})`,
      border:`1px solid ${BRAND.line2}`,
      boxShadow:'0 30px 80px rgba(0,0,0,.55)',
      opacity: t,
      transform:`translateY(${(1-t)*16}px) scale(${0.97 + 0.03*t})`,
    }}>
      {/* tabs / file bar */}
      <div style={{
        display:'flex', background: BRAND.bg2,
        borderBottom:`1px solid ${BRAND.line}`,
        height: 44,
      }}>
        <div style={{
          padding:'0 22px',
          display:'flex', alignItems:'center', gap:10,
          background: BRAND.bg,
          borderRight:`1px solid ${BRAND.line}`,
          borderTop:`2px solid ${fileColor}`,
          fontFamily: BRAND.fontMono, fontSize:14, color: BRAND.text,
        }}>
          <span style={{
            width:10, height:10, borderRadius:'50%',
            background: fileColor,
            boxShadow:`0 0 8px ${fileColor}`,
          }} />
          {fileName}
        </div>
        <div style={{ flex:1 }} />
        <div style={{
          padding:'0 18px', display:'flex', alignItems:'center', gap:6,
          fontFamily: BRAND.fontMono, fontSize:12, color: BRAND.textMute,
          letterSpacing:'.18em', textTransform:'uppercase',
        }}>
          <span style={{
            width:6, height:6, borderRadius:'50%',
            background:'#22c55e', boxShadow:'0 0 6px #22c55e',
          }} />
          saved
        </div>
      </div>
      {/* body */}
      <div style={{ padding:'24px 28px', fontFamily: BRAND.fontMono, fontSize: 16, lineHeight: 1.75 }}>
        {code.map((line, i) => {
          const d = entryDelay + 0.45 + i * lineDelay;
          const lt = clamp((localTime - d) / 0.32, 0, 1);
          if (lt <= 0) return null;
          return (
            <div key={i} style={{
              display:'flex', gap:18, alignItems:'baseline',
              opacity: lt,
              transform:`translateX(${(1-lt)*10}px)`,
            }}>
              <span style={{
                color: BRAND.textMute, width: 24, textAlign:'right', flexShrink:0,
                fontSize:13,
              }}>{i+1}</span>
              <CodeLine tokens={line} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------
   Stack chips (MERN + Python + OpenAI)
   ------------------------------------------------------------ */
function StackChips({ x, y, width, chips, entryDelay=0, align='center' }){
  const { localTime } = useSprite();
  return (
    <div style={{
      position:'absolute', left:x, top:y, width,
      display:'flex', flexWrap:'wrap', gap:14,
      justifyContent: align === 'center' ? 'center' : 'flex-start',
    }}>
      {chips.map((chip, i) => {
        const d = entryDelay + 0.3 + i * 0.10;
        const t = Easing.easeOutBack(clamp((localTime - d) / 0.45, 0, 1));
        return (
          <div key={i} style={{
            display:'inline-flex', alignItems:'center', gap:10,
            padding:'14px 22px',
            borderRadius: 999,
            background: BRAND.bg1,
            border:`1px solid ${BRAND.line2}`,
            fontFamily: BRAND.fontMono, fontSize: 18, fontWeight:500,
            color: BRAND.text,
            opacity: clamp(t, 0, 1),
            transform: `scale(${0.5 + 0.5*Math.min(1, t)})`,
            transformOrigin:'center',
            boxShadow:`0 0 18px rgba(${BRAND.accentRgb}, .06)`,
          }}>
            <span style={{
              width:10, height:10, borderRadius:'50%',
              background: chip.color,
              boxShadow: `0 0 12px ${chip.color}`,
            }} />
            {chip.name}
          </div>
        );
      })}
    </div>
  );
}

/* ------------------------------------------------------------
   Product mockup with embedded AI assistant
   ------------------------------------------------------------ */
function ProductMockup({ x, y, width, height, entryDelay=0 }){
  const { localTime } = useSprite();
  const t = Easing.easeOutCubic(clamp((localTime - entryDelay) / 0.7, 0, 1));

  // streaming chat messages
  const messages = [
    { who:'user', text:'Summarize this contract.',        in: 1.4 },
    { who:'ai',   text:'Found 12 clauses. 3 need review.', in: 2.6 },
    { who:'ai',   text:'Want me to draft amendments?',     in: 4.0 },
  ];

  return (
    <div style={{
      position:'absolute', left:x, top:y, width, height,
      borderRadius: 18, overflow:'hidden',
      background:`linear-gradient(180deg, ${BRAND.bg1}, ${BRAND.bg})`,
      border:`1px solid ${BRAND.line2}`,
      boxShadow:'0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(155,108,255,.10)',
      opacity: t,
      transform:`scale(${0.96 + 0.04*t})`, transformOrigin:'center',
    }}>
      <BrowserChrome
        url="app.client.com / contracts / Q3-vendor.pdf"
        badge={
          <span style={{
            display:'inline-flex', alignItems:'center', gap:8,
            padding:'6px 12px', borderRadius:999,
            border:`1px solid ${BRAND.line2}`,
            fontFamily: BRAND.fontMono, fontSize:11,
            color: BRAND.textDim, letterSpacing:'.18em', textTransform:'uppercase',
          }}>
            <span style={{
              width:6, height:6, borderRadius:'50%',
              background: BRAND.accent, boxShadow:`0 0 6px ${BRAND.accent}`,
            }} />
            AI enabled
          </span>
        }
      />

      <div style={{
        display:'grid', gridTemplateColumns:'1fr 380px',
        height: height - 44,
      }}>
        {/* left — fake doc */}
        <div style={{ padding: 36, position:'relative' }}>
          <div style={{
            fontFamily: BRAND.fontSans, fontSize:14, fontWeight:500,
            letterSpacing:'.22em', textTransform:'uppercase',
            color: BRAND.textMute, marginBottom: 18,
          }}>SECTION 04 · DELIVERY TERMS</div>
          <h3 style={{
            fontFamily: BRAND.fontSans, fontSize:30, fontWeight:600,
            color: BRAND.text, margin:0, marginBottom: 22, letterSpacing:'-.01em',
          }}>Quarterly vendor agreement</h3>
          {/* placeholder lines */}
          {[0.95, 0.82, 0.9, 0.7, 0.88, 0.62, 0.93, 0.78].map((w, i) => {
            const dline = entryDelay + 0.4 + i * 0.05;
            const tt = clamp((localTime - dline) / 0.4, 0, 1);
            const isAccent = i === 3; // highlight one
            return (
              <div key={i} style={{
                height: 12, width: `${w * 100}%`,
                background: isAccent
                  ? `linear-gradient(90deg, rgba(79,140,255,.45), rgba(155,108,255,.45))`
                  : BRAND.line2,
                borderRadius: 4,
                marginBottom: 14,
                opacity: tt,
                transform:`translateX(${(1-tt)*12}px)`,
                boxShadow: isAccent ? `0 0 16px rgba(155,108,255,.35)` : 'none',
              }} />
            );
          })}
        </div>

        {/* right — AI panel */}
        <div style={{
          borderLeft:`1px solid ${BRAND.line}`,
          background:`linear-gradient(180deg, ${BRAND.bg}, ${BRAND.bg1})`,
          padding: 24,
          display:'flex', flexDirection:'column', gap: 14,
        }}>
          <div style={{
            display:'flex', alignItems:'center', gap:10,
            paddingBottom: 14, borderBottom:`1px solid ${BRAND.line}`,
          }}>
            <span style={{
              width:28, height:28, borderRadius:8,
              background: BRAND.grad,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily: BRAND.fontMono, fontWeight:700, fontSize:14, color:'#0d0c0b',
            }}>AI</span>
            <div>
              <div style={{
                fontFamily: BRAND.fontSans, fontSize:15, fontWeight:600, color: BRAND.text,
              }}>Assistant</div>
              <div style={{
                fontFamily: BRAND.fontMono, fontSize:11, color: BRAND.textMute,
                letterSpacing:'.18em', textTransform:'uppercase',
              }}>online</div>
            </div>
          </div>

          {/* messages */}
          <div style={{ display:'flex', flexDirection:'column', gap:12, flex:1, overflow:'hidden' }}>
            {messages.map((m, i) => {
              const d = entryDelay + m.in;
              const tt = Easing.easeOutCubic(clamp((localTime - d) / 0.45, 0, 1));
              if (tt <= 0) return null;
              const isUser = m.who === 'user';
              return (
                <div key={i} style={{
                  alignSelf: isUser ? 'flex-end' : 'flex-start',
                  maxWidth: '90%',
                  padding:'12px 14px',
                  borderRadius: 14,
                  background: isUser
                    ? `linear-gradient(135deg, rgba(79,140,255,.20), rgba(155,108,255,.20))`
                    : BRAND.bg2,
                  border:`1px solid ${BRAND.line2}`,
                  fontFamily: BRAND.fontSans, fontSize: 14, color: BRAND.text,
                  opacity: tt,
                  transform:`translateY(${(1-tt)*8}px)`,
                  lineHeight: 1.4,
                }}>{m.text}</div>
              );
            })}
            {/* typing indicator before last message */}
            {(() => {
              const showTyping = localTime > entryDelay + 3.0 && localTime < entryDelay + 4.0;
              if (!showTyping) return null;
              return (
                <div style={{
                  alignSelf:'flex-start',
                  padding:'10px 14px', borderRadius: 14,
                  background: BRAND.bg2, border:`1px solid ${BRAND.line2}`,
                  display:'inline-flex', alignItems:'center', gap:6,
                }}>
                  {[0,1,2].map(i => (
                    <span key={i} style={{
                      width:6, height:6, borderRadius:'50%',
                      background: BRAND.textDim,
                      opacity: 0.4 + 0.6 * Math.abs(Math.sin((localTime - entryDelay) * 4 + i * 0.6)),
                    }} />
                  ))}
                </div>
              );
            })()}
          </div>

          {/* input */}
          <div style={{
            display:'flex', alignItems:'center', gap:10,
            padding:'12px 14px', borderRadius: 12,
            background: BRAND.bg, border:`1px solid ${BRAND.line2}`,
            fontFamily: BRAND.fontSans, fontSize:13, color: BRAND.textMute,
          }}>
            <span style={{ flex:1 }}>Ask anything…</span>
            <span style={{
              width:28, height:28, borderRadius:8,
              background: BRAND.accent, color:'#fff',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:14,
            }}>↑</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------
   Deploy terminal — types deploy lines in sequence
   lines: [{ kind:'prompt'|'ok'|'spin'|'arrow'|'line', text, delay }]
   ------------------------------------------------------------ */
function DeployTerminal({ x, y, width, height, lines, entryDelay=0 }){
  const { localTime } = useSprite();
  const t = Easing.easeOutCubic(clamp((localTime - entryDelay) / 0.6, 0, 1));
  return (
    <div style={{
      position:'absolute', left:x, top:y, width, height,
      borderRadius: 16, overflow:'hidden',
      background:`linear-gradient(180deg, ${BRAND.bg1}, #08070605)`,
      border:`1px solid ${BRAND.line2}`,
      boxShadow:'0 40px 100px rgba(0,0,0,.6)',
      opacity: t,
      transform:`scale(${0.97 + 0.03*t})`, transformOrigin:'center',
    }}>
      <div style={{
        height: 44, display:'flex', alignItems:'center', gap:14,
        padding:'0 18px',
        background: BRAND.bg2,
        borderBottom:`1px solid ${BRAND.line}`,
        fontFamily: BRAND.fontMono, fontSize:12,
        color: BRAND.textMute,
        letterSpacing:'.18em', textTransform:'uppercase',
      }}>
        <span style={{ display:'flex', gap:7 }}>
          <span style={{ width:11, height:11, borderRadius:'50%', background:'#ff5f57' }} />
          <span style={{ width:11, height:11, borderRadius:'50%', background:'#febc2e' }} />
          <span style={{ width:11, height:11, borderRadius:'50%', background:'#28c840' }} />
        </span>
        <span>~/maha — deploy.sh</span>
      </div>
      <div style={{
        padding:'28px 36px',
        fontFamily: BRAND.fontMono, fontSize: 18, lineHeight: 1.85,
        color: BRAND.text,
      }}>
        {lines.map((line, i) => {
          const d = entryDelay + 0.5 + (line.delay ?? i * 0.55);
          const lt = clamp((localTime - d) / 0.3, 0, 1);
          if (lt <= 0) return null;
          let prefix = null;
          if (line.kind === 'prompt') prefix = <span style={{ color: BRAND.accent2, marginRight:12 }}>$</span>;
          if (line.kind === 'ok')     prefix = <span style={{ color: '#22c55e', marginRight:12 }}>✓</span>;
          if (line.kind === 'spin')   prefix = <span style={{ color: '#fcd34d', marginRight:12 }}>▲</span>;
          if (line.kind === 'arrow')  prefix = <span style={{ color: BRAND.accent2, marginRight:12 }}>→</span>;
          if (line.kind === 'info')   prefix = <span style={{ color: BRAND.textMute, marginRight:12 }}>·</span>;
          return (
            <div key={i} style={{
              opacity: lt,
              transform: `translateY(${(1-lt)*6}px)`,
              display:'flex', alignItems:'baseline',
              color: line.color || BRAND.text,
            }}>
              {prefix}
              <span><CodeLine tokens={line.text} /></span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------
   LIVE success badge (separate component, animates in)
   ------------------------------------------------------------ */
function LiveBadge({ x, y, entryDelay=0, url='mahanaeem.com' }){
  const { localTime } = useSprite();
  const t = Easing.easeOutBack(clamp((localTime - entryDelay) / 0.6, 0, 1));
  const pulse = 0.7 + 0.3 * Math.abs(Math.sin((localTime - entryDelay) * 2.4));
  return (
    <div style={{
      position:'absolute', left:x, top:y,
      display:'inline-flex', alignItems:'center', gap: 18,
      padding:'22px 32px',
      borderRadius: 999,
      background:`linear-gradient(90deg, rgba(34,197,94,.10), rgba(34,197,94,.04))`,
      border:`1px solid rgba(34,197,94,.4)`,
      boxShadow:`0 0 ${30 + pulse * 30}px rgba(34,197,94, ${0.18 * pulse})`,
      opacity: clamp(t, 0, 1),
      transform:`scale(${0.4 + 0.6 * Math.min(1, t)})`,
      transformOrigin:'center',
    }}>
      <span style={{
        width:14, height:14, borderRadius:'50%',
        background:'#22c55e',
        boxShadow:`0 0 ${10 + pulse*10}px #22c55e`,
      }} />
      <span style={{
        fontFamily: BRAND.fontMono, fontWeight:600, fontSize:22,
        letterSpacing:'.28em', textTransform:'uppercase',
        color: BRAND.text,
      }}>Live</span>
      <span style={{ width:1, height:22, background: BRAND.line2 }} />
      <span style={{
        fontFamily: BRAND.fontMono, fontSize:22, color: BRAND.textDim,
        letterSpacing:'.04em',
      }}>{url}</span>
    </div>
  );
}

/* expose */
Object.assign(window, {
  BrowserChrome, CodeEditor, CodeLine, StackChips,
  ProductMockup, DeployTerminal, LiveBadge,
});