From eccdcdd86fc0465e98e439b38b916c2bdc1cbcc4 Mon Sep 17 00:00:00 2001
From: a5sh <aayush.agrawalm@gmail.com>
Date: Fri, 15 May 2026 20:22:13 +0530
Subject: [PATCH] Redesign simple builder as cinematic wizard

---
 src/components/builder/index.tsx              |  58 ++-
 .../simple/CinematicTutorialBuilder.tsx       | 459 ++++++++++++++++++
 src/components/builder/simple/presets.ts      | 263 ++++++++++
 .../builder/simple/tutorialSteps.ts           | 346 +++++++++++++
 4 files changed, 1100 insertions(+), 26 deletions(-)
 create mode 100644 src/components/builder/simple/CinematicTutorialBuilder.tsx
 create mode 100644 src/components/builder/simple/presets.ts
 create mode 100644 src/components/builder/simple/tutorialSteps.ts

diff --git a/src/components/builder/index.tsx b/src/components/builder/index.tsx
index 3e723c0b..e7c3c77f 100644
--- a/src/components/builder/index.tsx
+++ b/src/components/builder/index.tsx
@@ -67,6 +67,7 @@ import {
 import { usePosterHistory } from './hooks/usePosterHistory';
 import ContextMenu, { type ContextMenuState, type LayerTargetId } from './components/ContextMenu';
 import CommandPalette, { type PaletteCommand } from './components/CommandPalette';
+import CinematicTutorialBuilder from './simple/CinematicTutorialBuilder';
 
 // ── Studio layout ─────────────────────────────────────────────────────────────
 const StudioLayout: React.FC<{
@@ -894,6 +895,19 @@ const StudioLayout: React.FC<{
     selectedMinimalElements,
     detailLevel: advancedDetailLevel as 'simple' | 'advanced',
   };
+  const simpleBuilderWizard = (
+    <CinematicTutorialBuilder
+      config={config}
+      setConfig={setConfig}
+      baseUrl={baseUrl}
+      onExport={() => setExportOpen(true)}
+      onSwitchAdvanced={() => {
+        setBuilderMode('advanced');
+        switchAdvancedPanel('source');
+      }}
+    />
+  );
+
   const renderAdvancedPanel = () => {
     switch (advancedPanel) {
       case 'source':
@@ -1248,7 +1262,7 @@ const StudioLayout: React.FC<{
         {/* ── BODY ── */}
         <div className="flex flex-1 overflow-hidden relative flex-col lg:flex-row">
           {/* Left sidebar */}
-          {!isFullscreen && (
+          {!isFullscreen && builderMode === 'advanced' && (
             <aside
               aria-label="Layer panel"
               className="hidden lg:flex flex-col z-20 relative shrink-0 sidebar-transition"
@@ -1260,17 +1274,7 @@ const StudioLayout: React.FC<{
                 opacity: leftVisible ? 1 : 0,
               }}
             >
-              {builderMode === 'advanced' ? (
-                <AdvancedPanelNav activePanel={advancedPanel} onChange={switchAdvancedPanel} />
-              ) : (
-                <LayerPanel
-                  config={config}
-                  setConfig={setConfig}
-                  selectedIds={selectedIds}
-                  onSelect={handleSelectionOverride}
-                  detailLevel="simple"
-                />
-              )}
+              <AdvancedPanelNav activePanel={advancedPanel} onChange={switchAdvancedPanel} />
               <div
                 onMouseDown={startResizeLeft}
                 className="absolute inset-y-0 right-0 w-2 cursor-col-resize group z-50"
@@ -1333,10 +1337,12 @@ const StudioLayout: React.FC<{
                 }}
               />
             ))}
+
+            {builderMode === 'simple' && !isFullscreen && simpleBuilderWizard}
           </main>
 
           {/* Right sidebar */}
-          {!isFullscreen && (
+          {!isFullscreen && builderMode === 'advanced' && (
             <aside
               aria-label="Inspector"
               className="hidden lg:flex flex-col z-20 relative shrink-0 sidebar-transition"
@@ -1354,16 +1360,12 @@ const StudioLayout: React.FC<{
               >
                 <div className="absolute inset-y-0 left-0 w-[2px] bg-transparent group-hover:bg-[rgba(196,124,46,0.4)] transition-colors duration-150" />
               </div>
-              {builderMode === 'advanced' ? (
-                renderAdvancedPanel()
-              ) : (
-                <Inspector config={config} setConfig={setConfig} detailLevel="simple" />
-              )}
+              {renderAdvancedPanel()}
             </aside>
           )}
 
           {/* Mobile Panel (In-flow flex item) */}
-          {!isFullscreen && (
+          {!isFullscreen && builderMode === 'advanced' && (
             <div
               className={clsx(
                 'lg:hidden flex flex-col shrink-0 w-full bg-[var(--film-dark)] transition-[height] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] overflow-hidden z-20',
@@ -1413,17 +1415,21 @@ const StudioLayout: React.FC<{
         </div>
 
         {/* Mobile dock */}
-        <MobileDock
-          hasBadges={config.ratings.length > 0}
-          hasLogo={config.logo}
-          isMinimalPreset={(config.uiPreset ?? 'b') === 'm'}
-          selectedCount={selectedIds.size + (selectedLogo ? 1 : 0)}
-        />
+        {builderMode === 'advanced' && (
+          <MobileDock
+            hasBadges={config.ratings.length > 0}
+            hasLogo={config.logo}
+            isMinimalPreset={(config.uiPreset ?? 'b') === 'm'}
+            selectedCount={selectedIds.size + (selectedLogo ? 1 : 0)}
+          />
+        )}
 
         {/* Zoom + fullscreen overlay — always visible */}
         <ZoomOverlay
           isFullscreen={isFullscreen}
-          rightSidebarWidth={isDesktop && rightVisible && !isFullscreen ? rightW : 0}
+          rightSidebarWidth={
+            isDesktop && builderMode === 'advanced' && rightVisible && !isFullscreen ? rightW : 0
+          }
           onToggleFullscreen={toggleFullscreen}
           onZoomIn={() => dispatchZoom(0.25)}
           onZoomOut={() => dispatchZoom(-0.25)}
diff --git a/src/components/builder/simple/CinematicTutorialBuilder.tsx b/src/components/builder/simple/CinematicTutorialBuilder.tsx
new file mode 100644
index 00000000..f7105ae5
--- /dev/null
+++ b/src/components/builder/simple/CinematicTutorialBuilder.tsx
@@ -0,0 +1,459 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  Copy,
+  Download,
+  FastForward,
+  Film,
+  Sparkles,
+  Wand2,
+} from 'lucide-react';
+import type { PosterConfig } from '../types';
+import { generateApiUrl } from '../utils';
+import { tutorialSteps, type MiniPreview, type TutorialOptionId } from './tutorialSteps';
+
+interface Props {
+  config: PosterConfig;
+  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  baseUrl: string;
+  onExport: () => void;
+  onSwitchAdvanced: () => void;
+}
+
+type Answer = TutorialOptionId | null;
+
+type PosterTone = MiniPreview['tone'];
+
+const answerKeys: TutorialOptionId[] = ['a', 'b', 'c', 'd'];
+
+const toneClass: Record<PosterTone, string> = {
+  ember: 'from-[#050201] via-[#3b1907] to-[#c7791c]',
+  'noir-blue': 'from-[#020617] via-[#0f2744] to-[#38bdf8]',
+  plum: 'from-[#120617] via-[#4c1d4f] to-[#f0abfc]',
+  silver: 'from-[#070707] via-[#323846] to-[#e5e7eb]',
+  redline: 'from-[#080202] via-[#4b0808] to-[#ef4444]',
+  mono: 'from-[#050505] via-[#3f3f46] to-[#fafafa]',
+};
+
+const MiniPoster: React.FC<{ preview: MiniPreview; selected?: boolean }> = ({
+  preview,
+  selected,
+}) => {
+  const badgeClass = clsx(
+    'rounded-[5px] px-1.5 py-1 text-[8px] font-black leading-none shadow-[0_8px_18px_rgba(0,0,0,0.45)]',
+    preview.finish === 'glass' && 'border border-white/35 bg-white/20 text-white backdrop-blur-sm',
+    preview.finish === 'solid' && 'bg-slate-950/90 text-white',
+    preview.finish === 'minimal' && 'bg-transparent px-0 text-white shadow-none'
+  );
+
+  return (
+    <div
+      className={clsx(
+        'relative aspect-[2/3] w-full overflow-hidden rounded-xl border bg-gradient-to-br shadow-[0_20px_60px_rgba(0,0,0,0.55)]',
+        toneClass[preview.tone],
+        selected ? 'border-[rgba(234,178,93,0.85)]' : 'border-white/15'
+      )}
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_24%,rgba(255,255,255,0.34),transparent_22%),linear-gradient(145deg,transparent_0%,rgba(0,0,0,0.08)_42%,rgba(0,0,0,0.72)_100%)]" />
+      <div className="absolute left-[12%] top-[14%] h-[34%] w-[42%] rounded-full bg-white/10 blur-xl" />
+      <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/85 via-black/28 to-transparent" />
+
+      {preview.layout === 'top-ribbon' && (
+        <div className="absolute left-2 right-2 top-2 flex justify-center gap-1">
+          {preview.badges.slice(0, 4).map((badge) => (
+            <span key={badge} className={badgeClass}>
+              {badge}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {preview.layout === 'right-stack' && (
+        <div className="absolute bottom-4 right-2 flex w-[45%] flex-col gap-1.5">
+          {preview.badges.slice(0, 4).map((badge) => (
+            <span key={badge} className={badgeClass}>
+              {badge}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {preview.layout === 'bottom-row' && (
+        <div className="absolute inset-x-2 bottom-3 flex justify-center gap-1">
+          {preview.badges.slice(0, 4).map((badge) => (
+            <span key={badge} className={badgeClass}>
+              {badge}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {preview.layout === 'title-block' && (
+        <div className="absolute inset-x-3 bottom-3">
+          <div className="text-[13px] font-black leading-[0.9] tracking-[-0.04em] text-white drop-shadow-[0_6px_14px_rgba(0,0,0,0.9)]">
+            {preview.title}
+          </div>
+          <div className="mt-2 flex flex-wrap gap-2 text-[8px] font-bold text-white/90">
+            {preview.badges.slice(0, 4).map((badge) => (
+              <span key={badge}>{badge}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {preview.layout !== 'title-block' && (
+        <div className="absolute bottom-[22%] left-3 right-3 text-[10px] font-black leading-none tracking-[-0.04em] text-white/85 drop-shadow-[0_4px_12px_rgba(0,0,0,0.85)]">
+          {preview.title}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const CinematicTutorialBuilder: React.FC<Props> = ({
+  config,
+  setConfig,
+  baseUrl,
+  onExport,
+  onSwitchAdvanced,
+}) => {
+  const initialConfigRef = useRef(config);
+  const [stepIndex, setStepIndex] = useState(0);
+  const [answers, setAnswers] = useState<Answer[]>(() => tutorialSteps.map(() => null));
+  const [copied, setCopied] = useState(false);
+
+  const currentStep = tutorialSteps[stepIndex];
+  const isComplete = stepIndex >= tutorialSteps.length;
+  const apiUrl = useMemo(() => generateApiUrl(config, baseUrl), [config, baseUrl]);
+
+  const rebuildConfig = useCallback(
+    (nextAnswers: Answer[]) => {
+      const rebuilt = tutorialSteps.reduce((draft, step, index) => {
+        const answer = nextAnswers[index];
+        const option = answer ? step.options.find((candidate) => candidate.id === answer) : null;
+        return option ? option.apply(draft) : draft;
+      }, initialConfigRef.current);
+
+      setConfig(rebuilt);
+    },
+    [setConfig]
+  );
+
+  const handleSelect = useCallback(
+    (answer: TutorialOptionId) => {
+      setAnswers((previous) => {
+        const next = [...previous];
+        next[stepIndex] = answer;
+        rebuildConfig(next);
+        return next;
+      });
+    },
+    [rebuildConfig, stepIndex]
+  );
+
+  const handleSkip = useCallback(() => {
+    setAnswers((previous) => {
+      const next = [...previous];
+      next[stepIndex] = null;
+      rebuildConfig(next);
+      return next;
+    });
+    setStepIndex((index) => Math.min(index + 1, tutorialSteps.length));
+  }, [rebuildConfig, stepIndex]);
+
+  const handleNext = useCallback(() => {
+    setStepIndex((index) => Math.min(index + 1, tutorialSteps.length));
+  }, []);
+
+  const handleBack = useCallback(() => {
+    setStepIndex((index) => Math.max(index - 1, 0));
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(apiUrl);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1800);
+    } catch {
+      setCopied(false);
+    }
+  }, [apiUrl]);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (isComplete || !currentStep) return;
+      const target = event.target as HTMLElement | null;
+      if (
+        target &&
+        (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+      ) {
+        return;
+      }
+      const key = event.key.toLowerCase();
+      if (answerKeys.includes(key as TutorialOptionId)) {
+        event.preventDefault();
+        handleSelect(key as TutorialOptionId);
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        handleNext();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [currentStep, handleNext, handleSelect, isComplete]);
+
+  const selectedAnswer = currentStep ? answers[stepIndex] : null;
+  const progress = isComplete ? 100 : Math.round((stepIndex / tutorialSteps.length) * 100);
+  const heroPreview = currentStep?.options.find((option) => option.id === selectedAnswer)?.preview;
+
+  return (
+    <section className="pointer-events-none absolute inset-0 z-30 overflow-hidden">
+      <style>{`
+        @keyframes wizard-pop {
+          0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.96); filter: blur(10px); }
+          100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
+        }
+        @keyframes reel-sweep {
+          0% { transform: translateX(-38%); opacity: 0; }
+          18% { opacity: .85; }
+          100% { transform: translateX(38%); opacity: 0; }
+        }
+        @keyframes card-rise {
+          0% { opacity: 0; transform: translateY(18px) scale(.97); }
+          100% { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        .cinematic-wizard { animation: wizard-pop 520ms cubic-bezier(.16, 1, .3, 1) both; }
+        .cinematic-card { animation: card-rise 460ms cubic-bezier(.16, 1, .3, 1) both; }
+        .cinematic-reel::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.16), transparent 65%);
+          animation: reel-sweep 3.8s ease-in-out infinite;
+        }
+      `}</style>
+
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_42%,rgba(196,124,46,0.08),rgba(0,0,0,0.74)_58%,rgba(0,0,0,0.9)_100%)]" />
+      <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(0,0,0,0.45)_0,transparent_22%,transparent_78%,rgba(0,0,0,0.45)_100%)]" />
+      <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-black/70 to-transparent" />
+
+      <div className="pointer-events-auto flex h-full items-center justify-center px-3 py-5 sm:px-6">
+        <div className="cinematic-wizard grid max-h-full w-full max-w-[1180px] overflow-hidden rounded-[28px] border border-[rgba(234,178,93,0.32)] bg-[rgba(9,8,6,0.88)] shadow-[0_38px_120px_rgba(0,0,0,0.86),0_0_90px_rgba(196,124,46,0.18)] backdrop-blur-2xl lg:grid-cols-[0.86fr_1.14fr]">
+          <aside className="cinematic-reel relative hidden min-h-[660px] overflow-hidden border-r border-[rgba(234,178,93,0.16)] bg-gradient-to-br from-[#1b1007] via-[#070706] to-black p-8 lg:block">
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_45%_22%,rgba(234,178,93,.22),transparent_28%),radial-gradient(circle_at_70%_80%,rgba(148,163,184,.12),transparent_32%)]" />
+            <div className="relative z-10 flex h-full flex-col justify-between">
+              <div>
+                <div className="inline-flex items-center gap-2 rounded-full border border-[rgba(234,178,93,0.32)] bg-black/28 px-3 py-1.5 text-[11px] font-black uppercase tracking-[0.22em] text-[var(--film-amber)]">
+                  <Film size={13} /> Simple mode director
+                </div>
+                <h2 className="mt-5 text-5xl font-black leading-[0.88] tracking-[-0.08em] text-white">
+                  Build a poster like a title sequence.
+                </h2>
+                <p className="mt-4 max-w-sm text-sm leading-6 text-white/62">
+                  This is no longer a quiet side panel. Make four confident calls, watch the live
+                  canvas react, then export or jump into Advanced for frame-perfect edits.
+                </p>
+              </div>
+
+              <div>
+                <div className="mb-3 rounded-2xl border border-white/10 bg-black/24 p-4">
+                  <div className="text-[10px] font-black uppercase tracking-[0.22em] text-[var(--film-amber)]">
+                    Live canvas stays rolling
+                  </div>
+                  <p className="mt-2 text-xs leading-5 text-white/56">
+                    The real poster remains visible behind this premiere overlay while these
+                    miniatures show the exact badge composition you are choosing.
+                  </p>
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  {(currentStep?.options.slice(0, 2).map((option) => option.preview) ?? [])
+                    .slice(0, 2)
+                    .map((preview) => (
+                      <MiniPoster
+                        key={preview.title}
+                        preview={preview}
+                        selected={heroPreview?.title === preview.title}
+                      />
+                    ))}
+                </div>
+              </div>
+            </div>
+          </aside>
+
+          <div className="flex min-h-0 flex-col">
+            <header className="border-b border-[rgba(234,178,93,0.14)] px-5 py-4 sm:px-7">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div className="flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.22em] text-[var(--film-amber)]">
+                  <Sparkles size={14} /> Cinematic tutorial wizard
+                </div>
+                <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-bold text-white/68">
+                  {isComplete ? 'Final cut' : `Scene ${stepIndex + 1} / ${tutorialSteps.length}`}
+                </div>
+              </div>
+              <div className="mt-4 h-1.5 overflow-hidden rounded-full bg-white/8">
+                <div
+                  className="h-full rounded-full bg-gradient-to-r from-[#9b5a19] via-[var(--film-amber)] to-[#ffe8b4] transition-all duration-500"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+            </header>
+
+            <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5 custom-scrollbar sm:px-7">
+              {!isComplete && currentStep ? (
+                <>
+                  <div className="mb-5">
+                    <div className="text-[11px] font-black uppercase tracking-[0.22em] text-white/40">
+                      {currentStep.eyebrow}
+                    </div>
+                    <h3 className="mt-2 text-3xl font-black leading-[0.95] tracking-[-0.05em] text-white sm:text-4xl">
+                      {currentStep.title}
+                    </h3>
+                    <p className="mt-3 max-w-2xl text-sm leading-6 text-white/62">
+                      {currentStep.helper}
+                    </p>
+                    <div className="mt-3 inline-flex items-center gap-2 rounded-full bg-[rgba(196,124,46,0.12)] px-3 py-1.5 text-xs font-bold text-[#f7d7a5]">
+                      <Wand2 size={13} /> {currentStep.direction}
+                    </div>
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {currentStep.options.map((option, index) => {
+                      const selected = selectedAnswer === option.id;
+                      return (
+                        <button
+                          key={option.id}
+                          type="button"
+                          onClick={() => handleSelect(option.id)}
+                          className={clsx(
+                            'cinematic-card group relative overflow-hidden rounded-2xl border p-3 text-left transition-all duration-300',
+                            selected
+                              ? 'border-[rgba(234,178,93,0.85)] bg-[rgba(196,124,46,0.14)] shadow-[0_0_0_1px_rgba(234,178,93,0.25),0_18px_50px_rgba(0,0,0,0.42)]'
+                              : 'border-white/10 bg-white/[0.035] hover:-translate-y-0.5 hover:border-[rgba(234,178,93,0.38)] hover:bg-white/[0.065]'
+                          )}
+                          style={{ animationDelay: `${index * 70}ms` }}
+                        >
+                          <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+                          <div className="relative grid grid-cols-[104px_1fr] gap-3 sm:grid-cols-[126px_1fr]">
+                            <MiniPoster preview={option.preview} selected={selected} />
+                            <div className="min-w-0 py-1">
+                              <div className="flex items-center justify-between gap-2">
+                                <span
+                                  className={clsx(
+                                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-black',
+                                    selected
+                                      ? 'border-[var(--film-amber)] bg-[var(--film-amber)] text-black'
+                                      : 'border-white/15 text-white/86'
+                                  )}
+                                >
+                                  {option.id.toUpperCase()}
+                                </span>
+                                {selected && (
+                                  <Check size={17} className="text-[var(--film-amber)]" />
+                                )}
+                              </div>
+                              <div className="mt-3 text-base font-black leading-5 text-white">
+                                {option.label}
+                              </div>
+                              <p className="mt-2 text-xs leading-5 text-white/58">
+                                {option.description}
+                              </p>
+                              <div className="mt-3 text-[10px] font-bold uppercase tracking-[0.2em] text-white/35">
+                                Press {option.id.toUpperCase()}
+                              </div>
+                            </div>
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </>
+              ) : (
+                <div className="flex min-h-[520px] flex-col justify-center py-6">
+                  <div className="rounded-[26px] border border-[rgba(234,178,93,0.28)] bg-[radial-gradient(circle_at_25%_0%,rgba(234,178,93,0.22),transparent_36%),rgba(255,255,255,0.045)] p-6 shadow-[0_22px_80px_rgba(0,0,0,0.42)]">
+                    <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--film-amber)] text-black shadow-[0_18px_45px_rgba(196,124,46,0.34)]">
+                      <Check size={26} />
+                    </div>
+                    <div className="text-[11px] font-black uppercase tracking-[0.24em] text-[var(--film-amber)]">
+                      Final cut locked
+                    </div>
+                    <h3 className="mt-2 text-4xl font-black leading-[0.95] tracking-[-0.06em] text-white">
+                      Your poster has a direction now.
+                    </h3>
+                    <p className="mt-3 max-w-xl text-sm leading-6 text-white/62">
+                      Export the current frame, copy the live API URL, or switch to Advanced and
+                      keep refining with the full pro editor.
+                    </p>
+                  </div>
+
+                  <div className="mt-5 grid gap-3 sm:grid-cols-3">
+                    <button
+                      type="button"
+                      onClick={onExport}
+                      className="flex items-center justify-center gap-2 rounded-xl bg-[var(--film-amber)] px-4 py-4 text-sm font-black uppercase tracking-[0.12em] text-black transition-transform hover:scale-[1.02]"
+                    >
+                      <Download size={17} /> Export
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleCopy}
+                      className="flex items-center justify-center gap-2 rounded-xl border border-white/12 bg-white/[0.055] px-4 py-4 text-sm font-bold text-white hover:border-[rgba(234,178,93,0.4)]"
+                    >
+                      {copied ? <Check size={17} /> : <Copy size={17} />}{' '}
+                      {copied ? 'Copied API URL' : 'Copy API URL'}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={onSwitchAdvanced}
+                      className="flex items-center justify-center gap-2 rounded-xl border border-[rgba(234,178,93,0.26)] px-4 py-4 text-sm font-bold text-[var(--film-amber)] hover:bg-[rgba(196,124,46,0.1)]"
+                    >
+                      <FastForward size={17} /> Switch to Advanced
+                    </button>
+                  </div>
+
+                  <div className="mt-4 max-h-24 overflow-hidden rounded-xl border border-white/10 bg-black/30 p-3 text-[11px] leading-4 text-white/42">
+                    {apiUrl}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {!isComplete && (
+              <footer className="border-t border-[rgba(234,178,93,0.14)] p-4 sm:px-7">
+                <div className="grid grid-cols-3 gap-2">
+                  <button
+                    type="button"
+                    onClick={handleBack}
+                    disabled={stepIndex === 0}
+                    className="flex items-center justify-center gap-1.5 rounded-xl border border-white/10 px-3 py-3 text-xs font-bold text-white/55 disabled:cursor-not-allowed disabled:opacity-35 hover:text-white"
+                  >
+                    <ArrowLeft size={14} /> Back
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleSkip}
+                    className="rounded-xl border border-white/10 px-3 py-3 text-xs font-bold text-white/55 hover:text-white"
+                  >
+                    Skip scene
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleNext}
+                    className="flex items-center justify-center gap-1.5 rounded-xl bg-[var(--film-amber)] px-3 py-3 text-xs font-black uppercase tracking-[0.12em] text-black"
+                  >
+                    Next <ArrowRight size={14} />
+                  </button>
+                </div>
+              </footer>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CinematicTutorialBuilder;
diff --git a/src/components/builder/simple/presets.ts b/src/components/builder/simple/presets.ts
new file mode 100644
index 00000000..3dabea1d
--- /dev/null
+++ b/src/components/builder/simple/presets.ts
@@ -0,0 +1,263 @@
+import type { PosterConfig } from '../types';
+import type { MiniPreview } from './tutorialSteps';
+
+export type SimplePresetId =
+  | 'cinematic-row'
+  | 'streaming-clean'
+  | 'minimal-ratings'
+  | 'glass-badges';
+
+export interface SimplePreset {
+  id: SimplePresetId;
+  name: string;
+  tagline: string;
+  preview: MiniPreview;
+  apply: (config: PosterConfig) => PosterConfig;
+}
+
+const withSharedIdentity = (current: PosterConfig, next: PosterConfig): PosterConfig => ({
+  ...next,
+  mediaType: current.mediaType,
+  tmdbId: current.tmdbId,
+  imdbId: current.imdbId,
+  source: current.source,
+  ptype: current.ptype,
+  textless: current.textless,
+  keys: current.keys,
+  extension: current.extension,
+});
+
+export const simplePresets: SimplePreset[] = [
+  {
+    id: 'cinematic-row',
+    name: 'Cinematic bottom row',
+    tagline: 'Trailer-grade lower-third badges with amber glass and big-screen contrast.',
+    preview: {
+      tone: 'ember',
+      layout: 'bottom-row',
+      finish: 'glass',
+      badges: ['IMDb 8.7', 'RT 73%', 'AUD 91%'],
+      title: 'NEON DAWN',
+    },
+    apply: (config) =>
+      withSharedIdentity(config, {
+        ...config,
+        uiPreset: 'b',
+        theme: 'glass',
+        ratings: ['imdb', 'rt', 'rt_popcorn'],
+        layout: 'row',
+        preset: 'bc',
+        posterBlur: 3,
+        grayscale: false,
+        blur: 16,
+        alpha: 0.52,
+        radius: 20,
+        shadow: 18,
+        scale: 0.88,
+        bg: '#0a0704',
+        txt: '#fff3dc',
+        borderW: 1,
+        borderC: '#d79a45',
+        icon: true,
+        showText: true,
+        logo: false,
+        minimalTitleEnabled: false,
+        minimalRatingsEnabled: false,
+        minimalYearEnabled: false,
+        minimalDurationEnabled: false,
+        items: {},
+      }),
+  },
+  {
+    id: 'streaming-clean',
+    name: 'Streaming-library clean',
+    tagline: 'Premium catalog metadata: sharp, compact, readable from across the room.',
+    preview: {
+      tone: 'noir-blue',
+      layout: 'right-stack',
+      finish: 'solid',
+      badges: ['IMDb', 'TMDB', 'PG-13', '1h 52m'],
+      title: 'AFTER HOURS',
+    },
+    apply: (config) =>
+      withSharedIdentity(config, {
+        ...config,
+        uiPreset: 'b',
+        theme: 'solid',
+        ratings: ['imdb', 'tmdb', 'age', 'runtime'],
+        layout: 'col',
+        preset: 'br',
+        posterBlur: 0,
+        grayscale: false,
+        blur: 0,
+        alpha: 0.86,
+        radius: 12,
+        shadow: 10,
+        scale: 0.72,
+        bg: '#0d1422',
+        txt: '#f8fafc',
+        borderW: 0,
+        borderC: undefined,
+        icon: true,
+        showText: true,
+        normalize: true,
+        logo: false,
+        minimalTitleEnabled: false,
+        minimalRatingsEnabled: false,
+        minimalYearEnabled: false,
+        minimalDurationEnabled: false,
+        items: {},
+      }),
+  },
+  {
+    id: 'minimal-ratings',
+    name: 'Minimal title + ratings',
+    tagline: 'Festival-poster typography with scores treated as restrained editorial details.',
+    preview: {
+      tone: 'plum',
+      layout: 'title-block',
+      finish: 'minimal',
+      badges: ['★ 8.7', '● 73%', '2024'],
+      title: 'THE LONG NIGHT',
+    },
+    apply: (config) =>
+      withSharedIdentity(config, {
+        ...config,
+        uiPreset: 'm',
+        theme: 'glass',
+        ratings: ['title', 'year', 'imdb', 'rt'],
+        layout: 'custom',
+        preset: 'custom',
+        posterBlur: 0,
+        grayscale: false,
+        blur: 0,
+        alpha: 0.35,
+        radius: 12,
+        shadow: 6,
+        scale: 1,
+        bg: undefined,
+        txt: '#ffffff',
+        borderW: 0,
+        icon: true,
+        showText: true,
+        logo: false,
+        minimalTitleEnabled: true,
+        minimalTextSize: 58,
+        minimalTextX: 28,
+        minimalTextY: 615,
+        minimalTitleWidth: 420,
+        minimalTitleAlign: 'left',
+        minimalTitleFlow: 'up',
+        minimalTitleColor: '#f8fafc',
+        minimalTitleWeight: 800,
+        minimalTitleShadowEnabled: true,
+        minimalTitleShadowBlur: 18,
+        minimalRatingsEnabled: true,
+        minimalRatings: [
+          {
+            provider: 'imdb',
+            enabled: true,
+            x: 28,
+            y: 664,
+            size: 24,
+            color: '#facc15',
+            opacity: 1,
+            iconMode: 'star',
+            symbol: '★',
+            bgEnabled: false,
+            bgColor: '#000000',
+            bgOpacity: 0,
+            borderW: 0,
+            borderColor: '#ffffff',
+            borderOpacity: 0.7,
+            radius: 0,
+            paddingX: 0,
+            paddingY: 0,
+            shadowEnabled: true,
+            shadowX: 0,
+            shadowY: 2,
+            shadowBlur: 10,
+            shadowColor: '#000000',
+          },
+          {
+            provider: 'rt',
+            enabled: true,
+            x: 145,
+            y: 664,
+            size: 24,
+            color: '#fb7185',
+            opacity: 1,
+            iconMode: 'star',
+            symbol: '★',
+            bgEnabled: false,
+            bgColor: '#000000',
+            bgOpacity: 0,
+            borderW: 0,
+            borderColor: '#ffffff',
+            borderOpacity: 0.7,
+            radius: 0,
+            paddingX: 0,
+            paddingY: 0,
+            shadowEnabled: true,
+            shadowX: 0,
+            shadowY: 2,
+            shadowBlur: 10,
+            shadowColor: '#000000',
+          },
+        ],
+        minimalYearEnabled: true,
+        minimalDurationEnabled: true,
+        minimalMetaX: 28,
+        minimalMetaY: 706,
+        minimalDurationX: 118,
+        minimalDurationY: 706,
+        minimalMetaSize: 18,
+        minimalMetaColor: '#d6dde3',
+        minimalMetaOpacity: 0.9,
+        items: {},
+      }),
+  },
+  {
+    id: 'glass-badges',
+    name: 'Glass badges',
+    tagline: 'Frosted hero chips, white edge light, and a glossy marquee feel.',
+    preview: {
+      tone: 'silver',
+      layout: 'top-ribbon',
+      finish: 'glass',
+      badges: ['IMDb 8.7', 'RT 73%', 'LB 4.2', 'META 76'],
+      title: 'GLASS CITY',
+    },
+    apply: (config) =>
+      withSharedIdentity(config, {
+        ...config,
+        uiPreset: 'b',
+        theme: 'glass',
+        ratings: ['imdb', 'rt', 'letterboxd', 'meta'],
+        layout: 'row',
+        preset: 'tc',
+        posterBlur: 7,
+        grayscale: false,
+        blur: 22,
+        alpha: 0.36,
+        radius: 24,
+        shadow: 24,
+        scale: 0.78,
+        bg: '#ffffff',
+        txt: '#ffffff',
+        borderW: 1,
+        borderC: '#ffffff',
+        icon: true,
+        showText: true,
+        logo: false,
+        minimalTitleEnabled: false,
+        minimalRatingsEnabled: false,
+        minimalYearEnabled: false,
+        minimalDurationEnabled: false,
+        items: {},
+      }),
+  },
+];
+
+export const getSimplePreset = (id: SimplePresetId): SimplePreset =>
+  simplePresets.find((preset) => preset.id === id) ?? simplePresets[0];
diff --git a/src/components/builder/simple/tutorialSteps.ts b/src/components/builder/simple/tutorialSteps.ts
new file mode 100644
index 00000000..285cc3c2
--- /dev/null
+++ b/src/components/builder/simple/tutorialSteps.ts
@@ -0,0 +1,346 @@
+import type { PosterConfig, RatingType } from '../types';
+import { getSimplePreset, type SimplePresetId } from './presets';
+
+export type TutorialOptionId = 'a' | 'b' | 'c' | 'd';
+export type MiniPreviewTone = 'ember' | 'noir-blue' | 'plum' | 'silver' | 'redline' | 'mono';
+export type MiniPreviewLayout = 'bottom-row' | 'right-stack' | 'top-ribbon' | 'title-block';
+export type MiniPreviewFinish = 'glass' | 'solid' | 'minimal';
+
+export interface MiniPreview {
+  tone: MiniPreviewTone;
+  layout: MiniPreviewLayout;
+  finish: MiniPreviewFinish;
+  badges: string[];
+  title: string;
+}
+
+export interface TutorialOption {
+  id: TutorialOptionId;
+  label: string;
+  description: string;
+  preview: MiniPreview;
+  apply: (config: PosterConfig) => PosterConfig;
+}
+
+export interface TutorialStep {
+  id: string;
+  eyebrow: string;
+  title: string;
+  helper: string;
+  direction: string;
+  options: TutorialOption[];
+}
+
+const setPreset =
+  (presetId: SimplePresetId) =>
+  (config: PosterConfig): PosterConfig =>
+    getSimplePreset(presetId).apply(config);
+
+const setRatings =
+  (ratings: RatingType[]) =>
+  (config: PosterConfig): PosterConfig => ({
+    ...config,
+    ratings,
+    minimalRatings:
+      config.uiPreset === 'm'
+        ? (config.minimalRatings ?? []).filter((rating) => ratings.includes(rating.provider))
+        : config.minimalRatings,
+  });
+
+export const tutorialSteps: TutorialStep[] = [
+  {
+    id: 'starting-point',
+    eyebrow: 'Act I · Choose the look',
+    title: 'Set the poster’s opening shot.',
+    helper:
+      'Pick a bold direction. Each card previews the actual overlay structure at thumbnail scale—not placeholder art.',
+    direction: 'Select the strongest visual identity for this poster.',
+    options: [
+      {
+        id: 'a',
+        label: 'Cinematic bottom row',
+        description: 'Trailer-grade lower-third badges with amber glass and big-screen contrast.',
+        preview: getSimplePreset('cinematic-row').preview,
+        apply: setPreset('cinematic-row'),
+      },
+      {
+        id: 'b',
+        label: 'Streaming-library clean',
+        description: 'Compact metadata stack built for Plex/Jellyfin browsing distance.',
+        preview: getSimplePreset('streaming-clean').preview,
+        apply: setPreset('streaming-clean'),
+      },
+      {
+        id: 'c',
+        label: 'Minimal title + ratings',
+        description: 'Festival-poster typography with scores as restrained editorial details.',
+        preview: getSimplePreset('minimal-ratings').preview,
+        apply: setPreset('minimal-ratings'),
+      },
+      {
+        id: 'd',
+        label: 'Glass badges',
+        description: 'Frosted hero chips, white edge light, and a glossy marquee feel.',
+        preview: getSimplePreset('glass-badges').preview,
+        apply: setPreset('glass-badges'),
+      },
+    ],
+  },
+  {
+    id: 'ratings',
+    eyebrow: 'Act II · Cast the data',
+    title: 'Choose what deserves the spotlight.',
+    helper: 'The score set changes immediately on the live canvas behind the wizard.',
+    direction: 'Make the metadata read like a confident editorial choice.',
+    options: [
+      {
+        id: 'a',
+        label: 'Critic + audience',
+        description: 'IMDb, Tomatometer, and audience score for broad movie discovery.',
+        preview: {
+          tone: 'ember',
+          layout: 'bottom-row',
+          finish: 'glass',
+          badges: ['IMDb 8.7', 'RT 73%', 'AUD 91%'],
+          title: 'CRITICS CUT',
+        },
+        apply: setRatings(['imdb', 'rt', 'rt_popcorn']),
+      },
+      {
+        id: 'b',
+        label: 'Library essentials',
+        description: 'IMDb, TMDB, age rating, and runtime for practical streaming lists.',
+        preview: {
+          tone: 'noir-blue',
+          layout: 'right-stack',
+          finish: 'solid',
+          badges: ['IMDb', 'TMDB', 'PG-13', '1h 52m'],
+          title: 'SHELF READY',
+        },
+        apply: setRatings(['imdb', 'tmdb', 'age', 'runtime']),
+      },
+      {
+        id: 'c',
+        label: 'Awards-board style',
+        description: 'Title, year, IMDb, Rotten Tomatoes, and Metacritic.',
+        preview: {
+          tone: 'plum',
+          layout: 'title-block',
+          finish: 'minimal',
+          badges: ['2024', 'IMDb 8.7', 'META 76'],
+          title: 'AWARDS NIGHT',
+        },
+        apply: setRatings(['title', 'year', 'imdb', 'rt', 'meta']),
+      },
+      {
+        id: 'd',
+        label: 'Community picks',
+        description: 'IMDb, Letterboxd, TMDB, and Rotten Tomatoes for fan-forward posters.',
+        preview: {
+          tone: 'silver',
+          layout: 'top-ribbon',
+          finish: 'glass',
+          badges: ['IMDb', 'LB 4.2', 'TMDB', 'RT'],
+          title: 'FAN CANON',
+        },
+        apply: setRatings(['imdb', 'letterboxd', 'tmdb', 'rt']),
+      },
+    ],
+  },
+  {
+    id: 'placement',
+    eyebrow: 'Act III · Block the scene',
+    title: 'Place the overlay with intent.',
+    helper:
+      'Pick a composition zone that protects the poster art while making the overlay feel designed.',
+    direction: 'The live canvas stays visible so you can judge the balance instantly.',
+    options: [
+      {
+        id: 'a',
+        label: 'Bottom centered',
+        description: 'A theatrical lower-third that keeps faces and key art clear.',
+        preview: {
+          tone: 'ember',
+          layout: 'bottom-row',
+          finish: 'glass',
+          badges: ['IMDb', 'RT', 'AUD'],
+          title: 'LOWER THIRD',
+        },
+        apply: (config) => ({ ...config, uiPreset: 'b', layout: 'row', preset: 'bc', items: {} }),
+      },
+      {
+        id: 'b',
+        label: 'Bottom right stack',
+        description: 'A compact corner rail that behaves like streaming-library metadata.',
+        preview: {
+          tone: 'noir-blue',
+          layout: 'right-stack',
+          finish: 'solid',
+          badges: ['IMDb', 'TMDB', 'AGE'],
+          title: 'CORNER RAIL',
+        },
+        apply: (config) => ({ ...config, uiPreset: 'b', layout: 'col', preset: 'br', items: {} }),
+      },
+      {
+        id: 'c',
+        label: 'Top marquee',
+        description: 'A confident ribbon that announces scores before the eye drops into the art.',
+        preview: {
+          tone: 'silver',
+          layout: 'top-ribbon',
+          finish: 'glass',
+          badges: ['IMDb', 'RT', 'LB'],
+          title: 'TOP BILLING',
+        },
+        apply: (config) => ({ ...config, uiPreset: 'b', layout: 'row', preset: 'tc', items: {} }),
+      },
+      {
+        id: 'd',
+        label: 'Title block',
+        description:
+          'A typography-led lower third for posters that need a premium editorial finish.',
+        preview: {
+          tone: 'plum',
+          layout: 'title-block',
+          finish: 'minimal',
+          badges: ['★ 8.7', 'RT 73%', '2024'],
+          title: 'TITLE FIRST',
+        },
+        apply: (config) => ({
+          ...config,
+          uiPreset: 'm',
+          layout: 'custom',
+          preset: 'custom',
+          ratings: ['title', 'year', 'imdb', 'rt'],
+          minimalTitleEnabled: true,
+          minimalRatingsEnabled: true,
+          minimalYearEnabled: true,
+          minimalDurationEnabled: true,
+          minimalTextX: 28,
+          minimalTextY: 615,
+          minimalTitleWidth: 420,
+          minimalMetaX: 28,
+          minimalMetaY: 706,
+          minimalDurationX: 118,
+          minimalDurationY: 706,
+          items: {},
+        }),
+      },
+    ],
+  },
+  {
+    id: 'finish',
+    eyebrow: 'Final Act · Color grade',
+    title: 'Finish it like a release poster.',
+    helper: 'Tune contrast, glass, blur, and readability without leaving the guided flow.',
+    direction: 'Commit to a finish. Export or move to Advanced from the next screen.',
+    options: [
+      {
+        id: 'a',
+        label: 'Warm cinematic',
+        description: 'Amber edge light, warm text, and a soft theatrical glow.',
+        preview: {
+          tone: 'ember',
+          layout: 'bottom-row',
+          finish: 'glass',
+          badges: ['IMDb', 'RT', 'AUD'],
+          title: 'WARM GRADE',
+        },
+        apply: (config) => ({
+          ...config,
+          theme: 'glass',
+          posterBlur: Math.max(config.posterBlur, 3),
+          grayscale: false,
+          blur: 16,
+          alpha: 0.5,
+          radius: 20,
+          shadow: 18,
+          bg: '#080706',
+          txt: '#f8ead2',
+          borderW: 1,
+          borderC: '#d79a45',
+        }),
+      },
+      {
+        id: 'b',
+        label: 'Crisp solid',
+        description: 'Opaque midnight chips for maximum legibility on busy artwork.',
+        preview: {
+          tone: 'noir-blue',
+          layout: 'right-stack',
+          finish: 'solid',
+          badges: ['IMDb', 'TMDB', 'PG'],
+          title: 'CLEAN CUT',
+        },
+        apply: (config) => ({
+          ...config,
+          theme: 'solid',
+          posterBlur: 0,
+          grayscale: false,
+          blur: 0,
+          alpha: 0.86,
+          radius: 12,
+          shadow: 10,
+          bg: '#0f172a',
+          txt: '#f8fafc',
+          borderW: 0,
+          borderC: undefined,
+        }),
+      },
+      {
+        id: 'c',
+        label: 'Premium glass',
+        description: 'Frosted badges, visible edge light, and a glossy streaming-hero feel.',
+        preview: {
+          tone: 'silver',
+          layout: 'top-ribbon',
+          finish: 'glass',
+          badges: ['IMDb', 'RT', 'LB'],
+          title: 'FROSTED HERO',
+        },
+        apply: (config) => ({
+          ...config,
+          theme: 'glass',
+          posterBlur: Math.max(config.posterBlur, 7),
+          grayscale: false,
+          blur: 22,
+          alpha: 0.36,
+          radius: 24,
+          shadow: 24,
+          bg: '#ffffff',
+          txt: '#ffffff',
+          borderW: 1,
+          borderC: '#ffffff',
+        }),
+      },
+      {
+        id: 'd',
+        label: 'Editorial monochrome',
+        description: 'Desaturated art, stark typography, and restrained festival-card overlays.',
+        preview: {
+          tone: 'mono',
+          layout: 'title-block',
+          finish: 'minimal',
+          badges: ['★ 8.7', 'RT 73%', '2024'],
+          title: 'MONO CUT',
+        },
+        apply: (config) => ({
+          ...config,
+          theme: 'glass',
+          posterBlur: 0,
+          grayscale: true,
+          blur: 8,
+          alpha: 0.28,
+          radius: 14,
+          shadow: 10,
+          bg: '#000000',
+          txt: '#ffffff',
+          borderW: 1,
+          borderC: '#e5e7eb',
+          minimalTitleColor: '#ffffff',
+          minimalMetaColor: '#e5e7eb',
+        }),
+      },
+    ],
+  },
+];