My website has successfully launched!

setSidebarOpen(false)}/> ); // ── VIDEO CARD ───────────────────────────────────────────── const VideoCard=({v})=>(

openVideo(v)}>

{v.dur}

{e.stopPropagation();openChannel(v);}}/>

openVideo(v)}>{v.title}

{e.stopPropagation();openChannel(v);}}>{v.channel}

{v.views} views · {v.time}

); // ── HOME ─────────────────────────────────────────────────── const HomePage=()=>{ const chips=["All","Tech","Travel","Food","Fitness","Music"]; return(

{chips.map(c=>)}

{filtered.length===0 ?

🔍

No results for "{searchQ}"

Try different keywords

{filtered.map(v=>)}

}

); }; // ── PLAYER ───────────────────────────────────────────────── const VideoPlayer=({v})=>(

setProgress(+e.target.value)}/>

{String(Math.floor(progress/100*720/60)).padStart(2,"0")}:{String(Math.floor(progress/100*720%60)).padStart(2,"0")} / {v.dur} setVolume(+e.target.value)}/>

); // ══════════════════════════════════════════════════════════ // ACTION CONTROL PANEL // ══════════════════════════════════════════════════════════ const ActionPanel=({v})=>{ const vid=v.id; const isLiked=!!liked[vid]; const isDisliked=!!disliked[vid]; const isSaved=!!savedVideos[vid]; const isReported=!!reported[vid]; const totalVotes=v.likes+v.dislikes+(isLiked?1:0)-(isDisliked?0:0); const likeRatio=Math.round((v.likes+(isLiked?1:0))/totalVotes*100); return(

{/* LEFT: Like / Dislike + ratio bar */}

{/* Like half */} {/* Dislike half */}

{/* Like ratio bar */}

{likeRatio}% positive {fmt(totalVotes)} votes

{/* CENTER: Share / Save */}

{/* Share */} {/* Save to Playlist */} {/* Download (static) */}

{/* RIGHT: Report */}

); }; // ── SHARE MODAL ──────────────────────────────────────────── const ShareModal=({v})=>(

{if(e.target===e.currentTarget)setShareModal(false);}}>

Share this video

Share "{v?.title?.slice(0,40)}…"

https://streamx.app/watch?v={v?.id}

{[["💬","WhatsApp"],["✈️","Telegram"],["🐦","Twitter / X"],["📘","Facebook"],["💼","LinkedIn"],["📱","SMS"],["📧","Email"],["🔗","Embed"]].map(([ic,name])=>(

{setShareModal(false);showToast(`Shared on ${name}`,"↗");}}> {ic}{name}

))}

); // ── PLAYLIST MODAL ───────────────────────────────────────── const PlaylistModal=({v})=>{ if(!v) return null; const vid=v.id; const chosen=new Set(savedPlaylists[vid]||[]); return(

{if(e.target===e.currentTarget)setPlaylistModal(false);}}>

Save to playlist

Choose one or more playlists

setNewPLName(e.target.value)} onKeyDown={e=>e.key==="Enter"&&addNewPlaylist()}/>

{playlists.map(name=>(

togglePlaylist(vid,name)}>

{["⏱","⭐","💻","✈️","💪"][playlists.indexOf(name)%5]}

{name}

{chosen.has(name)&&"✓"}

))}

); }; // ── REPORT MODAL ─────────────────────────────────────────── const REPORT_REASONS=["Sexual content","Violent or repulsive content","Hateful or abusive content","Harassment or bullying","Harmful or dangerous acts","Misinformation","Spam or misleading","Child safety concern"]; const ReportModal=({v})=>(

{if(e.target===e.currentTarget)setReportModal(false);}}>

Report video

Help us understand why this content is inappropriate

{REPORT_REASONS.map(r=>(

setReportReason(r)}> {reportReason===r?"🔴":"⚪"}{r}

))}

); // ── WATCH PAGE ───────────────────────────────────────────── const WatchPage=()=>{ if(!activeVideo) return null; const v=activeVideo; const vid=v.id; return(

{/* Modals */}

{/* LEFT COLUMN */}

{v.title}

{/* Channel row + Subscribe */}

openChannel(v)}/>

openChannel(v)}>{v.channel}

{v.subs} subscribers

{/* ★ ACTION CONTROL PANEL ★ */} {/* Description */}

{v.views} views · {v.time}

{v.title} — a deep dive for everyone interested in {v.cat}. Like, save, and subscribe for more from {v.channel}!

#Trending{" "}#{v.cat}{" "}#StreamX

{/* Comments */}

💬 {comments.length} Comments

setNewComment(e.target.value)}
                    onKeyDown={e=>e.key==="Enter"&&e.ctrlKey&&postComment()}/>
                  <div className="vt-comment-acts-row">
                    <button className="vt-ibtn" onClick={()=>setNewComment("")}>Cancel</button>
                    <button className={`vt-act-btn${newComment.trim()?" active":""}`} onClick={postComment}>Comment</button>
                  </div>
                </div>
              </div>
              {comments.map(c=>(
                <div key={c.id} className="vt-comment-card">
                  <img src={c.avatar} alt=""/>
                  <div style={{flex:1}}>
                    <span className="vt-cuser">{c.user}</span>
                    <span className="vt-ctime">{c.time}</span>
                    <p className="vt-ctext">{c.text}</p>
                    <div className="vt-cact">
                      <button className="vt-ibtn"><Ic.Like/> {c.likes}</button>
                      <button className="vt-ibtn"><Ic.Dislike/></button>
                      <button className="vt-ibtn">Reply</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* RIGHT COLUMN */}
          <div>
            <div className="vt-up-next-title">Up Next</div>
            {VIDEOS.filter(x=>x.id!==v.id).map(r=>(
              <div key={r.id} className="vt-mini-card" onClick={()=>openVideo(r)}>
                <div className="vt-mini-thumb">
                  <img src={r.thumb} alt="" loading="lazy"/>
                  <span className="vt-duration">{r.dur}</span>
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div className="vt-mini-title">{r.title}</div>
                  <div className="vt-mini-ch">{r.channel}</div>
                  <div className="vt-mini-meta">{r.views} views{savedVideos[r.id]?" · 🔖":""}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

// ── TRENDING ───────────────────────────────────────────────
  const TrendingPage=()=>{
    const tabs=["Now","Music","Gaming","News","Sports","Tech"];
    const list=[...VIDEOS].sort((a,b)=>b.likes-a.likes);
    return(
      <div className="vt-content">
        <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:20}}>
          <span style={{fontSize:28}}>🔥</span>
          <h2 style={{fontSize:24,fontWeight:900}}>Trending</h2>
          <span style={{background:T.danger,color:"#fff",fontSize:11,padding:"3px 10px",borderRadius:20,fontWeight:700}}>LIVE</span>
        </div>
        <div className="vt-chips" style={{marginBottom:28}}>
          {tabs.map(t=><button key={t} className={`vt-chip${trendTab===t?" active":""}`} onClick={()=>setTrendTab(t)}>{t}</button>)}
        </div>
        {list.map((v,i)=>(
          <div key={v.id} className="vt-trend-row" onClick={()=>openVideo(v)}>
            <div className={`vt-rank${i<3?" top":""}`}>#{i+1}</div>
            <img src={v.thumb} alt="" style={{width:200,height:112,objectFit:"cover",borderRadius:12,flexShrink:0}} loading="lazy"/>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:16,fontWeight:800,color:T.text,marginBottom:8,lineHeight:1.3}}>{v.title}</div>
              <div style={{color:T.accent,fontWeight:600,marginBottom:4,cursor:"pointer"}} onClick={e=>{e.stopPropagation();openChannel(v);}}>{v.channel}</div>
              <div style={{color:T.muted,fontSize:13,marginBottom:10}}>{v.views} views · {v.time}</div>
              <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
                <span className="vt-tag" style={{color:T.accentHi}}>👍 {fmt(v.likes)}</span>
                <span className="vt-tag">💬 {fmt(v.comments)}</span>
                <span className="vt-tag">⏱ {v.dur}</span>
                {savedVideos[v.id]&&<span className="vt-tag" style={{color:T.gold}}>🔖 Saved</span>}
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  };

// ── CHANNEL ────────────────────────────────────────────────
  const ChannelPage=()=>{
    const ch=activeChannel||VIDEOS[0];
    const chVids=VIDEOS.filter((_,i)=>i%2===0);
    const isSubbed=subscribed[ch.id];
    const tabs=["Home","Videos","Playlists","Community","About"];
    return(
      <div className="vt-content">
        <div className="vt-ch-banner">
          <img className="vt-big-avatar" src={ch.avatar} alt=""/>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:28,fontWeight:900,marginBottom:6}}>{ch.channel}</div>
            <div style={{color:"rgba(255,255,255,.7)",fontSize:14,marginBottom:4}}>{ch.subs} subscribers · {chVids.length}+ videos</div>
            <div style={{color:"rgba(255,255,255,.5)",fontSize:13}}>Creating amazing content since 2019. New uploads every week! 🎬</div>
          </div>
          <button className={`vt-sub-btn ${isSubbed?"on":"off"}`}
            style={!isSubbed?{background:"#fff",color:T.accentDim}:{}}
            onClick={()=>{const n=!isSubbed;setSubscribed(s=>({...s,[ch.id]:n}));showToast(n?`Subscribed to ${ch.channel}`:"Unsubscribed",n?"🔔":"🔕");}}>
            {isSubbed?<><Ic.Bell/> Subscribed</>:"Subscribe"}
          </button>
        </div>
        <div className="vt-ch-tabs">
          {tabs.map(t=><button key={t} className={`vt-ch-tab${activeTab===t?" active":""}`} onClick={()=>setActiveTab(t)}>{t}</button>)}
        </div>
        <div className="vt-grid">{chVids.map(v=><VideoCard key={v.id} v={v}/>)}</div>
      </div>
    );
  };

// ── SIGNUP ─────────────────────────────────────────────────
  const SignupPage=()=>(
    <div className="vt-auth-wrap">
      <div className="vt-auth-box">
        <div className="vt-auth-logo">
          <div className="icon">▶</div>
          <h2>StreamX</h2>
          <p>{signedUp?"You're all set!":"Join millions of viewers today"}</p>
        </div>
        {signedUp?(
          <div className="vt-success">
            <div className="big-e">🎉</div>
            <h3>Welcome, {signupData.name}!</h3>
            <p>Your account is ready. Start watching!</p>
            <button className="vt-submit-btn" onClick={()=>nav("home")}>Go to Home →</button>
          </div>
        ):(
          <>
            <input className="vt-input" placeholder="Full Name" value={signupData.name} onChange={e=>setSignupData(s=>({...s,name:e.target.value}))}/>
            <input className="vt-input" type="email" placeholder="Email Address" value={signupData.email} onChange={e=>setSignupData(s=>({...s,email:e.target.value}))}/>
            <input className="vt-input" type="password" placeholder="Password" value={signupData.password} onChange={e=>setSignupData(s=>({...s,password:e.target.value}))}/>
            <button className="vt-submit-btn" onClick={()=>{if(signupData.name&&signupData.email)setSignedUp(true);}}>Create Account</button>
            <div style={{textAlign:"center",marginTop:12,fontSize:13,color:T.muted}}>
              Already have an account? <span className="vt-link">Sign in</span>
            </div>
            <div className="vt-divider">or continue with</div>
            <div className="vt-social-btns">
              <button className="vt-social-btn">🔵 Google</button>
              <button className="vt-social-btn">📘 Facebook</button>
              <button className="vt-social-btn">🍎 Apple</button>
            </div>
          </>
        )}
      </div>
    </div>
  );

// ── BOTTOM NAV ─────────────────────────────────────────────
  const BottomNav=()=>(
    <nav className="vt-bottom-nav">
      {[["home","🏠","Home"],["trending","🔥","Trending"],["channel","📺","Channel"],["signup","👤","Me"]].map(([pg,ic,l])=>(
        <button key={pg} className={`vt-bnav-item${page===pg?" active":""}`} onClick={()=>nav(pg)}>
          <span className="vt-bnav-icon">{ic}</span>{l}
        </button>
      ))}
    </nav>
  );

// ── GLOBAL TOAST ───────────────────────────────────────────
  const Toast=()=>(
    <div className={`acp-toast${toast.show?" show":""}`}>
      <span style={{fontSize:16}}>{toast.icon}</span>{toast.msg}
    </div>
  );

// ── RENDER ─────────────────────────────────────────────────
  return(
    <div className="vt-app">
      <NavBar/>
      <Sidebar/>
      <main className="vt-main">
        {page==="home"     && <HomePage/>}
        {page==="watch"    && <WatchPage/>}
        {page==="trending" && <TrendingPage/>}
        {page==="channel"  && <ChannelPage/>}
        {page==="signup"   && <SignupPage/>}
      </main>
      <BottomNav/>
      <Toast/>
    </div>
  );
}