// VISANA — Visa Mỹ page · sections part 1 (LeadForm, Hero, TrustStrip, Offers, USServices, Gallery)
const { useState: useS1 } = React;

// ---- Reusable lead-capture form (used in hero + final CTA) ----
function LeadForm({ submitLabel = 'Đăng ký để nhận ưu đãi', source = 'Visa Mỹ' }) {
  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 Mỹ. Chuyên viên VISANA sẽ liên hệ tư vấn & gửi ưu đãi 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>Số lượng khách</label>
        <select className="field" defaultValue="1–2 khách">
          <option>1–2 khách</option><option>3–4 khách</option><option>Từ 5 khách</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="visamy-hero-skyline" class="skyline" shape="rect" placeholder="Ảnh nền skyline New York / cờ Mỹ"></image-slot>
      <div className="skyfade" />
      <div className="glow" />
      <div className="wrap">
        <div className="htext">
          <span className="flag"><USFlag /> Visa Hoa Kỳ · Du lịch · Công tác · Thăm thân</span>
          <h1>Dịch vụ làm <span className="em">Visa Mỹ</span> du lịch, công tác & thăm thân toàn quốc</h1>
          <p className="sub">Dù lần đầu hay lần thứ "n", dù từng trượt visa hay chưa — bây giờ là thời điểm thích hợp nhất để nộp hồ sơ xin visa Mỹ cùng chuyên gia VISANA.</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="user-check" size={20} /></span><div><div className="bn">Miễn phí</div><div className="bl">Phỏng vấn cùng chuyên gia</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"><image-slot id="visamy-hero-visa" shape="rect" placeholder="Ảnh visa Mỹ đã đậu / hộ chiếu / khách hàng"></image-slot></div>
          <div className="hs-card hs-rate"><span className="ic"><Icon name="badge-check" size={24} /></span><div><div className="big">99%</div><div className="lbl">Tỷ lệ đậu visa Mỹ</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', '99%', '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 Mỹ 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 lên đất Mỹ.</p>
        </div>
        <div className="offer-grid">
          <div className="offer">
            <img className="wm" src="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 Mỹ</h3>
            <p>Sóng 4G/5G phủ khắp nước Mỹ, kích hoạt trong 1 phút — luôn kết nối, luôn an tâm trên mọi nẻo đường.</p>
          </div>
          <div className="offer">
            <img className="wm" src="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="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</h3>
            <p>Đón ưu tiên ngay khu vực nhập cảnh (07:00–19:00), 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 USServices({ onConsult }) {
  const items = [
    { ic: 'palmtree', t: 'Visa du lịch Mỹ', d: 'Tham quan, nghỉ dưỡng, thăm bạn bè — hồ sơ tối ưu tỷ lệ đậu.' },
    { ic: 'briefcase', t: 'Visa công tác Mỹ', 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 Mỹ', d: 'Đoàn tụ gia đình, người thân định cư tại Hoa Kỳ.' },
    { ic: 'building-2', t: 'Visa Mỹ tại Hà Nội', d: 'Hỗ trợ trực tiếp tại văn phòng Hà Nội & ĐSQ Mỹ.' },
    { ic: 'building', t: 'Visa Mỹ tại TP.HCM', d: 'Đồng hành cùng khách tại TLSQ Hoa Kỳ TP.HCM.' },
    { ic: 'map', t: 'Visa Mỹ toàn quốc', d: 'Phục vụ khách hàng trên khắp 63 tỉnh thành.' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Dịch vụ visa Mỹ" title="Dịch vụ xin visa Mỹ 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 B1/B2 · 10 năm', 'Visa du lịch · Gia đình', 'Visa công tác · Doanh nhân',
    'Visa thăm thân · 10 năm', 'Visa du lịch · Lần đầu', 'Visa B1/B2 · Tái cấp',
    '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 Mỹ" sub="Hàng nghìn bộ hồ sơ visa Mỹ đã được VISANA chinh phục — minh chứng cho cam kết tỷ lệ đậu 99%." />
        <div className="gal-grid">
          {caps.map((c, i) => (
            <div className="gal-card" key={i}>
              <image-slot id={`visamy-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 99%</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, USServices, Gallery, SecHead });