// VISANA — Visa Mỹ 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ờ — bạn chỉ cần ký và đi phỏng vấn.' },
    { 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, không phát sinh, không phí ẩn.' },
    { ic: 'heart-handshake', t: 'Tận tâm sau làm visa', d: 'Đồng hành cả sau khi có visa: gia hạn, đặt vé, 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 từng trượt visa Mỹ 2 lần, đến VISANA được luyện phỏng vấn rất kỹ. Lần này đậu visa 10 năm, cả nhà vỡ òa!', nm: 'Chị Thu Hà', rl: 'Du lịch · Hà Nội' },
    { q: 'Hồ sơ công tác gấp chỉ còn 1 tuần, đội ngũ VISANA xử lý cực nhanh và chuyên nghiệp. Quá xứng đáng.', nm: 'Anh Minh Quân', rl: 'Công tác · TP.HCM' },
    { q: 'Ba mẹ mình lớn tuổi đi thăm con bên Mỹ, được chuyên viên đi cùng tới Lãnh sự quán nên rất yên tâm.', nm: 'Chị 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={`visamy-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 = ['Mỹ', 'Úc', 'Canada', 'Anh', 'Nhật Bản', 'Hàn Quốc', 'Pháp', 'Đức'];
  const [country, setCountry] = useS3('Mỹ');
  const [shown, setShown] = useS3(false);
  const rate = country === 'Mỹ' ? 99 : 98;
  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: 'Tin mới', date: '06/06/2025', t: 'Mỹ cấm công dân 12 nước nhập cảnh từ 9/6: Việt Nam có bị ảnh hưởng?' },
    { tag: 'Kinh nghiệm', date: '28/05/2025', t: 'Rớt visa Mỹ 3 lần: lời khuyên từ chuyên gia VISANA' },
    { tag: 'Giải đáp', date: '20/05/2025', t: 'Giải mã ý nghĩa dấu sao trên visa Mỹ' },
    { tag: 'Giải đáp', date: '14/05/2025', t: 'Có visa Mỹ nhưng không đi có ảnh hưởng tới visa không?' },
    { tag: 'Hướng dẫn', date: '08/05/2025', t: 'Hướng dẫn chi tiết xin visa Mỹ cho trẻ em' },
    { tag: 'Câu chuyện', date: '02/05/2025', t: 'Xin visa qua Mỹ dự lễ tốt nghiệp của con' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Cẩm nang" title="Kinh nghiệm du lịch và xin visa Mỹ" sub="Cập nhật tin tức, chính sách và bí quyết chinh phục visa Mỹ mới nhất từ VISANA." />
        <div className="blog-grid">
          {posts.map((p, i) => (
            <a className="post" href="#" key={i}>
              <image-slot id={`visamy-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="visamy">
      <div className="glow" /><div className="blob" />
      <div className="wrap">
        <div className="pitch">
          <div className="k">Đăng ký visa Mỹ trọn gói</div>
          <h2>Sẵn sàng chinh phục giấc mơ Mỹ?</h2>
          <p className="pd">VISANA — đơn vị làm visa Mỹ 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 Mỹ</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 Mỹ</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 });