// VISANA — Visa Mỹ 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: '1 ngày', 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ị hồ sơ đầy đủ, chỉn chu — không bỏ sót giấy tờ.' },
    { ic: 'message-square-quote', t: 'Phỏng vấn cùng chuyên gia', dur: 'Trước buổi chính thức', d: 'Luyện phỏng vấn 1-1 trước buổi chính thức tại Đại sứ quán / Lãnh sự quán Mỹ.' },
    { ic: 'stamp', t: 'Nộp hồ sơ & nhận kết quả', dur: 'Đúng hẹn', d: 'Chuyên viên có mặt cùng khách tại ĐSQ/TLSQ Mỹ, hỗ trợ đến khi nhận visa.' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Quy trình" title="Quy trình xin visa Mỹ 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>Nhận kết quả nhanh</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 5x5 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 / xác nhận số dư tài khoản.', '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 Mỹ.', 'Đặt phòng khách sạn & vé máy bay khứ hồi (tham khảo).', 'Thư mời / giấy tờ liên quan người thân tại Mỹ (nếu có).'] },
  ],
  '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 5x5 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 hội thảo / đối tác phía Mỹ.', '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 Mỹ.', 'Đặ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 5x5 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 Mỹ.', 'Giấy tờ chứng minh tình trạng cư trú của người bảo lãnh.', 'Đặ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 Mỹ" 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." />
        <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 ngay bộ hồ sơ chi tiết</Button>
          <div className="hint">Nhập email để nhận checklist hồ sơ Visa Mỹ đầy đủ (PDF).</div>
        </div>
      </div>
    </section>
  );
}

// ---------- PRICING ----------
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 = [
    { k: 'Phí visa Mỹ trọn gói', a: '8.720.000', b: '8.295.000', c: '7.875.000', best: true },
    { k: 'Gia hạn visa Mỹ', a: '7.555.000', b: '7.555.000', c: '7.555.000' },
    { k: 'Visa quá cảnh (transit)', a: 'Giá như du lịch', b: 'Giá như du lịch', c: 'Giá như du lịch', txt: true },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Báo giá minh bạch" title="Bảng phí dịch vụ visa Mỹ trọn gói" 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>Nhóm khách</th>
                <th>1–2 khách<span className="pp">/ khách</span></th>
                <th>3–4 khách<span className="pp">/ khách</span></th>
                <th>Từ 5 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>
                  {r.txt
                    ? <td colSpan="3" style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, color: 'var(--slate)' }}>{r.a}</td>
                    : <React.Fragment>
                        <td className={r.best ? 'best' : ''}>{r.a}<span className="unit">VNĐ</span></td>
                        <td className={r.best ? 'best' : ''}>{r.b}<span className="unit">VNĐ</span></td>
                        <td className={r.best ? 'best' : ''}>{r.c}<span className="unit">VNĐ</span></td>
                      </React.Fragment>}
                </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ự + Phí dịch vụ trọn gói + VAT 8%.</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 Mỹ</Button></div>
        </div>
      </div>
    </section>
  );
}

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