Problem Solution

1/**
2 * problemSolution — a two-phase pain-to-fix story.
3 *
4 * The template only composes the scene slots. ProblemSolution owns the
5 * complete pill, statement, transition, and celebration lifecycle so the
6 * same hero can be used by built-in and custom scenes without drift.
7 */
8 
9import React from "react";
10import type { VariableField } from "../video-config";
11import type { SceneTemplateProps } from "./types";
12import { resolveTokens } from "../theme";
13import { ProblemSolution } from "../primitives/infographic/ProblemSolution";
14import {
15  SceneBackground,
16  mediaBackgroundDefaults,
17  mediaBackgroundSchemaFields,
18} from "./scene-background";
19 
20export const infographicProblemSolutionSchema: Record<string, VariableField> = {
21  problemLabel: {
22    type: "string",
23    label: "Problem label",
24    default: "THE PROBLEM",
25    description: "Uppercase label shown above the problem text",
26  },
27  problemText: {
28    type: "string",
29    label: "Problem",
30    default: "Teams waste 40% of time in meetings",
31    required: true,
32    description: "The problem statement — keep it punchy, 1 sentence",
33  },
34  solutionLabel: {
35    type: "string",
36    label: "Solution label",
37    default: "THE SOLUTION",
38    description: "Uppercase label shown above the solution text",
39  },
40  solutionText: {
41    type: "string",
42    label: "Solution",
43    default: "AI that summarizes in seconds",
44    required: true,
45    description: "The solution statement — your value prop in 1 sentence",
46  },
47  ...mediaBackgroundSchemaFields,
48  textColor: {
49    type: "color",
50    label: "Text color",
51    default: "",
52    description: "Override text color (leave empty for auto)",
53  },
54};
55 
56export const infographicProblemSolutionDefaults: Record<string, unknown> = {
57  problemLabel: "THE PROBLEM",
58  problemText: "Teams waste 40% of time in meetings",
59  solutionLabel: "THE SOLUTION",
60  solutionText: "AI that summarizes in seconds",
61  ...mediaBackgroundDefaults,
62  textColor: "",
63};
64 
65export const InfographicProblemSolutionTemplate: React.FC<SceneTemplateProps> = ({
66  variables,
67  style,
68  progress,
69  beatIntensity,
70  width,
71  height,
72  sceneDuration,
73  backgroundEffect,
74  isPlaying = true,
75}) => {
76  const { content, font } = resolveTokens(style);
77  const textColor = String(variables.textColor || "") || content;
78  const problemText = String(variables.problemText || "");
79  const solutionText = String(variables.solutionText || "");
80 
81  return (
82    <div
83      style={{
84        width,
85        height,
86// … truncated