/* Static editorial sections */

function Hero() {
  return (
    <header className="section" style={{ paddingTop: "clamp(48px,7vw,84px)", paddingBottom: "clamp(40px,6vw,72px)" }}>
      <div className="wrap">
        <div className="row between center wrapflex" style={{ gap: 16, marginBottom: "clamp(40px,7vw,72px)" }}>
          <p className="eyebrow no-tick">Báo cáo nội bộ · Founder Brief</p>
          <p className="mono small muted" style={{ letterSpacing: ".06em" }}>Cập nhật 06 · 2026</p>
        </div>

        <h1>
          Phát hành app<br />ra thế giới<br />
          <span className="serif-it" style={{ color: "var(--accent)" }}>từ Việt Nam</span>
        </h1>

        <div className="grid2" style={{ marginTop: "clamp(36px,5vw,56px)", gridTemplateColumns: "1.3fr 1fr", alignItems: "end" }}>
          <p className="lede body-col" style={{ margin: 0 }}>
            Cẩm nang vận hành cho startup phát hành app <strong>freemium + subscription</strong> trên
            App Store &amp; Google Play, target thị trường quốc tế — từ chọn loại tài khoản, cơ cấu phí,
            thuế Việt Nam, đến <em className="serif-it">ước tính doanh thu</em> và <em className="serif-it">timeline đến ngày thu phí</em>.
          </p>
          <p className="small muted" style={{ margin: 0 }}>
            Tổng hợp từ 60 nguồn &amp; 50 claim kiểm chứng. Tài liệu mang tính tham khảo —
            không thay thế tư vấn chuyên gia thuế &amp; pháp lý.
          </p>
        </div>
      </div>
    </header>
  );
}

function KeyFacts() {
  const stats = [
    { k: <>$99<span className="unit">/năm</span></>, lab: "Apple Developer Program", sub: "Google Play: $25 một lần" },
    { k: <>15<span className="unit">%</span></>, lab: "Phí nền tảng thực tế nếu đăng ký Small Business — không phải 30%", sub: "Doanh thu < $1M/năm" },
    { k: <>14<span className="unit"> ngày</span></>, lab: "Closed testing bắt buộc với account cá nhân mới trên Google Play", sub: "Tài khoản DN: bỏ qua" },
    { k: <>#3</>, lab: "Việt Nam xếp hạng thế giới về số app bị gỡ — 9.664 app năm 2024", sub: "Compliance cần ưu tiên" },
  ];
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <p className="eyebrow" style={{ marginBottom: 22 }}>Bốn điều cần nắm trước tiên</p>
        <div className="statgrid">
          {stats.map((s, i) => (
            <div className="stat" key={i}>
              <span className="k">{s.k}</span>
              <div className="lab">{s.lab}</div>
              <div className="sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const CMP_ROWS = [
  { crit: "Phí đăng ký", a: <>Apple <strong>$99/năm</strong> · Google <strong>$25</strong> một lần</>, b: <>Giống cá nhân về phí platform</> },
  { crit: "Tên hiển thị trên store", a: <>Tên <strong>cá nhân</strong></>, b: <>Tên <strong>pháp nhân</strong> — uy tín hơn</> },
  { crit: "D-U-N-S Number", a: <span className="tick">Không cần</span>, b: <span className="cross">Bắt buộc · mất ~2–4 tuần</span> },
  { crit: "14 ngày testing (Google)", a: <span className="cross">Bắt buộc · 12+ tester</span>, b: <span className="tick">Bỏ qua hoàn toàn</span> },
  { crit: "Thuế chính", a: <>PIT 2% + VAT 5% <span className="muted">(≈ 7% trên doanh thu)</span></>, b: <>CIT theo lợi nhuận · <strong>ưu đãi phần mềm 10%</strong></> },
  { crit: "Khấu trừ chi phí", a: <span className="muted">Hạn chế</span>, b: <>Nhiều hơn <span className="muted">(phí platform, lương, BHXH…)</span></> },
  { crit: "Phù hợp gọi vốn", a: <span className="cross">Kém</span>, b: <span className="tick">Tốt — IP &amp; payout sạch</span> },
  { crit: "Độ phức tạp vận hành", a: <span className="tick">Thấp</span>, b: <>Cao hơn</> },
];

function Comparison() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <SecHead num="01" eyebrow="Chọn loại tài khoản"
          title="Cá nhân <span class='serif-it' style='color:var(--accent)'>hay</span> Doanh nghiệp?"
          lede="Cá nhân ra thị trường nhanh và đơn giản về thuế ở giai đoạn đầu. Doanh nghiệp tốn công setup nhưng sạch sẽ cho gọi vốn, sở hữu IP và tối ưu thuế dài hạn." />

        <div className="cmp">
          <div className="cmp-row cmp-head">
            <div className="crit"></div>
            <div className="cmp-col-a">
              <span className="col-t">Cá nhân
                <span className="pill" style={{ background: "var(--paper-3)", color: "var(--ink-mute)" }}>Individual</span>
              </span>
            </div>
            <div className="cmp-col-b">
              <span className="col-t">Doanh nghiệp
                <span className="pill" style={{ background: "var(--accent)", color: "#fff" }}>Organization</span>
              </span>
            </div>
          </div>
          {CMP_ROWS.map((r, i) => (
            <div className="cmp-row" key={i}>
              <div className="crit">{r.crit}</div>
              <div className="cmp-col-a cmp-val" data-col="Cá nhân">{r.a}</div>
              <div className="cmp-col-b cmp-val" data-col="Doanh nghiệp">{r.b}</div>
            </div>
          ))}
        </div>

        <p className="small muted" style={{ marginTop: 18, maxWidth: "70ch" }}>
          <strong style={{ color: "var(--ink-soft)" }}>Khuyến nghị:</strong> Giai đoạn MVP/doanh thu thấp có thể launch cá nhân.
          Khi chuẩn bị gọi vốn hoặc doanh thu tăng, chuyển sang doanh nghiệp — tư vấn Big 4 để chọn đúng thời điểm chuyển đổi.
        </p>
      </div>
    </section>
  );
}

/* ---- Fee waterfall (static, illustrative on $10 sub) ---- */
function FeeWaterfall() {
  const steps = [
    { lab: "Người dùng trả (Gross)", val: 10.0, pct: 100, type: "start" },
    { lab: "− Phí nền tảng (15% Small Business)", val: -1.5, pct: 15, type: "cut" },
    { lab: "− Thuế khấu trừ tại nguồn (~10%)", val: -0.85, pct: 8.5, type: "cut" },
    { lab: "− Phí chuyển tiền & đổi ngoại tệ (~1.5%)", val: -0.15, pct: 1.5, type: "cut" },
    { lab: "Tiền thực về tài khoản VN", val: 7.5, pct: 75, type: "end" },
  ];
  let running = 100;
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <SecHead num="02" eyebrow="Dòng tiền thực nhận"
          title="Từ <span class='num'>$10</span> người dùng trả<br/>còn lại bao nhiêu về Việt Nam?"
          lede="Với gói $10/tháng và đã đăng ký Small Business Program (15%). Đây là ước tính minh họa — mức thực tế tuỳ loại tài khoản, cấu trúc thuế và thoả thuận ngân hàng." />

        <div className="card" style={{ padding: "clamp(24px,4vw,40px)" }}>
          <div className="stack" style={{ gap: 0 }}>
            {steps.map((s, i) => {
              const isBar = s.type !== "start" && s.type !== "end";
              let barLeft = 0, barW = 0;
              if (s.type === "start") { barW = 100; }
              else if (s.type === "end") { barW = s.pct; }
              else { running -= s.pct; barLeft = running; barW = s.pct; }
              const color = s.type === "start" ? "var(--ink)" : s.type === "end" ? "var(--green)" : "var(--taupe)";
              return (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 96px", gap: 20, alignItems: "center",
                  padding: "15px 0", borderBottom: i < steps.length - 1 ? "1px solid var(--line-soft)" : "none" }}>
                  <div>
                    <div style={{ fontSize: 15, color: s.type === "cut" ? "var(--ink-soft)" : "var(--ink)", fontWeight: s.type === "end" ? 600 : 400, marginBottom: 9 }}>
                      {s.lab}
                    </div>
                    <div style={{ position: "relative", height: 14, background: "var(--paper-3)", borderRadius: 2 }}>
                      <div style={{ position: "absolute", top: 0, bottom: 0, left: barLeft + "%", width: barW + "%",
                        background: color, borderRadius: 2, transition: "all .4s" }} />
                    </div>
                  </div>
                  <div className="num" style={{ textAlign: "right", fontSize: 19, color, fontWeight: s.type === "end" ? 600 : 400 }}>
                    {s.val > 0 && s.type !== "start" ? "+" : ""}{s.val < 0 ? "−$" + Math.abs(s.val).toFixed(2) : "$" + s.val.toFixed(2)}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <p className="small muted" style={{ marginTop: 16 }}>
          Muốn tính cho con số của riêng bạn? <a href="#calc">Dùng công cụ ước tính doanh thu →</a>
        </p>
      </div>
    </section>
  );
}

/* ---- Vietnam tax ---- */
function TaxSection() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <SecHead num="03" eyebrow="Thuế Việt Nam"
          title="Phần mềm được ưu đãi<br/>mạnh — <span class='serif-it' style='color:var(--accent)'>nếu</span> đủ hồ sơ"
          lede="App được xếp vào ngành “sản xuất phần mềm” → mở khóa loạt ưu đãi CIT. Nhưng phải tự lập &amp; lưu trữ hồ sơ chứng minh, nếu không sẽ bị truy thu hồi tố." />

        <div className="grid2">
          <div className="card" style={{ padding: "30px 28px" }}>
            <p className="eyebrow no-tick" style={{ color: "var(--ink-mute)" }}>Tài khoản cá nhân</p>
            <h3 style={{ marginTop: 14, marginBottom: 18 }}>Thuế khoán trên doanh thu</h3>
            <div className="stack" style={{ gap: 14 }}>
              {[["PIT — Thuế TNCN", "2%"], ["VAT", "5%"], ["FCT trên hoa hồng Apple", "5%"]].map(([a, b], i) => (
                <div key={i} className="row between center" style={{ borderBottom: "1px dotted var(--line)", paddingBottom: 12 }}>
                  <span style={{ fontSize: 15, color: "var(--ink-soft)" }}>{a}</span>
                  <span className="num" style={{ fontSize: 22 }}>{b}</span>
                </div>
              ))}
            </div>
            <p className="small muted" style={{ marginTop: 18 }}>Đơn giản, tính trực tiếp trên doanh thu. Hiệu lực thay đổi thuế Apple từ 21/8/2025.</p>
          </div>

          <div className="card" style={{ padding: "30px 28px", borderColor: "var(--accent-soft)", background: "var(--paper-2)" }}>
            <p className="eyebrow no-tick" style={{ color: "var(--accent)" }}>Tài khoản doanh nghiệp · phần mềm</p>
            <h3 style={{ marginTop: 14, marginBottom: 18 }}>Ưu đãi CIT theo lợi nhuận</h3>
            <div className="stack" style={{ gap: 14 }}>
              {[
                ["Thuế suất ưu đãi phần mềm", "10%", "trong 15 năm"],
                ["Miễn thuế hoàn toàn", "0%", "4 năm đầu có lãi"],
                ["Giảm 50% tiếp theo", "≈5%", "9 năm sau đó"],
                ["Thuế chuẩn theo quy mô", "15–20%", "nếu không ưu đãi"],
              ].map(([a, b, c], i) => (
                <div key={i} className="row between center" style={{ borderBottom: "1px dotted var(--line)", paddingBottom: 12 }}>
                  <span style={{ fontSize: 15, color: "var(--ink-soft)" }}>{a}<br /><span className="mono" style={{ fontSize: 11.5, color: "var(--ink-faint)", letterSpacing: ".04em" }}>{c}</span></span>
                  <span className="num" style={{ fontSize: 22, color: "var(--accent)" }}>{b}</span>
                </div>
              ))}
            </div>
            <p className="small muted" style={{ marginTop: 18 }}>Phải lưu hồ sơ chứng minh “sản xuất phần mềm” (PRD, wireframe, thiết kế, source). SME mới còn có thể miễn CIT 3 năm.</p>
          </div>
        </div>

        <div style={{ marginTop: 26, padding: "20px 24px", background: "var(--ink)", borderRadius: 4, color: "var(--paper)" }}>
          <p className="mono small" style={{ margin: 0, letterSpacing: ".04em", lineHeight: 1.6 }}>
            <span style={{ color: "var(--accent-soft)" }}>⚠ CẢNH BÁO CHỨNG TỪ —</span> Apple/Google
            không phát hành hóa đơn VAT chuẩn Việt Nam. Chi phí platform <strong>được ghi vào chi phí được trừ CIT</strong> nếu đủ chứng từ,
            nhưng <strong>không khấu trừ được VAT đầu vào</strong>. Tham vấn Big 4 trước khi khai thuế.
          </p>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="section" style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div className="wrap">
        <div className="grid2" style={{ gridTemplateColumns: "1.4fr 1fr", gap: 40 }}>
          <div>
            <p className="eyebrow no-tick" style={{ color: "var(--accent-soft)" }}>Lưu ý cuối</p>
            <p className="lede" style={{ color: "var(--paper)", marginTop: 18, maxWidth: "40ch" }}>
              Luật thuế &amp; chính sách platform thay đổi liên tục. Luôn xác nhận từ nguồn chính thức
              và tư vấn chuyên gia trước mọi quyết định kinh doanh quan trọng.
            </p>
          </div>
          <div className="small" style={{ color: "var(--ink-faint)", lineHeight: 1.9 }}>
            <p className="mono" style={{ letterSpacing: ".1em", textTransform: "uppercase", fontSize: 11, color: "var(--ink-mute)", marginBottom: 12 }}>Nguồn tham khảo</p>
            Apple Developer Program · App Store Small Business Program · Google Play Console · Vietnam Briefing ·
            Luật CIT 67/2025/QH15 · Nghị định 20/2026/NĐ-CP · RevenueCat · Apple Transparency Report 2024
          </div>
        </div>
        <hr className="rule" style={{ borderColor: "rgba(255,255,255,0.12)", margin: "40px 0 24px" }} />
        <div className="row between wrapflex mono small" style={{ color: "var(--ink-mute)", letterSpacing: ".05em", gap: 12 }}>
          <span>Founder Brief · Phát hành app từ Việt Nam</span>
          <span>06 · 2026 · Tài liệu tham khảo</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, KeyFacts, Comparison, FeeWaterfall, TaxSection, Footer });