// VISANA — Homepage (home 2) · shared chrome: Icon, Button, TopBar, Header, Footer, FloatingButtons, LeadModal
const { useState: useC } = React;

function Icon({ name, size = 18, color, stroke = 2, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, stroke: color || 'currentColor', 'stroke-width': stroke },
        nameAttr: 'data-lucide',
      });
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} style={{ display: 'inline-flex', ...style }} />;
}

function Button({ variant = 'primary', size = 'md', children, icon, iconLeft, onClick, type }) {
  return (
    <button type={type || 'button'} className={`btn btn-${variant} btn-${size}`} onClick={onClick}>
      {iconLeft && <Icon name={iconLeft} size={size === 'lg' ? 19 : 16} />}
      {children}
      {icon && <Icon name={icon} size={size === 'lg' ? 19 : 16} />}
    </button>
  );
}

const VISA_ASIA = ['Hàn Quốc', 'Nhật Bản', 'Trung Quốc', 'Đài Loan', 'Dubai', 'Ấn Độ'];
const VISA_EU = ['Anh', 'Pháp', 'Đức', 'Ý', 'Tây Ban Nha', 'Hà Lan'];
const VISA_AM = ['Mỹ', 'Canada', 'Brazil', 'New Zealand', 'Úc', 'Hong Kong'];
const OTHER_SVC = ['Giấy phép lao động', 'Hợp pháp hóa lãnh sự', 'Làm hộ chiếu online', 'Thẻ tạm trú', 'Fast track sân bay', 'Visa hội chợ quốc tế', 'Xe đưa đón sân bay', 'Bảo hiểm du lịch'];

function TopBar() {
  return (
    <div className="topbar">
      <div className="wrap">
        <div className="promo"><Icon name="sparkles" size={14} color="#FDB813" /> <span><b>TẶNG NGAY</b> 30% phí eSIM khi sử dụng dịch vụ visa tại VISANA</span></div>
        <a href="tel:0902200454"><Icon name="phone" size={13} /> HCM: 090 2200 454</a>
        <span className="sep">·</span>
        <a href="tel:0968354027"><Icon name="phone" size={13} /> HN: 0968 354 027</a>
        <span className="sep">·</span>
        <span style={{ color: 'rgba(255,255,255,.7)' }}>8:00 – 21:00</span>
      </div>
    </div>
  );
}

function Header({ onConsult }) {
  return (
    <header className="hdr">
      <div className="wrap">
        <a href="#"><img className="logo" src="assets/logo-primary.png" alt="VISANA" /></a>
        <nav className="nav">
          <div className="item">
            <a href="#">Dịch vụ Visa <Icon name="chevron-down" size={15} /></a>
            <div className="mega">
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18 }}>
                <div><h6>Châu Á</h6>{VISA_ASIA.map(c => <a key={c} href="#">Visa {c}</a>)}</div>
                <div><h6>Châu Âu</h6>{VISA_EU.map(c => <a key={c} href="#">Visa {c}</a>)}</div>
                <div><h6>Châu Mỹ & Úc</h6>{VISA_AM.map(c => <a key={c} href="#">Visa {c}</a>)}</div>
              </div>
            </div>
          </div>
          <div className="item">
            <a href="#">Dịch vụ khác <Icon name="chevron-down" size={15} /></a>
            <div className="mega" style={{ width: 360 }}>
              <div className="cols">{OTHER_SVC.map(s => <a key={s} href="#">{s}</a>)}</div>
            </div>
          </div>
          <div className="item"><a href="#">Thông tin hữu ích <Icon name="chevron-down" size={15} /></a>
            <div className="mega" style={{ width: 280 }}>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <a href="#">FAQs</a><a href="#">ĐSQ nước ngoài tại Việt Nam</a><a href="#">Các nước miễn Visa</a><a href="#">Kiểm tra tỷ lệ đậu</a>
              </div>
            </div>
          </div>
          <div className="item"><a href="#">Cẩm nang</a></div>
          <div className="item"><a href="#">Về Visana</a></div>
        </nav>
        <div className="spacer" />
        <Button variant="primary" size="sm" icon="arrow-right" onClick={onConsult}>Đăng ký tư vấn</Button>
      </div>
    </header>
  );
}

function FloatingButtons() {
  return (
    <div className="floats">
      <a className="float call" href="tel:0902200454" aria-label="Gọi hotline">
        <span className="ping" /><Icon name="phone" size={22} /><span className="lab">Gọi: 090 2200 454</span>
      </a>
      <a className="float zalo" href="#" aria-label="Chat Zalo"><span className="zl">Zalo</span><span className="lab">Chat Zalo</span></a>
      <a className="float msg" href="#" aria-label="Messenger"><Icon name="message-circle" size={22} /><span className="lab">Messenger</span></a>
    </div>
  );
}

const FOOTER_COUNTRIES = ['Anh', 'Canada', 'Đài Loan', 'Hàn Quốc', 'Hong Kong', 'Mỹ', 'New Zealand', 'Nhật Bản', 'Pháp', 'Trung Quốc', 'Úc', 'Ý'];

function Footer() {
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="top">
          <div>
            <img className="logo" src="assets/logo-negative.png" alt="VISANA" />
            <p>VISANA là thương hiệu tiên phong cung cấp giải pháp visa an toàn, khả thi, minh bạch và bền vững — giúp quá trình xin visa trở nên thuận lợi và tự tin nhất.</p>
            <div className="socials">
              <a href="#" aria-label="Facebook"><Icon name="thumbs-up" size={17} /></a>
              <a href="#" aria-label="YouTube"><Icon name="play-circle" size={17} /></a>
              <a href="#" aria-label="Zalo / Messenger"><Icon name="message-circle" size={17} /></a>
            </div>
          </div>
          <div>
            <h6>Dịch vụ visa</h6>
            <div className="country-cols">{FOOTER_COUNTRIES.map(c => <a key={c} href="#">Visa {c}</a>)}</div>
          </div>
          <div>
            <h6>Về VISANA</h6>
            {['Giới thiệu', 'Lịch sử', 'Đánh giá', 'Đối tác', 'Đại lý', 'Tuyển dụng'].map(c => <a key={c} href="#">{c}</a>)}
          </div>
          <div>
            <h6>Liên hệ</h6>
            <a href="tel:0968354027"><Icon name="phone" size={13} /> HN — 0968 354 027</a>
            <a href="tel:0902200454"><Icon name="phone" size={13} /> HCM — 090 2200 454</a>
            <a href="mailto:cskh@visana.vn"><Icon name="mail" size={13} /> cskh@visana.vn</a>
            <p style={{ marginTop: 10, fontSize: 12.5 }}>Tầng 23, Tòa nhà TASCO, Lô HH2-2, Phạm Hùng, Từ Liêm, Hà Nội</p>
            <p style={{ fontSize: 12.5 }}>Tầng 6, Tòa nhà VIPD, 4 Nguyễn Thị Minh Khai, Sài Gòn, TP.HCM</p>
          </div>
        </div>
        <div className="rule" />
        <div className="fine">© 2026 VISANA — Thương hiệu của Công ty Cổ phần Du lịch Khám phá Việt Nam.</div>
      </div>
    </footer>
  );
}

function LeadModal({ service, onClose }) {
  const [done, setDone] = useC(false);
  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {!done ? (
          <React.Fragment>
            <div className="head">
              <div className="glow" />
              <button className="x" onClick={onClose}><Icon name="x" size={18} /></button>
              <div className="k">Tư vấn miễn phí</div>
              <h3>{service ? `Đăng ký tư vấn — ${service}` : 'Đăng ký tư vấn'}</h3>
            </div>
            <form onSubmit={e => { e.preventDefault(); setDone(true); }}>
              <div className="field-row"><label>Họ và tên *</label><input className="field" required placeholder="Nguyễn Văn An" /></div>
              <div className="field-row"><label>Số điện thoại *</label><input className="field" required placeholder="09xx xxx xxx" /></div>
              <div className="field-row"><label>Email</label><input className="field" type="email" placeholder="ban@email.com" /></div>
              <div className="field-row"><label>Yêu cầu cụ thể</label><textarea className="field" rows="2" placeholder="Quốc gia, thời gian dự kiến…" /></div>
              <Button variant="primary" size="lg" type="submit" icon="send">Yêu cầu báo giá</Button>
            </form>
          </React.Fragment>
        ) : (
          <div className="success">
            <div className="ok"><Icon name="check" size={36} stroke={2.4} /></div>
            <h3>Đăng ký thành công!</h3>
            <p>Cảm ơn bạn đã đăng ký tư vấn. VISANA đã nhận được thông tin và sẽ liên hệ lại trong vòng 4 giờ làm việc. Trân trọng!</p>
            <div style={{ marginTop: 20 }}><Button variant="secondary" size="md" onClick={onClose}>Đóng</Button></div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Button, TopBar, Header, Footer, FloatingButtons, LeadModal, OTHER_SVC });