// VISANA — Visa Mỹ page · shared chrome (adapted from website UI kit for root paths)
const { useState } = 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>
  );
}

// Small inline US-flag SVG (simple, brand-safe — not a logo)
function USFlag() {
  return (
    <span className="fg" aria-hidden="true">
      <svg viewBox="0 0 24 16" width="24" height="16">
        <rect width="24" height="16" fill="#B31942" />
        <rect y="1.23" width="24" height="1.23" fill="#fff" />
        <rect y="3.69" width="24" height="1.23" fill="#fff" />
        <rect y="6.15" width="24" height="1.23" fill="#fff" />
        <rect y="8.62" width="24" height="1.23" fill="#fff" />
        <rect y="11.08" width="24" height="1.23" fill="#fff" />
        <rect y="13.54" width="24" height="1.23" fill="#fff" />
        <rect width="10" height="8.62" fill="#0A3161" />
      </svg>
    </span>
  );
}

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', 'Mexico', 'Argentina', 'Cuba'];
const OTHER_SVC = ['Bảo hiểm du lịch', 'Đặt phòng khách sạn', 'Đặt vé máy bay', 'Fast track sân bay', 'Hợp pháp hóa lãnh sự', 'Giấy phép lao động', 'Thẻ tạm trú', 'eSIM 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 Mỹ khi 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 active">
            <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={c === 'Mỹ' ? '#' : '#'} style={c === 'Mỹ' ? { color: 'var(--deep-blue)', fontWeight: 700, background: 'var(--blue-50)' } : null}>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 Breadcrumb() {
  return (
    <div className="crumb">
      <div className="wrap">
        <a href="#">Trang chủ</a>
        <Icon name="chevron-right" size={14} />
        <span className="cur">Visa Mỹ</span>
      </div>
    </div>
  );
}

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>
  );
}

function StickyCta({ onConsult }) {
  return (
    <div className="sticky-cta">
      <div className="sc-info">
        <div className="a">Đăng ký tư vấn Visa Mỹ</div>
        <div className="b">Tỷ lệ đậu 99% · Phỏng vấn miễn phí</div>
      </div>
      <Button variant="accent" size="md" icon="arrow-right" onClick={onConsult}>Đăng ký</Button>
    </div>
  );
}

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>
            {['Visa Mỹ', 'Visa Úc', 'Visa Canada', 'Visa Nhật Bản', 'Visa Hàn Quốc', 'Visa Pháp'].map(c => <a key={c} href="#">{c}</a>)}
          </div>
          <div>
            <h6>Về VISANA</h6>
            {['Giới thiệu', 'Lịch sử', 'Đánh giá', 'Đối tác', 'Đại lý'].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>
            <p style={{ marginTop: 10, fontSize: 12.5 }}>Tầng 23, Tòa nhà TASCO, 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, 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>
  );
}

Object.assign(window, { Icon, Button, USFlag, TopBar, Header, Breadcrumb, FloatingButtons, StickyCta, Footer });