// VISANA — Homepage (home 3) · v3-distinct sections
// Hero3 (search-centric over photo) + overlapping StatBand + OtherServicesCarousel + UsefulInfo
// Reuses Icon, Button, SecHead from earlier scripts.
const { useState: useH3, useRef: useR3 } = React;

function Hero3({ onConsult, onPick, mode }) {
  const quick = ['Mỹ', 'Úc', 'Canada', 'Nhật Bản', 'Hàn Quốc'];
  const stats = [
  ['17', '+', 'Năm kinh nghiệm xin visa'],
  ['1.000.000', '+', 'Khách hàng đồng hành'],
  ['24/7', '', 'Tư vấn miễn phí'],
  ['98,6', '%', 'Tỉ lệ đậu visa cao']];

  return (
    <React.Fragment>
      <section className={`hero3 ${mode === 'gradient' ? 'mode-gradient' : ''}`}>
        <div className="bg">
          <image-slot id="home3-hero-bg" shape="rect" placeholder="Ảnh nền hero — điểm đến / hộ chiếu (1920×900)"></image-slot>
        </div>
        <div className="scrim" />
        <div className="glow" />
        <div className="wrap">
          <span className="kicker"><span className="dot" /> Chuẩn mực dẫn đầu</span>
          <h1><br /><span className="em"></span></h1>
          <p className="sub">Hơn 17 năm kinh nghiệm, VISANA đồng hành cùng 1.000.000+ khách hàng xin visa đi nước ngoài thành công — đúng hẹn, minh bạch, tỉ lệ đậu 98,6%.</p>
          <div className="hero-search">
            <form className="hsearch" onSubmit={(e) => {e.preventDefault();onConsult();}}>
              <Icon name="search" size={20} style={{ marginLeft: 2 }} />
              <input placeholder="Bạn muốn xin visa đi đâu?" aria-label="Tìm kiếm visa" />
              <button className="go" type="submit"><Icon name="search" size={17} /> Tìm visa</button>
            </form>
            <div className="hero-quick">
              <span className="lbl">Phổ biến:</span>
              {quick.map((c) => <button key={c} className="qchip" onClick={() => onPick('Visa ' + c)}>Visa {c}</button>)}
            </div>
          </div>
        </div>
      </section>
      <div className="statband-wrap">
        <div className="statband">
          <div className="sb-glow" />
          <img className="mk" src="assets/mark-negative.png" alt="" />
          {stats.map(([n, p, l]) =>
          <div className="sb" key={l}>
              <div className="n">{n}<span className="pop">{p}</span></div>
              <div className="l">{l}</div>
            </div>
          )}
        </div>
      </div>
    </React.Fragment>);

}

function OtherServicesCarousel({ onConsult, layout }) {
  const items = [
  { t: 'eSIM Du lịch', d: 'Sóng 4G/5G ngay khi hạ cánh, dùng được hơn 130 quốc gia.', ic: 'smartphone', badge: 'Ưu đãi 30%' },
  { t: 'Đặt vé máy bay', d: 'Săn vé giá tốt, xuất vé nhanh, hỗ trợ đổi/hoàn linh hoạt.', ic: 'plane', badge: 'Giá tốt' },
  { t: 'Đặt phòng khách sạn', d: 'Mạng lưới khách sạn toàn cầu, xác nhận tức thì.', ic: 'bed-double', badge: 'Toàn cầu' },
  { t: 'Bảo hiểm du lịch', d: 'Bảo hiểm đạt chuẩn Schengen, hỗ trợ hồ sơ xin visa.', ic: 'shield-check', badge: 'Chuẩn Schengen' },
  { t: 'Fast track sân bay', d: 'Ưu tiên làm thủ tục, qua cửa an ninh nhanh chóng.', ic: 'zap', badge: 'Ưu tiên' },
  { t: 'Xe đưa đón sân bay', d: 'Đưa đón tận nơi, đúng giờ, an toàn cho cả gia đình.', ic: 'car-front', badge: 'Tận nơi' }];

  const trackRef = useR3(null);
  const scrollBy = (dir) => {
    const el = trackRef.current;
    if (el) el.scrollBy({ left: dir * 304, behavior: 'smooth' });
  };
  const Card = (s) =>
  <article className="ocard" key={s.t} onClick={onConsult}>
      <div className="thumb">
        <image-slot id={`home3-osvc-${s.t}`} shape="rect" placeholder={s.t}></image-slot>
        <span className="badge"><Icon name={s.ic} size={14} /> {s.badge}</span>
      </div>
      <div className="ob">
        <h4>{s.t}</h4>
        <p>{s.d}</p>
        <span className="more">Tìm hiểu thêm <Icon name="arrow-right" size={15} /></span>
      </div>
    </article>;

  return (
    <section className="block alt">
      <div className="wrap">
        <SecHead kick="Dịch vụ khác" title="Trọn gói cho chuyến đi của bạn" sub="Từ eSIM, vé máy bay đến bảo hiểm & fast-track — VISANA lo trọn vẹn hành trình." />
        {layout === 'grid' ?
        <div className="ogrid">{items.map(Card)}</div> :

        <React.Fragment>
            <div className="caro">
              <div className="caro-track" ref={trackRef}>{items.map(Card)}</div>
            </div>
            <div className="caro-ctrl">
              <button onClick={() => scrollBy(-1)} aria-label="Trước"><Icon name="arrow-left" size={20} /></button>
              <button onClick={() => scrollBy(1)} aria-label="Sau"><Icon name="arrow-right" size={20} /></button>
            </div>
          </React.Fragment>
        }
      </div>
    </section>);

}

function UsefulInfo() {
  const arts = [
  { cat: 'Cẩm nang', t: 'Danh sách các nước miễn visa cho hộ chiếu Việt Nam', d: 'Cập nhật mới nhất những quốc gia & vùng lãnh thổ miễn visa cho công dân Việt Nam.', rd: '5 phút đọc' },
  { cat: 'Hướng dẫn', t: 'Các nước bắt buộc phải xin visa trước khi nhập cảnh', d: 'Danh mục quốc gia yêu cầu visa và loại visa phù hợp cho từng mục đích.', rd: '6 phút đọc' },
  { cat: 'Thông tin', t: 'Đại sứ quán nước ngoài tại Việt Nam', d: 'Địa chỉ, giờ làm việc & thông tin liên hệ của các cơ quan lãnh sự tại Việt Nam.', rd: '4 phút đọc' },
  { cat: 'Thông tin', t: 'Đại sứ quán Việt Nam tại nước ngoài', d: 'Tra cứu nhanh cơ quan đại diện Việt Nam khi bạn cần hỗ trợ ở nước ngoài.', rd: '4 phút đọc' }];

  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Thông tin hữu ích" title="Cẩm nang trước mỗi chuyến đi" sub="Kiến thức visa, thủ tục & mẹo du lịch — luôn cập nhật để bạn chủ động hơn." />
        <div className="art-grid">
          {arts.map((a) =>
          <article className="art" key={a.t}>
              <div className="thumb">
                <image-slot id={`home3-art-${a.t.slice(0, 14)}`} shape="rect" placeholder="Ảnh bài viết"></image-slot>
                <span className="cat">{a.cat}</span>
              </div>
              <div className="ab">
                <div className="meta"><Icon name="clock" size={13} /> {a.rd}</div>
                <h4>{a.t}</h4>
                <p>{a.d}</p>
                <span className="more">Đọc tiếp <Icon name="arrow-right" size={15} /></span>
              </div>
            </article>
          )}
        </div>
        <div className="art-cta"><Button variant="secondary" size="md" icon="arrow-right">Xem tất cả bài viết</Button></div>
      </div>
    </section>);

}

Object.assign(window, { Hero3, OtherServicesCarousel, UsefulInfo });