1→import dynamic from 'next/dynamic';
     2→
     3→const HomeClient = dynamic(() => import('./home-client'), { ssr: false });
     4→
     5→export default function Home() {
     6→  return <HomeClient />;
     7→}
     8→
     9→const STYLES = [
    10→  { id: 'cinematic', label: 'سينمائي', icon: '🎬', desc: 'جودة سينمائية عالية' },
    11→  { id: 'anime', label: 'أنمي', icon: '🎨', desc: 'رسوم أنمي يابانية' },
    12→  { id: 'realistic', label: 'واقعي', icon: '📷', desc: 'تصوير واقعي' },
    13→  { id: 'fantasy', label: 'خيالي', icon: '🧙', desc: 'عوالم خيالية' },
    14→  { id: 'documentary', label: 'وثائقي', icon: '📹', desc: 'أسلوب وثائقي' },
    15→  { id: 'watercolor', label: 'مائي', icon: '🖌️', desc: 'رسم مائي فني' },
    16→];
    17→
    18→const EXAMPLE_PROMPTS = [
    19→  'رحلة عبر الغابات المطيرة الاستوائية مع أصوات الطيور والشلالات',
    20→  'مدينة مستقبلية في عام 2150 مع السيارات الطائرة والأبنية الشفافة',
    21→  'قصة فتاة صغيرة تكتشف عالماً سحرياً خلف خزانة قديمة',
    22→  'غروب الشمس على شاطئ هادئ مع الأمواج والنورس الأبيض',
    23→];
    24→
    25→export default function Home() {
    26→  return (
    27→    <div className="min-h-screen flex flex-col">
    28→      <Header />
    29→      <main className="flex-1">
    30→        <AppContent />
    31→      </main>
    32→      <Footer />
    33→    </div>
    34→  );
    35→}
    36→
    37→/* ───────────────────── Header ───────────────────── */
    38→function Header() {
    39→  const { activeView, setActiveView, projects } = useVideoStore();
    40→
    41→  return (
    42→    <header className="glass sticky top-0 z-50 border-b border-border/50">
    43→      <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
    44→        <button
    45→          onClick={() => setActiveView('create')}
    46→          className="flex items-center gap-3 group"
    47→        >
    48→          <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-purple-500 to-emerald-500 flex items-center justify-center shadow-lg">
    49→            <Clapperboard className="w-5 h-5 text-white" />
    50→          </div>
    51→          <div>
    52→            <h1 className="text-lg font-bold gradient-text leading-tight">مبدع الفيديو</h1>
    53→            <p className="text-[10px] text-muted-foreground -mt-0.5">AI Video Creator</p>
    54→          </div>
    55→        </button>
    56→
    57→        <nav className="flex items-center gap-2">
    58→          <Button
    59→            variant={activeView === 'create' ? 'default' : 'ghost'}
    60→            size="sm"
    61→            onClick={() => setActiveView('create')}
    62→            className="gap-1.5 text-sm"
    63→          >
    64→            <Wand2 className="w-4 h-4" />
    65→            <span className="hidden sm:inline">إنشاء</span>
    66→          </Button>
    67→          <Button
    68→            variant={activeView === 'gallery' ? 'default' : 'ghost'}
    69→            size="sm"
    70→            onClick={() => setActiveView('gallery')}
    71→            className="gap-1.5 text-sm"
    72→          >
    73→            <LayoutGrid className="w-4 h-4" />
    74→            <span className="hidden sm:inline">المكتبة</span>
    75→            {projects.length > 0 && (
    76→              <Badge variant="secondary" className="h-5 min-w-5 px-1.5 text-xs">
    77→                {projects.length}
    78→              </Badge>
    79→            )}
    80→          </Button>
    81→        </nav>
    82→      </div>
    83→    </header>
    84→  );
    85→}
    86→
    87→/* ───────────────────── App Content Router ───────────────────── */
    88→function AppContent() {
    89→  const { activeView, isGenerating } = useVideoStore();
    90→
    91→  return (
    92→    <AnimatePresence mode="wait">
    93→      {isGenerating ? (
    94→        <motion.div
    95→          key="generating"
    96→          initial={{ opacity: 0, y: 20 }}
    97→          animate={{ opacity: 1, y: 0 }}
    98→          exit={{ opacity: 0, y: -20 }}
    99→          className="max-w-4xl mx-auto px-4 sm:px-6 py-12"
   100→        >
   101→          <GenerationProgress />
   102→        </motion.div>
   103→      ) : activeView === 'player' ? (
   104→        <motion.div
   105→          key="player"
   106→          initial={{ opacity: 0, y: 20 }}
   107→          animate={{ opacity: 1, y: 0 }}
   108→          exit={{ opacity: 0, y: -20 }}
   109→          className="max-w-5xl mx-auto px-4 sm:px-6 py-8"
   110→        >
   111→          <VideoPlayer />
   112→        </motion.div>
   113→      ) : activeView === 'gallery' ? (
   114→        <motion.div
   115→          key="gallery"
   116→          initial={{ opacity: 0, y: 20 }}
   117→          animate={{ opacity: 1, y: 0 }}
   118→          exit={{ opacity: 0, y: -20 }}
   119→          className="max-w-7xl mx-auto px-4 sm:px-6 py-8"
   120→        >
   121→          <VideoGallery />
   122→        </motion.div>
   123→      ) : (
   124→        <motion.div
   125→          key="create"
   126→          initial={{ opacity: 0, y: 20 }}
   127→          animate={{ opacity: 1, y: 0 }}
   128→          exit={{ opacity: 0, y: -20 }}
   129→        >
   130→          <CreateSection />
   131→        </motion.div>
   132→      )}
   133→    </AnimatePresence>
   134→  );
   135→}
   136→
   137→/* ───────────────────── Create Section ───────────────────── */
   138→function CreateSection() {
   139→  const { prompt, setPrompt, selectedStyle, setSelectedStyle, sceneCount, setSceneCount, isGenerating, setIsGenerating, setGenerationProgress, setActiveView, setCurrentProject, addProject, projects, setProjects } = useVideoStore();
   140→
   141→  const handleGenerate = useCallback(async () => {
   142→    if (!prompt.trim()) {
   143→      toast.error('يرجى كتابة وصف للفيديو');
   144→      return;
   145→    }
   146→
   147→    setIsGenerating(true);
   148→    setGenerationProgress({ step: 'جاري تحليل الوصف وإنشاء المشاهد...', progress: 10 });
   149→
   150→    try {
   151→      const res = await fetch('/api/generate-video', {
   152→        method: 'POST',
   153→        headers: { 'Content-Type': 'application/json' },
   154→        body: JSON.stringify({ prompt: prompt.trim(), style: selectedStyle, sceneCount }),
   155→      });
   156→
   157→      if (!res.ok) {
   158→        const err = await res.json();
   159→        throw new Error(err.error || 'حدث خطأ أثناء التوليد');
   160→      }
   161→
   162→      const project = await res.json();
   163→      addProject(project);
   164→      setCurrentProject(project);
   165→      setActiveView('player');
   166→      toast.success('تم إنشاء الفيديو بنجاح!');
   167→    } catch (err: any) {
   168→      toast.error(err.message || 'حدث خطأ غير متوقع');
   169→      // Fetch updated project list
   170→      try {
   171→        const listRes = await fetch('/api/videos');
   172→        if (listRes.ok) {
   173→          const data = await listRes.json();
   174→          setProjects(data.projects || []);
   175→        }
   176→      } catch { /* ignore */ }
   177→    } finally {
   178→      setIsGenerating(false);
   179→    }
   180→  }, [prompt, selectedStyle, sceneCount]);
   181→
   182→  const handleExampleClick = (example: string) => {
   183→    setPrompt(example);
   184→  };
   185→
   186→  return (
   187→    <div className="relative overflow-hidden">
   188→      {/* Hero background */}
   189→      <div className="absolute inset-0 z-0">
   190→        <img src="/hero-bg.png" alt="" className="w-full h-full object-cover opacity-20" />
   191→        <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/80 to-background" />
   192→      </div>
   193→
   194→      <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 pt-12 pb-20">
   195→        {/* Hero Text */}
   196→        <motion.div
   197→          initial={{ opacity: 0, y: 30 }}
   198→          animate={{ opacity: 1, y: 0 }}
   199→          transition={{ duration: 0.8 }}
   200→          className="text-center mb-10"
   201→        >
   202→          <motion.div
   203→            initial={{ scale: 0.8, opacity: 0 }}
   204→            animate={{ scale: 1, opacity: 1 }}
   205→            transition={{ delay: 0.2 }}
   206→            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass text-sm text-muted-foreground mb-6"
   207→          >
   208→            <Sparkles className="w-4 h-4 text-purple-400" />
   209→            <span>مدعوم بالذكاء الاصطناعي المتقدم</span>
   210→          </motion.div>
   211→          <h2 className="text-3xl sm:text-5xl font-bold mb-4 leading-tight">
   212→            حوّل أفكارك إلى{' '}
   213→            <span className="gradient-text">فيديوهات مذهلة</span>
   214→          </h2>
   215→          <p className="text-muted-foreground text-base sm:text-lg max-w-2xl mx-auto">
   216→            اكتب وصفاً لما تريده وسيقوم الذكاء الاصطناعي بإنشاء مشاهد وصور وسرد صوتي تلقائياً
   217→          </p>
   218→        </motion.div>
   219→
   220→        {/* Main Creation Card */}
   221→        <motion.div
   222→          initial={{ opacity: 0, y: 30 }}
   223→          animate={{ opacity: 1, y: 0 }}
   224→          transition={{ delay: 0.4, duration: 0.6 }}
   225→        >
   226→          <Card className="glass glow-purple overflow-hidden">
   227→            <CardContent className="p-4 sm:p-6 space-y-5">
   228→              {/* Prompt Input */}
   229→              <div className="space-y-2">
   230→                <label className="text-sm font-medium flex items-center gap-2">
   231→                  <Film className="w-4 h-4 text-purple-400" />
   232→                  وصف الفيديو
   233→                </label>
   234→                <Textarea
   235→                  value={prompt}
   236→                  onChange={(e) => setPrompt(e.target.value)}
   237→                  placeholder="مثال: رحلة عبر الغابات المطيرة الاستوائية مع أصوات الطيور والشلالات..."
   238→                  className="min-h-[100px] sm:min-h-[120px] bg-background/50 border-border/50 resize-none text-base leading-relaxed placeholder:text-muted-foreground/50"
   239→                  dir="rtl"
   240→                />
   241→                <div className="flex justify-between items-center">
   242→                  <p className="text-xs text-muted-foreground">
   243→                    {prompt.length} حرف
   244→                  </p>
   245→                </div>
   246→              </div>
   247→
   248→              {/* Example Prompts */}
   249→              <div className="space-y-2">
   250→                <p className="text-xs text-muted-foreground font-medium">أفكار سريعة:</p>
   251→                <div className="flex flex-wrap gap-2">
   252→                  {EXAMPLE_PROMPTS.map((ex, i) => (
   253→                    <button
   254→                      key={i}
   255→                      onClick={() => handleExampleClick(ex)}
   256→                      className="text-xs px-3 py-1.5 rounded-full glass hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground truncate max-w-[250px]"
   257→                    >
   258→                      {ex}
   259→                    </button>
   260→                  ))}
   261→                </div>
   262→              </div>
   263→
   264→              {/* Style Selection */}
   265→              <div className="space-y-2">
   266→                <label className="text-sm font-medium flex items-center gap-2">
   267→                  <Image className="w-4 h-4 text-emerald-400" />
   268→                  نمط الفيديو
   269→                </label>
   270→                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
   271→                  {STYLES.map((style) => (
   272→                    <button
   273→                      key={style.id}
   274→                      onClick={() => setSelectedStyle(style.id)}
   275→                      className={`relative p-3 rounded-xl border text-center transition-all duration-200 ${
   276→                        selectedStyle === style.id
   277→                          ? 'border-purple-500/50 bg-purple-500/10 glow-purple'
   278→                          : 'border-border/50 hover:border-border bg-background/30 hover:bg-accent/30'
   279→                      }`}
   280→                    >
   281→                      <span className="text-xl mb-1 block">{style.icon}</span>
   282→                      <span className="text-xs font-medium block">{style.label}</span>
   283→                      <span className="text-[10px] text-muted-foreground hidden sm:block">{style.desc}</span>
   284→                      {selectedStyle === style.id && (
   285→                        <div className="absolute -top-1 -left-1 w-4 h-4 bg-purple-500 rounded-full flex items-center justify-center">
   286→                          <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
   287→                        </div>
   288→                      )}
   289→                    </button>
   290→                  ))}
   291→                </div>
   292→              </div>
   293→
   294→              {/* Scene Count & Generate Button */}
   295→              <div className="flex flex-col sm:flex-row items-stretch sm:items-end gap-4 pt-2">
   296→                <div className="flex-1 space-y-2">
   297→                  <label className="text-sm font-medium flex items-center gap-2">
   298→                    <Clock className="w-4 h-4 text-orange-400" />
   299→                    عدد المشاهد: <span className="text-purple-400 font-bold">{sceneCount}</span>
   300→                  </label>
   301→                  <Slider
   302→                    value={[sceneCount]}
   303→                    onValueChange={([v]) => setSceneCount(v)}
   304→                    min={2}
   305→                    max={6}
   306→                    step={1}
   307→                    className="py-2"
   308→                  />
   309→                  <div className="flex justify-between text-[10px] text-muted-foreground">
   310→                    <span>2 مشاهد</span>
   311→                    <span>6 مشاهد</span>
   312→                  </div>
   313→                </div>
   314→
   315→                <Button
   316→                  onClick={handleGenerate}
   317→                  disabled={!prompt.trim() || isGenerating}
   318→                  className="w-full sm:w-auto h-12 px-8 bg-gradient-to-r from-purple-600 to-emerald-600 hover:from-purple-500 hover:to-emerald-500 text-white font-bold text-base gap-2 rounded-xl shadow-lg transition-all duration-300 hover:shadow-purple-500/20 hover:scale-[1.02] active:scale-[0.98]"
   319→                >
   320→                  {isGenerating ? (
   321→                    <Loader2 className="w-5 h-5 animate-spin" />
   322→                  ) : (
   323→                    <Sparkles className="w-5 h-5" />
   324→                  )}
   325→                  إنشاء الفيديو
   326→                </Button>
   327→              </div>
   328→            </CardContent>
   329→          </Card>
   330→        </motion.div>
   331→
   332→        {/* Recent projects preview */}
   333→        {projects.length > 0 && (
   334→          <motion.div
   335→            initial={{ opacity: 0 }}
   336→            animate={{ opacity: 1 }}
   337→            transition={{ delay: 0.8 }}
   338→            className="mt-10"
   339→          >
   340→            <div className="flex items-center justify-between mb-4">
   341→              <h3 className="text-lg font-semibold flex items-center gap-2">
   342→                <MonitorPlay className="w-5 h-5 text-purple-400" />
   343→                آخر الإبداعات
   344→              </h3>
   345→              <Button variant="ghost" size="sm" onClick={() => useVideoStore.getState().setActiveView('gallery')} className="text-muted-foreground text-sm">
   346→                عرض الكل
   347→              </Button>
   348→            </div>
   349→            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
   350→              {projects.slice(0, 4).map((project) => (
   351→                <ProjectCard key={project.id} project={project} compact />
   352→              ))}
   353→            </div>
   354→          </motion.div>
   355→        )}
   356→      </div>
   357→    </div>
   358→  );
   359→}
   360→
   361→/* ───────────────────── Generation Progress ───────────────────── */
   362→function GenerationProgress() {
   363→  const { generationProgress, prompt, selectedStyle, sceneCount } = useVideoStore();
   364→
   365→  const steps = [
   366→    { label: 'تحليل الوصف', icon: '🧠', threshold: 10 },
   367→    { label: 'كتابة السيناريو', icon: '📝', threshold: 25 },
   368→    { label: 'إنشاء المشاهد', icon: '🎨', threshold: 40 },
   369→    { label: 'توليد الصور', icon: '🖼️', threshold: 70 },
   370→    { label: 'تسجيل الصوت', icon: '🎙️', threshold: 90 },
   371→    { label: 'المعالجة النهائية', icon: '✨', threshold: 100 },
   372→  ];
   373→
   374→  return (
   375→    <div className="text-center space-y-8">
   376→      {/* Animated icon */}
   377→      <motion.div
   378→        animate={{ rotate: 360 }}
   379→        transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
   380→        className="inline-flex"
   381→      >
   382→        <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-purple-500/20 to-emerald-500/20 border border-purple-500/30 flex items-center justify-center">
   383→          <Sparkles className="w-10 h-10 text-purple-400" />
   384→        </div>
   385→      </motion.div>
   386→
   387→      <div>
   388→        <h2 className="text-2xl font-bold mb-2">جاري إنشاء الفيديو...</h2>
   389→        <p className="text-muted-foreground">{generationProgress.step}</p>
   390→      </div>
   391→
   392→      {/* Progress bar */}
   393→      <div className="max-w-md mx-auto space-y-3">
   394→        <Progress value={generationProgress.progress} className="h-2" />
   395→        <p className="text-sm text-muted-foreground">{generationProgress.progress}%</p>
   396→      </div>
   397→
   398→      {/* Steps */}
   399→      <div className="max-w-sm mx-auto grid grid-cols-3 gap-3">
   400→        {steps.map((step, i) => {
   401→          const isActive = generationProgress.progress >= step.threshold - 5;
   402→          const isDone = generationProgress.progress >= step.threshold + 5;
   403→          return (
   404→            <motion.div
   405→              key={i}
   406→              initial={{ opacity: 0, y: 10 }}
   407→              animate={{ opacity: 1, y: 0 }}
   408→              transition={{ delay: i * 0.1 }}
   409→              className={`p-3 rounded-xl border text-center transition-all duration-500 ${
   410→                isDone
   411→                  ? 'border-emerald-500/30 bg-emerald-500/10'
   412→                  : isActive
   413→                  ? 'border-purple-500/30 bg-purple-500/10 animate-pulse'
   414→                  : 'border-border/30 bg-background/30'
   415→              }`}
   416→            >
   417→              <span className="text-xl block mb-1">{step.icon}</span>
   418→              <span className="text-[10px] sm:text-xs text-muted-foreground block">{step.label}</span>
   419→              {isDone && (
   420→                <span className="text-emerald-400 text-[10px]">تم ✓</span>
   421→              )}
   422→            </motion.div>
   423→          );
   424→        })}
   425→      </div>
   426→
   427→      {/* Summary */}
   428→      <div className="inline-flex flex-wrap justify-center gap-2">
   429→        <Badge variant="secondary" className="gap-1"><Film className="w-3 h-3" />{STYLES.find(s => s.id === selectedStyle)?.label}</Badge>
   430→        <Badge variant="secondary" className="gap-1"><Image className="w-3 h-3" />{sceneCount} مشاهد</Badge>
   431→        <Badge variant="secondary" className="gap-1"><Mic className="w-3 h-3" />سرد صوتي</Badge>
   432→      </div>
   433→    </div>
   434→  );
   435→}
   436→
   437→/* ───────────────────── Video Player ───────────────────── */
   438→function VideoPlayer() {
   439→  const { currentProject, currentSceneIndex, setCurrentSceneIndex, isPlaying, setIsPlaying, setActiveView } = useVideoStore();
   440→  const audioRef = useRef<HTMLAudioElement>(null);
   441→  const timerRef = useRef<NodeJS.Timeout | null>(null);
   442→
   443→  const scenes = currentProject?.scenes || [];
   444→  const currentScene = scenes[currentSceneIndex];
   445→  const totalDuration = scenes.reduce((sum, s) => sum + (s.duration || 5), 0);
   446→
   447→  // Auto-advance scenes
   448→  useEffect(() => {
   449→    if (!isPlaying || !currentScene) return;
   450→
   451→    // Play audio if available
   452→    if (audioRef.current && currentScene.audioPath) {
   453→      audioRef.current.src = currentScene.audioPath;
   454→      audioRef.current.play().catch(() => {});
   455→    }
   456→
   457→    timerRef.current = setTimeout(() => {
   458→      if (currentSceneIndex < scenes.length - 1) {
   459→        setCurrentSceneIndex(currentSceneIndex + 1);
   460→      } else {
   461→        setIsPlaying(false);
   462→        setCurrentSceneIndex(0);
   463→      }
   464→    }, (currentScene.duration || 5) * 1000);
   465→
   466→    return () => {
   467→      if (timerRef.current) clearTimeout(timerRef.current);
   468→    };
   469→  }, [currentSceneIndex, isPlaying, scenes.length]);
   470→
   471→  const togglePlay = () => {
   472→    if (isPlaying) {
   473→      setIsPlaying(false);
   474→      if (timerRef.current) clearTimeout(timerRef.current);
   475→      if (audioRef.current) audioRef.current.pause();
   476→    } else {
   477→      setIsPlaying(true);
   478→    }
   479→  };
   480→
   481→  const goToScene = (index: number) => {
   482→    if (timerRef.current) clearTimeout(timerRef.current);
   483→    if (audioRef.current) audioRef.current.pause();
   484→    setCurrentSceneIndex(index);
   485→    setIsPlaying(false);
   486→  };
   487→
   488→  const prevScene = () => {
   489→    if (currentSceneIndex > 0) goToScene(currentSceneIndex - 1);
   490→  };
   491→
   492→  const nextScene = () => {
   493→    if (currentSceneIndex < scenes.length - 1) goToScene(currentSceneIndex + 1);
   494→  };
   495→
   496→  if (!currentProject || scenes.length === 0) {
   497→    return (
   498→      <div className="text-center py-20">
   499→        <p className="text-muted-foreground">لم يتم العثور على الفيديو</p>
   500→        <Button variant="outline" onClick={() => setActiveView('create')} className="mt-4">
   501→          العودة للإنشاء
   502→        </Button>
   503→      </div>
   504→    );
   505→  }
   506→
   507→  return (
   508→    <div className="space-y-6">
   509→      {/* Back button & Title */}
   510→      <div className="flex items-center gap-4">
   511→        <Button variant="ghost" size="icon" onClick={() => setActiveView('gallery')} className="shrink-0">
   512→          <ArrowLeft className="w-5 h-5" />
   513→        </Button>
   514→        <div className="min-w-0">
   515→          <h2 className="text-xl sm:text-2xl font-bold truncate">{currentProject.title}</h2>
   516→          <p className="text-sm text-muted-foreground truncate">{currentProject.prompt}</p>
   517→        </div>
   518→      </div>
   519→
   520→      {/* Video Player */}
   521→      <Card className="overflow-hidden glow-purple">
   522→        <div className="relative video-container bg-black">
   523→          {currentScene?.imagePath ? (
   524→            <img
   525→              key={currentScene.id}
   526→              src={currentScene.imagePath}
   527→              alt={currentScene.narrationText || currentScene.description || 'مشهد فيديو'}
   528→              className="w-full h-full object-cover scene-enter"
   529→            />
   530→          ) : (
   531→            <div className="w-full h-full flex items-center justify-center shimmer" />
   532→          )}
   533→
   534→          {/* Scene info overlay */}
   535→          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 sm:p-6">
   536→            <p className="text-white text-sm sm:text-base leading-relaxed max-w-2xl">
   537→              {currentScene?.narrationText || currentScene?.description}
   538→            </p>
   539→            <div className="flex items-center gap-3 mt-2">
   540→              <Badge variant="secondary" className="bg-white/10 text-white border-white/20 text-xs">
   541→                مشهد {currentSceneIndex + 1} من {scenes.length}
   542→              </Badge>
   543→              {currentScene?.duration && (
   544→                <span className="text-white/60 text-xs flex items-center gap-1">
   545→                  <Clock className="w-3 h-3" />
   546→                  {currentScene.duration} ثانية
   547→                </span>
   548→              )}
   549→            </div>
   550→          </div>
   551→
   552→          {/* Play/Pause overlay button */}
   553→          <button
   554→            onClick={togglePlay}
   555→            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center hover:bg-white/20 transition-all duration-200 group"
   556→          >
   557→            {isPlaying ? (
   558→              <Pause className="w-7 h-7 sm:w-8 sm:h-8 text-white group-hover:scale-110 transition-transform" />
   559→            ) : (
   560→              <Play className="w-7 h-7 sm:w-8 sm:h-8 text-white group-hover:scale-110 transition-transform mr-[-2px]" />
   561→            )}
   562→          </button>
   563→        </div>
   564→
   565→        {/* Controls */}
   566→        <div className="p-3 sm:p-4 space-y-3">
   567→          {/* Progress bar */}
   568→          <div className="flex items-center gap-3">
   569→            <span className="text-xs text-muted-foreground w-12 text-center">
   570→              {currentSceneIndex + 1}/{scenes.length}
   571→            </span>
   572→            <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
   573→              <motion.div
   574→                className="h-full bg-gradient-to-r from-purple-500 to-emerald-500 rounded-full"
   575→                animate={{ width: `${((currentSceneIndex + 1) / scenes.length) * 100}%` }}
   576→                transition={{ duration: 0.3 }}
   577→              />
   578→            </div>
   579→            <span className="text-xs text-muted-foreground w-16 text-left">
   580→              {totalDuration} ثانية
   581→            </span>
   582→          </div>
   583→
   584→          {/* Buttons */}
   585→          <div className="flex items-center justify-center gap-2">
   586→            <Button variant="ghost" size="icon" onClick={prevScene} disabled={currentSceneIndex === 0}>
   587→              <ChevronRight className="w-5 h-5" />
   588→            </Button>
   589→            <Button variant="ghost" size="icon" onClick={togglePlay} className="w-12 h-12 rounded-full">
   590→              {isPlaying ? <Square className="w-5 h-5" /> : <Play className="w-5 h-5 mr-[-2px]" />}
   591→            </Button>
   592→            <Button variant="ghost" size="icon" onClick={nextScene} disabled={currentSceneIndex === scenes.length - 1}>
   593→              <ChevronLeft className="w-5 h-5" />
   594→            </Button>
   595→            <Button variant="ghost" size="icon" onClick={() => goToScene(0)} className="mr-2">
   596→              <RotateCcw className="w-4 h-4" />
   597→            </Button>
   598→          </div>
   599→        </div>
   600→      </Card>
   601→
   602→      {/* Scene Thumbnails */}
   603→      <div className="space-y-2">
   604→        <h3 className="text-sm font-medium text-muted-foreground">المشاهد</h3>
   605→        <div className="flex gap-2 overflow-x-auto pb-2">
   606→          {scenes.map((scene, i) => (
   607→            <button
   608→              key={scene.id}
   609→              onClick={() => goToScene(i)}
   610→              className={`shrink-0 w-28 sm:w-36 rounded-lg overflow-hidden border-2 transition-all duration-200 ${
   611→                i === currentSceneIndex
   612→                  ? 'border-purple-500 glow-purple scale-105'
   613→                  : 'border-transparent hover:border-border'
   614→              }`}
   615→            >
   616→              <div className="aspect-video bg-muted">
   617→                {scene.imagePath ? (
   618→                  <img src={scene.imagePath} alt={`مشهد ${i + 1}`} className="w-full h-full object-cover" />
   619→                ) : (
   620→                  <Skeleton className="w-full h-full" />
   621→                )}
   622→              </div>
   623→              <div className="p-1.5 bg-card">
   624→                <p className="text-[10px] text-muted-foreground truncate">مشهد {i + 1}</p>
   625→              </div>
   626→            </button>
   627→          ))}
   628→        </div>
   629→      </div>
   630→
   631→      {/* Audio element */}
   632→      <audio ref={audioRef} preload="auto" />
   633→
   634→      {/* Project Info */}
   635→      <Card className="glass">
   636→        <CardContent className="p-4">
   637→          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-center">
   638→            <div>
   639→              <p className="text-xs text-muted-foreground">النمط</p>
   640→              <p className="font-medium">{STYLES.find(s => s.id === currentProject.style)?.label || currentProject.style}</p>
   641→            </div>
   642→            <div>
   643→              <p className="text-xs text-muted-foreground">المشاهد</p>
   644→              <p className="font-medium">{scenes.length}</p>
   645→            </div>
   646→            <div>
   647→              <p className="text-xs text-muted-foreground">المدة</p>
   648→              <p className="font-medium">{totalDuration} ثانية</p>
   649→            </div>
   650→            <div>
   651→              <p className="text-xs text-muted-foreground">تاريخ الإنشاء</p>
   652→              <p className="font-medium text-xs">{new Date(currentProject.createdAt).toLocaleDateString('ar-EG')}</p>
   653→            </div>
   654→          </div>
   655→        </CardContent>
   656→      </Card>
   657→    </div>
   658→  );
   659→}
   660→
   661→/* ───────────────────── Video Gallery ───────────────────── */
   662→function VideoGallery() {
   663→  const { projects, setProjects, removeProject, setActiveView, setCurrentProject } = useVideoStore();
   664→
   665→  const fetchProjects = async () => {
   666→    try {
   667→      const res = await fetch('/api/videos');
   668→      if (res.ok) {
   669→        const data = await res.json();
   670→        setProjects(data.projects || []);
   671→      }
   672→    } catch {
   673→      // silently fail
   674→    }
   675→  };
   676→
   677→  useEffect(() => {
   678→    fetchProjects();
   679→  }, []);
   680→
   681→  const handleDelete = async (id: string) => {
   682→    try {
   683→      await fetch(`/api/videos/${id}`, { method: 'DELETE' });
   684→      removeProject(id);
   685→      toast.success('تم حذف الفيديو');
   686→    } catch {
   687→      toast.error('فشل في حذف الفيديو');
   688→    }
   689→  };
   690→
   691→  const handlePlay = async (project: VideoProject) => {
   692→    try {
   693→      const res = await fetch(`/api/videos/${project.id}`);
   694→      if (res.ok) {
   695→        const data = await res.json();
   696→        setCurrentProject(data);
   697→        setActiveView('player');
   698→      }
   699→    } catch {
   700→      toast.error('فشل في تحميل الفيديو');
   701→    }
   702→  };
   703→
   704→  if (projects.length === 0) {
   705→    return (
   706→      <div className="text-center py-20">
   707→        <div className="w-20 h-20 rounded-2xl bg-muted/50 flex items-center justify-center mx-auto mb-4">
   708→          <Film className="w-10 h-10 text-muted-foreground" />
   709→        </div>
   710→        <h3 className="text-xl font-semibold mb-2">لا توجد فيديوهات بعد</h3>
   711→        <p className="text-muted-foreground mb-6">ابدأ بإنشاء أول فيديو لك بالذكاء الاصطناعي</p>
   712→        <Button onClick={() => setActiveView('create')} className="gap-2">
   713→          <Wand2 className="w-4 h-4" />
   714→          إنشاء فيديو جديد
   715→        </Button>
   716→      </div>
   717→    );
   718→  }
   719→
   720→  return (
   721→    <div className="space-y-6">
   722→      <div className="flex items-center justify-between">
   723→        <h2 className="text-2xl font-bold">مكتبة الفيديوهات</h2>
   724→        <Button onClick={() => setActiveView('create')} className="gap-2 bg-gradient-to-r from-purple-600 to-emerald-600 hover:from-purple-500 hover:to-emerald-500 text-white">
   725→          <Wand2 className="w-4 h-4" />
   726→          <span className="hidden sm:inline">إنشاء جديد</span>
   727→        </Button>
   728→      </div>
   729→
   730→      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
   731→        {projects.map((project) => (
   732→          <ProjectCard
   733→            key={project.id}
   734→            project={project}
   735→            onPlay={() => handlePlay(project)}
   736→            onDelete={() => handleDelete(project.id)}
   737→          />
   738→        ))}
   739→      </div>
   740→    </div>
   741→  );
   742→}
   743→
   744→/* ───────────────────── Project Card ───────────────────── */
   745→function ProjectCard({
   746→  project,
   747→  compact = false,
   748→  onPlay,
   749→  onDelete,
   750→}: {
   751→  project: VideoProject;
   752→  compact?: boolean;
   753→  onPlay?: () => void;
   754→  onDelete?: () => void;
   755→}) {
   756→  const { setActiveView, setCurrentProject } = useVideoStore();
   757→
   758→  const handleClick = async () => {
   759→    if (onPlay) {
   760→      onPlay();
   761→    } else {
   762→      try {
   763→        const res = await fetch(`/api/videos/${project.id}`);
   764→        if (res.ok) {
   765→          const data = await res.json();
   766→          setCurrentProject(data);
   767→          setActiveView('player');
   768→        }
   769→      } catch {
   770→        toast.error('فشل في تحميل الفيديو');
   771→      }
   772→    }
   773→  };
   774→
   775→  const handleDeleteClick = (e: React.MouseEvent) => {
   776→    e.stopPropagation();
   777→    if (onDelete) onDelete();
   778→  };
   779→
   780→  const statusLabel = project.status === 'completed' ? 'مكتمل' : project.status === 'generating' ? 'قيد الإنشاء' : 'فشل';
   781→  const statusColor = project.status === 'completed' ? 'bg-emerald-500/20 text-emerald-400' : project.status === 'generating' ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400';
   782→
   783→  return (
   784→    <motion.div
   785→      whileHover={{ scale: 1.02 }}
   786→      whileTap={{ scale: 0.98 }}
   787→    >
   788→      <Card
   789→        className="cursor-pointer group overflow-hidden hover:border-purple-500/30 transition-all duration-300"
   790→        onClick={handleClick}
   791→      >
   792→        {/* Thumbnail */}
   793→        <div className="relative aspect-video bg-muted overflow-hidden">
   794→          {project.thumbnail ? (
   795→            <img src={project.thumbnail} alt={project.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
   796→          ) : (
   797→            <Skeleton className="w-full h-full" />
   798→          )}
   799→          {/* Overlay */}
   800→          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-300 flex items-center justify-center">
   801→            <div className="w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-white/30">
   802→              <Play className="w-5 h-5 text-white mr-[-2px]" />
   803→            </div>
   804→          </div>
   805→          {/* Status badge */}
   806→          <div className="absolute top-2 left-2">
   807→            <span className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${statusColor}`}>
   808→              {statusLabel}
   809→            </span>
   810→          </div>
   811→          {/* Scene count */}
   812→          <div className="absolute bottom-2 right-2">
   813→            <span className="text-[10px] px-2 py-0.5 rounded-full bg-black/60 text-white/80">
   814→              {project.sceneCount} مشاهد
   815→            </span>
   816→          </div>
   817→        </div>
   818→
   819→        {/* Info */}
   820→        <CardContent className={`p-3 ${compact ? 'p-2' : ''}`}>
   821→          <h3 className="font-semibold text-sm truncate">{project.title}</h3>
   822→          {!compact && (
   823→            <p className="text-xs text-muted-foreground truncate mt-1">{project.prompt}</p>
   824→          )}
   825→          <div className="flex items-center justify-between mt-2">
   826→            <span className="text-[10px] text-muted-foreground">
   827→              {new Date(project.createdAt).toLocaleDateString('ar-EG')}
   828→            </span>
   829→            <div className="flex items-center gap-1">
   830→              <Badge variant="outline" className="text-[10px] h-5 px-1.5">
   831→                {STYLES.find(s => s.id === project.style)?.label || project.style}
   832→              </Badge>
   833→              {onDelete && (
   834→                <Button
   835→                  variant="ghost"
   836→                  size="icon"
   837→                  className="w-7 h-7 text-muted-foreground hover:text-destructive"
   838→                  onClick={handleDeleteClick}
   839→                >
   840→                  <Trash2 className="w-3.5 h-3.5" />
   841→                </Button>
   842→              )}
   843→            </div>
   844→          </div>
   845→        </CardContent>
   846→      </Card>
   847→    </motion.div>
   848→  );
   849→}
   850→
   851→/* ───────────────────── Footer ───────────────────── */
   852→function Footer() {
   853→  return (
   854→    <footer className="glass border-t border-border/50 mt-auto">
   855→      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4">
   856→        <div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
   857→          <div className="flex items-center gap-2">
   858→            <div className="w-5 h-5 rounded bg-gradient-to-br from-purple-500 to-emerald-500 flex items-center justify-center">
   859→              <Clapperboard className="w-3 h-3 text-white" />
   860→            </div>
   861→            <span>مبدع الفيديو بالذكاء الاصطناعي</span>
   862→          </div>
   863→          <p>مدعوم بتقنيات الذكاء الاصطناعي المتقدمة</p>
   864→        </div>
   865→      </div>
   866→    </footer>
   867→  );
   868→}