// VISANA — Visa Hàn Quốc page · sections part 1 (LeadForm, Hero, TrustStrip, Offers, KRServices, Gallery)
const { useState: useS1 } = React;

// ---- Reusable lead-capture form (used in hero + final CTA) ----
function LeadForm({ submitLabel = 'Đăng ký để nhận tư vấn', source = 'Visa Hàn Quốc' }) {
  const [done, setDone] = useS1(false);
  if (done) {
    return (
      <div className="lead-ok">
        <div className="ok"><Icon name="check" size={34} stroke={2.4} /></div>
        <h3>Đăng ký thành công!</h3>
        <p>Cảm ơn bạn đã quan tâm dịch vụ Visa Hàn Quốc. Chuyên viên VISANA sẽ liên hệ tư vấn & gửi báo giá trong vòng 4 giờ làm việc. Trân trọng!</p>
        <div style={{ marginTop: 18 }}><Button variant="secondary" size="md" onClick={() => setDone(false)}>Gửi đăng ký khác</Button></div>
      </div>
    );
  }
  return (
    <form className="lead-form" onSubmit={(e) => { e.preventDefault(); setDone(true); }}>
      <div className="frow"><label>Họ và tên *</label><input className="field" required placeholder="Nguyễn Văn An" /></div>
      <div className="ftwo">
        <div className="frow"><label>Email *</label><input className="field" type="email" required placeholder="ban@email.com" /></div>
        <div className="frow"><label>Số điện thoại *</label><input className="field" required placeholder="09xx xxx xxx" /></div>
      </div>
      <div className="frow"><label>Loại visa quan tâm</label>
        <select className="field" defaultValue="Visa du lịch">
          <option>Visa du lịch</option><option>Visa công tác</option><option>Visa thăm thân</option><option>Visa 5 năm</option>
        </select>
      </div>
      <Button variant="accent" size="lg" type="submit" icon="arrow-right">{submitLabel}</Button>
      <div className="reassure"><Icon name="lock" size={13} /> Thông tin của bạn được bảo mật tuyệt đối</div>
    </form>
  );
}

function Hero({ onConsult }) {
  const goOffers = () => {
    const el = document.getElementById('uu-dai');
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: 'smooth' }); }
  };
  return (
    <section className="hero-my">
      <image-slot id="vhq-hero-skyline" class="skyline" shape="rect" placeholder="Ảnh nền Seoul / cung điện Gyeongbokgung / phố Myeongdong"></image-slot>
      <div className="skyfade" />
      <div className="glow" />
      <div className="wrap">
        <div className="htext">
          <span className="flag"><KoreaFlag /> Visa Hàn Quốc · Du lịch · Công tác · Thăm thân</span>
          <h1>Dịch vụ xin <span className="em">Visa Hàn Quốc</span> du lịch, công tác, thăm thân & 5 năm</h1>
          <p className="sub">Hàn Quốc nới lỏng chính sách, nhu cầu tăng cao khiến ĐSQ quá tải. Để VISANA lo trọn hồ sơ — đơn giản, nhanh chóng, đúng quy định, để tấm visa Hàn Quốc nằm gọn trong tầm tay bạn.</p>
          <div className="badges">
            <div className="badge"><span className="bi"><Icon name="award" size={20} /></span><div><div className="bn">17+ năm</div><div className="bl">Kinh nghiệm</div></div></div>
            <div className="badge"><span className="bi"><Icon name="clock-3" size={20} /></span><div><div className="bn">7–10 ngày</div><div className="bl">Thời gian có kết quả</div></div></div>
          </div>
          <div className="hero-cta">
            <Button variant="accent" size="lg" icon="arrow-right" onClick={onConsult}>Đăng ký tư vấn miễn phí</Button>
            <Button variant="secondary" size="lg" iconLeft="gift" onClick={goOffers}>Xem ưu đãi & bảng giá</Button>
          </div>
        </div>
        <div className="hero-showcase">
          <div className="frame"><img src={(window.__resources && window.__resources.vhqHero) || "assets/vhq-hero.svg"} alt="Seoul giờ hoàng hôn với hộ chiếu và visa Hàn Quốc đã đậu" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /></div>
          <div className="hs-card hs-rate"><span className="ic"><Icon name="badge-check" size={24} /></span><div><div className="big">98,6%</div><div className="lbl">Tỷ lệ đậu visa Hàn Quốc</div></div></div>
          <div className="hs-card hs-rev"><div className="stars">{[0,1,2,3,4].map(s => <Icon key={s} name="star" size={14} stroke={0} color="#FDB813" style={{ fill: '#FDB813' }} />)}</div><div className="rv"><b>4.9/5</b> · 12.000+ đánh giá</div></div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    ['shield-check', '98,6%', 'Cam kết tỷ lệ đậu'],
    ['users', '1.000.000+', 'Khách hàng tin chọn'],
    ['map-pin', 'Toàn quốc', 'HN · TP.HCM · Đà Nẵng'],
    ['headset', '24/7', 'Đồng hành A–Z'],
  ];
  return (
    <div className="trust">
      <div className="wrap">
        {items.map(([ic, n, l], i) => (
          <React.Fragment key={l}>
            <div className="ti"><Icon name={ic} size={20} /> <span><b>{n}</b> · {l}</span></div>
            {i < items.length - 1 && <span className="tsep" />}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Offers({ onConsult }) {
  return (
    <section className="offers" id="uu-dai">
      <div className="glow" />
      <div className="wrap">
        <div className="oh">
          <span className="rib"><Icon name="gift" size={15} /> Đặc quyền khách hàng</span>
          <h2>Không chỉ tấm visa — <span className="g">trọn vẹn cả hành trình</span></h2>
          <p>Mỗi khách hàng dùng dịch vụ Visa Hàn Quốc trọn gói tại VISANA đều nhận thêm bộ đặc quyền đồng hành — để bạn an tâm tuyệt đối, từ lúc nộp hồ sơ đến khi đặt chân tới xứ kim chi.</p>
        </div>
        <div className="offer-grid">
          <div className="offer">
            <img className="wm" src={(window.__resources && window.__resources.markNegative) || "assets/mark-negative.png"} alt="" />
            <div className="num">Đặc quyền 01</div>
            <div className="ico"><Icon name="wifi" size={28} /></div>
            <h3>Tặng 30% phí eSIM Hàn Quốc</h3>
            <p>Sóng 4G/5G phủ khắp Seoul, Busan, Jeju — kích hoạt trong 1 phút, luôn kết nối và an tâm trên mọi nẻo đường.</p>
          </div>
          <div className="offer">
            <img className="wm" src={(window.__resources && window.__resources.markNegative) || "assets/mark-negative.png"} alt="" />
            <div className="num">Đặc quyền 02</div>
            <div className="ico"><Icon name="book-open-check" size={28} /></div>
            <h3>Miễn phí gia hạn hộ chiếu</h3>
            <p>Hỗ trợ gia hạn hoặc làm mới hộ chiếu online một lần — hồ sơ của bạn luôn sẵn sàng cho hành trình kế tiếp.</p>
          </div>
          <div className="offer feat">
            <img className="wm" src={(window.__resources && window.__resources.markNegative) || "assets/mark-negative.png"} alt="" />
            <span className="star"><Icon name="star" size={22} stroke={0} color="#FDB813" style={{ fill: '#FDB813' }} /></span>
            <div className="num">Đặc quyền nổi bật</div>
            <div className="ico"><Icon name="plane-takeoff" size={28} /></div>
            <h3>Fast Track đón tại sân bay Incheon</h3>
            <p>Đón ưu tiên ngay khu vực nhập cảnh, thủ tục nhanh gọn — khởi đầu nhẹ nhàng, đúng chuẩn VISANA.</p>
          </div>
        </div>
        <div className="oc"><Button variant="accent" size="lg" icon="arrow-right" onClick={onConsult}>Nhận trọn bộ đặc quyền hôm nay</Button></div>
      </div>
    </section>
  );
}

function KRServices({ onConsult }) {
  const items = [
    { ic: 'palmtree', t: 'Visa du lịch Hàn Quốc', d: 'Tham quan, nghỉ dưỡng, ngắm mùa thu lá đỏ — hồ sơ tối ưu tỷ lệ đậu.' },
    { ic: 'briefcase', t: 'Visa công tác Hàn Quốc', d: 'Hội thảo, ký kết, công tác ngắn ngày cho doanh nghiệp.' },
    { ic: 'users', t: 'Visa thăm thân Hàn Quốc', d: 'Đoàn tụ gia đình, người thân học tập & định cư tại Hàn.' },
    { ic: 'calendar-clock', t: 'Visa Hàn Quốc 5 năm', d: 'Visa nhiều lần thời hạn 5 năm cho khách đủ điều kiện.' },
    { ic: 'building-2', t: 'Visa Hàn Quốc tại Hà Nội', d: 'Hỗ trợ trực tiếp tại văn phòng Hà Nội & ĐSQ Hàn Quốc.' },
    { ic: 'building', t: 'Visa Hàn Quốc tại TP.HCM', d: 'Đồng hành cùng khách tại TLSQ Hàn Quốc TP.HCM.' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Dịch vụ visa Hàn Quốc" title="Dịch vụ xin visa Hàn Quốc của VISANA" sub="Trọn gói theo từng nhu cầu & khu vực — tư vấn chuyên sâu, cam kết minh bạch chi phí." />
        <div className="usvc-grid">
          {items.map(s => (
            <a className="usvc" href="#" key={s.t} onClick={(e) => { e.preventDefault(); onConsult(); }}>
              <span className="ic"><Icon name={s.ic} size={24} stroke={1.8} /></span>
              <div><h4>{s.t}</h4><p>{s.d}</p></div>
              <span className="arr"><Icon name="arrow-right" size={18} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const caps = [
    'Visa du lịch · 5 năm', 'Visa C-3 · Gia đình', 'Visa công tác · Doanh nhân',
    'Visa thăm thân · Đoàn tụ', 'Visa du lịch · Lần đầu', 'Visa 5 năm · Nhiều lần',
    'Visa du lịch · Người lớn tuổi', 'Visa công tác · Hội thảo',
  ];
  return (
    <section className="block alt">
      <div className="wrap">
        <SecHead kick="Kết quả thực tế" title="Kết quả dịch vụ visa Hàn Quốc" sub="Hàng nghìn bộ hồ sơ visa Hàn Quốc đã được VISANA chinh phục — minh chứng cho cam kết tỷ lệ đậu cao." />
        <div className="gal-grid">
          {caps.map((c, i) => (
            <div className="gal-card" key={i}>
              <image-slot id={`vhq-gal-${i}`} shape="rect" placeholder="Ảnh visa đã đậu"></image-slot>
              <div className="cap"><Icon name="badge-check" size={15} /> {c}</div>
            </div>
          ))}
        </div>
        <div className="gal-note">
          <span className="pill"><Icon name="trending-up" size={15} /> Cam kết tỷ lệ đậu 98,6%</span>
          <span>Ảnh visa thật của khách hàng — đã được sự đồng ý chia sẻ.</span>
        </div>
      </div>
    </section>
  );
}

// SecHead (shared, same vocabulary as the website kit)
function SecHead({ kick, title, sub }) {
  return (
    <div className="sec-head">
      <div className="kick">{kick}</div>
      <h2>{title}</h2>
      <div className="sec-rule" />
      {sub && <p>{sub}</p>}
    </div>
  );
}

Object.assign(window, { LeadForm, Hero, TrustStrip, Offers, KRServices, Gallery, SecHead });