// Video learning page with anti-download protection + in-video quiz

const VideoPage = ({ onNav }) => {
  const [playing, setPlaying] = React.useState(false);
  const [time, setTime] = React.useState(854); // 14:14
  const [quizOpen, setQuizOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const [answered, setAnswered] = React.useState(false);
  const [tab, setTab] = React.useState(0);
  const [noteDraft, setNoteDraft] = React.useState('');
  const [notes, setNotes] = React.useState([
    { t: '08:12', text: 'INNER JOIN chỉ giữ lại bản ghi khớp ở cả 2 bảng — nhớ cho bài thi.' },
    { t: '12:45', text: 'Khi có NULL ở cột join, LEFT JOIN vẫn giữ hàng trái.' }
  ]);
  const [qaDraft, setQaDraft] = React.useState('');
  const [qaList, setQaList] = React.useState([
    { u: 'Trần Hoàng A.', av: 'TA', time: '2 ngày trước', q: 'Thầy ơi, khi nào nên dùng RIGHT JOIN thay vì LEFT JOIN?', replies: [{ u: 'TS. Lê Thu Hằng', av: 'LH', teacher: true, time: '1 ngày trước', text: 'Về mặt logic hai loại join là tương đương (đổi thứ tự bảng). RIGHT JOIN ít dùng vì đa số code quen đọc từ trái sang phải.' }] },
    { u: 'Phạm Bảo N.', av: 'PN', time: '5 giờ trước', q: 'Mình JOIN 3 bảng mà chạy chậm, có cách tối ưu nào không ạ?', replies: [] }
  ]);
  const duration = 1330;
  const quizStyle = window.__TWEAKS__.quizStyle || 'center';

  const fmt = (s) => `${Math.floor(s/60).toString().padStart(2,'0')}:${(s%60).toString().padStart(2,'0')}`;

  return (
    <>
      <Topbar title="JOIN nhiều bảng trong SQL" breadcrumb={[ACTIVE_SUBJECT.title, 'Chương 3', 'Bài 4']}>
        <div className="chip chip-soft"><Icon name="shield" size={11} /> Video được bảo vệ</div>
        <button className="btn btn-ghost btn-sm" onClick={() => onNav('subject')}><Icon name="arrowLeft" size={13} /> Quay lại môn</button>
      </Topbar>
      <div className="page" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20 }}>
        <div>
          <div style={{ position: 'relative' }}>
            <div className="video-stage" onContextMenu={(e) => e.preventDefault()} style={{ userSelect: 'none' }}>
              {/* Video placeholder with protection indicator */}
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#f5f2ed' }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.5, letterSpacing: '0.15em', marginBottom: 10 }}>BÀI GIẢNG VIDEO · DRM PROTECTED</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 34, marginBottom: 8 }}>JOIN nhiều bảng trong SQL</div>
                  <div style={{ fontSize: 13, opacity: 0.6 }}>TS. Lê Thu Hằng · Khoa CNTT</div>
                </div>
              </div>
              {/* Anti-download watermark */}
              <div style={{ position: 'absolute', top: 16, right: 16, fontSize: 10, fontFamily: 'var(--mono)', color: 'rgba(255,255,255,0.35)', letterSpacing: '0.1em' }}>
                {STUDENT.id} · {STUDENT.name.toUpperCase()}
              </div>
              <div style={{ position: 'absolute', bottom: 70, left: 16, fontSize: 10, fontFamily: 'var(--mono)', color: 'rgba(255,255,255,0.22)', letterSpacing: '0.1em' }}>
                CĐ CÔNG THƯƠNG · {new Date().toLocaleDateString('vi-VN')}
              </div>

              {/* Play button overlay */}
              {!playing && !quizOpen && (
                <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', cursor: 'pointer' }} onClick={() => { setPlaying(true); setTimeout(() => setQuizOpen(true), 800); }}>
                  <div style={{ width: 72, height: 72, borderRadius: 999, background: 'rgba(255,255,255,0.95)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 32px rgba(0,0,0,0.4)' }}>
                    <Icon name="play" size={28} style={{ color: 'var(--ink)', marginLeft: 4 }} />
                  </div>
                </div>
              )}

              {/* In-video quiz overlay — FULL SCREEN */}
              {quizOpen && quizStyle === 'center' && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(10,10,10,0.88)', backdropFilter: 'blur(8px)', display: 'grid', placeItems: 'center', padding: 40, zIndex: 1000 }} className="fadein">
                  <div style={{ background: 'var(--card)', borderRadius: 16, padding: 36, maxWidth: 720, width: '100%', color: 'var(--ink)', boxShadow: '0 40px 80px rgba(0,0,0,0.5)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                      <span className="chip chip-accent"><Icon name="alert" size={11} /> Câu hỏi kiểm tra</span>
                      <span style={{ fontSize: 11.5, color: 'var(--muted)' }}>Video tạm dừng · 14:14</span>
                    </div>
                    <div className="serif" style={{ fontSize: 22, lineHeight: 1.35, marginBottom: 20 }}>{VIDEO_QUIZ.question}</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
                      {VIDEO_QUIZ.options.map(o => {
                        const cls = answered ? (o.correct ? 'correct' : selected === o.id ? 'wrong' : '') : selected === o.id ? 'selected' : '';
                        return (
                          <div key={o.id} className={`opt-row ${cls}`} onClick={() => !answered && setSelected(o.id)}>
                            <div className="opt-radio">{o.id.toUpperCase()}</div>
                            <div style={{ flex: 1, fontSize: 14 }}>{o.text}</div>
                            {answered && o.correct && <Icon name="check" size={16} style={{ color: 'var(--green)' }}/>}
                          </div>
                        );
                      })}
                    </div>
                    {answered && (
                      <div style={{ padding: 12, background: 'var(--bg-2)', borderRadius: 8, fontSize: 13, color: 'var(--ink-2)', marginBottom: 16, borderLeft: '3px solid var(--accent)' }}>
                        <div style={{ fontWeight: 600, marginBottom: 4 }}>Giải thích</div>
                        {VIDEO_QUIZ.explanation}
                      </div>
                    )}
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 11.5, color: 'var(--muted)' }}>Bắt buộc trả lời để tiếp tục xem</span>
                      {!answered ? (
                        <button className="btn btn-primary" disabled={!selected} onClick={() => setAnswered(true)} style={{ opacity: selected ? 1 : 0.4 }}>Kiểm tra đáp án</button>
                      ) : (
                        <button className="btn btn-accent" onClick={() => { setQuizOpen(false); setAnswered(false); setSelected(null); setTime(860); }}>Tiếp tục xem <Icon name="play" size={12} /></button>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {quizOpen && quizStyle === 'overlay' && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(10,10,10,0.75)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 40, zIndex: 1000 }} className="fadein">
                  <div style={{ background: 'var(--card)', borderRadius: 16, padding: 28, width: '100%', maxWidth: 960, boxShadow: '0 40px 80px rgba(0,0,0,0.5)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                      <span className="chip chip-accent"><Icon name="alert" size={11} /> Câu hỏi kiểm tra</span>
                      <span style={{ fontSize: 11.5, color: 'var(--muted)' }}>Video tạm dừng · 14:14</span>
                    </div>
                    <div className="serif" style={{ fontSize: 22, lineHeight: 1.35, marginBottom: 18 }}>{VIDEO_QUIZ.question}</div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
                      {VIDEO_QUIZ.options.map(o => {
                        const cls = answered ? (o.correct ? 'correct' : selected === o.id ? 'wrong' : '') : selected === o.id ? 'selected' : '';
                        return (
                          <div key={o.id} className={`opt-row ${cls}`} onClick={() => !answered && setSelected(o.id)}>
                            <div className="opt-radio">{o.id.toUpperCase()}</div>
                            <div style={{ flex: 1, fontSize: 14 }}>{o.text}</div>
                            {answered && o.correct && <Icon name="check" size={16} style={{ color: 'var(--green)' }}/>}
                          </div>
                        );
                      })}
                    </div>
                    {answered && (
                      <div style={{ padding: 12, background: 'var(--bg-2)', borderRadius: 8, fontSize: 13, color: 'var(--ink-2)', marginBottom: 14, borderLeft: '3px solid var(--accent)' }}>
                        <div style={{ fontWeight: 600, marginBottom: 4 }}>Giải thích</div>
                        {VIDEO_QUIZ.explanation}
                      </div>
                    )}
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 11.5, color: 'var(--muted)' }}>Bắt buộc trả lời để tiếp tục xem</span>
                      {!answered ? (
                        <button className="btn btn-primary" disabled={!selected} onClick={() => setAnswered(true)} style={{ opacity: selected ? 1 : 0.4 }}>Kiểm tra đáp án</button>
                      ) : (
                        <button className="btn btn-accent" onClick={() => { setQuizOpen(false); setAnswered(false); setSelected(null); setTime(860); }}>Tiếp tục xem <Icon name="play" size={12} /></button>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {/* Controls */}
              {!quizOpen && (
                <div className="video-controls">
                  <button onClick={() => setPlaying(!playing)} style={{ color: '#fff' }}>
                    <Icon name={playing ? 'pause' : 'play'} size={18} />
                  </button>
                  <div className="mono" style={{ fontSize: 11, opacity: 0.9 }}>{fmt(time)} / {fmt(duration)}</div>
                  <div style={{ flex: 1, height: 4, background: 'rgba(255,255,255,0.2)', borderRadius: 999, position: 'relative' }}>
                    <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${(time/duration)*100}%`, background: 'var(--accent)', borderRadius: 999 }}/>
                    <div style={{ position: 'absolute', left: `${(860/duration)*100}%`, top: -3, width: 2, height: 10, background: '#fff', opacity: 0.7 }} title="Quiz point"/>
                  </div>
                  <Icon name="volume" size={16} />
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.8 }}>1x</div>
                  <Icon name="fullscreen" size={16} />
                </div>
              )}
            </div>
          </div>

          {/* Under video info */}
          <div style={{ padding: '20px 0' }}>
            <div className="serif" style={{ fontSize: 26, marginBottom: 6 }}>JOIN nhiều bảng trong SQL</div>
            <div style={{ display: 'flex', gap: 14, fontSize: 12.5, color: 'var(--muted)', marginBottom: 16 }}>
              <span><Icon name="clock" size={12} /> 22:10</span>
              <span><Icon name="user" size={12} /> TS. Lê Thu Hằng</span>
              <span><Icon name="calendar" size={12} /> Đăng ngày 14/03/2026</span>
              <span style={{ color: 'var(--accent)' }}><Icon name="alert" size={12} /> 1 câu hỏi kiểm tra trong bài</span>
            </div>
            <div style={{ display: 'flex', gap: 8, borderBottom: '1px solid var(--line)', marginBottom: 18 }}>
              {[
                { l: 'Mô tả', c: null },
                { l: 'Tài liệu', c: 4 },
                { l: 'Ghi chú', c: notes.length },
                { l: 'Hỏi đáp', c: qaList.length }
              ].map((t, i) => (
                <button key={i} onClick={() => setTab(i)} className="btn btn-sm" style={{ borderRadius: 0, borderBottom: i === tab ? '2px solid var(--ink)' : '2px solid transparent', padding: '10px 16px', fontWeight: i === tab ? 600 : 400, color: i === tab ? 'var(--ink)' : 'var(--muted)' }}>
                  {t.l}{t.c != null && <span className="mono" style={{ marginLeft: 6, fontSize: 10.5, opacity: 0.7 }}>{t.c}</span>}
                </button>
              ))}
            </div>

            {tab === 0 && (
              <div className="fadein" style={{ maxWidth: 760 }}>
                <p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.75, marginTop: 0 }}>
                  Trong bài học này, chúng ta sẽ tìm hiểu cách sử dụng các loại JOIN trong SQL để kết hợp dữ liệu từ nhiều bảng khác nhau: INNER JOIN, LEFT JOIN, RIGHT JOIN và FULL OUTER JOIN. Chúng ta cũng sẽ thực hành với bộ dữ liệu thực tế gồm bảng SinhVien, Lop và KhoaHoc.
                </p>
                <div style={{ marginTop: 16 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 17, marginBottom: 10 }}>Nội dung chính</div>
                  <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13.5, lineHeight: 1.9, color: 'var(--ink-2)' }}>
                    <li>Khái niệm JOIN và khi nào cần dùng</li>
                    <li>Cú pháp INNER / LEFT / RIGHT / FULL OUTER JOIN</li>
                    <li>Sử dụng ON và USING để chỉ định điều kiện</li>
                    <li>JOIN nhiều hơn 2 bảng và tối ưu hiệu năng</li>
                  </ul>
                </div>
                <div style={{ marginTop: 18, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {['SQL', 'Cơ sở dữ liệu', 'JOIN', 'Truy vấn'].map(tg => (
                    <span key={tg} className="chip chip-soft">#{tg}</span>
                  ))}
                </div>
              </div>
            )}

            {tab === 1 && (
              <div className="fadein" style={{ maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { n: 'Slide bài giảng — JOIN trong SQL.pdf', sz: '2.4 MB', t: 'PDF', ic: 'file' },
                  { n: 'Bộ dữ liệu mẫu SinhVien.sql', sz: '18 KB', t: 'SQL', ic: 'db' },
                  { n: 'Bài tập thực hành buổi 4.docx', sz: '340 KB', t: 'DOCX', ic: 'file' },
                  { n: 'Cheatsheet JOIN types.png', sz: '1.1 MB', t: 'Hình ảnh', ic: 'file' }
                ].map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', border: '1px solid var(--line)', borderRadius: 10, background: 'var(--card)' }}>
                    <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--bg-2)', display: 'grid', placeItems: 'center' }}><Icon name={f.ic} size={16} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 500 }}>{f.n}</div>
                      <div style={{ fontSize: 11, color: 'var(--muted)' }} className="mono">{f.t} · {f.sz}</div>
                    </div>
                    <button className="btn btn-ghost btn-sm"><Icon name="download" size={13} /> Tải</button>
                  </div>
                ))}
              </div>
            )}

            {tab === 2 && (
              <div className="fadein" style={{ maxWidth: 760 }}>
                <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
                  <input value={noteDraft} onChange={e => setNoteDraft(e.target.value)} placeholder="Viết ghi chú tại thời điểm hiện tại của video..." style={{ flex: 1, padding: '10px 14px', border: '1px solid var(--line-2)', borderRadius: 8, outline: 'none', background: 'var(--card)' }} />
                  <button className="btn btn-primary btn-sm" disabled={!noteDraft.trim()} onClick={() => { if (!noteDraft.trim()) return; setNotes([{ t: fmt(time), text: noteDraft.trim() }, ...notes]); setNoteDraft(''); }} style={{ opacity: noteDraft.trim() ? 1 : 0.5 }}>
                    <Icon name="plus" size={13} /> Thêm @ {fmt(time)}
                  </button>
                </div>
                {notes.length === 0 && <div style={{ padding: 24, textAlign: 'center', color: 'var(--muted)', fontSize: 13 }}>Chưa có ghi chú nào</div>}
                {notes.map((n, i) => (
                  <div key={i} style={{ display: 'flex', gap: 14, padding: '14px 0', borderBottom: i < notes.length - 1 ? '1px solid var(--line)' : 'none' }}>
                    <button onClick={() => setTime(n.t.split(':').reduce((a, b) => +a * 60 + +b))} className="mono" style={{ fontSize: 11, color: 'var(--accent)', background: 'var(--accent-soft)', padding: '4px 8px', borderRadius: 6, fontWeight: 600, flexShrink: 0, alignSelf: 'flex-start' }}>{n.t}</button>
                    <div style={{ flex: 1, fontSize: 13.5, lineHeight: 1.6 }}>{n.text}</div>
                    <button onClick={() => setNotes(notes.filter((_, j) => j !== i))} className="btn btn-ghost btn-sm" style={{ padding: 6, color: 'var(--muted)' }}><Icon name="trash" size={12} /></button>
                  </div>
                ))}
              </div>
            )}

            {tab === 3 && (
              <div className="fadein" style={{ maxWidth: 760 }}>
                <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 10, marginBottom: 18 }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'grid', placeItems: 'center', fontWeight: 600, fontSize: 12, flexShrink: 0 }}>{STUDENT.avatar}</div>
                    <textarea value={qaDraft} onChange={e => setQaDraft(e.target.value)} placeholder="Đặt câu hỏi cho giảng viên hoặc các bạn cùng lớp..." style={{ flex: 1, padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 8, outline: 'none', background: 'var(--card)', minHeight: 64, resize: 'vertical', fontFamily: 'inherit' }} />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
                    <button className="btn btn-primary btn-sm" disabled={!qaDraft.trim()} onClick={() => { if (!qaDraft.trim()) return; setQaList([{ u: STUDENT.name, av: STUDENT.avatar, time: 'vừa xong', q: qaDraft.trim(), replies: [] }, ...qaList]); setQaDraft(''); }} style={{ opacity: qaDraft.trim() ? 1 : 0.5 }}>
                      <Icon name="send" size={12} /> Gửi câu hỏi
                    </button>
                  </div>
                </div>
                {qaList.map((q, i) => (
                  <div key={i} style={{ paddingBottom: 20, marginBottom: 20, borderBottom: i < qaList.length - 1 ? '1px solid var(--line)' : 'none' }}>
                    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                      <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--bg-2)', display: 'grid', placeItems: 'center', fontWeight: 600, fontSize: 11, flexShrink: 0 }}>{q.av}</div>
                      <div style={{ flex: 1 }}>
                        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
                          <span style={{ fontSize: 13, fontWeight: 600 }}>{q.u}</span>
                          <span style={{ fontSize: 11, color: 'var(--muted)' }}>· {q.time}</span>
                        </div>
                        <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{q.q}</div>
                        <div style={{ display: 'flex', gap: 12, marginTop: 8, fontSize: 11.5, color: 'var(--muted)' }}>
                          <button>👍 Hữu ích</button>
                          <button>Trả lời</button>
                        </div>
                      </div>
                    </div>
                    {q.replies.map((r, j) => (
                      <div key={j} style={{ marginTop: 12, marginLeft: 44, padding: 12, background: r.teacher ? 'var(--accent-soft)' : 'var(--bg-2)', borderRadius: 8, display: 'flex', gap: 10 }}>
                        <div style={{ width: 28, height: 28, borderRadius: 999, background: r.teacher ? 'var(--accent)' : 'var(--card)', color: r.teacher ? '#fff' : 'var(--ink)', display: 'grid', placeItems: 'center', fontWeight: 600, fontSize: 10, flexShrink: 0 }}>{r.av}</div>
                        <div style={{ flex: 1 }}>
                          <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 3 }}>
                            <span style={{ fontSize: 12.5, fontWeight: 600 }}>{r.u}</span>
                            {r.teacher && <span className="chip chip-accent" style={{ padding: '1px 6px', fontSize: 9.5 }}>Giảng viên</span>}
                            <span style={{ fontSize: 11, color: 'var(--muted)' }}>· {r.time}</span>
                          </div>
                          <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>{r.text}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Lesson list sidebar */}
        <div>
          <div className="card" style={{ padding: 18, marginBottom: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
              <div className="serif" style={{ fontSize: 18 }}>Chương 3 · SQL cơ bản</div>
              <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>4/6</span>
            </div>
            <div className="progress-track" style={{ marginBottom: 14 }}><div className="progress-fill accent" style={{ width: '66%' }}/></div>
            {LESSONS.map((l, i) => (
              <div key={l.id} style={{ display: 'flex', gap: 10, padding: '10px 0', borderBottom: i < LESSONS.length - 1 ? '1px solid var(--line)' : 'none', cursor: 'pointer', background: l.current ? 'var(--accent-soft)' : 'transparent', margin: '0 -8px', padding: '10px 8px', borderRadius: l.current ? 6 : 0 }}>
                <div style={{ width: 24, height: 24, borderRadius: 999, background: l.done ? 'var(--green)' : l.current ? 'var(--accent)' : 'var(--bg-2)', color: l.done || l.current ? '#fff' : 'var(--muted)', display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 10, fontWeight: 600 }}>
                  {l.done ? <Icon name="check" size={11} /> : l.current ? <Icon name="play" size={10} /> : i + 1}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: l.current ? 600 : 500, color: l.current ? 'var(--accent-ink)' : 'var(--ink-2)' }}>{l.title}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2 }}>{l.duration}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="card" style={{ padding: 16, background: 'var(--bg-2)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <Icon name="shield" size={14} style={{ color: 'var(--accent)' }} />
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>Video được bảo vệ</div>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.55 }}>
              Video đã áp dụng DRM và watermark cá nhân. Hành vi tải xuống, ghi lại màn hình hoặc chia sẻ có thể dẫn đến đình chỉ tài khoản.
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { VideoPage });