// VISANA — Visa Hàn Quốc 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>
  );
}

// Simplified Korean-flag chip — white field + taegeuk + four corner gwae bars (geometric, brand-safe)
function KoreaFlag() {
  const blue = '#003478', red = '#C60C30', ink = '#16224A';
  return (
    <span className="fg" aria-hidden="true" style={{ background: '#fff' }}>
      <svg viewBox="0 0 24 16" width="24" height="16">
        <rect width="24" height="16" fill="#fff" />
        {/* taegeuk */}
        <path d="M12 3 A5 5 0 0 1 12 13 A2.5 2.5 0 0 1 12 8 A2.5 2.5 0 0 0 12 3 Z" fill={red} />
        <path d="M12 3 A5 5 0 0 0 12 13 A2.5 2.5 0 0 0 12 8 A2.5 2.5 0 0 1 12 3 Z" fill={blue} />
        {/* four corner trigram bars (single bar each, suggestive at chip size) */}
        <rect x="2.4" y="2.6" width="3.6" height="0.9" fill={ink} transform="rotate(33 4.2 3)" />
        <rect x="18" y="2.6" width="3.6" height="0.9" fill={ink} transform="rotate(-33 19.8 3)" />
        <rect x="2.4" y="12.5" width="3.6" height="0.9" fill={ink} transform="rotate(-33 4.2 13)" />
        <rect x="18" y="12.5" width="3.6" height="0.9" fill={ink} transform="rotate(33 19.8 13)" />
      </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 Hàn Quốc 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={(window.__resources && window.__resources.logoPrimary) || "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={c === 'Hàn Quốc' ? '#' : '#'} style={c === 'Hàn Quốc' ? { color: 'var(--deep-blue)', fontWeight: 700, background: 'var(--blue-50)' } : null}>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 Breadcrumb() {
  return (
    <div className="crumb">
      <div className="wrap">
        <a href="#">Trang chủ</a>
        <Icon name="chevron-right" size={14} />
        <a href="#">Dịch vụ visa</a>
        <Icon name="chevron-right" size={14} />
        <span className="cur">Visa Hàn Quốc</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 Hàn Quốc</div>
        <div className="b">Tỷ lệ đậu cao · Đồng hành A–Z</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={(window.__resources && window.__resources.logoNegative) || "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 Hàn Quốc', 'Visa Nhật Bản', 'Visa Trung Quốc', 'Visa Mỹ', 'Visa Úc', 'Visa Canada'].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, KoreaFlag, TopBar, Header, Breadcrumb, FloatingButtons, StickyCta, Footer });