/* VietCanThi website shell: navbar (dropdown + auth), footer, router, toast, reveal */
const { useState: sS, useEffect: sE } = React;

const isExternal = (to) => /^https?:|\.html/.test(to);
window.go = (to) => {
  if (isExternal(to)) { window.location.href = to; return; }
  window.location.hash = '#' + to; window.scrollTo({ top: 0, behavior: 'auto' });
};
window.scrollToId = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); };

function siteRoute() { return (window.location.hash || '#/').replace(/^#/, '') || '/'; }

const Caret = () => <svg className="caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>;
const Burger = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16" /></svg>;

function MobileSheet({ open, onClose }) {
  const goTo = (to) => { onClose(); window.go(to); };
  return (
    <div className={'msheet' + (open ? ' open' : '')} onClick={onClose}>
      <div className="panel" onClick={(e) => e.stopPropagation()}>
        <div className="top">
          <img src="brand-assets/logo-rays-navy.svg" alt="VietCanThi" />
          <button className="close" onClick={onClose} aria-label="Đóng">✕</button>
        </div>
        {window.SITE.NAV.map((item) => (
          <React.Fragment key={item.label}>
            <a onClick={() => goTo(item.to)}>{item.label}</a>
            {item.children && item.children.map(([t, to]) => <a className="sub" key={to} onClick={() => goTo(to)}>{t}</a>)}
          </React.Fragment>
        ))}
        <div className="mauth">
          <a className="btn btn-outline btn-block" onClick={() => { onClose(); window.toast({ title: 'Đăng nhập', sub: 'Chuyển tới app.vietcanthi.com (placeholder).' }); }}>Đăng nhập</a>
          <a className="btn btn-accent btn-block" onClick={() => goTo('webinar.html#/trai-nghiem-phan-mem')}>Dùng thử miễn phí</a>
        </div>
      </div>
    </div>
  );
}

function SiteNav() {
  const [menu, setMenu] = sS(false);
  sE(() => { document.body.style.overflow = menu ? 'hidden' : ''; }, [menu]);
  return (
    <div className="nav">
      <div className="wrap">
        <button className="brand" onClick={() => window.go('/')} aria-label="VietCanThi"><img src="brand-assets/logo-rays-navy.svg" alt="VietCanThi" /></button>
        <div className="links">
          {window.SITE.NAV.map((item) => (
            item.children ? (
              <span className="navlink has-menu" key={item.label}>
                <a onClick={() => window.go(item.to)}>{item.label}</a><Caret />
                <div className="dropdown">
                  {item.children.map(([t, to]) => <a key={to} onClick={() => window.go(to)}>{t}</a>)}
                </div>
              </span>
            ) : (
              <a className="navlink" key={item.label} onClick={() => window.go(item.to)}>{item.label}</a>
            )
          ))}
          <span className="sep" />
          <div className="auth">
            <a onClick={() => window.toast({ title: 'Đăng nhập', sub: 'Chuyển tới app.vietcanthi.com (placeholder).' })}>Đăng nhập</a>
            <a className="btn btn-accent" onClick={() => window.go('webinar.html#/trai-nghiem-phan-mem')}>Dùng thử miễn phí</a>
          </div>
        </div>
        <button className="burger" onClick={() => setMenu(true)} aria-label="Mở menu"><Burger /></button>
      </div>
      <MobileSheet open={menu} onClose={() => setMenu(false)} />
    </div>
  );
}

function SiteFooter() {
  return (
    <footer className="site">
      <div className="wrap">
        <div className="cols">
          <div>
            <div className="logo wordmark"><img src="brand-assets/wordmark-rounded-white.svg" alt="VietCanThi" /></div>
            <p>See the world clearly.<br />Giải pháp Kiểm soát Cận thị toàn diện cho phòng khám &amp; trung tâm mắt.</p>
            <p style={{ marginTop: 10 }}><span className="placeholder">PLACEHOLDER</span> — thông tin pháp nhân &amp; liên hệ thật.</p>
          </div>
          <div>
            <h5>VietCanThi</h5>
            <a onClick={() => window.go('/')}>Trang chủ</a>
            <a onClick={() => window.go('/ve-chung-toi')}>Về chúng tôi</a>
            <a onClick={() => window.go('/lien-he')}>Liên hệ</a>
          </div>
          <div>
            <h5>Sản phẩm & Dịch vụ</h5>
            <a onClick={() => window.go('/phan-mem')}>Phần mềm VietCanThi</a>
            <a onClick={() => window.go('/dich-vu')}>Dịch vụ setup KSCT</a>
            <a onClick={() => window.go('/can-cu-khoa-hoc')}>Căn cứ khoa học</a>
            <a onClick={() => window.go('webinar.html')}>Webinar 23/06</a>
          </div>
          <div>
            <h5>Hỗ trợ & Pháp lý</h5>
            <a>care@vietcanthi.vn</a>
            <a onClick={() => window.go('/tai-nguyen')}>FAQ &amp; Tài nguyên</a>
            <a onClick={() => window.go('/dieu-khoan')}>Điều khoản</a>
            <a onClick={() => window.go('/quyen-rieng-tu')}>Quyền riêng tư</a>
          </div>
        </div>
        <div className="disc">
          <span>© 2026 VietCanThi · vietcanthi.com</span>
          <span style={{ maxWidth: '54ch' }}>Công cụ hỗ trợ quyết định lâm sàng, không thay thế chẩn đoán của bác sĩ.</span>
        </div>
      </div>
    </footer>
  );
}

function Stub({ route }) {
  const NAMES = {
    '/phan-mem': 'Trang Phần mềm', '/dich-vu': 'Trang Dịch vụ', '/su-kien': 'Trang Sự kiện',
    '/tai-nguyen': 'Tài nguyên', '/ve-chung-toi': 'Về chúng tôi', '/lien-he': 'Liên hệ',
    '/can-cu-khoa-hoc': 'Căn cứ khoa học',
  };
  const base = '/' + route.split('/')[1];
  const name = NAMES[route] || NAMES[base] || 'Trang';
  return (
    <div className="ty">
      <div className="ring"><Sunburst size={58} color="var(--navy)" /></div>
      <span className="eyebrow">Đang dựng</span>
      <h1 style={{ marginTop: 12 }}>{name}</h1>
      <p className="lead mx-auto" style={{ marginTop: 12 }}>Trang này nằm trong các bước tiếp theo của lộ trình (Phần mềm → Bước 3 · Dịch vụ/Tài nguyên/Về chúng tôi → Bước 4).</p>
      <div className="btns" style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 28 }}>
        <a className="btn btn-primary" onClick={() => window.go('/')}>← Về trang chủ</a>
        <a className="btn btn-outline" onClick={() => window.go('webinar.html')}>Xem landing webinar (Bước 1)</a>
      </div>
    </div>
  );
}

function ToastHost() {
  const [items, setItems] = sS([]);
  sE(() => { window.toast = (t) => { const id = Date.now() + Math.random(); setItems((p) => [...p, { ...t, id }]); setTimeout(() => setItems((p) => p.filter((x) => x.id !== id)), 4000); }; }, []);
  return <div className="toasts">{items.map((t) => <div key={t.id} className={'toast ' + (t.kind || '')}>{t.title}{t.sub && <small>{t.sub}</small>}</div>)}</div>;
}

function useReveal(dep) {
  sE(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; }
    const io = new IntersectionObserver((ents) => ents.forEach((en) => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }), { threshold: 0.12 });
    els.forEach((e) => io.observe(e)); return () => io.disconnect();
  }, [dep]);
}

function renderRoute(route) {
  if (route === '/') return <Home />;
  if (route === '/phan-mem') return <PhanMem />;
  if (route === '/dich-vu') return <DichVu />;
  if (route.startsWith('/dich-vu/')) return <ServiceSub slug={route.split('/')[2]} />;
  if (route === '/tai-nguyen') return <TaiNguyen />;
  if (route === '/ve-chung-toi') return <VeChungToi />;
  if (route === '/lien-he') return <LienHe />;
  if (route === '/can-cu-khoa-hoc') return <CanCu />;
  return <Stub route={route} />;
}

function SiteApp() {
  const [route, setRoute] = sS(siteRoute());
  sE(() => { const on = () => setRoute(siteRoute()); window.addEventListener('hashchange', on); return () => window.removeEventListener('hashchange', on); }, []);
  useReveal(route);
  const showPromo = route === '/';
  return (
    <>
      {showPromo && (
        <div className="promo"><span className="live" /> Webinar KSCT — 20:00 Thứ Ba 23/06 · <a onClick={() => window.go('webinar.html')}>Đăng ký miễn phí →</a></div>
      )}
      <SiteNav />
      {renderRoute(route)}
      <SiteFooter />
      <ToastHost />
    </>
  );
}

Object.assign(window, { SiteApp });