/* =========================================================================
   THE ONE PERSON BUSINESS — Chuỗi webinar miễn phí (nhà 10X)
   Landing page 1 hành động: đăng ký chuỗi (1 form ăn cả 3 buổi).
   -------------------------------------------------------------------------
   ⚠️ CÁC GIÁ TRỊ CẦN CHỐT trước khi chạy ads — xem file NOTES-CAN-CHOT.md
   ========================================================================= */

// --- Cấu hình (sửa ở đây) -------------------------------------------------
const SHEET_ENDPOINT = "https://script.google.com/macros/s/AKfycbwAKs4AQASnRQTmBhqWW1v0eUAhKC7wg3401f1V1QJLb1lQKBxm6qzIziiaqykbiYgj2g/exec"; // ⚠️ endpoint đang trỏ Sheet webinar cũ — deploy lại Code.gs & thay URL
const LIVE_LINK = "https://cani.vn/zoom";      // ⚠️ CẦN CHỐT link phòng livestream Webinar 1
const LIVE_LINK_TEXT = "cani.vn/zoom";         // ⚠️ text hiển thị của link
const GROUP_LINK = "https://zalo.me/g/vjfrt8ac4aju38ohotlc"; // Nhóm Zalo: W - One Person Business
const BOOTCAMP_LINK = "https://bootcamp-nha-trang.vercel.app/";
// ConvertKit (Kit) — form "OPB Webinar" (id 9635651). Endpoint embed, không cần API key.
const CONVERTKIT_ENDPOINT = "https://app.kit.com/forms/9635651/subscriptions";
const SEATS = 300;
// Webinar 1: 9h sáng Thứ 7, 11/07/2026 (giờ VN)
const WEBINAR_TS = new Date("2026-07-11T09:00:00+07:00").getTime();

const GCAL_URL = (() => {
  const params = new URLSearchParams({
    action: "TEMPLATE",
    text: "Webinar 1 — The One Person Business (nhà 10X)",
    // 11/07/2026 09:00–11:00 giờ VN = 02:00–04:00 UTC
    dates: "20260711T020000Z/20260711T040000Z",
    details:
      "Link vào phòng livestream: " + LIVE_LINK +
      "\n\nWebinar 1 — 10X Course OS: đóng gói sản phẩm chuyển giao." +
      "\nCó mặt trực tiếp buổi này để nhận trọn bộ khung 4 bước." +
      "\nVào sớm 10 phút và nhớ lưu lại link này.",
    location: "Livestream Online — " + LIVE_LINK_TEXT,
  });
  return "https://www.google.com/calendar/render?" + params.toString();
})();

const calcRemaining = () => {
  const diff = Math.max(0, WEBINAR_TS - Date.now());
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return { d, h, m, s };
};

// --- Nội dung (tiếng Việt) ------------------------------------------------
const T = {
  // HERO
  heroEyebrow: "Chuỗi webinar · Tháng 7 · Mở màn miễn phí",
  heroTagline: "Biến chuyên môn của bạn thành sản phẩm nhân giá trị lên 10 lần và chuyển giao được nhiều lần.",
  heroSub: "Chuỗi webinar tháng 7 mở ra nguyên mô hình mà team 10X đã dùng để đồng hành cùng 200+ chuyên gia, coach, chủ doanh nghiệp người Việt trong 3 năm qua.",
  heroCta: "Giữ chỗ chuỗi webinar",
  heroCtaNote: "Hai webinar mở màn miễn phí. Bắt đầu Webinar 1 — 9h sáng thứ 7. Phòng giới hạn " + SEATS + " chỗ.",
  metaTime: "Thời gian", metaTimeVal: "9h sáng · Thứ 7 · 11/07",
  metaPlat: "Hình thức", metaPlatVal: "Livestream online",
  metaCost: "Chi phí", metaCostVal: "Miễn phí",
  liveBadge: "LIVE 11/07",

  // RIBBON
  ribbon1: [
    "Đóng gói chuyên môn thành sản phẩm bán được",
    "Quy trình 4 bước — 10X Course OS",
    "Content Batching System — sản xuất nội dung nhất quán cùng AI",
    "Dựng hệ thống một người — The One Person Business",
    "Bonus khung 4 bước chỉ cho người dự Webinar 1",
  ],
  ribbon2: "9h sáng · Thứ 7 · 11/07/2026 · Livestream · Miễn phí · Giới hạn " + SEATS + " chỗ",

  // OPT-IN
  optinTitle: "Giữ chỗ chuỗi webinar — 1 lần đăng ký, theo được cả 3 buổi",
  optinIntro: "Để lại thông tin một lần. Anh/chị nhận link và lịch của cả chuỗi qua nhóm và email. Mở màn bằng Webinar 1 — 9h sáng thứ 7 11/07. Phòng giới hạn " + SEATS + " chỗ, bonus khung 4 bước chỉ dành cho người có mặt trực tiếp buổi đầu.",
  optinListTitle: "Đăng ký một lần, anh/chị theo được:",
  optinList: [
    "Webinar 1 — 10X Course OS: quy trình 4 bước đóng gói sản phẩm chuyển giao",
    "Webinar 2 — Content Batching System: sản xuất nội dung nhất quán, đồng bộ đa nền tảng cùng AI",
    "Bootcamp One Person Business × AI: dựng hệ thống một người (offline Cam Ranh · trả phí)",
    "Bonus khung 4 bước — chỉ gửi cho người có mặt trực tiếp Webinar 1",
  ],

  // FORM
  formTag: "Form đăng ký",
  formH3: "Giữ chỗ chuỗi webinar",
  seats: "Phòng giới hạn " + SEATS + " chỗ cho Webinar 1 — đăng ký sớm để chắc chỗ và nhận bonus.",
  fName: "Họ và tên *", fNamePh: "VD: Nguyễn Thảo Linh",
  fEmail: "Email *", fEmailPh: "ban@cuaban.com",
  fPhone: "Số điện thoại *", fPhonePh: "09xx xxx xxx",
  fIndustry: "Chuyên môn / lĩnh vực của bạn *", fIndustryPh: "VD: Coaching, tư vấn 1-1, dạy kỹ năng, dịch vụ...",
  fStage: "Sản phẩm của bạn đang ở đâu? *", fStagePh: "— Chọn tình trạng hiện tại —",
  fStageOptions: [
    "Mới có chuyên môn, chưa đóng gói",
    "Đang đóng gói / đang quay khoá",
    "Đã quay xong nhưng chưa mở bán",
    "Đã mở bán nhưng bán không được / bán ít",
    "Đã bán được, muốn nhân giá trị lên",
  ],
  fProblems: "Điều bạn đang mắc nhất (chọn nhiều nếu cần) *",
  fProblemsOptions: [
    "Quay khoá xong mà chưa dám / chưa biết mở bán",
    "Mở bán rồi mà không ai mua, không hiểu vì sao",
    "Không biết đóng gói & định giá sản phẩm thế nào",
    "Muốn nhân giá trị chuyên môn mà chưa có cách",
  ],
  fQ: "Câu hỏi cho diễn giả (tuỳ chọn)", fQPh: "Bạn đang mắc gì nhất khi đóng gói sản phẩm?",
  btnSubmit: "Giữ chỗ chuỗi webinar →", btnSubmitting: "Đang gửi...",
  privacy: "🔒 Thông tin của bạn được bảo mật · Không spam",

  // SUCCESS
  successH3: "Đăng ký thành công!",
  successSub: "Anh/chị đã giữ chỗ cả chuỗi The One Person Business. Lưu lại 2 việc dưới đây để không bỏ lỡ Webinar 1 — và nhận bonus khung 4 bước.",
  successN1Tag: "1 · Vào nhóm Zalo nhận link & tài liệu",
  successN1Desc: "Bấm nút bên dưới vào nhóm Zalo ngay. Link cả 3 buổi, tài liệu và bonus đều gửi trong nhóm — nhớ vào nhóm để không bỏ lỡ.",
  successGroupBtn: "Vào nhóm Zalo →",
  successQrCaption: "Hoặc quét mã QR · Nhóm Zalo: W - One Person Business",
  successN2Tag: "2 · Lịch Webinar 1",
  successN2Time: "9h00 sáng · Thứ 7, 11/07/2026 · Livestream Online",
  successN2LinkLabel: "Link vào phòng (lưu lại ngay):",
  successGcalBtn: "➕ Thêm vào Google Calendar",
  successPrepTag: "3 · Chuẩn bị cho buổi đầu",
  successPrepLead: "Webinar 1 đi thẳng vào thực chiến. Để học hiệu quả và nhận được bonus, dành 1 phút chuẩn bị:",
  successPrepWarning: "⚠ Bonus khung 4 bước chỉ gửi cho anh/chị có mặt trực tiếp trong Webinar 1 — cố gắng thu xếp vào đúng giờ 9h sáng thứ 7.",
  successPrepItems: [
    { icon: "🖥", title: "Dùng máy tính", desc: "Buổi học có phần điền khung, dùng máy tính sẽ dễ theo và thực hành hơn điện thoại." },
    { icon: "🤫", title: "Không gian yên tĩnh", desc: "Chọn nơi tập trung được để nghe trọn quy trình 4 bước." },
    { icon: "✍️", title: "Giấy bút / canvas", desc: "Chuẩn bị sẵn để điền khung sản phẩm ngay trong buổi." },
    { icon: "⏰", title: "Vào sớm 10 phút", desc: "Có mặt đúng giờ 9h sáng thứ 7 để không lỡ phần đầu và phần trao bonus." },
  ],
  successFootnote: "Hẹn gặp anh/chị trong Webinar 1. — Đội ngũ 10X",

  // SUCCESS — upsell Bootcamp
  upsellTag: "★ Bước tiếp theo — dành cho người vừa đăng ký",
  upsellTitle: "One Person Business × AI Bootcamp",
  upsellSub: "Con người dẫn dắt, AI tăng tốc",
  upsellDesc: "4 ngày 3 đêm tại resort 5★ The Empyrean Cam Ranh (21–24/07). Dựng nguyên hệ thống Media – Sales – Coaching cho doanh nghiệp một người của bạn, cùng ~80 founder.",
  upsellScarcity: "Chỉ ~80 suất",
  upsellBtn: "Xem chi tiết & giữ chỗ Bootcamp →",

  countdownLabel: "⏱ Webinar 2 bắt đầu sau",
  cd: { d: "Ngày", h: "Giờ", m: "Phút", s: "Giây" },

  // PROBLEM
  problemEyebrow: "★ Vấn đề",
  problemTitle: "Sản phẩm làm xong rồi. Mở bán ra thì im ắng. Và không rõ mình sai ở đâu.",
  problemBody: [
    "Nhiều anh chị coaching, tư vấn 1 kèm 1, dạy nhóm ngoài đời rất giỏi. Học viên khen, khách quay lại, kết quả có thật.",
    "Nhưng đến lúc đóng gói thành sản phẩm chuyển giao thì mắc. Có anh chị quay xong khoá cả năm vẫn chưa dám mở bán. Có anh chị mở bán rồi mà không ai mua, ngồi nhìn trang bán không hiểu vì sao nội dung tốt vậy mà im lìm.",
    "Rồi tự đoán: chắc bài giảng chưa đủ nhiều, chắc trang bán chưa đủ đẹp, chắc quảng cáo chưa đủ mạnh. Sửa hết, vẫn im. Vì chỗ mắc không nằm ở mấy chỗ đó.",
    "Chỗ mắc nằm ở cách đóng gói — ngay từ bước quyết định bán cái gì, cho ai, đặt lời mời ra sao. Sai từ gốc đó thì nội dung càng nhiều, trang càng đẹp cũng không cứu được.",
  ],

  // SOLUTION
  solutionEyebrow: "★ Giải pháp",
  solutionTitle: "The One Person Business — một cá nhân chuyên gia, doanh thu vận hành như một công ty, mà không cần team đông.",
  solutionBody: [
    "Trong 3 năm qua, team 10X đã ngồi cùng 200+ chuyên gia, coach, chủ doanh nghiệp người Việt để làm đúng một việc: đóng gói tri thức chuyên môn thành sản phẩm bán được, chuyển giao được, và tạo đòn bẩy thu nhập mà không cần bộ máy cồng kềnh phía sau.",
    "Cùng một chuyên môn đó, khác nhau ở cách đóng gói, ra hai kết quả hoàn toàn khác nhau.",
    "Tháng 7 này, Thảo và team mở nguyên mô hình đó ra qua ba buổi liên tiếp. Miễn phí.",
  ],

  // 3 CARDS
  sessionsEyebrow: "★ 3 buổi trong chuỗi",
  sessionsTitle: "Chuỗi gồm 3 buổi liên tiếp",
  sessionsLead: "Một form đăng ký theo được cả ba. Mỗi buổi mở một mảnh của mô hình The One Person Business.",
  sessions: [
    {
      pill: "1",
      prefix: "Webinar 1 · ",
      title: "10X Course OS",
      sub: "Đóng gói sản phẩm chuyển giao",
      desc: "Quy trình 4 bước để biến chuyên môn thành sản phẩm bán được, chuyển giao được, nhân giá trị lên nhiều lần.",
      meta: ["● Đã diễn ra · Thứ 7 04/07", "● Livestream · Thảo + anh Đức"],
      note: "",
    },
    {
      pill: "2",
      prefix: "Webinar 2 · ",
      title: "Content Batching System",
      sub: "Sản xuất nội dung nhất quán, đồng bộ đa nền tảng cùng AI",
      desc: "Thiết lập hệ thống Content Batching — biến việc sản xuất nội dung thành một quy trình nhất quán, hiệu suất cao và đồng bộ trên mọi nền tảng cùng AI, thay vì làm tới đâu hay tới đó.",
      meta: ["● 9h sáng · Thứ 7 11/07", "● Livestream · Anh Khải đứng lớp chính"],
      note: "",
    },
    {
      pill: "3",
      prefix: "Bootcamp · ",
      title: "One Person Business × AI",
      sub: "Dựng nguyên hệ thống một người · Trả phí",
      desc: "4 ngày 3 đêm tại resort 5★ The Empyrean Cam Ranh. Ráp Media – Sales – Coaching thành một hệ thống vận hành có AI tăng tốc, mang về sơ đồ tổ chức và quy trình 3 phòng ban cho chính doanh nghiệp bạn.",
      meta: ["● 21–24/07 · The Empyrean Cam Ranh 5★", "● Chương trình trả phí · ~80 suất"],
      note: "Chương trình trả phí — giữ chỗ riêng. Xem chi tiết ở trang Bootcamp.",
      link: "https://bootcamp-nha-trang.vercel.app/",
      linkText: "Xem chi tiết Bootcamp →",
    },
  ],

  // PROOF
  statsEyebrow: "★ Nhà 10X trong 3 năm qua",
  stats: [
    { v: "3 năm", l: "Đồng hành cùng chuyên gia người Việt" },
    { v: "200+", l: "Coach, chuyên gia, chủ doanh nghiệp đã đi qua chương trình 10X" },
    { v: "Miễn phí", l: "Hai webinar mở màn của chuỗi — 10X Course OS & Content Batching System" },
  ],
  proofEyebrow: "★ Học viên nói gì",
  proofTitle: ["Cùng một chuyên môn —", "khác ở cách đóng gói"],
  proofLead: "Một vài phản hồi từ anh chị đã đóng gói lại sản phẩm cùng nhà 10X.",

  // FIT
  fitEyebrow: "★ Phù hợp / không phù hợp",
  fitTitle: "Chuỗi này dành cho ai",
  fitForTitle: "Dành cho anh chị nào",
  fitFor: [
    "Coach, chuyên gia đã có chuyên môn thật, đã giao được kết quả cho khách ngoài đời",
    "Chủ doanh nghiệp cá nhân muốn đóng gói dịch vụ thành sản phẩm chuyển giao được",
    "Người muốn làm việc một mình mà doanh thu vận hành như một công ty đông người",
    "Người đã quay khoá xong nhưng bán không được, hoặc bán ít mà không rõ vì sao",
  ],
  fitNotTitle: "Không dành cho anh chị nào",
  fitNot: [
    "Người mới hoàn toàn, chưa có chuyên môn thật để đóng gói",
    "Người tìm mô hình làm giàu nhanh không dựa trên chuyên môn",
    "Người không sẵn sàng xoay ngược cả cấu trúc sản phẩm từ gốc",
  ],

  // BONUS
  bonusEyebrow: "★ Quà mở màn",
  bonusTitle: "Món quà mở màn — chỉ có trong Webinar 1.",
  bonusName: "Canvas Đóng Gói 4 Bước", // ⚠️ chọn tên / chờ Thảo đặt
  bonusLead: "Bộ khung đóng gói sản phẩm chuyên môn 4 bước — bản canvas Thảo và team dùng để đóng gói cùng học viên. Nhận về, điền theo bốn ô có sẵn là ra một khung sản phẩm đủ rõ để bắt đầu:",
  bonusSteps: [
    { n: "1", t: "Khách hàng & định vị", d: "Chọn đúng người mình phục vụ và chỗ đứng của riêng mình." },
    { n: "2", t: "Offer", d: "Biến chuyên môn thành một lời mời người ta muốn mua, không phải một khoá học đầy đủ." },
    { n: "3", t: "Khung sản phẩm", d: "Sắp nội dung thành một lộ trình chuyển giao được." },
    { n: "4", t: "Hoàn thiện & mở bán", d: "Đóng gói vừa đủ để bán, thoát khỏi vòng lặp cầu toàn." },
  ],
  bonusClose: "Không phải quay thêm bài, không phải sửa thêm trang bán, không phải chờ đủ nội dung. Điền xong là có khung.",
  bonusOnly: "Chỉ dành cho anh chị em có mặt trực tiếp trong Webinar 1.",

  // FAQ
  faqEyebrow: "★ Hỏi & đáp",
  faqTitle: "Những câu hay gặp",
  faq: [
    { q: "Chuỗi này online hay offline?", a: "Hai webinar mở màn (10X Course OS và Content Batching System) diễn ra online qua livestream. Bootcamp One Person Business × AI là 4 ngày 3 đêm offline tại resort Cam Ranh." },
    { q: "Có phát lại bản quay không?", a: "Không phát công khai. Webinar 1 chỉ có trực tiếp trong phòng livestream sáng thứ 7." },
    { q: "Chi phí thế nào?", a: "Hai webinar mở màn hoàn toàn miễn phí. Bootcamp One Person Business × AI tại Cam Ranh là chương trình trả phí, giữ chỗ riêng — chi tiết và giá gửi cho anh/chị sau khi đăng ký (và có ngay ở trang Bootcamp)." },
    { q: "Người mới hoàn toàn có phù hợp không?", a: "Chuỗi hợp với anh chị đã có chuyên môn thật và đã giao được kết quả cho khách ngoài đời. Chưa có chuyên môn nền thì có thể vào nghe trước, nhưng phần thực chiến cần chuyên môn để đóng gói." },
    { q: "Đăng ký ở đâu?", a: "Điền form ngay trên trang này. Hoặc bình luận OPB dưới bài viết trên Facebook nhà 10X để nhận link." },
    { q: "Không dự được Webinar 1 thì sao?", a: "Vẫn theo được Webinar 2 và Bootcamp. Nhưng bộ khung 4 bước chỉ gửi trong Webinar 1, nên cố gắng thu xếp có mặt buổi đầu." },
  ],

  // FINAL CTA
  finalTitle: "Sẵn sàng bắt đầu One Person Business của riêng mình chưa?",
  finalBody: "Mở màn bằng Webinar 1 — 9h sáng thứ 7. Thảo và anh Đức đi thẳng vào quy trình 4 bước đóng gói. Phòng " + SEATS + " chỗ, không phát lại công khai.",
  finalBtn: "Giữ chỗ chuỗi webinar →",

  // FOOTER
  footerCopy: "© 2026 Nhà 10X · Tất cả các quyền được bảo hộ",
  footerLinks: "Liên hệ · Điều khoản · Bảo mật", // ⚠️ CẦN CHỐT link thật

  // STICKY
  stickyTitle: "Chuỗi webinar The One Person Business",
  stickyMeta: "9h sáng Thứ 7 11/07 · " + SEATS + " chỗ",
  stickyBtn: "Giữ chỗ ngay →",
};

const App = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [formData, setFormData] = React.useState({ name: "", email: "", phone: "", industry: "", stage: "", problems: [], question: "" });
  const toggleProblem = (val) =>
    setFormData((fd) => ({
      ...fd,
      problems: fd.problems.includes(val)
        ? fd.problems.filter((p) => p !== val)
        : [...fd.problems, val],
    }));
  const [stickyVisible, setStickyVisible] = React.useState(false);
  const [time, setTime] = React.useState(calcRemaining);

  const scrollToForm = () =>
    document.getElementById("optin").scrollIntoView({ behavior: "smooth" });

  React.useEffect(() => {
    const onScroll = () => {
      setStickyVisible(window.scrollY > 800 && window.scrollY < (document.body.scrollHeight - window.innerHeight - 600));
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    if (submitted) return;
    const selectors = [
      ".hero-tag-master", ".hero-title", ".hero-tagline", ".hero-sub", ".hero-meta", ".hero-cta-wrap", ".hero-image",
      ".section-eyebrow", ".section-title", ".lead",
      ".prose-p",
      ".foryou-card",
      ".session-row",
      ".fit-col",
      ".bonus-panel",
      ".faq-item",
      ".form-card",
      ".stat-item", ".stats-eyebrow",
      ".testimonial-img-card",
      ".final-cta h2", ".final-cta p", ".final-cta-btn",
      ".countdown-cell",
      ".ribbon",
    ];
    const els = document.querySelectorAll(selectors.join(","));
    els.forEach((el) => el.classList.add("reveal"));
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("revealed");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => {
      const sib = Array.from(el.parentElement?.children || []).indexOf(el);
      el.style.transitionDelay = `${Math.min(Math.max(sib, 0), 6) * 70}ms`;
      io.observe(el);
    });
    return () => io.disconnect();
  }, [submitted]);

  React.useEffect(() => {
    const tk = setInterval(() => setTime(calcRemaining()), 1000);
    return () => clearInterval(tk);
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    if (formData.problems.length === 0) {
      alert("Vui lòng chọn ít nhất một điều bạn đang mắc.");
      return;
    }
    setSubmitting(true);
    // 1) Google Sheet (teamSize giữ nguyên key để khớp Apps Script — nhãn cột "Tình trạng sản phẩm")
    const sheetReq = fetch(SHEET_ENDPOINT, {
      method: "POST",
      mode: "no-cors",
      headers: { "Content-Type": "text/plain;charset=utf-8" },
      body: JSON.stringify({ ...formData, teamSize: formData.stage, problems: formData.problems.join(" | ") }),
    });
    // 2) ConvertKit (Kit) — thêm subscriber vào form email sequence
    const ckBody = new URLSearchParams();
    ckBody.append("email_address", formData.email);
    ckBody.append("fields[first_name]", formData.name);
    const ckReq = fetch(CONVERTKIT_ENDPOINT, { method: "POST", mode: "no-cors", body: ckBody });
    try {
      await Promise.allSettled([sheetReq, ckReq]);
    } catch (err) {
      console.warn("submit error (non-fatal in no-cors mode)", err);
    }
    setSubmitting(false);
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  const pad = (n) => String(n).padStart(2, "0");

  if (submitted) {
    return (
      <div className="success-screen">
        <div className="success-card">
          <div className="success-check">✓</div>
          <h1 className="success-title">{T.successH3}</h1>
          <p className="success-sub">{T.successSub}</p>

          <div className="success-notice success-notice-zalo">
            <div className="notice-tag">{T.successN1Tag}</div>
            <p className="notice-desc">{T.successN1Desc}</p>
            <a className="zalo-join-btn" href={GROUP_LINK} target="_blank" rel="noopener noreferrer">
              {T.successGroupBtn}
            </a>
            <div className="zalo-qr-box">
              <img
                src="uploads/zalo-opb-qr.png"
                alt="QR nhóm Zalo W - One Person Business"
                onError={(e) => { const b = e.target.closest('.zalo-qr-box'); if (b) { b.style.display = 'none'; const cap = b.nextElementSibling; if (cap && cap.classList.contains('zalo-qr-caption')) cap.style.display = 'none'; } }}
              />
            </div>
            <span className="zalo-qr-caption">{T.successQrCaption}</span>
          </div>

          <div className="success-notice">
            <div className="notice-tag">{T.successN2Tag}</div>
            <div className="notice-time">🗓 {T.successN2Time}</div>
            <div className="zoom-row">
              <span className="zoom-label">{T.successN2LinkLabel}</span>
              <a className="zoom-link-highlight" href={LIVE_LINK} target="_blank" rel="noopener noreferrer">
                {LIVE_LINK_TEXT}
              </a>
            </div>
            <a className="gcal-btn" href={GCAL_URL} target="_blank" rel="noopener noreferrer">
              {T.successGcalBtn}
            </a>
          </div>

          <div className="success-notice">
            <div className="notice-tag">{T.successPrepTag}</div>
            <p className="notice-desc">{T.successPrepLead}</p>
            <div className="prep-grid">
              {T.successPrepItems.map((p, i) => (
                <div className="prep-item" key={i}>
                  <span className="prep-icon">{p.icon}</span>
                  <div className="prep-text">
                    <h4>{p.title}</h4>
                    <p>{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="prep-warning">{T.successPrepWarning}</div>
          </div>

          <a className="success-upsell-min" href={BOOTCAMP_LINK} target="_blank" rel="noopener noreferrer">
            <div className="upsell-min-label">Bước tiếp theo (không bắt buộc)</div>
            <div className="upsell-min-title">Bootcamp One Person Business × AI</div>
            <div className="upsell-min-desc">4 ngày offline tại Cam Ranh (21–24/07) · dựng nguyên hệ thống · trả phí, giữ chỗ riêng.</div>
            <div className="upsell-min-cta">Xem chi tiết Bootcamp →</div>
          </a>

          <div className="success-footnote">{T.successFootnote}</div>
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero" data-screen-label="Hero">
        <div className="site-logobar">
          <img src="uploads/10x-logo.png" alt="Nhà 10X" className="site-logo" />
        </div>
        <div className="hero-grid">
          <div>
            <h1 className="hero-title">
              Chuỗi Webinar<br /><span className="accent">One Person Business</span>
            </h1>
            <p className="hero-tagline">{T.heroTagline}</p>
            <p className="hero-sub">{T.heroSub}</p>
            <div className="hero-cta-wrap">
              <button className="hero-cta-btn" onClick={scrollToForm}>{T.heroCta}</button>
              <div className="hero-cta-note">{T.heroCtaNote}</div>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="label">{T.metaTime}</div>
                <div className="val">{T.metaTimeVal}</div>
              </div>
              <div className="hero-meta-item">
                <div className="label">{T.metaPlat}</div>
                <div className="val">{T.metaPlatVal}</div>
              </div>
              <div className="hero-meta-item">
                <div className="label">{T.metaCost}</div>
                <div className="val">{T.metaCostVal}</div>
              </div>
            </div>
          </div>
          <div className="hero-image">
            <img src="uploads/photo2.jpg" alt="Thảo — nhà 10X" className="hero-photo" />
            <div className="hero-badge">{T.liveBadge}</div>
          </div>
        </div>
      </section>

      {/* RIBBON */}
      <div className="ribbon">
        <div className="ribbon-inner">
          {Array.from({ length: 3 }).map((_, i) => (
            <React.Fragment key={i}>
              {T.ribbon1.map((s, j) => <span key={j}>{s}</span>)}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* OPT-IN FORM */}
      <section className="optin" id="optin" data-screen-label="Opt-in form">
        <div className="optin-wrap">
          <div className="optin-left">
            <h2>{T.optinTitle}</h2>
            <p>{T.optinIntro}</p>
            <div className="optin-list-title">{T.optinListTitle}</div>
            <ul className="bonus-list">
              {T.optinList.map((s, i) => (
                <li key={i}>
                  <span className="bonus-check">✓</span>
                  <div>{s}</div>
                </li>
              ))}
            </ul>
          </div>

          <div className="form-card">
            <form onSubmit={submit}>
              <span className="form-tag">{T.formTag}</span>
              <h3>{T.formH3}</h3>
              <div className="seats"><span className="dot"></span> {T.seats}</div>

              <div className="field">
                <label>{T.fName}</label>
                <input required type="text" placeholder={T.fNamePh} value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} />
              </div>
              <div className="field">
                <label>{T.fEmail}</label>
                <input required type="email" placeholder={T.fEmailPh} value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value })} />
              </div>
              <div className="field">
                <label>{T.fPhone}</label>
                <input required type="tel" placeholder={T.fPhonePh} value={formData.phone} onChange={(e) => setFormData({ ...formData, phone: e.target.value })} />
              </div>
              <div className="field">
                <label>{T.fIndustry}</label>
                <input required type="text" placeholder={T.fIndustryPh} value={formData.industry} onChange={(e) => setFormData({ ...formData, industry: e.target.value })} />
              </div>
              <div className="field">
                <label>{T.fStage}</label>
                <select required className="form-select" value={formData.stage} onChange={(e) => setFormData({ ...formData, stage: e.target.value })}>
                  <option value="" disabled>{T.fStagePh}</option>
                  {T.fStageOptions.map((o) => (
                    <option key={o} value={o}>{o}</option>
                  ))}
                </select>
              </div>
              <div className="field">
                <label>{T.fProblems}</label>
                <div className="checkbox-group">
                  {T.fProblemsOptions.map((o) => (
                    <label key={o} className={"checkbox-item" + (formData.problems.includes(o) ? " checked" : "")}>
                      <input type="checkbox" checked={formData.problems.includes(o)} onChange={() => toggleProblem(o)} />
                      <span>{o}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>{T.fQ}</label>
                <textarea placeholder={T.fQPh} value={formData.question} onChange={(e) => setFormData({ ...formData, question: e.target.value })}></textarea>
              </div>

              <button type="submit" className="submit-btn" disabled={submitting}>
                {submitting ? T.btnSubmitting : T.btnSubmit}
              </button>
              <div className="privacy">{T.privacy}</div>
            </form>
          </div>
        </div>
      </section>

      {/* COUNTDOWN */}
      <section className="countdown-section" data-screen-label="Countdown">
        <div className="countdown-label">{T.countdownLabel}</div>
        <div className="countdown-grid">
          {[
            { v: pad(time.d), l: T.cd.d },
            { v: pad(time.h), l: T.cd.h },
            { v: pad(time.m), l: T.cd.m },
            { v: pad(time.s), l: T.cd.s },
          ].map((c) => (
            <div className="countdown-cell" key={c.l}>
              <div className="countdown-num">{c.v}</div>
              <div className="countdown-unit">{c.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PROBLEM */}
      <section className="section" data-screen-label="Problem">
        <div className="section-eyebrow">{T.problemEyebrow}</div>
        <h2 className="section-title">{T.problemTitle}</h2>
        <div className="prose">
          {T.problemBody.map((p, i) => <p className="prose-p" key={i}>{p}</p>)}
        </div>
      </section>

      {/* SOLUTION */}
      <section className="section dark" data-screen-label="Solution">
        <div className="section-eyebrow">{T.solutionEyebrow}</div>
        <h2 className="section-title">{T.solutionTitle}</h2>
        <div className="prose prose-light">
          {T.solutionBody.map((p, i) => <p className="prose-p" key={i}>{p}</p>)}
        </div>
      </section>

      {/* 3 SESSIONS */}
      <section className="section" data-screen-label="3 sessions">
        <div className="section-eyebrow">{T.sessionsEyebrow}</div>
        <h2 className="section-title">{T.sessionsTitle}</h2>
        <p className="lead">{T.sessionsLead}</p>
        <div className="sessions-list">
          {T.sessions.map((s, i) => (
            <div className="session-row" key={i}>
              <div className="session-date-pill">{s.pill}</div>
              <div className="session-content">
                <h3><span className="webinar-prefix">{s.prefix}</span>{s.title}</h3>
                <div className="session-sub">{s.sub}</div>
                <p>{s.desc}</p>
                <div className="session-meta">
                  {s.meta.map((m, j) => <span key={j}>{m}</span>)}
                </div>
                {s.note && <div className="session-note">★ {s.note}</div>}
                {s.link && (
                  <a className="session-link" href={s.link} target="_blank" rel="noopener noreferrer">
                    {s.linkText}
                  </a>
                )}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PROOF — STATS */}
      <section className="stats-strip" data-screen-label="Stats">
        <div className="stats-eyebrow">{T.statsEyebrow}</div>
        <div className="stats-grid stats-grid-3">
          {T.stats.map((s, i) => (
            <div className="stat-item" key={i}>
              <div className="stat-num">{s.v}</div>
              <div className="stat-label">{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* RIBBON */}
      <div className="ribbon">
        <div className="ribbon-inner">
          {Array.from({ length: 6 }).map((_, i) => (
            <span key={i}>{T.ribbon2}</span>
          ))}
        </div>
      </div>

      {/* PROOF — TESTIMONIALS (⚠️ tái dùng ảnh cũ — xác nhận không dính MIR) */}
      <section className="section" style={{ background: "#ebe9e6" }} data-screen-label="Testimonials">
        <div className="section-eyebrow">{T.proofEyebrow}</div>
        <h2 className="section-title">{T.proofTitle[0]}<br />{T.proofTitle[1]}</h2>
        <p className="lead">{T.proofLead}</p>
        <div className="testimonial-gallery">
          {["38","40","42","44","47","48","51","52","53","54"].map((n) => (
            <div className="testimonial-img-card" key={n}>
              <img src={`uploads/testimonials/${n}.png`} alt={`Phản hồi học viên ${n}`} loading="lazy" />
            </div>
          ))}
        </div>
      </section>

      {/* FIT / NOT FIT */}
      <section className="section" data-screen-label="Fit">
        <div className="section-eyebrow">{T.fitEyebrow}</div>
        <h2 className="section-title">{T.fitTitle}</h2>
        <div className="fit-wrap">
          <div className="fit-col fit-col--for">
            <h3>{T.fitForTitle}</h3>
            <ul>
              {T.fitFor.map((x, i) => (
                <li key={i}><span className="fit-mark fit-yes">✓</span>{x}</li>
              ))}
            </ul>
          </div>
          <div className="fit-col fit-col--not">
            <h3>{T.fitNotTitle}</h3>
            <ul>
              {T.fitNot.map((x, i) => (
                <li key={i}><span className="fit-mark fit-no">✕</span>{x}</li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* BONUS */}
      <section className="section dark" data-screen-label="Bonus">
        <div className="section-eyebrow">{T.bonusEyebrow}</div>
        <h2 className="section-title">{T.bonusTitle}</h2>
        <div className="bonus-panel">
          <div className="bonus-name-tag">🎁 {T.bonusName}</div>
          <p className="bonus-lead">{T.bonusLead}</p>
          <div className="bonus-steps">
            {T.bonusSteps.map((s) => (
              <div className="bonus-step" key={s.n}>
                <div className="bonus-step-num">{s.n}</div>
                <div>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
          <p className="bonus-close">{T.bonusClose}</p>
          <div className="bonus-only">★ {T.bonusOnly}</div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" data-screen-label="FAQ">
        <div className="section-eyebrow">{T.faqEyebrow}</div>
        <h2 className="section-title">{T.faqTitle}</h2>
        <div className="faq-list">
          {T.faq.map((f, i) => (
            <details className="faq-item" key={i}>
              <summary className="faq-q">{f.q}<span className="faq-ico">+</span></summary>
              <div className="faq-a">{f.a}</div>
            </details>
          ))}
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="final-cta" data-screen-label="Final CTA">
        <h2><span className="cta-line">{T.finalTitle}</span></h2>
        <p>{T.finalBody}</p>
        <button className="final-cta-btn" onClick={scrollToForm}>{T.finalBtn}</button>
      </section>

      {/* FOOTER */}
      <footer>
        <div className="footer-left">
          <img src="uploads/10X logo.png" alt="10X" className="footer-logo" />
          <span>{T.footerCopy}</span>
        </div>
        <div className="footer-links">
          <a href="https://www.skool.com/thenewrich" target="_blank" rel="noopener noreferrer" className="footer-community">
            ★ Tham gia cộng đồng The New Rich (miễn phí)
          </a>
          <span className="footer-legal">{T.footerLinks}</span>
        </div>
      </footer>

      {/* STICKY BAR */}
      <div className={"sticky-bar " + (stickyVisible ? "visible" : "")}>
        <div className="info">
          <div className="countdown-mini">{time.d > 0 ? time.d + " " + T.cd.d + " · " : ""}{pad(time.h)}:{pad(time.m)}:{pad(time.s)}</div>
          <div className="text">
            {T.stickyTitle}
            <small>{T.stickyMeta}</small>
          </div>
        </div>
        <button onClick={scrollToForm}>{T.stickyBtn}</button>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
