// Scenes 5-8: Phone (Ringover), Email campaign, LinkedIn, Site tracking

// ── SCENE 5: PHONE / RINGOVER (30-48s) ─────────────────────────────────────
function ScenePhone() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 18;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  // Phases: 0-3 click-to-call, 3-7 in-call waveform, 7-12 transcript+IA, 12-17 RDV email
  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={4} label="Appel · Ringover" />

      {/* Lead row with phone number */}
      <div style={{
        position: 'absolute', left: 100, top: 230,
        width: 720,
        opacity: clamp(t/0.4, 0, 1),
      }}>
        <div style={{
          padding: 18,
          background: D1.bgPanelSolid,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 16,
          boxShadow: t < 2 ? D1.shadowGlow : D1.shadowCard,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: '50%',
            background: D1.gradPrimary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', fontWeight: 700, fontSize: 18, fontFamily: D1.font,
          }}>ML</div>
          <div style={{ flex: 1 }}>
            <div style={{ color: D1.text, fontSize: 16, fontWeight: 700, fontFamily: D1.font }}>
              Marie Laurent · CMO Acme
            </div>
            <div style={{
              color: t > 0.8 ? D1.cyan : D1.text, fontFamily: D1.mono, fontSize: 18,
              marginTop: 6, fontWeight: 600,
              textDecoration: t > 0.8 && t < 2.5 ? 'underline' : 'none',
              transform: t > 0.8 && t < 2.5 ? 'scale(1.05)' : 'scale(1)',
              transformOrigin: 'left',
              transition: 'all 0.2s',
            }}>
              +33 6 12 34 56 78
            </div>
          </div>
          {/* Cursor */}
          {t > 0.6 && t < 2.2 && (
            <div style={{
              position: 'absolute',
              left: interpolate([0.6, 1.6], [200, 350], Easing.easeOutCubic)(t),
              top: interpolate([0.6, 1.6], [80, 60], Easing.easeOutCubic)(t),
              pointerEvents: 'none', zIndex: 10,
            }}>
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M3 2l16 8-7 1-3 7L3 2z" fill="white" stroke="black" strokeWidth="1"/>
              </svg>
            </div>
          )}
        </div>
      </div>

      {/* Ringover panel — appears when click happens (t > 1.6) */}
      {t > 1.6 && (
        <div style={{
          position: 'absolute', left: 1100, top: 200,
          width: 700, height: 600,
          background: D1.bgPanel,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 14,
          opacity: clamp((t - 1.6) / 0.5, 0, 1),
          transform: `scale(${0.92 + 0.08 * clamp((t-1.6)/0.5, 0, 1)})`,
          transformOrigin: 'top right',
          boxShadow: D1.shadowGlowStrong,
          overflow: 'hidden',
        }}>
          {/* Header */}
          <div style={{
            padding: '16px 22px', borderBottom: `1px solid ${D1.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 8, height: 8, borderRadius: '50%',
                background: t > 2.5 ? D1.green : D1.amber,
                boxShadow: `0 0 10px ${t > 2.5 ? D1.green : D1.amber}`,
                animation: t > 2.5 ? 'none' : 'none',
              }}/>
              <div style={{ color: D1.text, fontWeight: 700, fontSize: 14, fontFamily: D1.font }}>
                Ringover · {t > 2.5 ? 'En cours' : 'Connexion…'}
              </div>
            </div>
            <div style={{
              fontFamily: D1.mono, fontSize: 13, color: D1.textMuted,
              fontVariantNumeric: 'tabular-nums',
            }}>
              {(() => {
                if (t < 2.5) return '00:00';
                const sec = Math.floor((t - 2.5) * 8);
                return `${String(Math.floor(sec/60)).padStart(2,'0')}:${String(sec%60).padStart(2,'0')}`;
              })()}
            </div>
          </div>

          {/* Big avatar */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '24px 0',
          }}>
            <div style={{
              width: 90, height: 90, borderRadius: '50%',
              background: D1.gradPrimary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontWeight: 700, fontSize: 32, fontFamily: D1.font,
              boxShadow: D1.shadowGlow,
            }}>ML</div>
          </div>

          {/* Waveform during call (t 2.5 - 7) */}
          {t > 2.5 && t < 8 && (
            <div style={{
              padding: '0 30px',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
              height: 80,
            }}>
              {Array.from({ length: 60 }).map((_, i) => {
                const h = 8 + Math.abs(Math.sin(t * 4 + i * 0.5) * Math.cos(t * 2 + i * 0.3)) * 60;
                return (
                  <div key={i} style={{
                    width: 4, height: h,
                    background: D1.blue,
                    borderRadius: 2,
                    opacity: 0.5 + 0.5 * Math.sin(t * 3 + i),
                  }}/>
                );
              })}
            </div>
          )}

          {/* Transcript + IA analysis (t > 7) */}
          {t > 7 && (
            <div style={{ padding: '0 24px 20px', opacity: clamp((t-7)/0.5, 0, 1) }}>
              <div style={{
                fontFamily: D1.mono, fontSize: 10, color: D1.violet,
                letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 10,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <div style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: D1.violet, boxShadow: `0 0 8px ${D1.violet}`,
                }}/>
                Analyse IA · transcription
              </div>

              {[
                { who: 'Vous', txt: '…on propose une démo de 20 minutes ?', at: 7.4 },
                { who: 'Marie L.', txt: 'Oui, jeudi 14h ça me va.', at: 8.2, hi: true },
                { who: 'Vous', txt: 'Parfait, je vous envoie l\'invitation.', at: 9.0 },
              ].map((m, i) => {
                const op = clamp((t - m.at) / 0.4, 0, 1);
                return (
                  <div key={i} style={{
                    padding: '10px 14px',
                    marginBottom: 8,
                    background: m.hi ? 'rgba(74,222,128,0.10)' : 'rgba(91,141,255,0.05)',
                    border: m.hi ? `1px solid rgba(74,222,128,0.4)` : `1px solid ${D1.border}`,
                    borderRadius: 8,
                    opacity: op,
                    transform: `translateY(${(1-op) * 10}px)`,
                  }}>
                    <div style={{
                      fontFamily: D1.mono, fontSize: 10, color: D1.textMuted,
                      textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4,
                    }}>{m.who}</div>
                    <div style={{ color: D1.text, fontSize: 13, fontFamily: D1.font }}>{m.txt}</div>
                  </div>
                );
              })}

              {/* IA verdict badge */}
              {t > 10 && (
                <div style={{
                  marginTop: 12,
                  padding: '12px 14px',
                  background: 'rgba(74,222,128,0.10)',
                  border: `1px solid ${D1.green}`,
                  borderRadius: 8,
                  display: 'flex', alignItems: 'center', gap: 10,
                  opacity: clamp((t-10)/0.5, 0, 1),
                }}>
                  <div style={{
                    width: 24, height: 24, borderRadius: '50%',
                    background: D1.green,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                      <path d="M2 6l3 3 5-6" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ color: D1.green, fontSize: 13, fontWeight: 700, fontFamily: D1.font }}>
                      Appel positif · RDV détecté
                    </div>
                    <div style={{ color: D1.textMuted, fontSize: 11, fontFamily: D1.mono, marginTop: 2 }}>
                      Jeudi 14h · démo
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* Email prep notification (t > 12) */}
      {t > 12 && (
        <div style={{
          position: 'absolute', left: 100, top: 480,
          width: 720,
          opacity: clamp((t-12)/0.5, 0, 1),
          transform: `translateY(${(1 - clamp((t-12)/0.5, 0, 1)) * 30}px)`,
        }}>
          <div style={{
            padding: 22,
            background: D1.bgPanelSolid,
            border: `1px solid ${D1.violet}`,
            borderRadius: 14,
            boxShadow: `0 0 40px color-mix(in oklab, ${D1.violet} 30%, transparent)`,
          }}>
            <div style={{
              fontFamily: D1.mono, fontSize: 11, color: D1.violet,
              letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ fontSize: 16 }}>✦</span>
              Email généré par IA
            </div>
            <div style={{ color: D1.text, fontSize: 16, fontWeight: 700, fontFamily: D1.font, marginBottom: 8 }}>
              Préparation du RDV — jeudi 14h
            </div>
            <div style={{ color: D1.textMuted, fontSize: 13, fontFamily: D1.font, lineHeight: 1.5 }}>
              Bonjour Marie, suite à notre échange, voici l'agenda de la démo<br/>
              et les ressources préparées pour Acme Corp…
            </div>
          </div>
        </div>
      )}

      <SceneTitle kicker="Étape 04 · Téléphonie" title="Click-to-call · transcription · détection IA" />
    </div>
  );
}

// ── SCENE 6: EMAIL CAMPAIGN (48-60s) ───────────────────────────────────────
function SceneEmail() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 12;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={6} label="Campagne email" />

      {/* Sequence on left */}
      <div style={{ position: 'absolute', left: 120, top: 240, width: 600, opacity: clamp(t/0.4, 0, 1) }}>
        <div style={{
          fontFamily: D1.mono, fontSize: 12, color: D1.blue,
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18,
        }}>
          Séquence automatique · 3 étapes
        </div>

        {[
          { day: 'J0', subj: 'Question rapide sur Acme', at: 0.3 },
          { day: 'J+3', subj: 'Relance · une idée pour vous', at: 1.2 },
          { day: 'J+7', subj: 'Dernière relance', at: 2.1 },
        ].map((step, i) => {
          const op = clamp((t - step.at) / 0.5, 0, 1);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 18,
              marginBottom: 14,
              opacity: op,
              transform: `translateX(${(1-op) * -30}px)`,
            }}>
              <div style={{
                width: 56, fontFamily: D1.mono, fontSize: 13, color: D1.blue,
                fontWeight: 700, paddingTop: 14,
              }}>{step.day}</div>
              <div style={{
                flex: 1,
                padding: 16,
                background: D1.bgPanelSolid,
                border: `1px solid ${D1.border}`,
                borderRadius: 10,
              }}>
                <div style={{ color: D1.textMuted, fontSize: 11, fontFamily: D1.mono, marginBottom: 4 }}>
                  Subject
                </div>
                <div style={{ color: D1.text, fontSize: 15, fontFamily: D1.font, fontWeight: 600 }}>
                  {step.subj}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Email mock + CTA + site tracking on right */}
      <div style={{
        position: 'absolute', right: 120, top: 220,
        width: 540,
        opacity: clamp((t-2.5)/0.5, 0, 1),
        transform: `translateY(${(1-clamp((t-2.5)/0.5, 0, 1)) * 20}px)`,
      }}>
        <div style={{
          background: '#fafbff',
          borderRadius: 12,
          padding: 28,
          boxShadow: D1.shadowGlowStrong,
          color: '#1a1a2e',
          fontFamily: D1.font,
        }}>
          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 10, color: '#1a1a2e' }}>
            Bonjour Marie,
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.6, color: '#3a3a52', marginBottom: 18 }}>
            J'ai vu qu'Acme Corp avait récemment levé une série A. Une<br/>
            question rapide sur votre stack growth…
          </div>
          {/* CTA button */}
          <div style={{
            display: 'inline-block',
            padding: '12px 22px',
            background: D1.gradPrimary,
            color: 'white',
            borderRadius: 8,
            fontWeight: 700, fontSize: 14,
            position: 'relative',
            boxShadow: t > 4 ? `0 0 24px ${D1.blue}` : 'none',
            transform: t > 4 && t < 5 ? `scale(${1 + 0.05 * Math.sin(t * 8)})` : 'scale(1)',
          }}>
            Voir la démo →
            {/* cursor */}
            {t > 3.8 && t < 5.2 && (
              <div style={{
                position: 'absolute',
                left: interpolate([3.8, 4.5], [40, 80], Easing.easeOutCubic)(t),
                top: interpolate([3.8, 4.5], [60, 25], Easing.easeOutCubic)(t),
              }}>
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                  <path d="M3 2l16 8-7 1-3 7L3 2z" fill="white" stroke="black" strokeWidth="1"/>
                </svg>
              </div>
            )}
          </div>
        </div>

        {/* Tracking ping */}
        {t > 5 && (
          <div style={{
            marginTop: 24,
            padding: 18,
            background: D1.bgPanelSolid,
            border: `1px solid ${D1.cyan}`,
            borderRadius: 12,
            opacity: clamp((t-5)/0.4, 0, 1),
            boxShadow: `0 0 30px color-mix(in oklab, ${D1.cyan} 30%, transparent)`,
          }}>
            <div style={{
              fontFamily: D1.mono, fontSize: 11, color: D1.cyan,
              letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 10,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <div style={{
                width: 8, height: 8, borderRadius: '50%',
                background: D1.cyan,
                boxShadow: `0 0 12px ${D1.cyan}`,
              }}/>
              Activité site web · Marie L.
            </div>
            {[
              { p: '/pricing', d: '2:14' },
              { p: '/case-studies/acme-similar', d: '4:02' },
              { p: '/demo', d: '0:48' },
            ].map((row, i) => {
              const op = clamp((t - 5.4 - i*0.3) / 0.4, 0, 1);
              return (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between',
                  padding: '8px 0',
                  borderBottom: i < 2 ? `1px solid ${D1.border}` : 'none',
                  opacity: op,
                  transform: `translateX(${(1-op)*20}px)`,
                  fontFamily: D1.mono, fontSize: 13,
                }}>
                  <span style={{ color: D1.text }}>{row.p}</span>
                  <span style={{ color: D1.textMuted }}>{row.d}</span>
                </div>
              );
            })}
          </div>
        )}
      </div>

      <SceneTitle kicker="Étape 06 · Email + tracking" title="Relances automatiques · suivi du parcours web" />
    </div>
  );
}

// ── SCENE 7: LINKEDIN (60-72s) ─────────────────────────────────────────────
function SceneLinkedIn() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 12;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={7} label="Campagne LinkedIn" />

      {/* Vertical timeline of LinkedIn actions */}
      <div style={{
        position: 'absolute', left: 200, top: 240,
        width: 760,
      }}>
        {[
          { type: 'invite', label: 'Demande de connexion envoyée', meta: 'J0', at: 0.4, color: D1.blue },
          { type: 'accept', label: 'Connexion acceptée', meta: 'J+2', at: 1.6, color: D1.green },
          { type: 'msg', label: 'Message d\'introduction', meta: 'J+2', at: 2.6, color: D1.blue },
          { type: 'msg', label: 'Relance · ressource utile', meta: 'J+6', at: 3.6, color: D1.blue },
          { type: 'reply', label: 'Réponse reçue → campagne stoppée', meta: 'J+7', at: 4.8, color: D1.violet },
        ].map((s, i) => {
          const op = clamp((t - s.at) / 0.5, 0, 1);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 20,
              marginBottom: 16,
              opacity: op,
              transform: `translateY(${(1-op) * 16}px)`,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: s.color,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
                boxShadow: `0 0 16px color-mix(in oklab, ${s.color} 50%, transparent)`,
              }}>
                {s.type === 'invite' && (
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                    <path d="M9 4v10M4 9h10" stroke="white" strokeWidth="2" strokeLinecap="round"/>
                  </svg>
                )}
                {s.type === 'accept' && (
                  <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
                    <path d="M2 7l3 3 7-7" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
                {s.type === 'msg' && (
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                    <path d="M3 4h12v8H8l-3 3v-3H3V4z" stroke="white" strokeWidth="1.6" strokeLinejoin="round"/>
                  </svg>
                )}
                {s.type === 'reply' && (
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                    <path d="M9 3l-5 5 5 5M4 8h10" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </div>
              <div style={{
                flex: 1,
                padding: 16,
                background: D1.bgPanelSolid,
                border: `1px solid ${D1.border}`,
                borderRadius: 10,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <div style={{ color: D1.text, fontSize: 15, fontWeight: 600, fontFamily: D1.font }}>
                  {s.label}
                </div>
                <div style={{
                  fontFamily: D1.mono, fontSize: 11, color: s.color,
                  letterSpacing: '0.1em', fontWeight: 700,
                }}>
                  {s.meta}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Alert popup on right when reply received */}
      {t > 5.4 && (
        <div style={{
          position: 'absolute', right: 120, top: 540,
          width: 360,
          opacity: clamp((t-5.4)/0.5, 0, 1),
          transform: `translateY(${(1-clamp((t-5.4)/0.5, 0, 1)) * 30}px) scale(${0.95 + 0.05 * clamp((t-5.4)/0.5, 0, 1)})`,
        }}>
          <div style={{
            padding: 20,
            background: D1.bgPanelSolid,
            border: `1px solid ${D1.violet}`,
            borderRadius: 12,
            boxShadow: `0 0 40px color-mix(in oklab, ${D1.violet} 40%, transparent)`,
          }}>
            <div style={{
              fontFamily: D1.mono, fontSize: 11, color: D1.violet,
              letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 10,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ fontSize: 14 }}>◉</span>
              Alerte · Marie L. a répondu
            </div>
            <div style={{
              color: D1.text, fontSize: 14, fontFamily: D1.font, lineHeight: 1.5,
              fontStyle: 'italic',
            }}>
              "Intéressant — pouvez-vous m'en dire plus ?"
            </div>
          </div>
        </div>
      )}

      <SceneTitle kicker="Étape 07 · LinkedIn" title="Demande, relances, alerte sur réponse" />
    </div>
  );
}

Object.assign(window, { ScenePhone, SceneEmail, SceneLinkedIn });