x

apps/admin/src/components/products/ProductStoryScrollForm.tsx

@@ -160,6 +160,53 @@ export default function ProductStoryScrollForm({ payload, onChange, onBrowseMedi
         </button>
       </div>
 
+      {/* Visual Theme Selector (Dark Theater vs Light Luxury) */}
+      <div className="p-4 rounded-2xl bg-night-950 border border-white/10 space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-xs font-bold uppercase tracking-widest text-slate-300 flex items-center gap-2">
+            <Layers className="w-4 h-4 text-cyan-glow" />
+            ธีมการแสดงผลของ Story (Visual Theme)
+          </label>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <button
+            type="button"
+            onClick={() => onChange({ ...payload, storyTheme: 'dark' })}
+            className={`p-3.5 rounded-xl border text-left transition-all cursor-pointer ${
+              (payload.storyTheme || 'dark') === 'dark'
+                ? 'bg-cyan-glow/10 border-cyan-glow/50 text-white ring-1 ring-cyan-glow/30'
+                : 'bg-white/5 border-white/10 text-slate-400 hover:text-white'
+            }`}
+          >
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs font-black uppercase tracking-wider">Dark Theater (Apple Pro)</span>
+              {(payload.storyTheme || 'dark') === 'dark' && <CheckCircle className="w-4 h-4 text-cyan-glow" />}
+            </div>
+            <p className="text-[11px] text-slate-400 leading-relaxed">
+              ฉากมืดสไตล์โรงภาพยนตร์ แสงนีออนและ Radial Glow เรืองแสงรอบสินค้า
+            </p>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => onChange({ ...payload, storyTheme: 'light' })}
+            className={`p-3.5 rounded-xl border text-left transition-all cursor-pointer ${
+              payload.storyTheme === 'light'
+                ? 'bg-cyan-glow/10 border-cyan-glow/50 text-white ring-1 ring-cyan-glow/30'
+                : 'bg-white/5 border-white/10 text-slate-400 hover:text-white'
+            }`}
+          >
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs font-black uppercase tracking-wider">Light Studio (Clean Luxury)</span>
+              {payload.storyTheme === 'light' && <CheckCircle className="w-4 h-4 text-cyan-glow" />}
+            </div>
+            <p className="text-[11px] text-slate-400 leading-relaxed">
+              ฉากสว่าง หรูหรา คลีนตา กลมกลืนกับธีมสีครีม/ขาวของเว็บไซต์ ไม่เป็นกล่องดำ
+            </p>
+          </button>
+        </div>
+      </div>
+
       {/* 1. Core Hero Showcase Image */}
       <div className="p-4 rounded-2xl bg-night-950 border border-white/10 space-y-4">
         <div className="flex items-center justify-between">