{!analysis ? (

Turn YouTube Videos into
Viral Short Clips

Paste any YouTube link and our AI will find the best segments for TikTok, Instagram Reels, and YouTube Shorts in seconds.

setUrl(e.target.value)} required />

Video Context (Optional)

setDescription(e.target.value)}
                  />
                </div>

<button
                  type="submit"
                  disabled={isLoading}
                  className={`w-full py-5 rounded-2xl font-bold text-xl transition-all flex items-center justify-center gap-3 ${
                    isLoading 
                    ? 'bg-slate-800 cursor-not-allowed text-slate-500' 
                    : 'bg-gradient-to-r from-indigo-600 to-pink-600 hover:from-indigo-500 hover:to-pink-500 text-white shadow-lg shadow-indigo-500/20'
                  }`}
                >
                  {isLoading ? (
                    <>
                      <div className="w-6 h-6 border-4 border-slate-600 border-t-indigo-400 rounded-full animate-spin"></div>
                      Analyzing Video...
                    </>
                  ) : (
                    <>
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                      </svg>
                      Generate Viral Clips
                    </>
                  )}
                </button>
              </form>

{error && (
                <div className="mt-6 p-4 bg-red-500/10 border border-red-500/20 text-red-400 rounded-xl text-sm">
                  {error}
                </div>
              )}

{/* Stats/Social Proof */}
              <div className="mt-20 grid grid-cols-3 gap-8 border-t border-white/5 pt-12">
                <div>
                  <div className="text-3xl font-bold text-white mb-1">98%</div>
                  <div className="text-xs font-bold text-slate-500 uppercase tracking-widest">Accuracy</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-white mb-1">10X</div>
                  <div className="text-xs font-bold text-slate-500 uppercase tracking-widest">Faster Edits</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-white mb-1">2.4M</div>
                  <div className="text-xs font-bold text-slate-500 uppercase tracking-widest">Clips Made</div>
                </div>
              </div>
            </div>
          ) : (
            <div className="space-y-12">
              {/* Results Header */}
              <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
                <div>
                  <button 
                    onClick={reset}
                    className="text-indigo-400 hover:text-indigo-300 text-sm font-bold flex items-center gap-2 mb-4 group"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 transform group-hover:-translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                    </svg>
                    New Analysis
                  </button>
                  <h2 className="text-3xl font-black text-white">{analysis.videoTitle}</h2>
                  <p className="text-slate-400 mt-2 max-w-2xl">{analysis.summary}</p>
                </div>
                <div className="bg-indigo-500/10 border border-indigo-500/20 px-4 py-3 rounded-xl">
                  <span className="text-xs font-bold text-indigo-400 uppercase tracking-widest block mb-1">Target Audience</span>
                  <p className="text-sm text-slate-200 font-medium">{analysis.targetAudience}</p>
                </div>
              </div>

{/* Clips Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {analysis.clips.map((clip) => (
                  <ViralClipCard key={clip.id} clip={clip} />
                ))}
              </div>

{/* Bottom Actions */}
              <div className="glass-morphism p-8 rounded-3xl flex flex-col md:flex-row items-center justify-between gap-6 border border-white/10">
                <div className="flex items-center gap-6">
                  <div className="p-4 bg-green-500/10 rounded-2xl">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <div>
                    <h3 className="text-xl font-bold">Analysis Complete</h3>
                    <p className="text-slate-400">We found {analysis.clips.length} segments with high viral potential.</p>
                  </div>
                </div>
                <div className="flex gap-4 w-full md:w-auto">
                  <button className="flex-1 md:flex-none px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-2xl transition-colors">
                    Save to Library
                  </button>
                  <button className="flex-1 md:flex-none px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-2xl shadow-lg shadow-indigo-600/20 transition-all">
                    Export All Clips
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </main>

{/* Footer */}
      <footer className="border-t border-white/5 py-12 px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
          <div className="flex items-center gap-2 opacity-50">
            <div className="w-6 h-6 bg-slate-400 rounded flex items-center justify-center text-slate-900 font-bold text-sm">
              V
            </div>
            <h1 className="text-sm font-bold tracking-tight">ViralClip AI</h1>
          </div>
          <p className="text-sm text-slate-600">© 2024 ViralClip AI. All rights reserved.</p>
          <div className="flex gap-6 text-sm text-slate-600">
            <a href="#" className="hover:text-indigo-400 transition-colors">Privacy</a>
            <a href="#" className="hover:text-indigo-400 transition-colors">Terms</a>
            <a href="#" className="hover:text-indigo-400 transition-colors">API</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;
</body></html>

Turn YouTube Videos into Viral Short Clips

Turn YouTube Videos into
Viral Short Clips