// VISANA — Homepage (home 2) · sections part 1
const { useState: useH1 } = React;

function SecHead({ kick, title, sub, align }) {
  return (
    <div className={`sec-head ${align === 'left' ? 'left' : ''}`}>
      <div className="kick">{kick}</div>
      <h2>{title}</h2>
      <div className="sec-rule" />
      {sub && <p>{sub}</p>}
    </div>
  );
}

function Hero({ onConsult, onPick }) {
  const quick = ['Mỹ', 'Úc', 'Canada', 'Nhật Bản', 'Hàn Quốc'];
  return (
    <section className="home-hero">
      <div className="glow" /><div className="blob" />
      <div className="wrap">
        <div className="htext">
          <div className="kicker">Chuẩn mực dẫn đầu</div>
          <h1><span className="em">VISANA</span><br />Chuẩn mực dẫn đầu</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="chips">
            <span className="lbl">Phổ biến:</span>
            {quick.map(c => <button key={c} className="chip" onClick={() => onPick('Visa ' + c)}>Visa {c}</button>)}
          </div>
          <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">Gọi hotline</Button>
          </div>
          <div className="micro">
            <span className="mi"><Icon name="shield-check" size={16} /> Bảo mật tuyệt đối</span>
            <span className="mi"><Icon name="clock" size={16} /> Phản hồi trong 4 giờ</span>
            <span className="mi"><Icon name="wallet" size={16} /> Báo giá trọn gói</span>
          </div>
        </div>
        <div className="hero-visual">
          <div className="frame">
            <image-slot id="home2-hero" shape="rect" placeholder="Ảnh khách hàng / hộ chiếu & visa"></image-slot>
            <div className="approved">
              <span className="d"><Icon name="check" size={17} stroke={2.6} /></span>
              <span className="t">Visa Approved<span>1.000.000+ hồ sơ thành công</span></span>
            </div>
          </div>
          <div className="floatstat">
            <div className="n">98,6<span className="pop">%</span></div>
            <div className="l">Tỉ lệ đậu visa</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatBar() {
  const stats = [['17', '+', 'Năm kinh nghiệm'], ['99,8', '%', 'Khách hàng hài lòng'], ['24/7', '', 'Tư vấn miễn phí'], ['98,6', '%', 'Tỉ lệ đậu visa']];
  return (
    <div className="stats"><div className="wrap">
      {stats.map(([n, p, l]) => (
        <div className="stat" key={l}><div className="n">{n}<span className="pop">{p}</span></div><div className="l">{l}</div></div>
      ))}
    </div></div>
  );
}

function Services({ onPick }) {
  const items = [
    { icon: 'palmtree', tag: 'Phổ biến nhất', t: 'Visa du lịch', d: 'Đa số khách hàng của VISANA xin visa dạng du lịch — nghỉ dưỡng, khám phá khắp thế giới.', li: ['Thủ tục giấy tờ đơn giản.', 'Dễ dàng nhận định tỉ lệ đậu.', 'Ai cũng có thể xin.'] },
    { icon: 'briefcase', tag: 'Doanh nghiệp', t: 'Visa công tác', d: 'Hỗ trợ visa công tác, thương mại, hội thảo ngắn ngày cho cá nhân & doanh nghiệp.', li: ['Giảm thủ tục đi công tác.', 'Cam kết tỉ lệ đậu tối đa.', 'Tiết kiệm thời gian, tiền bạc.'] },
    { icon: 'users', tag: 'Gia đình', t: 'Visa thăm thân', d: 'Hỗ trợ visa thăm thân, đoàn tụ gia đình họ hàng tại mọi quốc gia.', li: ['Xử lý nhanh, ít rủi ro.', 'Hàng nghìn visa được duyệt.', 'Đồng hành tận tâm A–Z.'] },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Dịch vụ visa" title="Giải pháp visa cho mọi nhu cầu" sub="Tư vấn theo từng bộ hồ sơ, cam kết đúng hẹn và minh bạch chi phí." />
        <div className="svc-grid">
          {items.map(s => (
            <article className="svc" key={s.t} onClick={() => onPick(s.t)}>
              <div className="ph"><div className="g" /><div className="ic"><Icon name={s.icon} size={52} stroke={1.5} /></div><span className="tag">{s.tag}</span></div>
              <div className="body">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
                <ul>{s.li.map(x => <li key={x}><Icon name="check" size={16} />{x}</li>)}</ul>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function OtherServices({ onConsult }) {
  const items = [
    { t: 'Giấy phép lao động', ic: 'file-badge' },
    { t: 'Hợp pháp hóa lãnh sự', ic: 'stamp' },
    { t: 'Làm hộ chiếu online', ic: 'book-open-check' },
    { t: 'Thẻ tạm trú', ic: 'id-card' },
    { t: 'Fast track sân bay', ic: 'zap' },
    { t: 'Visa hội chợ quốc tế', ic: 'store' },
    { t: 'Xe đưa đón sân bay', ic: 'car-front' },
    { t: 'Bảo hiểm du lịch', ic: 'shield-check' },
    { t: 'Đặt phòng khách sạn', ic: 'bed-double' },
    { t: 'Đặt vé máy bay', ic: 'plane' },
    { t: 'Gia hạn visa Mỹ / Việt Nam', ic: 'refresh-cw' },
    { t: 'eSIM Du lịch', ic: 'smartphone' },
  ];
  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ừ giấy tờ pháp lý đến tiện ích sân bay — VISANA lo trọn vẹn hành trình." />
        <div className="osvc-grid">
          {items.map(s => (
            <a className="osvc" href="#" key={s.t} onClick={(e) => { e.preventDefault(); onConsult(); }}>
              <span className="ic"><Icon name={s.ic} size={20} /></span><span className="t">{s.t}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const [active, setActive] = useH1(3);
  const steps = [
    { ic: 'pencil-line', t: 'Đăng ký', dur: '1 phút', d: 'Form điền thông tin đơn giản, bảo mật an toàn.' },
    { ic: 'headset', t: 'Tư vấn', dur: 'Trong 4 giờ', d: 'Nhân viên liên hệ lại trong vòng 4 giờ làm việc.' },
    { ic: 'folder-check', t: 'Hoàn thiện hồ sơ', dur: '2–3 ngày', d: 'Chuyên viên đồng hành suốt quá trình chuẩn bị.' },
    { ic: 'badge-check', t: 'Nhận visa', dur: 'Đúng hẹn', d: 'Nhận trực tiếp hoặc chuyển phát tận tay.' },
  ];
  return (
    <section className="block">
      <div className="wrap">
        <SecHead kick="Quy trình" title="Làm Visa tại VISANA" sub="Chỉ từ 3 giờ đến 2 ngày làm việc — minh bạch từng bước." />
        <div className="proc">
          <div className="conn" />
          {steps.map((s, i) => (
            <div className={`step ${i <= active ? 'on' : ''}`} key={s.t} onMouseEnter={() => setActive(i)}>
              <div className="dot"><Icon name={s.ic} size={26} stroke={1.8} /><span className="n">{i + 1}</span></div>
              <h4>{s.t}</h4>
              <p style={{ fontFamily: 'var(--font-head)', fontWeight: 700, color: 'var(--teal)', fontSize: 12.5, margin: '0 0 4px' }}>{s.dur}</p>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Why() {
  const items = [
    { ic: 'eye', t: 'Minh bạch', d: 'Chi phí công khai, minh bạch. Thông tin đầy đủ, chính xác & chân thực.' },
    { ic: 'heart-handshake', t: 'Tận tâm', d: 'Tìm kiếm giải pháp tối ưu cho từng bộ hồ sơ của khách hàng.' },
    { ic: 'zap', t: 'Tức thì', d: 'Sẵn sàng tư vấn 24/7 qua hotline & live chat. Email trong 4h.' },
    { ic: 'target', t: 'Chính xác', d: 'Tuân thủ chuẩn quy trình, đúng giờ, đúng hẹn, đúng cam kết.' },
    { ic: 'hand-heart', t: 'Tôn trọng', d: 'Mọi khách hàng đều được lắng nghe, tư vấn và hướng dẫn.' },
    { ic: 'lock', t: 'Bảo mật', d: 'Cam kết nguyên tắc bảo mật tuyệt đối thông tin khách hàng.' },
  ];
  return (
    <section className="block alt">
      <div className="wrap">
        <SecHead kick="Giá trị cốt lõi" title="Vì sao chọn VISANA" sub="Sáu giá trị làm nên thương hiệu visa tiên phong, dẫn đầu ngành." />
        <div className="why-grid">
          {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>
  );
}

Object.assign(window, { SecHead, Hero, StatBar, Services, OtherServices, Process, Why });