// VISANA — Visa Hàn Quốc hero · 4 right-side treatments (no illustration; text + brand "V")
const { useMemo: useMemoV } = React;

// ---- Lucide icon helper ----
function Icon({ name, size = 18, color, stroke = 2, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, stroke: color || 'currentColor', 'stroke-width': stroke },
        nameAttr: 'data-lucide',
      });
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} style={{ display: 'inline-flex', ...style }} />;
}

// ---- Korean-flag chip (geometric, brand-safe) ----
function KoreaFlag() {
  const blue = '#003478', red = '#C60C30', ink = '#16224A';
  return (
    <span className="fg" aria-hidden="true" style={{ background: '#fff' }}>
      <svg viewBox="0 0 24 16" width="24" height="16">
        <rect width="24" height="16" fill="#fff" />
        <path d="M12 3 A5 5 0 0 1 12 13 A2.5 2.5 0 0 1 12 8 A2.5 2.5 0 0 0 12 3 Z" fill={red} />
        <path d="M12 3 A5 5 0 0 0 12 13 A2.5 2.5 0 0 0 12 8 A2.5 2.5 0 0 1 12 3 Z" fill={blue} />
        <rect x="2.4" y="2.6" width="3.6" height="0.9" fill={ink} transform="rotate(33 4.2 3)" />
        <rect x="18" y="2.6" width="3.6" height="0.9" fill={ink} transform="rotate(-33 19.8 3)" />
        <rect x="2.4" y="12.5" width="3.6" height="0.9" fill={ink} transform="rotate(-33 4.2 13)" />
        <rect x="18" y="12.5" width="3.6" height="0.9" fill={ink} transform="rotate(33 19.8 13)" />
      </svg>
    </span>
  );
}

// ---- Brand "V" mark (paths from assets/mark-positive.svg), recolorable / gradient ----
function VMark({ gradient, fill = 'currentColor', style, className }) {
  const gid = useMemoV(() => 'vg' + Math.random().toString(36).slice(2), []);
  const paint = gradient ? `url(#${gid})` : fill;
  return (
    <svg viewBox="0 0 841.89 595.28" className={className} style={style} aria-hidden="true">
      {gradient && (
        <defs>
          <linearGradient id={gid} gradientUnits="userSpaceOnUse" x1="235" y1="55" x2="516" y2="430">
            <stop offset="0" stopColor={gradient[0]} />
            {gradient[2] && <stop offset="0.5" stopColor={gradient[2]} />}
            <stop offset="1" stopColor={gradient[1]} />
          </linearGradient>
        </defs>
      )}
      <path fill={paint} d="M396.12,400.17l-42.75-100.98c-13.34-31.51-44.24-51.98-78.45-51.98h-36.73l90.43,215.31c5.43,15.74,17.73,27.68,32.86,32.98c5.76,2.05,11.94,3.1,18.31,3.03h32.64c8.04,0.09,15.78-1.63,22.77-4.84c13.02-5.93,23.47-17.02,28.39-31.17l120.98-344.98h-87.67L396.12,400.17z" />
      <path fill={paint} d="M258.82,211.75c27.81-2.19,50.33-24.72,52.53-52.53c2.79-35.35-26.49-64.63-61.84-61.84c-27.81,2.19-50.33,24.72-52.53,52.53C194.19,185.26,223.47,214.54,258.82,211.75z" />
    </svg>
  );
}

// ---- Brand "V" mark with a swappable TOP motif (replaces the dot) ----
function VFancy({ top = 'dot', style, className }) {
  const gid = useMemoV(() => 'vf' + Math.random().toString(36).slice(2), []);
  const aqua = '#00C99A';
  const tops = {
    dot: <circle cx="258" cy="150" r="57" fill={aqua} />,
    chevron: <polyline points="234,114 292,151 234,188" fill="none" stroke={aqua} strokeWidth="38" strokeLinecap="round" strokeLinejoin="round" />,
    cap: <path d="M206,176 Q258,90 310,176" fill="none" stroke={aqua} strokeWidth="34" strokeLinecap="round" />,
    smile: <path d="M206,130 Q258,216 310,130" fill="none" stroke={aqua} strokeWidth="34" strokeLinecap="round" />,
    star: <polygon points="258,90 272.1,130.6 313.2,132.1 280.8,157.4 292.1,196.9 258,174 223.9,196.9 235.2,157.4 202.8,132.1 243.9,130.6" fill={aqua} stroke={aqua} strokeWidth="12" strokeLinejoin="round" />,
    play: <polygon points="232,106 232,196 306,151" fill={aqua} stroke={aqua} strokeWidth="16" strokeLinejoin="round" strokeLinecap="round" />,
    heart: <path d="M258,190 C226,160 202,142 202,118 C202,101 218,90 234,95 C246,98.5 254,110 258,119 C262,110 270,98.5 282,95 C298,90 314,101 314,118 C314,142 290,160 258,190 Z" fill={aqua} />,
  };
  return (
    <svg viewBox="178 72 410 414" className={className} style={style} aria-hidden="true">
      <defs>
        <linearGradient id={gid} gradientUnits="userSpaceOnUse" x1="235" y1="200" x2="500" y2="470">
          <stop offset="0" stopColor="#09DFAB" />
          <stop offset="0.34" stopColor="#0EB2AC" />
          <stop offset="1" stopColor="#1A43AD" />
        </linearGradient>
      </defs>
      <path fill={`url(#${gid})`} d="M396.12,400.17l-42.75-100.98c-13.34-31.51-44.24-51.98-78.45-51.98h-36.73l90.43,215.31c5.43,15.74,17.73,27.68,32.86,32.98c5.76,2.05,11.94,3.1,18.31,3.03h32.64c8.04,0.09,15.78-1.63,22.77-4.84c13.02-5.93,23.47-17.02,28.39-31.17l120.98-344.98h-87.67L396.12,400.17z" />
      {tops[top] || tops.dot}
    </svg>
  );
}

// ---- Wordmark lockup: fancy "V" symbol + VISANA ----
function Wordmark({ top = 'chevron', dark = false, tag, className }) {
  return (
    <div className={'wmk-lockup ' + (dark ? 'is-dark ' : '') + (className || '')}>
      <VFancy top={top} className="wmk-v" />
      <div className="wmk-words">
        <span className="wmk-txt">VISANA</span>
        {tag && <span className="wmk-tag">{tag}</span>}
      </div>
    </div>
  );
}

// ---- Shared LEFT column (identical to live hero; `short` = trimmed headline) ----
function HeroLeft({ short }) {
  return (
    <div className="htext">
      <span className="flag"><KoreaFlag /> Visa Hàn Quốc · Du lịch · Công tác · Thăm thân</span>
      {short
        ? <h1>Dịch vụ tư vấn <span className="em">Visa Hàn Quốc</span></h1>
        : <h1>Dịch vụ xin <span className="em">Visa Hàn Quốc</span> du lịch, công tác, thăm thân & 5 năm</h1>}
      <p className="sub">{short
        ? 'Tư vấn 1-1 cùng chuyên gia 17+ năm — VISANA lo trọn hồ sơ, đúng quy định ĐSQ, để tấm visa Hàn Quốc nằm gọn trong tầm tay bạn.'
        : 'Hàn Quốc nới lỏng chính sách, nhu cầu tăng cao khiến ĐSQ quá tải. Để VISANA lo trọn hồ sơ — đơn giản, nhanh chóng, đúng quy định, để tấm visa Hàn Quốc nằm gọn trong tầm tay bạn.'}</p>
      <div className="badges">
        <div className="badge"><span className="bi"><Icon name="award" size={20} /></span><div><div className="bn">17+ năm</div><div className="bl">Kinh nghiệm</div></div></div>
        <div className="badge"><span className="bi"><Icon name="clock-3" size={20} /></span><div><div className="bn">7–10 ngày</div><div className="bl">Thời gian có kết quả</div></div></div>
      </div>
      <div className="hero-cta">
        <button className="btn btn-accent btn-lg" type="button">Đăng ký tư vấn miễn phí <Icon name="arrow-right" size={19} /></button>
        <button className="btn btn-secondary btn-lg" type="button"><Icon name="gift" size={19} /> Xem ưu đãi & bảng giá</button>
      </div>
    </div>
  );
}

function HeroFrame({ right, short }) {
  return (
    <section className="hero-my khv" data-screen-label="Hero">
      <div className="glow" />
      <div className="wrap">
        <HeroLeft short={short} />
        <div className="hero-showcase rv-stage">{right}</div>
      </div>
    </section>
  );
}

/* Single-column hero shell (canh giữa, xếp dọc) */
function HeroOne({ children, dark }) {
  return (
    <section className={'hero-my khv khv-one' + (dark ? ' is-dark' : '')} data-screen-label="Hero">
      <div className="glow" />
      <div className="wrap-one">{children}</div>
    </section>
  );
}
function OneTop({ dark, top = 'chevron' }) {
  return (
    <React.Fragment>
      <span className="flag"><KoreaFlag /> Visa Hàn Quốc · Du lịch · Công tác · Thăm thân</span>
      <Wordmark top={top} dark={dark} className="one-wmk" />
      <h1 className="one-h1">Dịch vụ tư vấn <span className="em">Visa Hàn Quốc</span></h1>
      <p className="one-sub">Tư vấn 1-1 cùng chuyên gia 17+ năm — VISANA lo trọn hồ sơ, đúng quy định ĐSQ, để tấm visa Hàn Quốc nằm gọn trong tầm tay bạn.</p>
    </React.Fragment>
  );
}
function OneCta({ dark }) {
  return (
    <div className="hero-cta one-cta">
      <button className="btn btn-accent btn-lg" type="button">Đăng ký tư vấn miễn phí <Icon name="arrow-right" size={19} /></button>
      <button className={'btn btn-lg ' + (dark ? 'btn-ghost-light' : 'btn-secondary')} type="button"><Icon name="gift" size={19} /> Xem ưu đãi & bảng giá</button>
    </div>
  );
}

/* V9 — 4 selling point thành 1 hàng ngang, nền sáng */
function Hero9() {
  const sp = [
    { ic: 'badge-check', t: '98,6%', d: 'Tỷ lệ đậu visa' },
    { ic: 'award', t: '17+ năm', d: 'Kinh nghiệm' },
    { ic: 'rocket', t: '7–10 ngày', d: 'Có kết quả' },
    { ic: 'headset', t: '24/7', d: 'Hỗ trợ toàn quốc' },
  ];
  return (
    <HeroOne>
      <OneTop top="chevron" />
      <div className="one-row">
        {sp.map(x => (
          <div className="one-cell" key={x.t}>
            <span className="ic"><Icon name={x.ic} size={20} /></span>
            <div className="t">{x.t}</div>
            <div className="d">{x.d}</div>
          </div>
        ))}
      </div>
      <OneCta />
    </HeroOne>
  );
}

/* V10 — Panel navy, wordmark lớn + chip điểm mạnh 1 hàng */
function Hero10() {
  const sp = ['Hồ sơ trọn gói A–Z', 'Đúng quy định ĐSQ', 'Cam kết hoàn phí nếu trượt', 'Đồng hành đến khi đậu'];
  return (
    <HeroOne dark>
      <OneTop dark top="star" />
      <div className="one-chips">
        {sp.map(s => <span className="one-chip" key={s}><Icon name="check" size={15} /> {s}</span>)}
      </div>
      <OneCta dark />
    </HeroOne>
  );
}

/* V11 — Wordmark + 1 dòng chỉ số gạch chia, nền sáng */
function Hero11() {
  const sp = [['98,6%', 'Tỷ lệ đậu'], ['1.000.000+', 'Khách hàng'], ['17+', 'Năm kinh nghiệm'], ['4.9/5', '12K+ đánh giá']];
  return (
    <HeroOne>
      <OneTop top="play" />
      <div className="one-stats">
        {sp.map(([n, l], i) => (
          <React.Fragment key={n}>
            {i > 0 && <i className="div" />}
            <div className="st"><b>{n}</b><span>{l}</span></div>
          </React.Fragment>
        ))}
      </div>
      <OneCta />
    </HeroOne>
  );
}

/* V12 — Wordmark + 3 trụ giá trị (icon + tiêu đề + mô tả), nền sáng */
function Hero12() {
  const sp = [
    { ic: 'shield-check', t: 'An toàn & minh bạch', d: 'Báo giá trọn gói, không phát sinh phí ẩn.' },
    { ic: 'file-check-2', t: 'Thủ tục đơn giản', d: 'Bạn chỉ cần ký, VISANA lo phần còn lại.' },
    { ic: 'heart-handshake', t: 'Tận tâm sau visa', d: 'Vé bay, khách sạn, eSIM, fast track…' },
  ];
  return (
    <HeroOne>
      <OneTop top="heart" />
      <div className="one-pillars">
        {sp.map(x => (
          <div className="one-pillar" key={x.t}>
            <span className="ic"><Icon name={x.ic} size={22} /></span>
            <div className="t">{x.t}</div>
            <div className="d">{x.d}</div>
          </div>
        ))}
      </div>
      <OneCta />
    </HeroOne>
  );
}

/* small reusable floating cards */
function RateCard({ className }) {
  return (
    <div className={'rv-card ' + (className || '')}>
      <span className="ic"><Icon name="badge-check" size={23} /></span>
      <div><div className="big">98,6%</div><div className="lbl">Tỷ lệ đậu visa Hàn Quốc</div></div>
    </div>
  );
}
function RevCard({ className }) {
  return (
    <div className={'rv-card rv-rev ' + (className || '')}>
      <div className="stars">{[0, 1, 2, 3, 4].map(s => <Icon key={s} name="star" size={13} stroke={0} color="#FDB813" style={{ fill: '#FDB813' }} />)}</div>
      <div className="rv-txt"><b>4.9/5</b> · 12.000+ đánh giá</div>
    </div>
  );
}

/* ===== V1 — Chữ "V" thương hiệu (monogram trên panel navy) ===== */
function Hero1() {
  return (
    <HeroFrame right={
      <React.Fragment>
        <div className="rv-panel">
          <div className="rv-dots" />
          <div className="rv-glow" />
          <div className="rv-v1-inner">
            <VMark className="vmark" gradient={['#00FFBC', '#7FE8FF', '#BFF6FF']} />
            <div className="wm">VISANA</div>
            <div className="tg">Đồng hành cùng bạn trên mọi hành trình chinh phục visa Hàn Quốc.</div>
          </div>
        </div>
        <RateCard className="rv-rate" />
        <RevCard className="rv-revpos" />
      </React.Fragment>
    } />
  );
}

/* ===== V2 — Khối số liệu thuần chữ (không ảnh) ===== */
function Hero2() {
  return (
    <HeroFrame right={
      <div className="rv-stats">
        <div className="rv-hero-stat">
          <VMark className="rv-corner-v" fill="#ffffff" />
          <div className="lab">Tỷ lệ đậu visa Hàn Quốc</div>
          <div className="num">98<span>,6%</span></div>
          <div className="foot"><Icon name="badge-check" size={16} /> Cam kết hoàn phí nếu trượt do lỗi VISANA</div>
        </div>
        <div className="rv-mini">
          <div className="n">17<small>+ năm</small></div>
          <div className="l">Kinh nghiệm xử lý hồ sơ</div>
        </div>
        <div className="rv-mini">
          <div className="n">12K<small>+</small></div>
          <div className="l">Đánh giá · trung bình 4.9/5</div>
        </div>
        <div className="rv-bar">
          <span><Icon name="check" size={15} /> Hồ sơ trọn gói</span>
          <span><Icon name="check" size={15} /> Đúng quy định ĐSQ</span>
          <span><Icon name="check" size={15} /> 7–10 ngày có kết quả</span>
        </div>
      </div>
    } />
  );
}

/* ===== V3 — "V" làm hoa văn nền + lời cam kết ===== */
function Hero3() {
  return (
    <HeroFrame right={
      <div className="rv-panel rv-panel-3">
        <div className="rv-glow" />
        <VMark className="rv-v3-wm" fill="#ffffff" />
        <div className="rv-v3-inner">
          <div className="rv-kick">Cam kết từ VISANA</div>
          <div className="rv-quote">Lo trọn hồ sơ, <em>đồng hành đến khi đậu</em> — để tấm visa Hàn Quốc nằm gọn trong tầm tay bạn.</div>
          <div className="rv-sig">
            <span className="seal"><VMark gradient={['#00FFBC', '#1A43AD']} /></span>
            <div><div className="nm">Đội ngũ chuyên gia VISANA</div><div className="rl">17+ năm · hơn 1.000.000 khách hàng</div></div>
          </div>
          <div className="rv-strip">
            <div><b>98,6%</b><span>Tỷ lệ đậu</span></div>
            <i />
            <div><b>7–10</b><span>Ngày có KQ</span></div>
            <i />
            <div><b>24/7</b><span>Hỗ trợ A–Z</span></div>
          </div>
        </div>
      </div>
    } />
  );
}

/* ===== V4 — Con dấu "ĐẬU VISA" dựng bằng chữ (passport page) ===== */
function Hero4() {
  return (
    <HeroFrame right={
      <div className="rv-pass">
        <div className="rv-pass-rule" />
        <div className="rv-stamp-wrap">
          <svg className="rv-stamp" viewBox="0 0 240 240">
            <defs>
              <path id="rvring" d="M120,120 m-94,0 a94,94 0 1,1 188,0 a94,94 0 1,1 -188,0" />
            </defs>
            <circle cx="120" cy="120" r="112" fill="none" stroke="#10B89A" strokeWidth="3" opacity="0.55" />
            <circle cx="120" cy="120" r="80" fill="none" stroke="#10B89A" strokeWidth="2" strokeDasharray="2 7" opacity="0.55" />
            <text className="rv-ring-txt">
              <textPath href="#rvring" startOffset="0">VISA HÀN QUỐC · VISANA · ĐÃ DUYỆT · TY LỆ ĐẬU 98,6% · </textPath>
            </text>
          </svg>
          <div className="rv-stamp-center">
            <VMark className="rv-stamp-v" fill="#10B89A" />
            <div className="rv-stamp-word">ĐẬU</div>
            <div className="rv-stamp-sub">APPROVED · KR</div>
          </div>
        </div>
        <div className="rv-check">
          <span><Icon name="check" size={14} /> Hồ sơ trọn gói</span>
          <span><Icon name="check" size={14} /> Đúng quy định ĐSQ</span>
          <span><Icon name="check" size={14} /> 7–10 ngày</span>
        </div>
        <div className="rv-mrz">P&lt;VNM&lt;VISANA&lt;&lt;TRAVELLER&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;<br />HANQUOC9862VNM&lt;&lt;&lt;&lt;&lt;APPROVED&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;0</div>
      </div>
    } />
  );
}

/* ===== Selling-point set (versions 05–08): short headline + wordmark + USPs ===== */

/* V5 — Card sáng: wordmark + danh sách điểm mạnh */
function Hero5() {
  const sp = [
    { ic: 'badge-check', t: 'Tỷ lệ đậu 98,6%', d: 'Cam kết hoàn phí nếu trượt do lỗi VISANA.' },
    { ic: 'award', t: '17+ năm kinh nghiệm', d: 'Hơn 1.000.000 khách hàng tin chọn.' },
    { ic: 'file-check-2', t: 'Hồ sơ trọn gói A–Z', d: 'Chuyên viên lo giấy tờ & dịch thuật, bạn chỉ cần ký.' },
    { ic: 'rocket', t: 'Nhận kết quả 7–10 ngày', d: 'Đúng hẹn, cập nhật bạn từng bước.' },
  ];
  return (
    <HeroFrame short right={
      <div className="sp-card">
        <div className="sp-head">
          <Wordmark top="chevron" tag="Giải pháp visa an toàn · minh bạch · tận tâm" />
        </div>
        <div className="sp-list">
          {sp.map(x => (
            <div className="sp-item" key={x.t}>
              <span className="sp-ic"><Icon name={x.ic} size={21} /></span>
              <div><div className="sp-t">{x.t}</div><div className="sp-d">{x.d}</div></div>
            </div>
          ))}
        </div>
      </div>
    } />
  );
}

/* V6 — Panel navy: wordmark + lưới 2×2 điểm mạnh */
function Hero6() {
  const sp = [
    { ic: 'file-check-2', t: 'Thủ tục đơn giản', d: 'Lo trọn quy trình — bạn chỉ cần ký & chờ kết quả.' },
    { ic: 'headset', t: 'Hỗ trợ 24/7', d: 'Hotline & live chat luôn sẵn sàng.' },
    { ic: 'eye', t: 'Thông tin minh bạch', d: 'Báo giá trọn gói, đúng quy định ĐSQ Hàn Quốc.' },
    { ic: 'heart-handshake', t: 'Tận tâm sau visa', d: 'Vé máy bay, khách sạn, eSIM, fast track…' },
  ];
  return (
    <HeroFrame short right={
      <div className="sp-panel">
        <div className="rv-glow" />
        <div className="sp-head-d"><Wordmark top="star" dark tag="Đồng hành cùng bạn trên mọi hành trình" /></div>
        <div className="sp-grid">
          {sp.map(x => (
            <div className="sp-tile" key={x.t}>
              <span className="ic"><Icon name={x.ic} size={20} /></span>
              <div className="sp-t">{x.t}</div>
              <div className="sp-d">{x.d}</div>
            </div>
          ))}
        </div>
      </div>
    } />
  );
}

/* V7 — Card sáng: wordmark + chỉ số lớn + chip điểm mạnh */
function Hero7() {
  return (
    <HeroFrame short right={
      <div className="sp-card">
        <div className="sp-head">
          <Wordmark top="play" tag="17+ năm chuyên trị hồ sơ khó & khẩn" />
        </div>
        <div className="sp-stat">
          <div className="sp-stat-num">98,6<span>%</span></div>
          <div className="sp-stat-side">
            <div className="l">Tỷ lệ đậu visa Hàn Quốc</div>
            <div className="s"><Icon name="badge-check" size={15} /> Cam kết hoàn phí nếu trượt do lỗi VISANA</div>
          </div>
        </div>
        <div className="sp-chips">
          <span className="sp-chip"><Icon name="award" size={15} /> 17+ năm kinh nghiệm</span>
          <span className="sp-chip"><Icon name="rocket" size={15} /> 7–10 ngày có kết quả</span>
          <span className="sp-chip"><Icon name="map-pin" size={15} /> Toàn quốc · 24/7</span>
        </div>
      </div>
    } />
  );
}

/* V8 — Card sáng: wordmark + điểm mạnh đánh số 01–04 */
function Hero8() {
  const sp = [
    ['01', 'Tỷ lệ đậu 98,6%', 'Cao hàng đầu thị trường, cam kết bằng văn bản.'],
    ['02', '17+ năm kinh nghiệm', 'Hơn 1.000.000 hồ sơ đã xử lý thành công.'],
    ['03', 'Hồ sơ trọn gói', 'Tư vấn 1-1, lo A–Z, không phát sinh chi phí ẩn.'],
    ['04', 'Hỗ trợ toàn quốc 24/7', 'HN · TP.HCM · Đà Nẵng — đồng hành đến khi đậu.'],
  ];
  return (
    <HeroFrame short right={
      <div className="sp-card">
        <div className="sp-head">
          <Wordmark top="heart" tag="An toàn · khả thi · minh bạch · bền vững" />
        </div>
        <div className="sp-num-list">
          {sp.map(([n, t, d]) => (
            <div className="sp-num" key={n}>
              <div className="no">{n}</div>
              <div className="body"><div className="t">{t}</div><div className="d">{d}</div></div>
            </div>
          ))}
        </div>
      </div>
    } />
  );
}

/* ===== Phát triển từ V11 (dải chỉ số 1 cột) — V13–V16 ===== */
const ONE_STATS = [['98,6%', 'Tỷ lệ đậu'], ['1.000.000+', 'Khách hàng'], ['17+', 'Năm kinh nghiệm'], ['4.9/5', '12K+ đánh giá']];

/* V13 — mỗi chỉ số là 1 thẻ pill nổi */
function Hero13() {
  const ic = ['badge-check', 'users', 'award', 'star'];
  return (
    <HeroOne>
      <OneTop top="play" />
      <div className="o13-row">
        {ONE_STATS.map(([n, l], i) => (
          <div className="o13-card" key={n}>
            <span className="ic"><Icon name={ic[i]} size={18} /></span>
            <div><b>{n}</b><span>{l}</span></div>
          </div>
        ))}
      </div>
      <OneCta />
    </HeroOne>
  );
}

/* V14 — dải chỉ số đặt trong 1 băng nền mint bo tròn */
function Hero14() {
  return (
    <HeroOne>
      <OneTop top="chevron" />
      <div className="o14-band">
        {ONE_STATS.map(([n, l], i) => (
          <React.Fragment key={n}>
            {i > 0 && <i className="div" />}
            <div className="st"><b>{n}</b><span>{l}</span></div>
          </React.Fragment>
        ))}
      </div>
      <OneCta />
    </HeroOne>
  );
}

/* V15 — băng chỉ số nền navy (dải nổi bật) trên hero sáng */
function Hero15() {
  return (
    <HeroOne>
      <OneTop top="star" />
      <div className="o15-band">
        <div className="rv-glow" />
        {ONE_STATS.map(([n, l], i) => (
          <React.Fragment key={n}>
            {i > 0 && <i className="div" />}
            <div className="st"><b>{n}</b><span>{l}</span></div>
          </React.Fragment>
        ))}
      </div>
      <OneCta />
    </HeroOne>
  );
}

/* V16 — chỉ số lớn dẫn đầu + 3 chỉ số phụ gạch chia */
function Hero16() {
  return (
    <HeroOne>
      <OneTop top="cap" />
      <div className="o16-wrap">
        <div className="o16-lead">
          <div className="num">98,6<span>%</span></div>
          <div className="lab">Tỷ lệ đậu visa Hàn Quốc<br /><em>Cam kết hoàn phí nếu trượt do lỗi VISANA</em></div>
        </div>
        <div className="o16-side">
          {ONE_STATS.slice(1).map(([n, l], i) => (
            <React.Fragment key={n}>
              {i > 0 && <i className="div" />}
              <div className="st"><b>{n}</b><span>{l}</span></div>
            </React.Fragment>
          ))}
        </div>
      </div>
      <OneCta />
    </HeroOne>
  );
}

Object.assign(window, { Hero13, Hero14, Hero15, Hero16 });