import React from "react";
import {
  AbsoluteFill,
  Img,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
  Series,
  staticFile,
  Easing,
} from "remotion";

// ============================================
// SPRING CONFIGS
// ============================================
const SPRING_SMOOTH = { damping: 200 };
const SPRING_SNAPPY = { damping: 15, stiffness: 200 };
const SPRING_BOUNCY = { damping: 8, stiffness: 150 };
const SPRING_PUNCH = { damping: 12, stiffness: 300 };

// ============================================
// CAMERA with more dramatic capabilities
// ============================================
const Camera: React.FC<{
  children: React.ReactNode;
  zoom?: number;
  x?: number;
  y?: number;
  rotate?: number;
}> = ({ children, zoom = 1, x = 0, y = 0, rotate = 0 }) => (
  <div
    style={{
      width: "100%",
      height: "100%",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transform: `scale(${zoom}) translate(${x}px, ${y}px) rotate(${rotate}deg)`,
      transformOrigin: "center center",
    }}
  >
    {children}
  </div>
);

// ============================================
// GLOW PULSE - adds energy to key moments
// ============================================
const GlowPulse: React.FC<{
  color: string;
  size?: number;
  delay?: number;
  intensity?: number;
}> = ({ color, size = 400, delay = 0, intensity = 0.5 }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  const progress = spring({ frame: frame - delay, fps, config: SPRING_PUNCH });
  const pulse = Math.sin((frame - delay) / 8) * 0.2 + 0.8;
  
  return (
    <div
      style={{
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        width: size * progress,
        height: size * progress,
        background: `radial-gradient(ellipse, ${color}${Math.round(intensity * pulse * 255).toString(16).padStart(2, '0')} 0%, transparent 70%)`,
        pointerEvents: "none",
      }}
    />
  );
};

// ============================================
// IMPACT FLASH - visual punch on transitions
// ============================================
const ImpactFlash: React.FC<{ delay: number; color?: string }> = ({ delay, color = "#ffffff" }) => {
  const frame = useCurrentFrame();
  const localFrame = frame - delay;
  
  if (localFrame < 0 || localFrame > 15) return null;
  
  const opacity = interpolate(localFrame, [0, 3, 15], [0, 0.4, 0], { extrapolateRight: "clamp" });
  
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        backgroundColor: color,
        opacity,
        pointerEvents: "none",
      }}
    />
  );
};

// ============================================
// PARTICLE BURST - celebratory effect
// ============================================
const ParticleBurst: React.FC<{ delay: number; count?: number }> = ({ delay, count = 20 }) => {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();
  const localFrame = frame - delay;
  
  if (localFrame < 0 || localFrame > 60) return null;
  
  const progress = interpolate(localFrame, [0, 60], [0, 1], { extrapolateRight: "clamp" });
  
  return (
    <>
      {[...Array(count)].map((_, i) => {
        const angle = (i / count) * Math.PI * 2;
        const distance = 200 + (i % 3) * 100;
        const x = Math.cos(angle) * distance * progress;
        const y = Math.sin(angle) * distance * progress - (progress * progress * 200);
        const opacity = 1 - progress;
        const colors = ["#6366f1", "#10b981", "#f59e0b", "#ec4899", "#8b5cf6"];
        
        return (
          <div
            key={i}
            style={{
              position: "absolute",
              left: width / 2 + x,
              top: height / 2 + y,
              width: 8,
              height: 8,
              borderRadius: "50%",
              backgroundColor: colors[i % colors.length],
              opacity,
              boxShadow: `0 0 10px ${colors[i % colors.length]}`,
            }}
          />
        );
      })}
    </>
  );
};

// ============================================
// KINETIC TEXT - more punchy
// ============================================
const KineticText: React.FC<{
  text: string;
  delay?: number;
  stagger?: number;
  style?: React.CSSProperties;
  punch?: boolean;
}> = ({ text, delay = 0, stagger = 3, style = {}, punch = false }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const words = text.split(" ");

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.3em", ...style }}>
      {words.map((word, i) => {
        const wordDelay = delay + i * stagger;
        const config = punch ? SPRING_PUNCH : SPRING_SNAPPY;
        const progress = spring({ frame: frame - wordDelay, fps, config });

        const scale = punch 
          ? interpolate(progress, [0, 0.5, 1], [0.3, 1.15, 1])
          : interpolate(progress, [0, 1], [0.8, 1]);
        const y = interpolate(progress, [0, 1], [50, 0]);

        return (
          <span
            key={i}
            style={{
              display: "inline-block",
              transform: `translateY(${y}px) scale(${scale})`,
              opacity: progress,
            }}
          >
            {word}
          </span>
        );
      })}
    </div>
  );
};

// ============================================
// BROWSER MOCKUP with glow option
// ============================================
const BrowserMockup: React.FC<{
  src: string;
  width?: number;
  glow?: boolean;
  glowColor?: string;
}> = ({ src, width = 1000, glow = false, glowColor = "#6366f1" }) => {
  const frame = useCurrentFrame();
  const height = width * 0.5625;
  const glowPulse = glow ? 0.3 + Math.sin(frame / 10) * 0.15 : 0;
  
  return (
    <div
      style={{
        backgroundColor: "#1e293b",
        borderRadius: 12,
        overflow: "hidden",
        boxShadow: glow 
          ? `0 25px 60px rgba(0,0,0,0.4), 0 0 80px ${glowColor}${Math.round(glowPulse * 255).toString(16).padStart(2, '0')}`
          : "0 25px 60px rgba(0,0,0,0.4)",
      }}
    >
      <div
        style={{
          height: 36,
          backgroundColor: "#0f172a",
          display: "flex",
          alignItems: "center",
          padding: "0 14px",
          gap: 7,
        }}
      >
        <div style={{ width: 11, height: 11, borderRadius: "50%", backgroundColor: "#ef4444" }} />
        <div style={{ width: 11, height: 11, borderRadius: "50%", backgroundColor: "#f59e0b" }} />
        <div style={{ width: 11, height: 11, borderRadius: "50%", backgroundColor: "#22c55e" }} />
        <div
          style={{
            flex: 1,
            marginLeft: 14,
            height: 22,
            backgroundColor: "#1e293b",
            borderRadius: 5,
            paddingLeft: 10,
            fontSize: 11,
            color: "#64748b",
            display: "flex",
            alignItems: "center",
          }}
        >
          app.reonomy.com
        </div>
      </div>
      <Img src={src} style={{ width, height, objectFit: "cover" }} />
    </div>
  );
};

// ============================================
// STEP LABEL - more dynamic
// ============================================
const StepLabel: React.FC<{
  step: number;
  text: string;
  color?: string;
}> = ({ step, text, color = "#6366f1" }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({ frame: frame - 8, fps, config: SPRING_PUNCH });
  const scale = interpolate(progress, [0, 0.6, 1], [0.5, 1.1, 1]);

  return (
    <div
      style={{
        position: "absolute",
        bottom: 50,
        left: 50,
        transform: `translateY(${interpolate(progress, [0, 1], [40, 0])}px) scale(${scale})`,
        opacity: progress,
      }}
    >
      <div
        style={{
          background: `linear-gradient(135deg, ${color}, ${color}dd)`,
          padding: "14px 28px",
          borderRadius: 10,
          boxShadow: `0 10px 30px ${color}60`,
        }}
      >
        <span style={{ fontSize: 20, fontWeight: 700, color: "white" }}>
          Step {step}: {text}
        </span>
      </div>
    </div>
  );
};

// ============================================
// CONTACT CARD - snappier entrance
// ============================================
const ContactCard: React.FC<{
  type: "phone" | "email";
  value: string;
  source?: string;
  delay: number;
}> = ({ type, value, source, delay }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({ frame: frame - delay, fps, config: SPRING_PUNCH });
  const scale = interpolate(progress, [0, 0.6, 1], [0.7, 1.08, 1]);
  const x = interpolate(progress, [0, 1], [type === "phone" ? -80 : 80, 0]);

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 14,
        padding: "12px 16px",
        backgroundColor: "rgba(255,255,255,0.95)",
        borderRadius: 10,
        marginBottom: 8,
        boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
        transform: `translateX(${x}px) scale(${scale})`,
        opacity: progress,
      }}
    >
      <div
        style={{
          width: 40,
          height: 40,
          borderRadius: 8,
          background:
            type === "phone"
              ? "linear-gradient(135deg, #10b981, #059669)"
              : "linear-gradient(135deg, #6366f1, #4f46e5)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 18,
        }}
      >
        {type === "phone" ? "📞" : "📧"}
      </div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#1e293b" }}>{value}</div>
        {source && <div style={{ fontSize: 11, color: "#64748b" }}>{source}</div>}
      </div>
    </div>
  );
};

// ============================================
// ANIMATED STAT - with count up and punch
// ============================================
const AnimatedStat: React.FC<{
  value: number | string;
  label: string;
  color: string;
  delay: number;
}> = ({ value, label, color, delay }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({ frame: frame - delay, fps, config: SPRING_PUNCH });
  const scale = interpolate(progress, [0, 0.5, 1], [0.3, 1.2, 1]);
  const numericValue =
    typeof value === "number" ? Math.round(interpolate(progress, [0, 1], [0, value])) : value;

  return (
    <div
      style={{
        textAlign: "center",
        transform: `scale(${scale})`,
        opacity: progress,
      }}
    >
      <div style={{ 
        fontSize: 56, 
        fontWeight: 800, 
        color,
        textShadow: `0 0 30px ${color}80`,
      }}>
        {numericValue}
      </div>
      <div style={{ fontSize: 14, color: "#94a3b8", marginTop: 4 }}>{label}</div>
    </div>
  );
};

// ============================================
// FLOATING LIGHT STREAKS
// ============================================
const LightStreaks: React.FC = () => {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();
  
  return (
    <>
      {[...Array(5)].map((_, i) => {
        const speed = 0.5 + (i % 3) * 0.3;
        const y = (i * 200 + frame * speed * 2) % (height + 200) - 100;
        const opacity = 0.1 + (i % 3) * 0.05;
        
        return (
          <div
            key={i}
            style={{
              position: "absolute",
              left: 100 + i * 350,
              top: y,
              width: 2,
              height: 150,
              background: `linear-gradient(180deg, transparent, rgba(99, 102, 241, ${opacity}), transparent)`,
              transform: "rotate(15deg)",
            }}
          />
        );
      })}
    </>
  );
};

// ============================================
// SCENES - More Exciting versions
// ============================================

const SceneIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Dramatic zoom out with slight overshoot
  const zoomProgress = spring({ frame, fps, config: { damping: 15, stiffness: 80 } });
  const zoom = interpolate(zoomProgress, [0, 1], [1.4, 1.0]);
  
  // Subtle rotation settle
  const rotate = interpolate(frame, [0, 60], [2, 0], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill>
      <LightStreaks />
      <GlowPulse color="#6366f1" size={800} delay={0} intensity={0.3} />
      
      <Camera zoom={zoom} rotate={rotate}>
        <div style={{ textAlign: "center" }}>
          <KineticText
            text="🏢 Reonomy Contact Extractor"
            delay={15}
            stagger={4}
            punch
            style={{ fontSize: 68, fontWeight: 800, color: "white", justifyContent: "center" }}
          />
          <div style={{ marginTop: 24 }}>
            <KineticText
              text="CRE Leads → Your CRM … On Demand"
              delay={55}
              stagger={4}
              style={{ fontSize: 30, fontWeight: 500, color: "#94a3b8", justifyContent: "center" }}
            />
          </div>
        </div>
      </Camera>
      
      <ImpactFlash delay={0} />
    </AbsoluteFill>
  );
};

const SceneLogin: React.FC = () => {
  const frame = useCurrentFrame();

  // Push in with slight overshoot
  const zoom = interpolate(frame, [0, 80, 120], [0.85, 1.12, 1.08], {
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  return (
    <AbsoluteFill>
      <LightStreaks />
      <Camera zoom={zoom}>
        <BrowserMockup src={staticFile("assets/02-login-filled.png")} width={1000} glow glowColor="#6366f1" />
      </Camera>
      <StepLabel step={1} text="Login" />
      <ImpactFlash delay={0} color="#6366f1" />
    </AbsoluteFill>
  );
};

const SceneSearch: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const zoom = interpolate(frame, [0, 60, 100], [0.8, 1.02, 1.0], {
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  const filter1 = spring({ frame: frame - 40, fps, config: SPRING_PUNCH });
  const filter2 = spring({ frame: frame - 55, fps, config: SPRING_PUNCH });

  return (
    <AbsoluteFill>
      <LightStreaks />
      <Camera zoom={zoom}>
        <div style={{ position: "relative" }}>
          <BrowserMockup src={staticFile("assets/04-search-results.png")} width={1050} glow glowColor="#10b981" />

          <div style={{ position: "absolute", left: -170, top: 140 }}>
            <div
              style={{
                background: "linear-gradient(135deg, #10b981, #059669)",
                padding: "12px 20px",
                borderRadius: 25,
                marginBottom: 12,
                boxShadow: "0 8px 30px rgba(16, 185, 129, 0.5)",
                transform: `translateX(${interpolate(filter1, [0, 1], [-50, 0])}px) scale(${interpolate(filter1, [0, 0.5, 1], [0.5, 1.1, 1])})`,
                opacity: filter1,
              }}
            >
              <span style={{ color: "white", fontWeight: 700, fontSize: 15 }}>✓ Has Phone</span>
            </div>
            <div
              style={{
                background: "linear-gradient(135deg, #6366f1, #4f46e5)",
                padding: "12px 20px",
                borderRadius: 25,
                boxShadow: "0 8px 30px rgba(99, 102, 241, 0.5)",
                transform: `translateX(${interpolate(filter2, [0, 1], [-50, 0])}px) scale(${interpolate(filter2, [0, 0.5, 1], [0.5, 1.1, 1])})`,
                opacity: filter2,
              }}
            >
              <span style={{ color: "white", fontWeight: 700, fontSize: 15 }}>✓ Has Email</span>
            </div>
          </div>
        </div>
      </Camera>
      <StepLabel step={2} text="Filtered Search" />
      <ImpactFlash delay={0} color="#10b981" />
    </AbsoluteFill>
  );
};

const SceneProperty: React.FC = () => {
  const frame = useCurrentFrame();

  // Dramatic pan with zoom
  const y = interpolate(frame, [0, 100], [-30, 20], { extrapolateRight: "clamp" });
  const zoom = interpolate(frame, [0, 50, 100], [0.95, 1.05, 1.02], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill>
      <LightStreaks />
      <Camera y={y} zoom={zoom}>
        <BrowserMockup src={staticFile("assets/05-property-detail.png")} width={1000} glow />
      </Camera>
      <StepLabel step={3} text="Property Details" />
      <ImpactFlash delay={0} />
    </AbsoluteFill>
  );
};

const SceneOwner: React.FC = () => {
  const frame = useCurrentFrame();

  // Punch zoom in
  const zoom = interpolate(frame, [0, 40, 80], [0.95, 1.18, 1.12], {
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  return (
    <AbsoluteFill>
      <LightStreaks />
      <GlowPulse color="#8b5cf6" size={600} delay={30} intensity={0.25} />
      <Camera zoom={zoom}>
        <BrowserMockup src={staticFile("assets/06-owner-tab.png")} width={1000} glow glowColor="#8b5cf6" />
      </Camera>
      <StepLabel step={4} text="Owner Tab" color="#8b5cf6" />
      <ImpactFlash delay={0} color="#8b5cf6" />
    </AbsoluteFill>
  );
};

const SceneModal: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Big dramatic zoom punch
  const zoom = interpolate(frame, [0, 30, 70], [0.7, 1.15, 1.05], {
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.back(1.5)),
  });

  const labelProgress = spring({ frame: frame - 50, fps, config: SPRING_BOUNCY });

  return (
    <AbsoluteFill>
      <LightStreaks />
      <GlowPulse color="#10b981" size={900} delay={20} intensity={0.4} />
      
      <Camera zoom={zoom}>
        <BrowserMockup src={staticFile("assets/09-contact-modal.png")} width={1050} glow glowColor="#10b981" />
      </Camera>

      {/* Success label with punch */}
      <div
        style={{
          position: "absolute",
          bottom: 60,
          left: "50%",
          transform: `translateX(-50%) translateY(${interpolate(labelProgress, [0, 1], [60, 0])}px) scale(${interpolate(labelProgress, [0, 0.5, 1], [0.5, 1.15, 1])})`,
          opacity: labelProgress,
        }}
      >
        <div
          style={{
            background: "linear-gradient(135deg, #10b981, #059669)",
            padding: "18px 50px",
            borderRadius: 14,
            boxShadow: "0 20px 60px rgba(16, 185, 129, 0.6)",
          }}
        >
          <span style={{ fontSize: 26, fontWeight: 700, color: "white" }}>
            🎉 Contacts Extracted!
          </span>
        </div>
      </div>
      
      <ImpactFlash delay={0} color="#10b981" />
      <ParticleBurst delay={50} count={25} />
    </AbsoluteFill>
  );
};

const SceneResults: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Elegant zoom out with slight movement
  const zoom = interpolate(frame, [0, 100], [1.1, 1.0], { extrapolateRight: "clamp" });
  const y = interpolate(frame, [0, 100], [20, 0], { extrapolateRight: "clamp" });

  const phones = [
    { value: "919-469-9553", source: "Greystone Property Mgmt" },
    { value: "727-341-0186", source: "Seaside Villas" },
    { value: "903-566-9506", source: "Apartment Income Reit" },
    { value: "407-671-2400", source: "E R Management" },
    { value: "407-382-2683", source: "Bellagio Apartments" },
  ];
  const emails = [
    { value: "berrizoro@gmail.com" },
    { value: "aberriz@hotmail.com" },
    { value: "jasonhitch1@gmail.com" },
    { value: "albert@annarborusa.org" },
    { value: "albertb@sterlinghousing.com" },
  ];

  const headerProgress = spring({ frame: frame - 5, fps, config: SPRING_PUNCH });

  return (
    <AbsoluteFill>
      <LightStreaks />
      <GlowPulse color="#6366f1" size={1200} delay={0} intensity={0.2} />
      
      <Camera zoom={zoom} y={y}>
        <div style={{ width: 1600, padding: 40 }}>
          {/* Title with punch */}
          <div style={{ textAlign: "center", marginBottom: 30 }}>
            <div
              style={{
                transform: `scale(${interpolate(headerProgress, [0, 0.5, 1], [0.5, 1.1, 1])})`,
                opacity: headerProgress,
              }}
            >
              <span style={{ 
                fontSize: 46, 
                fontWeight: 800, 
                color: "white",
                textShadow: "0 0 40px rgba(99, 102, 241, 0.5)",
              }}>
                CRE Leads Delivered Direct to Your CRM
              </span>
            </div>
            <div
              style={{
                marginTop: 12,
                opacity: spring({ frame: frame - 20, fps, config: SPRING_SNAPPY }),
                transform: `scale(${interpolate(spring({ frame: frame - 20, fps, config: SPRING_PUNCH }), [0, 0.5, 1], [0.5, 1.15, 1])})`,
              }}
            >
              <span
                style={{
                  fontSize: 28,
                  fontWeight: 600,
                  background: "linear-gradient(90deg, #6366f1, #a855f7, #ec4899)",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                }}
              >
                … On Demand 🚀
              </span>
            </div>
          </div>

          {/* Contact columns */}
          <div style={{ display: "flex", gap: 40, paddingLeft: 80, paddingRight: 80 }}>
            <div style={{ flex: 1 }}>
              <div
                style={{
                  fontSize: 20,
                  color: "#10b981",
                  marginBottom: 14,
                  fontWeight: 700,
                  opacity: spring({ frame: frame - 50, fps, config: SPRING_SMOOTH }),
                  textShadow: "0 0 20px rgba(16, 185, 129, 0.5)",
                }}
              >
                📞 Phone Numbers
              </div>
              {phones.map((p, i) => (
                <ContactCard
                  key={p.value}
                  type="phone"
                  value={p.value}
                  source={p.source}
                  delay={60 + i * 10}
                />
              ))}
            </div>

            <div style={{ flex: 1 }}>
              <div
                style={{
                  fontSize: 20,
                  color: "#6366f1",
                  marginBottom: 14,
                  fontWeight: 700,
                  opacity: spring({ frame: frame - 55, fps, config: SPRING_SMOOTH }),
                  textShadow: "0 0 20px rgba(99, 102, 241, 0.5)",
                }}
              >
                📧 Email Addresses
              </div>
              {emails.map((e, i) => (
                <ContactCard key={e.value} type="email" value={e.value} delay={65 + i * 10} />
              ))}
            </div>
          </div>

          {/* Stats footer */}
          <div
            style={{
              marginTop: 35,
              display: "flex",
              justifyContent: "space-around",
              background: "rgba(255,255,255,0.08)",
              backdropFilter: "blur(10px)",
              padding: "25px 60px",
              borderRadius: 16,
              marginLeft: 80,
              marginRight: 80,
              border: "1px solid rgba(255,255,255,0.1)",
            }}
          >
            <AnimatedStat value={10} label="Total Contacts" color="#6366f1" delay={160} />
            <AnimatedStat value={5} label="Phone Numbers" color="#10b981" delay={175} />
            <AnimatedStat value={5} label="Emails" color="#f59e0b" delay={190} />
            <AnimatedStat value="~60s" label="Extraction Time" color="#ec4899" delay={205} />
          </div>
        </div>
      </Camera>
      
      <ImpactFlash delay={0} />
    </AbsoluteFill>
  );
};

// ============================================
// MAIN COMPOSITION
// ============================================
export const ReonomyDemoExciting: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], {
    extrapolateLeft: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        background: "linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%)",
        opacity: Math.min(fadeIn, fadeOut),
      }}
    >
      <Series>
        <Series.Sequence durationInFrames={180}>
          <SceneIntro />
        </Series.Sequence>

        <Series.Sequence durationInFrames={150}>
          <SceneLogin />
        </Series.Sequence>

        <Series.Sequence durationInFrames={170}>
          <SceneSearch />
        </Series.Sequence>

        <Series.Sequence durationInFrames={150}>
          <SceneProperty />
        </Series.Sequence>

        <Series.Sequence durationInFrames={150}>
          <SceneOwner />
        </Series.Sequence>

        <Series.Sequence durationInFrames={180}>
          <SceneModal />
        </Series.Sequence>

        <Series.Sequence durationInFrames={360}>
          <SceneResults />
        </Series.Sequence>
      </Series>
    </AbsoluteFill>
  );
};
