// ============================================================
//  USER GUIDE PAGE
// ============================================================
window.GuidePage = function({ user, onNavigate }) {
  const [activeSection, setActiveSection] = React.useState('overview');
  const isAdmin = user?.role === 'admin';

  const sections = [
    { id:'overview', icon:'fa-home', label:'Tổng quan hệ thống' },
    { id:'login',    icon:'fa-sign-in-alt', label:'Đăng nhập' },
    { id:'domain',   icon:'fa-globe', label:'Quản lý Domain' },
    { id:'checklist',icon:'fa-tasks', label:'Checklist SOP' },
    { id:'keyword',  icon:'fa-key', label:'Keyword Tracking' },
    { id:'comment',  icon:'fa-comments', label:'Comments & Ghi chú' },
    ...(isAdmin ? [
      { id:'admin',    icon:'fa-shield-alt', label:'Quản trị (Admin)' },
      { id:'progress', icon:'fa-chart-bar', label:'Theo dõi tiến độ' },
      { id:'logs',     icon:'fa-history', label:'Activity Logs' },
    ] : []),
    { id:'sop',      icon:'fa-book', label:'SOP 14 giai đoạn' },
  ];

  const Step = ({ n, title, children }) => (
    <div className="guide-step">
      <div className="gs-num">{n}</div>
      <div className="gs-body">
        <div className="gs-title">{title}</div>
        <div className="gs-content">{children}</div>
      </div>
    </div>
  );

  const Tip = ({ type='info', children }) => {
    const map = { info:{cls:'gt-info',ico:'fa-info-circle'}, success:{cls:'gt-success',ico:'fa-check-circle'}, warning:{cls:'gt-warning',ico:'fa-exclamation-triangle'}, danger:{cls:'gt-danger',ico:'fa-times-circle'} };
    const {cls,ico} = map[type]||map.info;
    return <div className={`guide-tip ${cls}`}><i className={`fas ${ico}`}/><span>{children}</span></div>;
  };

  const Screenshot = ({ label, children }) => (
    <div className="guide-ss">
      <div className="guide-ss-label">{label}</div>
      {children}
    </div>
  );

  const MockUI = ({ children, style={} }) => (
    <div style={{ background:'var(--bg)', border:'1px solid var(--border)', borderRadius:10, padding:'14px 16px', fontSize:'.82rem', ...style }}>
      {children}
    </div>
  );

  const renderSection = () => {
    switch(activeSection) {
      case 'overview': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-home"/>Tổng quan hệ thống SEO SOP</h2>
          <p className="guide-p">Hệ thống <strong>SEO SOP Management</strong> là công cụ quản lý quy trình SEO tiêu chuẩn gồm <strong>14 giai đoạn</strong> từ tiếp nhận keyword đến theo dõi ranking và push next-rank. Hệ thống hỗ trợ làm việc theo team với hai vai trò rõ ràng.</p>

          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(230px,1fr))',gap:12,margin:'20px 0'}}>
            {[
              {ico:'fa-users',col:'var(--primary)',title:'2 Vai trò',desc:'Admin quản trị toàn bộ. Member thực thi checklist.'},
              {ico:'fa-tasks',col:'var(--green)',title:'14 Giai đoạn SOP',desc:'Checklist đầy đủ từ Phase 0 đến Phase 13.'},
              {ico:'fa-globe',col:'var(--cyan)',title:'Domain-based',desc:'Mỗi domain có checklist riêng, theo dõi tiến độ độc lập.'},
              {ico:'fa-history',col:'var(--yellow)',title:'Action Log',desc:'Ghi lại toàn bộ hoạt động của team theo thời gian thực.'},
            ].map(f=>(
              <div key={f.title} style={{padding:'14px 16px',background:'var(--bg)',borderRadius:10,border:'1px solid var(--border)'}}>
                <div style={{width:38,height:38,borderRadius:9,background:`${f.col}18`,display:'flex',alignItems:'center',justifyContent:'center',marginBottom:10}}>
                  <i className={`fas ${f.ico}`} style={{color:f.col,fontSize:'1rem'}}/>
                </div>
                <div style={{fontWeight:700,fontSize:'.875rem',marginBottom:4}}>{f.title}</div>
                <div style={{fontSize:'.79rem',color:'var(--t2)',lineHeight:1.5}}>{f.desc}</div>
              </div>
            ))}
          </div>

          <h3 className="guide-h3">🗺️ Luồng sử dụng cơ bản</h3>
          <div style={{display:'flex',flexWrap:'wrap',gap:6,alignItems:'center',margin:'12px 0'}}>
            {['Đăng nhập','→','Vào Domains','→','Tạo/Chọn Domain','→','Mở Checklist','→','Tick các bước SOP','→','Thêm Comments','→','Track Keywords','→','Báo cáo Admin'].map((s,i)=>(
              s==='→' ? <span key={i} style={{color:'var(--t3)'}}>→</span>
              : <span key={i} style={{padding:'4px 10px',background:'var(--primary)',color:'#fff',borderRadius:6,fontSize:'.78rem',fontWeight:600}}>{s}</span>
            ))}
          </div>

          <Tip type="info">Mỗi domain có một bộ checklist 14 giai đoạn riêng biệt. Tiến độ được tính theo % số item đã tick hoàn thành.</Tip>
          <Tip type="success">Tài khoản demo: <strong>admin / admin123</strong> (Admin) hoặc <strong>member1 / member123</strong> (Member)</Tip>
        </div>
      );

      case 'login': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-sign-in-alt"/>Đăng nhập hệ thống</h2>
          <Step n={1} title="Truy cập trang đăng nhập">
            <p>Mở trình duyệt và truy cập URL của hệ thống. Trang đăng nhập sẽ hiện ra tự động.</p>
          </Step>
          <Step n={2} title="Nhập thông tin đăng nhập">
            <p>Nhập <strong>Tên đăng nhập</strong> và <strong>Mật khẩu</strong> được cấp bởi Admin.</p>
            <MockUI style={{marginTop:10}}>
              <div style={{marginBottom:10}}>
                <div style={{fontSize:'.76rem',color:'var(--t3)',marginBottom:4}}>👤 Tên đăng nhập</div>
                <div style={{background:'var(--card)',border:'1px solid var(--primary)',borderRadius:7,padding:'8px 12px',fontFamily:'monospace'}}>admin</div>
              </div>
              <div>
                <div style={{fontSize:'.76rem',color:'var(--t3)',marginBottom:4}}>🔒 Mật khẩu</div>
                <div style={{background:'var(--card)',border:'1px solid var(--border)',borderRadius:7,padding:'8px 12px',fontFamily:'monospace'}}>••••••••</div>
              </div>
            </MockUI>
            <Tip type="info">Nhấn vào tài khoản demo để tự động điền thông tin và test nhanh hệ thống.</Tip>
          </Step>
          <Step n={3} title="Chọn vai trò phù hợp">
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:8}}>
              <MockUI>
                <div style={{fontWeight:700,color:'var(--primary)',marginBottom:6}}>⚡ Admin</div>
                <ul style={{paddingLeft:16,fontSize:'.8rem',color:'var(--t2)',lineHeight:1.8}}>
                  <li>Quản lý user</li>
                  <li>Xem tiến độ team</li>
                  <li>Xem activity logs</li>
                  <li>Assign domain cho member</li>
                  <li>Thêm comment phê duyệt</li>
                </ul>
              </MockUI>
              <MockUI>
                <div style={{fontWeight:700,color:'var(--green)',marginBottom:6}}>👤 Member</div>
                <ul style={{paddingLeft:16,fontSize:'.8rem',color:'var(--t2)',lineHeight:1.8}}>
                  <li>Xem domain được assign</li>
                  <li>Tick checklist SOP</li>
                  <li>Track keyword</li>
                  <li>Thêm ghi chú/comment</li>
                  <li>Cập nhật thông tin domain</li>
                </ul>
              </MockUI>
            </div>
          </Step>
        </div>
      );

      case 'domain': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-globe"/>Quản lý Domain</h2>
          <p className="guide-p">Mỗi domain là một project SEO riêng biệt với checklist 14 giai đoạn đầy đủ.</p>
          <Step n={1} title="Tạo domain mới">
            <p>Nhấn nút <strong>+ Thêm Domain</strong> ở góc phải trang Quản lý Domain.</p>
            <MockUI style={{marginTop:10}}>
              <div style={{display:'flex',justifyContent:'flex-end'}}>
                <span style={{padding:'7px 14px',background:'var(--primary)',color:'#fff',borderRadius:8,fontSize:'.8rem',fontWeight:600,cursor:'pointer'}}>
                  <i className="fas fa-plus" style={{marginRight:5}}/>Thêm Domain
                </span>
              </div>
            </MockUI>
          </Step>
          <Step n={2} title="Điền thông tin domain">
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,margin:'10px 0'}}>
              {[['Tên Domain *','go88.vn'],['Loại Site','Money Site / Blog / PBN...'],['Thị trường','Việt Nam, Thái Lan...'],['Ngôn ngữ','Tiếng Việt'],['Hosting','Tên server/hosting'],['Theme WP','Tên theme WordPress'],['Target Keywords','go88, casino online...'],['Giao cho','Chọn member phụ trách']].map(([l,p])=>(
                <div key={l}>
                  <div style={{fontSize:'.73rem',color:'var(--t3)',marginBottom:2}}>{l}</div>
                  <div style={{background:'var(--card)',border:'1px solid var(--border)',borderRadius:6,padding:'6px 10px',fontSize:'.8rem',color:'var(--t3)'}}>{p}</div>
                </div>
              ))}
            </div>
            <Tip>Trường có dấu * là bắt buộc. Các trường còn lại có thể cập nhật sau.</Tip>
          </Step>
          <Step n={3} title="Xem và quản lý danh sách domain">
            <p>Trang Domains hiển thị tất cả domain dạng card với thông tin:</p>
            <ul style={{paddingLeft:20,fontSize:'.84rem',color:'var(--t2)',lineHeight:2,marginTop:8}}>
              <li><strong>Thanh tiến độ</strong> — % hoàn thành checklist SOP</li>
              <li><strong>Badge trạng thái</strong> — Planning / Active / Paused / Completed</li>
              <li><strong>Giai đoạn hiện tại</strong> — đang ở phase nào</li>
              <li><strong>Assigned member</strong> — người phụ trách</li>
            </ul>
            <Tip type="info">Member chỉ thấy domain được assign cho mình. Admin thấy tất cả domain.</Tip>
          </Step>
          <Step n={4} title="Lọc và tìm kiếm domain">
            <p>Sử dụng thanh tìm kiếm và bộ lọc trạng thái để nhanh chóng tìm domain cần xem.</p>
          </Step>
        </div>
      );

      case 'checklist': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-tasks"/>Thực hiện Checklist SOP</h2>
          <p className="guide-p">Checklist SOP là phần cốt lõi của hệ thống. Mỗi domain có 14 giai đoạn với hàng trăm bước kiểm tra chi tiết.</p>
          <Step n={1} title="Mở checklist của một domain">
            <p>Từ trang Domains, nhấn nút <strong>Checklist</strong> trên domain card, hoặc click vào domain rồi chọn tab Checklist SOP.</p>
          </Step>
          <Step n={2} title="Chọn giai đoạn cần làm">
            <p>Panel bên trái hiển thị 14 giai đoạn với % tiến độ từng giai đoạn. Click để chuyển sang giai đoạn muốn xem.</p>
            <MockUI style={{marginTop:10}}>
              <div style={{display:'flex',flexDirection:'column',gap:6}}>
                {SOP_PHASES.slice(0,4).map(p=>(
                  <div key={p.id} style={{display:'flex',alignItems:'center',gap:10,padding:'7px 10px',borderRadius:8,background:'var(--card)',border:'1px solid var(--border)'}}>
                    <div style={{width:26,height:26,borderRadius:7,background:`${p.color}20`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'.75rem',fontWeight:700,color:p.color,flexShrink:0}}>{p.id}</div>
                    <div style={{flex:1,fontSize:'.79rem',fontWeight:600}}>{p.name}</div>
                    <span style={{fontSize:'.73rem',color:'var(--t3)',fontWeight:700}}>0%</span>
                  </div>
                ))}
                <div style={{textAlign:'center',fontSize:'.75rem',color:'var(--t3)'}}>... 14 giai đoạn</div>
              </div>
            </MockUI>
          </Step>
          <Step n={3} title="Tick hoàn thành từng bước">
            <p>Click vào <strong>ô vuông bên trái</strong> để đánh dấu bước đó hoàn thành (màu xanh). Click lại để bỏ tick.</p>
            <MockUI style={{marginTop:10}}>
              {[
                {done:true,label:'Domain chính đã xác định'},
                {done:true,label:'Hosting / server đã xác định'},
                {done:false,label:'Source clone sử dụng'},
                {done:false,label:'Permalink đã cấu hình dạng /%postname%/'},
              ].map((it,i)=>(
                <div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'8px 4px',borderBottom:'1px solid var(--border)'}}>
                  <div style={{width:20,height:20,borderRadius:5,border:`2px solid ${it.done?'var(--green)':'var(--border)'}`,background:it.done?'var(--green)':'transparent',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                    {it.done && <i className="fas fa-check" style={{color:'#fff',fontSize:'.6rem'}}/>}
                  </div>
                  <span style={{fontSize:'.82rem',textDecoration:it.done?'line-through':'none',color:it.done?'var(--t3)':'var(--t1)'}}>{it.label}</span>
                </div>
              ))}
            </MockUI>
          </Step>
          <Step n={4} title="Nhập thông tin bổ sung">
            <p>Một số bước có ô nhập liệu (link tracking, tên hosting, target keyword...). Nhập xong nhấn biểu tượng 💾 để lưu và tự động đánh dấu hoàn thành.</p>
          </Step>
          <Step n={5} title="Chuyển trạng thái bước">
            <p>Nhấn <strong>⋮</strong> ở cuối mỗi bước để chọn trạng thái chi tiết hơn:</p>
            <div style={{display:'flex',flexWrap:'wrap',gap:8,marginTop:8}}>
              {[['fa-check-circle','var(--green)','Hoàn thành'],['fa-clock','var(--yellow)','Đang làm'],['fa-ban','var(--t3)','Không áp dụng'],['fa-circle','var(--border)','Reset']].map(([ic,cl,lb])=>(
                <div key={lb} style={{display:'flex',alignItems:'center',gap:6,padding:'5px 10px',border:'1px solid var(--border)',borderRadius:7,fontSize:'.8rem'}}>
                  <i className={`fas ${ic}`} style={{color:cl}}/>{lb}
                </div>
              ))}
            </div>
          </Step>
          <Tip type="success">Tiến độ tổng thể tự động cập nhật khi bạn tick checklist. Admin có thể thấy tiến độ này trong trang Tiến độ Team.</Tip>
        </div>
      );

      case 'keyword': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-key"/>Keyword Tracking</h2>
          <p className="guide-p">Theo dõi rank, GSC data, và trạng thái từng keyword theo thời gian.</p>
          <Step n={1} title="Thêm keyword mới">
            <p>Vào trang <strong>Keyword Tracking</strong>, nhấn <strong>+ Thêm Keyword</strong>. Điền các thông tin:</p>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,margin:'10px 0'}}>
              {[['Keyword *','Từ khoá chính cần SEO'],['Domain *','Chọn domain liên quan'],['Intent','Brand/Commercial/Info/Nav/Semantic'],['Priority','Core/Support/Traffic...'],['Target URL','URL trang nhắm đến'],['Rank hiện tại','Vị trí Google hiện tại'],['GSC Impressions','Số lần hiển thị từ GSC'],['GSC Clicks','Số click từ GSC']].map(([l,p])=>(
                <div key={l}>
                  <div style={{fontSize:'.73rem',color:'var(--t3)',marginBottom:2}}>{l}</div>
                  <div style={{background:'var(--card)',border:'1px solid var(--border)',borderRadius:6,padding:'5px 9px',fontSize:'.79rem',color:'var(--t3)'}}>{p}</div>
                </div>
              ))}
            </div>
          </Step>
          <Step n={2} title="Cập nhật rank định kỳ">
            <p>Mỗi tuần/tháng, click biểu tượng ✏️ trên từng keyword để cập nhật rank mới nhất từ Google Search Console hoặc rank checker.</p>
            <Tip type="warning">Nên cập nhật rank ít nhất 1 lần/tuần để theo dõi xu hướng chính xác.</Tip>
          </Step>
          <Step n={3} title="Đọc tín hiệu và hành động">
            <p>Cuối trang Keyword có bảng <strong>Đọc tín hiệu Ranking & Action</strong> — hướng dẫn hành động tiếp theo dựa theo tín hiệu từ Google:</p>
            <div style={{display:'flex',flexDirection:'column',gap:6,marginTop:10}}>
              {[['Có impression, không click','→ Tối ưu title/meta CTR'],['Top 20 khó vào top 10','→ Tăng authority, backlink chất lượng'],['Top 10 khó vào top 3','→ Brand signal, unique data, UX']].map(([s,a])=>(
                <div key={s} style={{display:'flex',gap:10,padding:'8px 12px',background:'var(--bg)',borderRadius:8,fontSize:'.82rem'}}>
                  <span style={{color:'var(--yellow)',fontWeight:600,flexShrink:0}}>🔍</span>
                  <span style={{color:'var(--t2)'}}><strong>{s}</strong>: {a}</span>
                </div>
              ))}
            </div>
          </Step>
        </div>
      );

      case 'comment': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-comments"/>Comments & Ghi chú</h2>
          <p className="guide-p">Hệ thống comments cho phép giao tiếp giữa Admin và Member ngay trong từng giai đoạn SOP.</p>
          <Step n={1} title="Thêm comment vào giai đoạn">
            <p>Trong mỗi giai đoạn của Checklist SOP, cuộn xuống dưới phần checklist sẽ thấy form <strong>Ghi chú / Comment</strong>.</p>
            <MockUI style={{marginTop:10}}>
              <div style={{display:'flex',gap:8,marginBottom:8}}>
                <div style={{width:130,padding:'6px 10px',border:'1px solid var(--border)',borderRadius:7,fontSize:'.78rem',background:'var(--card)',color:'var(--t2)'}}>📝 Ghi chú</div>
                <div style={{flex:1,height:60,border:'1px solid var(--border)',borderRadius:7,background:'var(--card)',padding:'8px 10px',fontSize:'.79rem',color:'var(--t3)'}}>Nhập ghi chú...</div>
              </div>
              <div style={{textAlign:'right'}}>
                <span style={{padding:'6px 14px',background:'var(--primary)',color:'#fff',borderRadius:7,fontSize:'.78rem',fontWeight:600}}>✈ Gửi</span>
              </div>
            </MockUI>
          </Step>
          <Step n={2} title="Chọn loại comment phù hợp">
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginTop:8}}>
              {[['📝 Ghi chú','Ghi chú thông thường, chia sẻ thông tin','b-info'],['✏️ Yêu cầu sửa','Admin yêu cầu member sửa lại bước nào đó','b-warning'],['⚠️ Cảnh báo','Cảnh báo về vấn đề cần chú ý ngay','b-danger'],['✅ Duyệt OK','Admin duyệt và xác nhận giai đoạn OK','b-success']].map(([t,d,cls])=>(
                <div key={t} style={{padding:'10px 12px',background:'var(--bg)',borderRadius:8,border:'1px solid var(--border)'}}>
                  <div style={{fontWeight:700,fontSize:'.82rem',marginBottom:4}}>{t}</div>
                  <div style={{fontSize:'.78rem',color:'var(--t2)',lineHeight:1.5}}>{d}</div>
                </div>
              ))}
            </div>
          </Step>
          <Step n={3} title="Xem tất cả comments của domain">
            <p>Trong Domain Detail, chọn tab <strong>Comments</strong> để xem tất cả comments của domain được sắp xếp theo thứ tự mới nhất.</p>
          </Step>
          <Tip type="info">Comments được phân loại theo giai đoạn — bạn có thể xem comment theo từng phase hoặc xem tất cả trong tab Comments.</Tip>
        </div>
      );

      case 'admin': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-shield-alt"/>Quản trị Admin</h2>
          <p className="guide-p">Admin có quyền truy cập đầy đủ vào tất cả tính năng quản trị.</p>
          <Step n={1} title="Tạo tài khoản member mới">
            <p>Vào <strong>Quản lý User</strong> → <strong>+ Thêm User</strong>. Điền họ tên, username, mật khẩu, chọn role Member.</p>
            <Tip type="warning">Admin không nên chia sẻ mật khẩu công khai. Khuyến khích member đổi mật khẩu sau lần đăng nhập đầu.</Tip>
          </Step>
          <Step n={2} title="Phân công domain cho member">
            <p>Khi tạo domain mới, chọn <strong>Assign cho</strong> → chọn member phụ trách. Hoặc vào sửa domain để thay đổi người phụ trách.</p>
          </Step>
          <Step n={3} title="Review và comment trên checklist">
            <p>Admin có thể vào bất kỳ domain nào để:</p>
            <ul style={{paddingLeft:20,fontSize:'.84rem',color:'var(--t2)',lineHeight:2,marginTop:6}}>
              <li>Xem từng bước checklist member đã thực hiện</li>
              <li>Thêm comment <strong>Yêu cầu sửa</strong> hoặc <strong>Duyệt OK</strong></li>
              <li>Tick lại hoặc thay đổi trạng thái bước nếu cần</li>
            </ul>
          </Step>
          <Step n={4} title="Khoá tài khoản member">
            <p>Trong trang Quản lý User, nhấn biểu tượng 🚫 để khoá tài khoản member (không xoá dữ liệu, chỉ ngăn đăng nhập).</p>
            <Tip type="danger">Không thể khoá tài khoản của chính mình.</Tip>
          </Step>
        </div>
      );

      case 'progress': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-chart-bar"/>Theo dõi Tiến độ Team</h2>
          <p className="guide-p">Trang Tiến độ Team chỉ dành cho Admin, cho phép xem tổng quan tiến độ của tất cả member.</p>
          <Step n={1} title="Xem tổng quan từng member">
            <p>Phần đầu trang hiển thị card tóm tắt của từng Member: tổng domain, domain đang active, và % tiến độ trung bình. Click vào card để lọc domain theo member đó.</p>
          </Step>
          <Step n={2} title="Xem bảng chi tiết domain">
            <p>Bảng bên dưới hiển thị từng domain với:</p>
            <ul style={{paddingLeft:20,fontSize:'.84rem',color:'var(--t2)',lineHeight:2,marginTop:6}}>
              <li>Thanh tiến độ tổng thể</li>
              <li>Trạng thái từng Phase 0-7 (✅ = hoàn thành, % = đang làm, ○ = chưa bắt đầu)</li>
              <li>Trạng thái domain (Planning/Active/Paused/Completed)</li>
            </ul>
          </Step>
          <Step n={3} title="Drill down vào domain cụ thể">
            <p>Nhấn biểu tượng 👁 để mở Domain Detail và xem chi tiết checklist từng bước.</p>
          </Step>
        </div>
      );

      case 'logs': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-history"/>Activity Logs</h2>
          <p className="guide-p">Hệ thống ghi lại toàn bộ hoạt động của tất cả thành viên. Chỉ Admin mới xem được.</p>
          <Step n={1} title="Xem danh sách logs">
            <p>Vào menu <strong>Activity Logs</strong>. Logs được hiển thị theo thứ tự mới nhất, gồm: loại hành động, người thực hiện, domain liên quan, giai đoạn SOP, và thời gian.</p>
          </Step>
          <Step n={2} title="Lọc logs">
            <p>Sử dụng các bộ lọc:</p>
            <ul style={{paddingLeft:20,fontSize:'.84rem',color:'var(--t2)',lineHeight:2,marginTop:6}}>
              <li><strong>Tìm kiếm</strong> — tìm theo nội dung, tên domain, tên user</li>
              <li><strong>Loại hành động</strong> — đăng nhập, tạo domain, update checklist...</li>
              <li><strong>Thành viên</strong> — lọc theo người thực hiện</li>
            </ul>
          </Step>
          <Tip type="info">Logs được tự động ghi khi member thực hiện các hành động quan trọng. Không thể xoá logs.</Tip>
        </div>
      );

      case 'sop': return (
        <div>
          <h2 className="guide-h2"><i className="fas fa-book"/>Quy trình SEO Chuẩn — 14 Giai đoạn</h2>
          <p className="guide-p">Dưới đây là tóm tắt nhanh 14 giai đoạn SOP. Để xem checklist chi tiết, vào Domain Detail → Checklist SOP.</p>
          <div style={{display:'flex',flexDirection:'column',gap:10,marginTop:12}}>
            {SOP_PHASES.map(p=>(
              <div key={p.id} style={{padding:'12px 16px',background:'var(--bg)',borderRadius:10,border:'1px solid var(--border)',borderLeft:`4px solid ${p.color}`}}>
                <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:6}}>
                  <div style={{width:32,height:32,borderRadius:8,background:`${p.color}20`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                    <i className={`fas ${p.icon}`} style={{color:p.color}}/>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:700,fontSize:'.875rem',color:p.color}}>Phase {p.id}: {p.name}</div>
                    <div style={{fontSize:'.78rem',color:'var(--t3)',marginTop:2}}>{p.desc}</div>
                  </div>
                  <span style={{fontSize:'.75rem',color:'var(--t3)',fontWeight:600,flexShrink:0}}>
                    {p.sections.reduce((a,s)=>a+s.items.length,0)} bước
                  </span>
                </div>
                <div style={{display:'flex',flexWrap:'wrap',gap:5}}>
                  {p.sections.map(s=>(
                    <span key={s.title} style={{fontSize:'.73rem',padding:'2px 8px',background:`${p.color}15`,color:p.color,borderRadius:5,fontWeight:500}}>{s.title}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <Tip type="success">Để xem checklist đầy đủ và thực hiện từng bước, vào <strong>Domains → Chọn domain → Checklist SOP</strong>.</Tip>
        </div>
      );

      default: return <EmptyState icon="fa-question" title="Không tìm thấy nội dung"/>;
    }
  };

  return (
    <div className="fade-in">
      <div className="ph">
        <div>
          <div className="ph-title"><i className="fas fa-book" style={{marginRight:8,color:'var(--primary)'}}/>Hướng dẫn sử dụng</div>
          <div className="ph-sub">Step-by-step guide cho từng tính năng</div>
        </div>
        <button className="btn btn-primary btn-sm" onClick={()=>onNavigate('domains')}>
          <i className="fas fa-play"/>Bắt đầu ngay
        </button>
      </div>

      <div className="two-col" style={{alignItems:'flex-start'}}>
        {/* NAV */}
        <div className="card" style={{position:'sticky',top:80}}>
          <div style={{fontWeight:700,fontSize:'.85rem',marginBottom:12,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'.05em'}}>Nội dung</div>
          <nav style={{display:'flex',flexDirection:'column',gap:2}}>
            {sections.map(s=>(
              <a key={s.id} href="#" onClick={e=>{e.preventDefault();setActiveSection(s.id);}}
                style={{display:'flex',alignItems:'center',gap:9,padding:'8px 10px',borderRadius:8,fontSize:'.84rem',fontWeight: activeSection===s.id?700:500,background:activeSection===s.id?'var(--bg)':'transparent',color:activeSection===s.id?'var(--primary)':'var(--t2)',transition:'.15s'}}>
                <i className={`fas ${s.icon}`} style={{width:16,textAlign:'center',color:activeSection===s.id?'var(--primary)':'var(--t3)'}}/>{s.label}
              </a>
            ))}
          </nav>
        </div>

        {/* CONTENT */}
        <div className="card" style={{minWidth:0}}>
          {renderSection()}
        </div>
      </div>
    </div>
  );
};