// VISANA — Homepage (home 2) · sections part 2 (Partners, Testimonials, Offices, CtaBand)
const { useState: useH2 } = React;

function Partners() {
  return (
    <section className="partners">
      <div className="wrap">
        <div className="pt-lbl">Đối tác & đại sứ quán đồng hành cùng VISANA</div>
        <div className="strip">
          {[0, 1, 2, 3, 4, 5].map(i => (
            <image-slot key={i} id={`home2-partner-${i}`} class="plogo" shape="rounded" radius="12" placeholder="Logo đối tác"></image-slot>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { q: 'Hồ sơ visa Nhật của mình được VISANA tư vấn rất kỹ, đậu ngay lần đầu. Nhân viên nhiệt tình, phản hồi nhanh.', nm: 'Long Vu', rl: 'Visa Nhật Bản' },
    { q: 'Mình xin visa Nhật đi công tác gấp, đội ngũ VISANA xử lý cực nhanh và chuyên nghiệp. Rất đáng tin cậy!', nm: 'Xuan Dao Luong', rl: 'Visa Nhật Bản' },
    { q: 'Visa Úc cho cả gia đình mình được lo trọn gói, minh bạch chi phí từ đầu. Cảm ơn VISANA rất nhiều.', nm: 'Phuong Mai Le', rl: 'Visa Úc' },
    { q: 'Quy trình rõ ràng, được đồng hành từng bước nên rất yên tâm. Sẽ tiếp tục đồng hành cùng VISANA.', nm: 'Tiên Nguyễn Thủy', rl: 'Visa du lịch' },
  ];
  const [i, setI] = useH2(0);
  const n = items.length;
  const go = (d) => setI((p) => (p + d + n) % n);
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Khách hàng nói về VISANA" title="Niềm tin từ hàng triệu khách hàng" sub="Mỗi bộ hồ sơ thành công là một câu chuyện VISANA tự hào đồng hành." />
        <div className="tst2">
          <div className="tst2-track">
            <div className="tst2-row" style={{ transform: `translateX(-${i * 100}%)` }}>
              {items.map((t, idx) => (
                <div className="tst2-card" key={idx}>
                  <div className="tst2-inner">
                    <span className="mark"><Icon name="quote" size={34} /></span>
                    <div className="stars">{[0, 1, 2, 3, 4].map(s => <Icon key={s} name="star" size={18} stroke={0} color="#FDB813" style={{ fill: '#FDB813' }} />)}</div>
                    <p className="q">"{t.q}"</p>
                    <div className="who">
                      <image-slot id={`home2-tst-${idx}`} shape="circle" placeholder="Ảnh"></image-slot>
                      <div style={{ textAlign: 'left' }}><div className="nm">{t.nm}</div><div className="rl">{t.rl}</div></div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="tst2-nav">
            <button className="tst2-arrow" onClick={() => go(-1)} aria-label="Trước"><Icon name="arrow-left" size={20} /></button>
            <div className="tst2-dots">
              {items.map((_, idx) => <button key={idx} className={`tst2-dot ${idx === i ? 'on' : ''}`} onClick={() => setI(idx)} aria-label={`Slide ${idx + 1}`} />)}
            </div>
            <button className="tst2-arrow" onClick={() => go(1)} aria-label="Sau"><Icon name="arrow-right" size={20} /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Offices() {
  const offs = [
    { tag: 'Văn phòng Hà Nội', addr: 'Tầng 23, Tòa nhà TASCO, Lô HH2-2, Phạm Hùng, Từ Liêm, Hà Nội', tel: '0968 354 027' },
    { tag: 'Văn phòng TP.HCM', addr: 'Tầng 6, Tòa nhà VIPD, số 4 Nguyễn Thị Minh Khai, Sài Gòn, TP.HCM', tel: '090 2200 454' },
  ];
  return (
    <section className="block alt">
      <div className="wrap">
        <SecHead kick="Hệ thống văn phòng" title="Đến VISANA — gặp chuyên gia visa" sub="Hai văn phòng tại Hà Nội & TP.HCM, sẵn sàng tư vấn trực tiếp 8:00–21:00." />
        <div className="off-grid">
          {offs.map((o, idx) => (
            <div className="off" key={o.tag}>
              <image-slot id={`home2-office-${idx}`} shape="rect" placeholder="Ảnh bản đồ / văn phòng"></image-slot>
              <div className="ob">
                <span className="tag"><Icon name="map-pin" size={13} /> {o.tag}</span>
                <h3>{idx === 0 ? 'Hà Nội' : 'TP. Hồ Chí Minh'}</h3>
                <div className="line"><Icon name="building-2" size={17} /> {o.addr}</div>
                <div className="line"><Icon name="phone" size={17} /> {o.tel}</div>
                <div className="line"><Icon name="clock" size={17} /> Giờ làm việc: 8:00 – 21:00</div>
                <div className="obtn"><Button variant="secondary" size="md" iconLeft="map" >Xem bản đồ</Button></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBand({ onConsult }) {
  return (
    <section className="block">
      <div className="wrap">
        <div className="cta-band">
          <div className="glow" />
          <img className="mk" src="assets/mark-negative.png" alt="" />
          <h2>Count on VISANA for precise and<br />dependable visa solutions</h2>
          <p>Để lại thông tin — chuyên gia VISANA tư vấn hồ sơ & báo giá A–Z miễn phí.</p>
          <div className="actions">
            <Button variant="accent" size="lg" icon="arrow-right" onClick={onConsult}>Đăng ký tư vấn miễn phí</Button>
            <Button variant="white" size="lg" iconLeft="phone">090 2200 454</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Partners, Testimonials, Offices, CtaBand });