// VISANA — Visa Hàn Quốc page · sections part 2 (Process timeline, Documents tabs, Pricing tabs)
const { useState: useS2 } = React;

function Process() {
  const steps = [
    { ic: 'pencil-line', t: 'Đăng ký tư vấn', dur: '1 phút', d: 'Điền form đơn giản, thông tin được bảo mật an toàn tuyệt đối.' },
    { ic: 'search-check', t: 'Thẩm định hồ sơ', dur: '4 giờ', d: 'Chuyên viên tư vấn, đề xuất giải pháp tối ưu tỉ lệ đậu cho từng trường hợp.' },
    { ic: 'folder-check', t: 'Hoàn thiện hồ sơ', dur: '2–3 ngày', d: 'Đồng hành chuẩn bị, dịch thuật & sắp xếp hồ sơ chỉn chu — không bỏ sót giấy tờ.' },
    { ic: 'send', t: 'Nộp hồ sơ tại ĐSQ Hàn Quốc', dur: 'Đúng hẹn', d: 'Chuyên viên nộp & theo dõi hồ sơ tại ĐSQ/TLSQ Hàn Quốc, cập nhật bạn từng bước.' },
    { ic: 'stamp', t: 'Nhận visa & lên đường', dur: '7–10 ngày', d: 'Nhận kết quả visa Hàn Quốc và bàn giao tận tay — sẵn sàng cho chuyến đi.' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Quy trình" title="Quy trình xin visa Hàn Quốc tại VISANA" sub="Lộ trình 5 bước rõ ràng, đồng hành cùng bạn từ đăng ký đến ngày nhận visa." />
        <div className="tl">
          {steps.map((s, i) => (
            <div className="tl-step" key={s.t}>
              <div className="node"><Icon name={s.ic} size={26} stroke={1.8} /><span className="sn">{i + 1}</span></div>
              <div className="tl-card">
                <div className="th"><h4>{s.t}</h4><span className="dur">{s.dur}</span></div>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="commit">
          <div className="ci"><Icon name="route" size={22} /><span>Đồng hành A–Z</span></div>
          <div className="ci"><Icon name="wallet" size={22} /><span>Phí trọn gói không phát sinh</span></div>
          <div className="ci"><Icon name="rocket" size={22} /><span>Có kết quả trong 7–10 ngày</span></div>
        </div>
      </div>
    </section>
  );
}

// ---------- DOCUMENTS ----------
const DOC_DATA = {
  'Du lịch': [
    { ic: 'user', t: 'Hồ sơ nhân thân', li: ['Hộ chiếu còn hạn trên 6 tháng (+ hộ chiếu cũ nếu có).', '02 ảnh 3,5x4,5cm nền trắng, chụp trong 6 tháng gần nhất.', 'CCCD, sổ hộ khẩu / giấy xác nhận cư trú.', 'Giấy đăng ký kết hôn / khai sinh (nếu đi cùng gia đình).'] },
    { ic: 'briefcase', t: 'Hồ sơ công việc', li: ['Hợp đồng lao động + xác nhận công tác.', 'Đơn xin nghỉ phép có duyệt của công ty.', 'Giấy phép kinh doanh (nếu là chủ doanh nghiệp).'] },
    { ic: 'landmark', t: 'Hồ sơ chứng minh thu nhập', li: ['Sao kê lương 3–6 tháng gần nhất.', 'Sổ tiết kiệm tối thiểu (tham khảo theo nhân khẩu).', 'Giấy tờ sở hữu nhà đất, ô tô, cổ phần (nếu có).'] },
    { ic: 'plane', t: 'Giấy tờ chuyến đi', li: ['Lịch trình du lịch dự kiến tại Hàn Quốc.', 'Đặt phòng khách sạn & vé máy bay khứ hồi (tham khảo).', 'Bảo hiểm du lịch cho thời gian lưu trú (khuyến nghị).'] },
  ],
  'Công tác': [
    { ic: 'user', t: 'Hồ sơ nhân thân', li: ['Hộ chiếu còn hạn trên 6 tháng (+ hộ chiếu cũ nếu có).', '02 ảnh 3,5x4,5cm nền trắng, chụp trong 6 tháng gần nhất.', 'CCCD, sổ hộ khẩu / giấy xác nhận cư trú.'] },
    { ic: 'briefcase', t: 'Hồ sơ công việc', li: ['Quyết định cử đi công tác của công ty.', 'Hợp đồng lao động + xác nhận chức vụ.', 'Thư mời công tác / hợp tác từ đối tác Hàn Quốc.', 'Giấy phép kinh doanh của công ty cử đi.'] },
    { ic: 'landmark', t: 'Hồ sơ chứng minh thu nhập', li: ['Sao kê lương 3–6 tháng gần nhất.', 'Sổ tiết kiệm / xác nhận số dư tài khoản.', 'Hồ sơ tài chính công ty (nếu là lãnh đạo).'] },
    { ic: 'plane', t: 'Giấy tờ chuyến đi', li: ['Lịch trình & mục đích chuyến công tác.', 'Thông tin đối tác / sự kiện tại Hàn Quốc.', 'Đặt phòng & vé máy bay khứ hồi (tham khảo).'] },
  ],
  'Thăm thân': [
    { ic: 'user', t: 'Hồ sơ nhân thân', li: ['Hộ chiếu còn hạn trên 6 tháng (+ hộ chiếu cũ nếu có).', '02 ảnh 3,5x4,5cm nền trắng, chụp trong 6 tháng gần nhất.', 'CCCD, sổ hộ khẩu / giấy xác nhận cư trú.', 'Giấy tờ chứng minh quan hệ thân nhân (khai sinh, kết hôn…).'] },
    { ic: 'briefcase', t: 'Hồ sơ công việc', li: ['Xác nhận công tác / hợp đồng lao động.', 'Đơn xin nghỉ phép có duyệt.', 'Giấy tờ hưu trí (nếu đã nghỉ hưu).'] },
    { ic: 'landmark', t: 'Hồ sơ chứng minh thu nhập', li: ['Sao kê lương / thu nhập 3–6 tháng.', 'Sổ tiết kiệm / xác nhận số dư.', 'Giấy tờ tài sản (nhà đất, ô tô…).'] },
    { ic: 'plane', t: 'Giấy tờ chuyến đi', li: ['Thư mời của người thân tại Hàn Quốc.', 'Giấy tờ chứng minh tư cách lưu trú của người bảo lãnh (đăng ký người nước ngoài…).', 'Đặt vé máy bay & lịch trình dự kiến (tham khảo).'] },
  ],
};

function Documents({ onDownload }) {
  const tabs = ['Du lịch', 'Công tác', 'Thăm thân'];
  const [tab, setTab] = useS2('Du lịch');
  return (
    <section className="block alt">
      <div className="wrap">
        <SecHead kick="Chuẩn bị hồ sơ" title="Hồ sơ xin visa đi Hàn Quốc" sub="Danh mục hồ sơ theo từng loại visa — chuyên viên VISANA rà soát kỹ trước khi nộp ĐSQ." />
        <div className="tabs">
          {tabs.map(t => <button key={t} className={`tab ${tab === t ? 'on' : ''}`} onClick={() => setTab(t)}>Visa {t}</button>)}
        </div>
        <div className="doc-grid">
          {DOC_DATA[tab].map(g => (
            <div className="doc" key={g.t}>
              <div className="dh"><span className="ic"><Icon name={g.ic} size={20} /></span><h4>{g.t}</h4></div>
              <ul>{g.li.map(x => <li key={x}><Icon name="check" size={16} />{x}</li>)}</ul>
            </div>
          ))}
        </div>
        <div className="doc-cta">
          <Button variant="primary" size="lg" iconLeft="download" onClick={onDownload}>Tải hồ sơ visa Hàn Quốc</Button>
          <div className="hint">Nhập email để nhận checklist hồ sơ Visa Hàn Quốc đầy đủ (PDF).</div>
        </div>
      </div>
    </section>
  );
}

// ---------- PRICING (USD, theo file gốc) ----------
const PRICE_DATA = {
  'Du lịch': [
    { k: 'Visa 3 tháng (cùng lên ĐSQ)', a: '$116', b: '$111', c: '$107' },
    { k: 'Visa 3 tháng (không lên ĐSQ)', a: '$144', b: '$139', c: '$133' },
    { k: 'Visa 5 năm (nhiều lần)', a: '$164', b: '$158', c: '$153' },
  ],
  'Công tác': [
    { k: 'Visa 3 tháng (cùng lên ĐSQ)', a: '$136', b: '$131', c: '$127' },
    { k: 'Visa 3 tháng (không lên ĐSQ)', a: '$164', b: '$159', c: '$153' },
    { k: 'Visa 5 năm (nhiều lần)', a: '$184', b: '$178', c: '$173' },
  ],
  'Thăm thân': [
    { k: 'Visa 3 tháng (cùng lên ĐSQ)', a: '$126', b: '$121', c: '$117' },
    { k: 'Visa 3 tháng (không lên ĐSQ)', a: '$154', b: '$149', c: '$143' },
    { k: 'Visa 5 năm (nhiều lần)', a: '$174', b: '$168', c: '$163' },
  ],
};

function Pricing({ onConsult }) {
  const tabs = ['Du lịch', 'Công tác', 'Thăm thân'];
  const [tab, setTab] = useS2('Du lịch');
  const rows = PRICE_DATA[tab];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Báo giá minh bạch" title="Bảng giá dịch vụ visa đi Hàn Quốc" sub="Giá ưu đãi theo số lượng khách — càng đông càng tiết kiệm, không phát sinh chi phí ẩn." />
        <div className="tabs">
          {tabs.map(t => <button key={t} className={`tab ${tab === t ? 'on' : ''}`} onClick={() => setTab(t)}>Visa {t}</button>)}
        </div>
        <div className="price-wrap">
          <table className="price-table">
            <thead>
              <tr>
                <th>Loại visa Hàn Quốc</th>
                <th>1–3 khách<span className="pp">/ khách</span></th>
                <th>4–9 khách<span className="pp">/ khách</span></th>
                <th>Từ 10 khách<span className="pp">/ khách</span></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.k} className={i % 2 ? 'alt' : ''}>
                  <td>{r.k}</td>
                  <td>{r.a}</td>
                  <td>{r.b}</td>
                  <td className="best">{r.c}<span className="unit">tốt nhất</span></td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="price-meta">
            <div className="pm inc"><Icon name="check-circle-2" size={20} /><div><div className="pt">Đã bao gồm</div><p>Phí lãnh sự xin visa Hàn Quốc + Phí dịch thuật giấy tờ + Phí dịch vụ trọn gói.</p></div></div>
            <div className="pm exc"><Icon name="alert-circle" size={20} /><div><div className="pt">Chưa bao gồm</div><p>Phí xử lý hồ sơ khẩn (nếu khách yêu cầu gấp).</p></div></div>
          </div>
          <div className="price-cta"><Button variant="primary" size="lg" icon="arrow-right" onClick={onConsult}>Yêu cầu tư vấn Visa Hàn Quốc</Button></div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Documents, Pricing });