// VISANA — Visa Hàn Quốc page · sections part 3 (Why, Testimonials, Checker, Blog, FinalCta)
const { useState: useS3 } = React;

function Why() {
  const items = [
    { ic: 'file-check-2', t: 'Thủ tục đơn giản', d: 'Chuyên viên lo trọn quy trình giấy tờ & dịch thuật — bạn chỉ cần ký và chờ kết quả.' },
    { ic: 'headset', t: 'Hỗ trợ 24/7', d: 'Hotline & live chat luôn sẵn sàng, giải đáp mọi thắc mắc tức thì.' },
    { ic: 'eye', t: 'Thông tin minh bạch', d: 'Báo giá trọn gói công khai, cập nhật đúng quy định mới nhất của ĐSQ Hàn Quốc.' },
    { ic: 'heart-handshake', t: 'Tận tâm sau làm visa', d: 'Đồng hành cả sau khi có visa: đặt vé, khách sạn, eSIM, fast track…' },
  ];
  return (
    <section className="block alt">
      <div className="wrap">
        <SecHead kick="Giá trị cốt lõi" title="Vì sao chọn VISANA" sub="Hơn 17 năm chuyên trị hồ sơ khó & khẩn — uy tín được kiểm chứng qua hàng triệu khách hàng." />
        <div className="why-grid" style={{ gridTemplateColumns: 'repeat(4,1fr)' }}>
          {items.map(w => (
            <div className="why" key={w.t}><div className="ic"><Icon name={w.ic} size={26} stroke={1.8} /></div><h4>{w.t}</h4><p>{w.d}</p></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { q: 'Mình lo nhất khoản chứng minh tài chính, nhưng chuyên viên VISANA tư vấn rất kỹ. Cả nhà đậu visa du lịch Hàn Quốc, mùa thu này đi Seoul!', nm: 'Chị Thu Hà', rl: 'Du lịch · Hà Nội' },
    { q: 'Hồ sơ công tác cần gấp để dự hội chợ ở Busan, đội ngũ VISANA xử lý cực nhanh, đúng hẹn. Quá chuyên nghiệp.', nm: 'Anh Minh Quân', rl: 'Công tác · TP.HCM' },
    { q: 'Mình xin visa thăm con đang du học bên Hàn, được hướng dẫn chuẩn bị giấy tờ tận tình nên rất yên tâm.', nm: 'Cô Lan Phương', rl: 'Thăm thân · Đà Nẵng' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Khách hàng nói gì" title="Cảm nhận khách hàng" sub="Niềm tin của khách hàng là thước đo lớn nhất cho chất lượng dịch vụ VISANA." />
        <div className="tst-grid">
          {items.map((t, i) => (
            <div className="tst" key={i}>
              <div className="stars">{[0, 1, 2, 3, 4].map(s => <Icon key={s} name="star" size={17} stroke={0} color="#FDB813" style={{ fill: '#FDB813' }} />)}</div>
              <p className="quote">"{t.q}"</p>
              <div className="who">
                <image-slot id={`vhq-tst-${i}`} shape="circle" placeholder="Ảnh"></image-slot>
                <div><div className="nm">{t.nm}</div><div className="rl">{t.rl}</div></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Checker() {
  const countries = ['Hàn Quốc', 'Nhật Bản', 'Trung Quốc', 'Đài Loan', 'Mỹ', 'Úc', 'Anh', 'Pháp'];
  const [country, setCountry] = useS3('Hàn Quốc');
  const [shown, setShown] = useS3(false);
  const rate = country === 'Hàn Quốc' ? 98 : 97;
  return (
    <section className="block alt">
      <div className="wrap">
        <div className="checker">
          <div className="glow" />
          <div className="inner">
            <div className="k">Công cụ miễn phí</div>
            <h2>Kiểm tra tỷ lệ đậu visa trong 2 phút!</h2>
            <p>Chọn quốc gia bạn muốn xin visa — VISANA ước tính tỷ lệ đậu dựa trên hàng triệu hồ sơ thực tế.</p>
            <div className="ctrl">
              <select value={country} onChange={e => { setCountry(e.target.value); setShown(false); }}>
                {countries.map(c => <option key={c} value={c}>Visa {c}</option>)}
              </select>
              <Button variant="accent" size="lg" icon="arrow-right" onClick={() => setShown(true)}>Kiểm tra ngay</Button>
            </div>
          </div>
          {shown && (
            <div className="checker-result">
              <div className="big">{rate}%</div>
              <div className="rl">Tỷ lệ đậu dự kiến cho hồ sơ Visa {country} khi đồng hành cùng VISANA.</div>
              <div className="bar"><i style={{ width: rate + '%' }} /></div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Blog() {
  const posts = [
    { tag: 'Cẩm nang', date: '22/05/2025', t: 'Mùa thu ở Hàn Quốc có gì đẹp? Nên đi chơi ở đâu?' },
    { tag: 'Kinh nghiệm', date: '15/05/2025', t: 'Du lịch Hàn Quốc, mua sắm ở đâu sao cho hợp lý?' },
    { tag: 'Ẩm thực', date: '08/05/2025', t: 'Ẩm thực xứ kim chi — những điều bạn nên biết' },
    { tag: 'Hướng dẫn', date: '02/05/2025', t: 'Visa Hàn Quốc 5 năm: điều kiện & cách xin chi tiết' },
    { tag: 'Giải đáp', date: '26/04/2025', t: 'Chứng minh tài chính xin visa Hàn Quốc cần bao nhiêu?' },
    { tag: 'Tin mới', date: '18/04/2025', t: 'Chính sách visa Hàn Quốc mới nhất 2025 cho người Việt' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Cẩm nang" title="Kinh nghiệm du lịch và xin visa Hàn Quốc" sub="Cập nhật tin tức, chính sách và bí quyết chinh phục visa Hàn Quốc mới nhất từ VISANA." />
        <div className="blog-grid">
          {posts.map((p, i) => (
            <a className="post" href="#" key={i}>
              <image-slot id={`vhq-blog-${i}`} shape="rect" placeholder="Thumbnail bài viết"></image-slot>
              <div className="pb">
                <div className="meta"><span className="tagx">{p.tag}</span><Icon name="calendar" size={13} /> {p.date}</div>
                <h4>{p.t}</h4>
                <span className="more">Đọc tiếp <Icon name="arrow-right" size={15} /></span>
              </div>
            </a>
          ))}
        </div>
        <div className="blog-all"><Button variant="secondary" size="lg" icon="arrow-right">Xem tất cả bài viết</Button></div>
      </div>
    </section>
  );
}

function FinalCta() {
  return (
    <section className="final" id="visahanquoc">
      <div className="glow" /><div className="blob" />
      <div className="wrap">
        <div className="pitch">
          <div className="k">Đăng ký visa Hàn Quốc trọn gói</div>
          <h2>Bạn cần tư vấn xin visa Hàn Quốc?</h2>
          <p className="pd">VISANA — đơn vị làm visa Hàn Quốc uy tín 17+ năm, chuyên trị hồ sơ khó, khẩn, tỷ lệ đậu cao. Để lại thông tin, chuyên gia tư vấn & báo giá A–Z hoàn toàn miễn phí.</p>
          <ul className="blist">
            <li><span className="ck"><Icon name="check" size={17} stroke={2.6} /></span>Đa dạng dịch vụ visa Hàn Quốc</li>
            <li><span className="ck"><Icon name="check" size={17} stroke={2.6} /></span>Tỷ lệ đậu tới <span className="hl">&nbsp;98,6%</span></li>
            <li><span className="ck"><Icon name="check" size={17} stroke={2.6} /></span>Trách nhiệm, tận tâm, cam kết hiệu quả</li>
          </ul>
        </div>
        <div className="lead-card">
          <div className="lc-head">
            <div className="k">Tư vấn miễn phí</div>
            <h3>Đăng ký tư vấn Visa Hàn Quốc</h3>
            <p>Chuyên gia VISANA liên hệ trong vòng 4 giờ làm việc.</p>
          </div>
          <LeadForm submitLabel="ĐĂNG KÝ TƯ VẤN" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Why, Testimonials, Checker, Blog, FinalCta });