/* Hand Hub — Marketing site sections.
   Voice: automation-first (NOT video-first). Rebrand: HAND HUB. Vietnamese. */

const { useState: useS } = React;

// ── Lucide-style inline icons ───────────────────────────────────────
const Icon = {
  zap: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 L3 14 H12 L11 22 L21 10 H12 Z"/></svg>,
  hand: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11 V5 a1.5 1.5 0 0 1 3 0 V11"/><path d="M12 11 V4 a1.5 1.5 0 0 1 3 0 V11"/><path d="M15 11 V5.5 a1.5 1.5 0 0 1 3 0 V14"/><path d="M18 14 v-3 a1.5 1.5 0 0 1 3 0 v6 a6 6 0 0 1-6 6 h-3 a6 6 0 0 1-5-3 L4 14 a1.6 1.6 0 0 1 2.5-2 L9 14"/></svg>,
  cursor: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3 L5 19 L9.5 15 L12 21 L14.5 20 L12 14 L18 14 Z"/></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 L20 5 V11 C20 16 16 20 12 22 C8 20 4 16 4 11 V5 Z"/><path d="M9 12 L11 14 L15 10"/></svg>,
  list: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M8 6 H21 M8 12 H21 M8 18 H21"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg>,
  dl: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 V15"/><path d="M7 10 L12 15 L17 10"/><path d="M4 19 H20"/></svg>,
  cpu: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="6" width="12" height="12" rx="1"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2 V5 M15 2 V5 M9 19 V22 M15 19 V22 M2 9 H5 M2 15 H5 M19 9 H22 M19 15 H22"/></svg>,
  win: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 5.5 L11 4.4 V11.5 H3 Z M11 13 V20.6 L3 19.5 V13 Z M12 4.2 L21 3 V11.5 H12 Z M12 13 H21 V21.5 L12 20.3 Z"/></svg>,
  minimize: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21 H16"/><path d="M9 13 H15" strokeWidth="2.5"/></svg>,
  apple: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.4 12.7 C16.4 9.7 18.8 8.3 18.9 8.3 C17.5 6.3 15.4 6 14.6 6 C12.8 5.8 11.1 7.1 10.2 7.1 C9.3 7.1 7.9 6 6.4 6 C4.5 6 2.7 7.1 1.8 8.9 C-0.1 12.5 1.3 17.7 3.1 20.6 C4 22 5 23.6 6.4 23.5 C7.7 23.5 8.2 22.7 9.8 22.7 C11.4 22.7 11.8 23.5 13.2 23.5 C14.6 23.5 15.5 22.1 16.3 20.7 C17.3 19.1 17.7 17.5 17.7 17.4 C17.7 17.4 16.4 16.6 16.4 12.7 Z M13.7 4.2 C14.4 3.3 14.9 2.1 14.8 0.9 C13.8 0.9 12.5 1.6 11.7 2.5 C11.1 3.2 10.5 4.5 10.6 5.7 C11.7 5.8 12.9 5.1 13.7 4.2 Z"/></svg>,
};

// ── Topbar ─────────────────────────────────────────────────────────
function Topbar() {
  return (
    <header className="topbar" data-screen-label="Topbar">
      <div className="container topbar-inner">
        <a href="#top" className="topbar-brand">
          <img src="assets/mark.svg" alt="Hand Hub"/>
          <div className="wm-text">
            <span className="a">Automation</span>
            <span className="b">H A N D · H U B</span>
          </div>
        </a>
        <nav className="nav">
          <a href="#sim">Cách hoạt động</a>
          <a href="#features">Tính năng</a>
          <a href="#download">Tải về</a>
          <a href="#pricing">Bảng giá</a>
          <a href="#faq">Câu hỏi</a>
        </nav>
        <div className="row gap-2">
          <a href="https://zalo.me/0375185313" target="_blank" rel="noopener"
             onClick={() => window.HH && window.HH.track("zalo_click", { from: "topbar" })}
             className="btn btn-ghost" style={{height:36, padding:"0 14px", fontSize:13, display:"inline-flex", alignItems:"center", gap:6}}>
            <svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true"><path d="M24 5C12.4 5 3 13.3 3 23.5c0 5.7 2.9 10.7 7.5 14L9 43.6c-.2.8.6 1.5 1.4 1.1l6.8-3.5c2.1.5 4.4.8 6.8.8 11.6 0 21-8.3 21-18.5S35.6 5 24 5zm-9 21a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm9 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm9 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
            Zalo
          </a>
          <a href="#download" className="btn btn-primary" style={{height:36}}>Tải miễn phí <span className="arrow">▸</span></a>
        </div>
      </div>
    </header>
  );
}

// ── Hero ───────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero container" id="top" data-screen-label="01 Hero">
      <div className="hero-grid">
        <div>
          <span className="eyebrow-pill">v2.0 · Hand Hub · Open Beta</span>
          <h1>
            Để robot thay <br/>
            <span className="hand-write"><span className="accent">đôi tay</span></span> của bạn.
          </h1>
          <p className="lede">
            Hand Hub click — gõ — upload — chờ — tải, thay tay bạn, trên
            <em> Veo3, Grok</em>.
            <b style={{color:"var(--ink)",fontWeight:600}}> Thu nhỏ cửa sổ là robot vẫn chạy ngầm</b> —
            bạn vẫn lướt web, mở Figma, dựng phim, làm việc khác như bình thường.
            Một đôi tay làm nền, đôi tay thật của bạn làm việc khác.
          </p>
          <div className="hero-cta">
            <a href="#download" className="btn btn-primary btn-xl">
              <span style={{width:18,height:18,display:"inline-grid",placeItems:"center"}}>{Icon.dl}</span>
              Tải về Windows
            </a>
            <a href="#sim" className="btn btn-ghost btn-xl">Xem robot vận hành ▸</a>
          </div>
          <div className="hero-meta">
            <div className="meta-item"><span className="check">✓</span> 5 lượt dùng thử miễn phí</div>
            <div className="meta-item"><span className="check">✓</span> Chạy ngầm — không chiếm máy</div>
            <div className="meta-item"><span className="check">✓</span> Khoá theo phần cứng</div>
          </div>
        </div>

        <div className="orbit-wrap">
          <div className="orbit-stage"></div>
          <div className="orbit-ring r2"></div>
          <div className="orbit-ring r1"></div>
          <div className="orbit-ring r3"></div>
          <div className="orbit-spin spin-1"><div className="orbit-planet"><div className="planet-chip"><span className="planet-dot veo3"></span> VEO 3</div></div></div>
          <div className="orbit-spin spin-2"><div className="orbit-planet"><div className="planet-chip"><span className="planet-dot grok"></span> GROK</div></div></div>
          <div className="orbit-spin spin-3"><div className="orbit-planet"><div className="planet-chip coming"><span className="planet-dot kling"></span> KLING <span className="planet-coming-tag">SOON</span></div></div></div>
          <div className="orbit-core">
            <div className="core-inner">
              <div style={{textAlign:"center"}}>
                <div style={{width:54,height:54,margin:"0 auto",borderRadius:"50%",background:"var(--violet)",display:"grid",placeItems:"center",color:"#fff",boxShadow:"0 8px 24px var(--violet-glow)"}}>
                  <div style={{width:26,height:26}}>{Icon.cursor}</div>
                </div>
                <div className="stat-label" style={{marginTop:10}}>1 ROBOT · ∞ THAO TÁC</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Trust strip — số liệu impact + social proof + count-up animation
function TrustStrip() {
  const stats = [
    { end: 5200, suffix: "+", l: "Creator đang dùng", duration: 1800, decimals: 0, prefix: "" },
    { end: 142,  suffix: "K", l: "Video đã render",   duration: 1600, decimals: 0, prefix: "" },
    { end: 99.7, suffix: "%", l: "Click chính xác",   duration: 1500, decimals: 1, prefix: "" },
    { end: 0.3,  suffix: "%", l: "Tài khoản bị warn", duration: 1400, decimals: 1, prefix: "<" },
  ];
  const [visible, setVisible] = React.useState(false);
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    if (!sectionRef.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }),
      { threshold: 0.3 }
    );
    obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  function CountUp({ end, suffix, prefix, duration, decimals }) {
    const [val, setVal] = React.useState(0);
    React.useEffect(() => {
      if (!visible) return;
      let raf, start;
      const tick = (t) => {
        if (!start) start = t;
        const p = Math.min((t - start) / duration, 1);
        // ease-out-expo
        const eased = p === 1 ? 1 : 1 - Math.pow(2, -10 * p);
        setVal(end * eased);
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, [end, duration]);
    const display = decimals === 0
      ? Math.round(val).toLocaleString("vi-VN")
      : val.toFixed(decimals);
    return <span>{prefix}{display}{suffix}</span>;
  }

  return (
    <section className="container trust-strip" data-screen-label="01b TrustStrip" ref={sectionRef}>
      <div className={`trust-grid ${visible ? "is-visible" : ""}`}>
        {stats.map((s, i) => (
          <div className="trust-stat" key={i} style={{transitionDelay: `${i * 90}ms`}}>
            <div className="v">
              {visible
                ? <CountUp end={s.end} suffix={s.suffix} prefix={s.prefix} duration={s.duration} decimals={s.decimals} />
                : <span>{s.prefix}0{s.suffix}</span>}
            </div>
            <div className="l">{s.l}</div>
          </div>
        ))}
      </div>
      <div className={`trust-quote ${visible ? "is-visible" : ""}`}>
        <span className="quote-mark">"</span>
        <p>Tôi chạy 40 video Veo3 mỗi đêm qua Hand Hub. Sáng dậy chỉ việc duyệt. Tiết kiệm 5 tiếng ngồi máy — đủ thời gian cho con đi học.</p>
        <span className="quote-author">— Linh M., Affiliate Creator · Hà Nội</span>
      </div>
    </section>
  );
}

// ── Platform strip ─────────────────────────────────────────────────
function Platforms() {
  return (
    <section className="container section-tight" data-screen-label="02 Platforms">
      <div style={{maxWidth:1100,margin:"0 auto 24px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:16,flexWrap:"wrap"}}>
        <span className="eyebrow-pill">Đang hỗ trợ · 2 nền tảng + 1 sắp ra mắt</span>
        <span style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--ink-3)",letterSpacing:"1px"}}>· Cập nhật qua mạng khi nền tảng đổi giao diện ↓</span>
      </div>
      <div className="platforms-row">
        <div className="platform-card veo3">
          <div className="accent-bar"></div>
          <div className="head">
            <span className="name">Veo 3</span>
            <span className="badge">Google Flow</span>
          </div>
          <p className="desc">Robot mở Chrome, click '+', chọn Khung hình · 16:9 · 8s, gõ prompt vào contenteditable, bấm gửi, chờ render, tải file về.</p>
          <div className="stats">
            <div className="stat"><div className="v">14 thao tác</div><div className="l">/ job</div></div>
            <div className="stat"><div className="v">~58s</div><div className="l">/ vòng</div></div>
            <div className="stat"><div className="v">VI · EN</div><div className="l">locales</div></div>
          </div>
        </div>
        <div className="platform-card grok">
          <div className="accent-bar"></div>
          <div className="head">
            <span className="name">Grok Imagine</span>
            <span className="badge">xAI</span>
          </div>
          <p className="desc">Robot xử trí được throttle, retry mềm, biết khi nào nên chờ và khi nào nên gửi tiếp — như người dùng kiên nhẫn.</p>
          <div className="stats">
            <div className="stat"><div className="v">9 thao tác</div><div className="l">/ job</div></div>
            <div className="stat"><div className="v">~42s</div><div className="l">/ vòng</div></div>
            <div className="stat"><div className="v">3 retry</div><div className="l">tự động</div></div>
          </div>
        </div>
        <div className="platform-card kling platform-coming">
          <div className="accent-bar"></div>
          <span className="platform-coming-badge">SẮP TRIỂN KHAI · Q3 2026</span>
          <div className="head">
            <span className="name">Kling AI</span>
            <span className="badge">Kuaishou</span>
          </div>
          <p className="desc">Hỗ trợ text-to-video của Kling — cùng cơ chế click thật, không gọi API. Đăng ký Zalo để nhận thông báo khi mở public.</p>
          <div className="stats">
            <div className="stat"><div className="v">Q3 2026</div><div className="l">Dự kiến</div></div>
            <div className="stat"><div className="v">~50s</div><div className="l">/ vòng dự kiến</div></div>
            <div className="stat"><div className="v">VI · EN</div><div className="l">locales</div></div>
          </div>
        </div>
      </div>
      <div style={{maxWidth:1100,margin:"18px auto 0",padding:"14px 18px",border:"1px dashed var(--line-2)",borderRadius:"var(--radius-md)",background:"var(--paper-warm)",display:"flex",alignItems:"center",gap:14,flexWrap:"wrap",justifyContent:"space-between"}}>
        <div style={{display:"flex",alignItems:"center",gap:12,flexWrap:"wrap"}}>
          <span style={{fontFamily:"var(--font-mono)",fontSize:10,letterSpacing:1.4,textTransform:"uppercase",color:"var(--coral)",fontWeight:700,padding:"4px 10px",background:"var(--coral-soft)",borderRadius:999}}>Roadmap</span>
          <span style={{fontSize:13.5,color:"var(--ink-2)"}}>Midjourney · Imagen · Sora · Runway · Pika · ChatGPT · và bất cứ trang web nào bạn cần thao tác lặp đi lặp lại.</span>
        </div>
        <a href="https://zalo.me/0375185313" target="_blank" rel="noopener"
           onClick={() => window.HH && window.HH.track("zalo_click", { from: "platforms_suggest" })}
           style={{fontSize:13,color:"var(--violet)",fontWeight:600,borderBottom:"1px solid var(--violet)"}}>Đề xuất nền tảng ▸</a>
      </div>
    </section>
  );
}

// ── Mobile Sim Preview — replace full animation on small screens ─────
function MobileSimPreview() {
  const jobs = [
    { n: "01", t: "Hạ Long bay sương sớm",          status: "done" },
    { n: "02", t: "Phố cổ Hội An đèn lồng đêm",     status: "done" },
    { n: "03", t: "Cận cảnh hoa sen nở chậm",       status: "done" },
    { n: "04", t: "Drone biển Phú Quốc hoàng hôn",  status: "done" },
    { n: "05", t: "Trẻ thả diều ruộng bậc thang",   status: "done" },
    { n: "06", t: "Cà phê sữa đá nhỏ giọt",         status: "active" },
  ];
  const steps = [
    "Mở Chrome profile veo3",
    "Click ô prompt",
    "Gõ prompt 142 ký tự",
    "Chọn 16:9 · 8s",
    "Bấm gửi · chờ render",
    "Tải file về máy ✓",
  ];
  return (
    <div className="msim-card">
      <div className="msim-head">
        <div className="msim-tag">HAND HUB · AUTO DRIVER</div>
        <div className="msim-pill">▸ ĐANG CHẠY</div>
      </div>

      <div className="msim-section">
        <div className="msim-section-label">Hàng đợi · 6 job</div>
        <div className="msim-queue">
          {jobs.map((j, i) => (
            <div className={`msim-job msim-${j.status}`} key={i}>
              <span className="msim-job-n">{j.n}</span>
              <span className="msim-job-dot"></span>
              <span className="msim-job-title">{j.t}</span>
              {j.status === "active" && <span className="msim-spinner"></span>}
            </div>
          ))}
        </div>
      </div>

      <div className="msim-section">
        <div className="msim-section-label">Robot đang làm · job 06</div>
        <ol className="msim-steps">
          {steps.map((s, i) => (
            <li className={`msim-step ${i < 5 ? "done" : "active"}`} key={i}>
              <span className="msim-step-mark">{i < 5 ? "✓" : "•"}</span>
              <span>{s}</span>
            </li>
          ))}
        </ol>
      </div>

      <div className="msim-foot">
        <span className="msim-foot-l">VEO 3 · GOOGLE FLOW</span>
        <span className="msim-foot-r">5/6 hoàn tất</span>
      </div>
    </div>
  );
}

// ── Live Sim Section ───────────────────────────────────────────────
function SimSection() {
  return (
    <section className="container section" id="sim" data-screen-label="03 Simulation">
      <div className="section-head">
        <div className="left">
          <span className="eyebrow-pill">Xem robot vận hành</span>
          <h2>Nhìn vào con trỏ chuột <span className="accent">đang tự chạy.</span></h2>
          <p className="subtitle">Đây không phải video minh hoạ — đây là cách Hand Hub thực sự hoạt động trên máy bạn. Robot điều khiển con trỏ trên đúng giao diện Veo3, click đúng nút, gõ đúng ô — chính xác từng pixel như bạn ngồi tự làm. <b style={{color:"var(--ink)"}}>Và bạn có thể thu nhỏ cửa sổ này xuống taskbar bất cứ lúc nào — robot vẫn chạy ngầm.</b></p>
        </div>
      </div>

      <div className="sim-desktop-only"><Simulation/></div>
      <div className="sim-mobile-only"><MobileSimPreview/></div>

      <div className="how-grid" style={{marginTop:32}}>
        <div className="how-card">
          <div className="step">01 — NHẬP</div>
          <h3>Bạn nhập <em style={{color:"var(--violet)"}}>1 lần</em>, dùng <em style={{color:"var(--violet)"}}>nhiều job</em>.</h3>
          <p>Dán hàng loạt prompt, chọn nền tảng và cấu hình. Robot tự sắp xếp hàng đợi, ưu tiên job nhanh trước.</p>
          <div className="glyph">▸</div>
        </div>
        <div className="how-card">
          <div className="step">02 — ĐIỀU KHIỂN</div>
          <h3>Robot mở Chrome bằng <em style={{color:"var(--violet)"}}>tài khoản của bạn</em>.</h3>
          <p>Kết nối Chrome qua DevTools. Robot click thật, gõ thật, upload thật — không gọi API ngầm, không scrape.</p>
          <div className="glyph">▸</div>
        </div>
        <div className="how-card">
          <div className="step">03 — CHỜ &amp; THỬ LẠI</div>
          <h3>Tự xử lý lỗi, tự thử lại.</h3>
          <p>Nền tảng chậm — robot chờ. Lỗi rate-limit — robot lùi rồi gửi tiếp. Không bỏ sót job.</p>
          <div className="glyph">▸</div>
        </div>
        <div className="how-card">
          <div className="step">04 — GIAO</div>
          <h3>Tải về máy, sang job kế.</h3>
          <p>File về thư mục bạn chọn, đặt tên theo template. Bạn ngủ. Robot không.</p>
          <div className="glyph">▸</div>
        </div>
      </div>
    </section>
  );
}

// ── Features ───────────────────────────────────────────────────────
function Features() {
  return (
    <section className="container section" id="features" data-screen-label="04 Features">
      <div className="section-head">
        <div className="left">
          <span className="eyebrow-pill">Tính năng cốt lõi</span>
          <h2>Một robot đủ <span className="accent">tinh tế</span> để thay bạn ngồi máy.</h2>
        </div>
      </div>
      <div className="features-grid">
        <div className="feature-card tone-dark span-2">
          <div className="icon-wrap">{Icon.minimize}</div>
          <h3>Thu nhỏ cửa sổ. Robot vẫn click. Bạn vẫn dùng máy bình thường.</h3>
          <p>Hand Hub không độc chiếm con trỏ chuột. Cửa sổ Chrome con của robot có thể minimize xuống taskbar — bạn vẫn lướt web, dựng video trong Premiere, vẽ Figma, chat Zalo, gọi Meet. <b style={{color:"#fff"}}>Hai bộ tay, một cái máy.</b> Robot click trong nền, đôi tay thật của bạn làm việc khác.</p>
          <div className="feature-foot">BACKGROUND MODE · HEADLESS-LIKE · KHÔNG STEAL FOCUS</div>
        </div>
        <div className="feature-card">
          <div className="icon-wrap">{Icon.zap}</div>
          <h3>Hàng đợi không giới hạn</h3>
          <p>Dán 50 job vào một lần. Robot tự sắp queue, chạy liên tiếp, retry 3 lần khi lỗi. Bạn đi ngủ, sáng dậy là xong.</p>
          <div className="feature-foot">QUEUE-FIRST · 3× AUTO-RETRY</div>
        </div>
        <div className="feature-card iris">
          <div className="icon-wrap">{Icon.cursor}</div>
          <h3>Click thật như người thật</h3>
          <p>Con trỏ có jitter tự nhiên, gõ phím có nhịp, chờ giữa các thao tác — không bị nền tảng phát hiện là bot.</p>
          <div className="feature-foot">HUMAN-LIKE PACING</div>
        </div>
        <div className="feature-card coral">
          <div className="icon-wrap">{Icon.shield}</div>
          <h3>Tài khoản của bạn, máy của bạn</h3>
          <p>Robot chạy local trên máy bạn. Không lưu prompt, không gửi gì lên server ngoài kiểm tra license. Hết.</p>
          <div className="feature-foot">LOCAL-FIRST · ZERO TELEMETRY</div>
        </div>
        <div className="feature-card">
          <div className="icon-wrap">{Icon.shield}</div>
          <h3>License khoá theo phần cứng</h3>
          <p>Một license = một máy. Token kẹp HWID, không share được. Bạn yên tâm trả 30 ngàn mỗi tháng.</p>
          <div className="feature-foot">HWID-BOUND</div>
        </div>
        <div className="feature-card iris">
          <div className="icon-wrap">{Icon.cpu}</div>
          <h3>Selector tự cập nhật qua mạng</h3>
          <p>Nền tảng đổi giao diện — server đẩy bộ "công thức click" mới xuống máy bạn trong vài phút. Bạn không phải update phần mềm.</p>
          <div className="feature-foot">OTA SELECTOR UPDATES</div>
        </div>
      </div>
    </section>
  );
}

// ── Use Cases — 3 personas ─────────────────────────────────────────
function UseCases() {
  const cases = [
    {
      tag: "AFFILIATE / E-COM",
      title: "Creator nội dung chạy đơn hàng ngày",
      story: "Mỗi sản phẩm cần 5-10 video hook để A/B test. Trước đây 1 sản phẩm ngốn 4 tiếng. Giờ paste 50 prompt, robot chạy qua đêm, sáng có sẵn.",
      stat: "8 tiếng/tuần",
      statLabel: "TIẾT KIỆM",
      color: "violet",
      icon: "🛍️"
    },
    {
      tag: "COURSE CREATOR",
      title: "Giáo viên / mentor làm khóa học",
      story: "Mỗi bài học cần 2-3 video minh hoạ. Khóa 30 bài = 90 video. Robot chạy lúc bạn quay/edit phần khác — production time giảm 60%.",
      stat: "60%",
      statLabel: "TIME-TO-COURSE",
      color: "coral",
      icon: "🎓"
    },
    {
      tag: "AGENCY / FREELANCER",
      title: "Studio sản xuất cho 5+ khách",
      story: "Hand Hub Team chạy 5 máy song song, mỗi máy 1 dự án khách. Webhook báo khi job xong. Project manager không cần ngồi giữ chuột.",
      stat: "5×",
      statLabel: "PARALLEL OUTPUT",
      color: "iris",
      icon: "💼"
    }
  ];
  return (
    <section className="container section" id="usecases" data-screen-label="04b UseCases">
      <div className="section-head">
        <div className="left">
          <span className="eyebrow-pill">Ai đang dùng</span>
          <h2>Robot phù hợp với <span className="accent">3 kiểu người</span> sáng tạo.</h2>
          <p className="subtitle">Không cần kỹ năng code. Không cần setup phức tạp. Mở app, paste prompt, đi làm việc khác.</p>
        </div>
      </div>
      <div className="usecase-grid">
        {cases.map((c, i) => (
          <div className={`usecase-card uc-${c.color}`} key={i}>
            <div className="uc-icon" aria-hidden="true">{c.icon}</div>
            <div className="uc-tag">{c.tag}</div>
            <h3>{c.title}</h3>
            <p>{c.story}</p>
            <div className="uc-stat">
              <span className="uc-stat-v">{c.stat}</span>
              <span className="uc-stat-l">{c.statLabel}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Comparison Table ───────────────────────────────────────────────
function Comparison() {
  const rows = [
    { label: "Thời gian setup", handhub: "2 phút", manual: "—", api: "1-2 ngày code" },
    { label: "Chi phí / tháng", handhub: "30K₫", manual: "Vô giá (thời gian)", api: "$50-200" },
    { label: "Dùng tài khoản chính chủ", handhub: "✓", manual: "✓", api: "✗" },
    { label: "Chạy khi minimize", handhub: "✓", manual: "✗", api: "—" },
    { label: "Auto retry khi lỗi", handhub: "3× tự động", manual: "Bằng tay", api: "Tự viết code" },
    { label: "Selector tự update OTA", handhub: "✓", manual: "—", api: "✗" },
    { label: "Rủi ro tài khoản bị warn", handhub: "<0.3%", manual: "—", api: "Cao (nếu scrape)" },
    { label: "Hỗ trợ tiếng Việt", handhub: "Zalo 24h", manual: "—", api: "Tự xoay" },
  ];
  return (
    <section className="container section" data-screen-label="04c Comparison">
      <div className="section-head">
        <div className="left">
          <span className="eyebrow-pill">So sánh thẳng</span>
          <h2>Hand Hub vs Tự click vs <span className="accent">API trả phí</span>.</h2>
          <p className="subtitle">Chúng tôi không tránh né so sánh — đây là sự thật.</p>
        </div>
      </div>
      <div className="compare-table-wrap">
        <table className="compare-table">
          <thead>
            <tr>
              <th></th>
              <th className="col-handhub">
                <span className="th-tag">PHƯƠNG ÁN TỐT NHẤT</span>
                <span className="th-title">Hand Hub</span>
              </th>
              <th>
                <span className="th-tag">CHẤT LƯỢNG, NHƯNG ĐAU TAY</span>
                <span className="th-title">Tự ngồi click</span>
              </th>
              <th>
                <span className="th-tag">CHO DEV CỨNG</span>
                <span className="th-title">API trả phí + viết code</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="row-label">{r.label}</td>
                <td className="col-handhub"><strong>{r.handhub}</strong></td>
                <td>{r.manual}</td>
                <td>{r.api}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

// ── Download ───────────────────────────────────────────────────────
function Download() {
  return (
    <section className="section" id="download" style={{background:"var(--paper-warm)",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}} data-screen-label="05 Download">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow-pill">Tải về</span>
            <h2>Cài đặt trong <span className="accent">~2 phút</span>.</h2>
            <p className="subtitle">Cài Hand Hub. Đăng nhập tài khoản nền tảng trong Chrome con của Hand Hub. Quét license. Bắt đầu để robot chạy.</p>
          </div>
        </div>

        <div className="download-wrap">
          <div className="download-card">
            <div className="platform-glyph"></div>
            <div style={{width:48,height:48,borderRadius:12,background:"var(--ink)",color:"#fff",display:"grid",placeItems:"center"}}>
              <div style={{width:22,height:22}}>{Icon.win}</div>
            </div>
            <div className="os-name">Cho Windows</div>
            <h3>Hand Hub<br/>v2.0</h3>
            <div className="meta-row">
              <div className="meta"><span className="l">Dung lượng</span><span className="v">~57 MB</span></div>
              <div className="meta"><span className="l">Phiên bản</span><span className="v">v2.0.4</span></div>
              <div className="meta"><span className="l">Định dạng</span><span className="v">.exe</span></div>
            </div>
            <p className="req">Windows 10 hoặc 11 (64-bit). 8GB RAM. Đã cài Google Chrome. Cấp quyền admin lần đầu để đăng ký Hardware ID.</p>
            <div className="actions">
              <a href="#" onClick={(e) => {
                e.preventDefault();
                const aid = window.HH ? window.HH.aid() : "";
                const base = window.HH ? window.HH.downloadBase() : "";
                if (window.HH) window.HH.track("download_click", { platform: "win" });
                window.location.href = base + "/HandHub-Setup.exe?aid=" + encodeURIComponent(aid);
              }} className="btn btn-primary btn-lg">{Icon.dl} Tải .exe (~57 MB)</a>
              <a href="/support.html#quickstart" className="btn btn-ghost btn-lg">SHA-256 &amp; Verify ▸</a>
            </div>
          </div>

          <div className="download-card download-coming">
            <div className="platform-glyph"></div>
            <span className="coming-badge">SẮP RA MẮT · Q3 2026</span>
            <div style={{width:48,height:48,borderRadius:12,background:"var(--ink)",color:"#fff",display:"grid",placeItems:"center",opacity:0.6}}>
              <div style={{width:22,height:22}}>{Icon.apple}</div>
            </div>
            <div className="os-name">Cho macOS</div>
            <h3>Hand Hub<br/>for Mac</h3>
            <div className="meta-row">
              <div className="meta"><span className="l">Hỗ trợ</span><span className="v">Apple Silicon</span></div>
              <div className="meta"><span className="l">macOS</span><span className="v">≥ 13 Ventura</span></div>
              <div className="meta"><span className="l">Định dạng</span><span className="v">.dmg</span></div>
            </div>
            <p className="req">Bản macOS hỗ trợ đầy đủ Apple Silicon (M1/M2/M3) và Intel. Sẽ có notarization Apple để cài 1-click không cảnh báo. Đăng ký để nhận thông báo khi ra mắt.</p>
            <div className="actions">
              <a href="https://zalo.me/0375185313" target="_blank" rel="noopener"
                 onClick={() => window.HH && window.HH.track("zalo_click", { from: "macos_waitlist" })}
                 className="btn btn-coral btn-lg">
                <span style={{width:18,height:18,display:"inline-grid",placeItems:"center"}}>{Icon.apple}</span>
                Đăng ký nhận thông báo ▸
              </a>
              <span className="muted-line">Nhắn Zalo để vào waitlist · ưu đãi 50% tháng đầu cho early-bird.</span>
            </div>
          </div>
        </div>

        <div style={{marginTop:32, padding:"20px 24px", background:"var(--canvas)", border:"1px solid var(--line)", borderRadius:"var(--radius-md)", display:"flex", alignItems:"center", justifyContent:"space-between", gap:24, flexWrap:"wrap"}}>
          <div style={{display:"flex",alignItems:"center",gap:14}}>
            <span style={{width:36,height:36,borderRadius:"50%",background:"var(--violet-soft)",color:"var(--violet)",display:"grid",placeItems:"center",fontWeight:700,fontSize:18}}>?</span>
            <div>
              <div style={{fontWeight:600,fontSize:14,color:"var(--ink)"}}>Lần đầu cài đặt?</div>
              <div style={{fontSize:13,color:"var(--ink-3)",marginTop:2}}>Theo hướng dẫn 4 bước — sau 2 phút robot sẽ chạy job đầu tiên.</div>
            </div>
          </div>
          <a href="/support.html#quickstart" className="btn btn-ghost">Xem hướng dẫn ▸</a>
        </div>
      </div>
    </section>
  );
}

// ── Pricing ────────────────────────────────────────────────────────
function Pricing() {
  const [billing, setBilling] = useS("month");
  const yearly = billing === "year";
  return (
    <section className="container section" id="pricing" data-screen-label="06 Pricing">
      <div className="section-head">
        <div className="left">
          <span className="eyebrow-pill">Bảng giá</span>
          <h2>Rẻ hơn <span className="accent">một ly cà phê</span> mỗi tháng.</h2>
          <p className="subtitle">Triết lý của chúng tôi: robot không phải xa xỉ phẩm. Chỉ 30 ngàn / tháng để có một đôi tay làm việc 24/7 thay bạn.</p>
        </div>
        <div className="billing-toggle">
          <button className={billing==="month"?"active":""} onClick={()=>setBilling("month")}>Theo tháng</button>
          <button className={billing==="year"?"active":""} onClick={()=>setBilling("year")}>Theo năm <span className="tag">−20%</span></button>
        </div>
      </div>

      <div className="pricing-grid">
        <div className="price-card">
          <div className="tier">Trial</div>
          <h3>Dùng thử</h3>
          <div className="price"><span className="num">0₫</span><span className="per">/ trọn đời</span></div>
          <p>Đủ để bạn chạy thử 1 lô và quyết định.</p>
          <ul>
            <li>5 job miễn phí trên cả 2 nền tảng</li>
            <li>Đầy đủ Veo3 · Grok</li>
            <li>1 máy / 1 license</li>
            <li>Cộng đồng hỗ trợ qua Zalo</li>
          </ul>
          <div className="price-cta"><a href="#download" className="btn btn-ghost btn-lg" style={{width:"100%"}}>Tải miễn phí ▸</a></div>
          <div className="footer-note">Không cần thẻ. Không hết hạn.</div>
        </div>

        <div className="price-card featured">
          <div className="ribbon">Phổ biến nhất</div>
          <div className="tier">Pro</div>
          <h3>Hand Hub Pro</h3>
          <div className="price">
            <span className="num">{yearly ? "24K" : "30K"}₫</span>
            <span className="per">/ tháng</span>
            <span className="strike">{yearly ? "30K" : "60K"}</span>
          </div>
          <span className="promo-tag">Khuyến mãi −{yearly ? "60" : "50"}%</span>
          <p>Cho creator chạy nội dung hàng ngày.</p>
          <ul>
            <li><b style={{color:"#fff"}}>Không giới hạn job</b> trên cả 2 nền tảng</li>
            <li>Robot chạy 2 nền tảng song song</li>
            <li>Tự động retry 3× · cập nhật selector qua mạng</li>
            <li>Lên lịch chạy theo giờ</li>
            <li>1 máy / 1 license · khoá phần cứng</li>
            <li>Hỗ trợ qua Zalo + email · trong 24h</li>
          </ul>
          <div className="price-cta">
            <a
              href={`/order.html?plan=${yearly ? "yearly" : "monthly"}&utm_source=site&utm_medium=pricing&utm_campaign=pro`}
              onClick={() => window.HH && window.HH.track("pricing_click", { plan: yearly ? "yearly" : "monthly", tier: "pro" })}
              className="btn btn-coral btn-lg" style={{width:"100%"}}
            >Mua Pro — {yearly ? "24K" : "30K"}/tháng ▸</a>
          </div>
          <div className="footer-note">Hủy bất cứ lúc nào. Hoàn tiền 7 ngày.</div>
        </div>

        <div className="price-card">
          <div className="tier">Team</div>
          <h3>Hand Hub Team</h3>
          <div className="price">
            <span className="num">{yearly ? "120K" : "150K"}₫</span>
            <span className="per">/ tháng</span>
          </div>
          <p>Cho team / agency chạy production cho khách.</p>
          <ul>
            <li>Mọi tính năng của Pro</li>
            <li>5 máy / license dùng chung</li>
            <li>Chạy 6 job song song trên 1 máy</li>
            <li>API webhook khi job xong</li>
            <li>Template đặt tên file riêng</li>
            <li>Onboarding 1-1 · ưu tiên hỗ trợ</li>
          </ul>
          <div className="price-cta"><a href="https://zalo.me/0375185313" target="_blank" rel="noopener"
             onClick={() => window.HH && window.HH.track("zalo_click", { from: "pricing_team" })}
             className="btn btn-dark btn-lg" style={{width:"100%"}}>Liên hệ tư vấn ▸</a></div>
          <div className="footer-note">Doanh nghiệp xuất hoá đơn VAT.</div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────────────
function FAQ() {
  const faqs = [
    { q: "Hand Hub có dùng API trả phí không hay tôi vẫn cần tài khoản nền tảng?",
      a: "Bạn vẫn cần tài khoản chính chủ ở các nền tảng (Veo3, Grok). Hand Hub không bán credits của Google/xAI — robot chỉ tự động hoá thao tác trên chính tài khoản của bạn, đúng như bạn ngồi click." },
    { q: "Có an toàn không? Tôi sợ tài khoản bị khoá.",
      a: "Robot mô phỏng nhịp người thật — có jitter giữa các thao tác, dùng đúng Chrome profile của bạn (không headless), không spam. Tỷ lệ tài khoản bị warn trong 1 năm vận hành dưới 0.3%, và bạn có thể bật chế độ chậm trong Settings." },
    { q: "Sao Hand Hub không tự build video luôn cho tiện?",
      a: "Vì chúng tôi không phải nền tảng tạo video — chúng tôi là nền tảng tự động hoá thao tác. Bạn vẫn dùng Veo3/Grok như bình thường, robot chỉ thay tay bạn ngồi click. Kết quả là video do CHÍNH các nền tảng đó tạo, chất lượng thật của họ — không qua trung gian." },
    { q: "Hand Hub có làm được gì khác ngoài video không?",
      a: "Có. Bản chất là robot điều khiển con trỏ chuột — bất cứ thao tác nào bạn làm lặp đi lặp lại trên một trang web đều có thể auto. Sắp tới chúng tôi sẽ thêm Midjourney, Imagen, ChatGPT, và mở SDK để cộng đồng tự định nghĩa workflow." },
    { q: "Một license dùng được mấy máy?",
      a: "Pro: 1 máy. Team: 5 máy. License kẹp Hardware ID — chuyển máy chính chủ thì rollback license trong settings rồi kích hoạt lại trên máy mới (giới hạn 2 lần / tháng)." },
    { q: "Nền tảng đổi giao diện xong robot còn click đúng không?",
      a: "Server gửi bộ selector mới xuống máy bạn trong vài phút khi chúng tôi phát hiện thay đổi DOM. Bạn không cần update phần mềm." },
    { q: "Robot chạy nhiều nền tảng cùng lúc được không?",
      a: "Được. Hand Hub mở cửa sổ Chrome riêng cho từng nền tảng, mỗi nền tảng một profile sạch — credits không lẫn lộn. Pro chạy 2 job song song; Team chạy đến 6 job." },
    { q: "Dữ liệu của tôi có bị server lưu lại không?",
      a: "Không. Hand Hub chạy local. File về thẳng thư mục trên máy bạn. Server chỉ nhận license heartbeat và error log (đã ẩn prompt). Bạn có thể tắt error report trong Settings." },
    { q: "Vì sao chỉ 30 ngàn một tháng?",
      a: "Vì robot không phải xa xỉ phẩm. Chúng tôi muốn ai cũng có một đôi tay tự động — kể cả sinh viên, creator nhỏ, freelancer. Doanh thu đến từ volume, không từ giá cao." },
  ];
  const [open, setOpen] = useS(0);
  return (
    <section className="container section" id="faq" data-screen-label="07 FAQ">
      <div className="section-head">
        <div className="left">
          <span className="eyebrow-pill">Câu hỏi thường gặp</span>
          <h2>Bạn hỏi, <span className="accent">chúng tôi trả thẳng.</span></h2>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:10,fontSize:13.5,color:"var(--ink-3)"}}>
          Không thấy câu hỏi? <a href="https://zalo.me/0375185313" target="_blank" rel="noopener"
            onClick={() => window.HH && window.HH.track("zalo_click", { from: "faq" })}
            style={{color:"var(--violet)",fontWeight:600,borderBottom:"1px solid var(--violet)"}}>Hỏi qua Zalo ▸</a>
        </div>
      </div>
      <div className="faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`faq-item ${open===i?"open":""}`} onClick={()=>setOpen(open===i?-1:i)}>
            <div className="faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Big CTA + Footer ───────────────────────────────────────────────
function BigCTA() {
  return (
    <section className="container section" data-screen-label="08 CTA">
      <div className="big-cta">
        <div className="inner">
          <span className="eyebrow-pill">Bắt đầu trong 2 phút</span>
          <h2>Để robot chạy. <span className="accent">Bạn đi ngủ.</span></h2>
          <p className="lede">Tải miễn phí, chạy 5 job thử, quyết định sau. Không thẻ tín dụng, không ràng buộc, 30 ngàn / tháng nếu thấy ổn.</p>
          <div className="cta-row">
            <a href="#download" className="btn btn-primary btn-xl">Tải về Windows · macOS</a>
            <a href="#sim" className="btn btn-ghost btn-xl">Xem robot vận hành ▸</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="col brand-col">
            <div className="brand">
              <img src="assets/mark.svg" alt=""/>
              <span className="wm">Hand Hub</span>
            </div>
            <p>Phần mềm desktop tự động hoá thao tác chuột — bằng chính tài khoản của bạn, trên chính máy của bạn. Local-first, khoá phần cứng, không gửi prompt lên server.</p>
            <span className="platforms-tag">
              <span className="dot" style={{background:"var(--violet)"}}></span> Veo3
              <span style={{margin:"0 4px",color:"var(--ink-5)"}}>·</span>
              <span className="dot" style={{background:"var(--iris)"}}></span> Grok
            </span>
          </div>
          <div className="col">
            <h4>Sản phẩm</h4>
            <a href="#sim">Cách hoạt động</a>
            <a href="#features">Tính năng</a>
            <a href="#download">Tải về</a>
            <a href="#pricing">Bảng giá</a>
            <a href="/changelog.html">Changelog</a>
          </div>
          <div className="col">
            <h4>Hỗ trợ</h4>
            <a href="/support.html#quickstart">Hướng dẫn nhanh</a>
            <a href="#faq">Câu hỏi thường gặp</a>
            <a href="/support.html#videos">Hướng dẫn video</a>
            <a href="/support.html#troubleshoot">Khắc phục sự cố</a>
            <a href="https://zalo.me/0375185313" target="_blank" rel="noopener">Liên hệ qua Zalo</a>
          </div>
          <div className="col">
            <h4>Công ty</h4>
            <a href="/about.html">Về chúng tôi</a>
            <a href="/changelog.html">Cập nhật mới</a>
            <a href="https://zalo.me/0375185313" target="_blank" rel="noopener">Tuyển dụng</a>
            <a href="https://zalo.me/0375185313" target="_blank" rel="noopener">Đối tác</a>
          </div>
          <div className="col">
            <h4>Pháp lý</h4>
            <a href="/terms.html">Điều khoản</a>
            <a href="/privacy.html">Bảo mật</a>
            <a href="/eula.html">License EULA</a>
            <a href="/privacy.html">Xử lý dữ liệu</a>
          </div>
        </div>
        <div className="footer-bar">
          <span>v2.0 · 2026</span>
          <span>© Hand Hub · Made in Vietnam 🇻🇳</span>
        </div>
      </div>
    </footer>
  );
}

window.Topbar = Topbar;
window.Hero = Hero;
window.TrustStrip = TrustStrip;
window.Platforms = Platforms;
window.MobileSimPreview = MobileSimPreview;
window.SimSection = SimSection;
window.Features = Features;
window.UseCases = UseCases;
window.Comparison = Comparison;
window.Download = Download;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.BigCTA = BigCTA;
window.Footer = Footer;