// Sticky top nav — desktop links + mobile full-screen overlay
// Mobile (≤768px): hamburger opens full-screen overlay with blur backdrop,
// 28px item font, 1px --line dividers, ✕ close, body scroll-lock.
const LINE_URL = 'https://line.me/R/ti/p/@52ev';

/* ---------- Icon components (Lucide-style, stroke-width 1.5) ---------- */

function MenuIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="1.5"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <line x1="3" y1="6" x2="21" y2="6" />
      <line x1="3" y1="12" x2="21" y2="12" />
      <line x1="3" y1="18" x2="21" y2="18" />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="1.5"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  );
}

/* ---------- Nav ---------- */

function Nav({ onPartsClick, current }) {
  const [open, setOpen] = React.useState(false);

  // Body scroll lock
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  // Auto-close when viewport grows past mobile breakpoint
  React.useEffect(() => {
    const mq = window.matchMedia('(min-width: 769px)');
    const handler = (e) => { if (e.matches) setOpen(false); };
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  // Escape key closes overlay
  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, [open]);

  const close = () => setOpen(false);

  return (
    <>
      <div className="ev-nav">
        <div className="ev-nav__inner">
          <a href="index.html" className="ev-nav__brand" style={{ textDecoration: 'none' }}>電車玩家</a>

          {/* Desktop links */}
          <nav className="ev-nav__links">
            <a href="buyback.html" className={current === 'buyback' ? 'is-active' : ''}>事故車收購</a>
            <a href="repair.html"  className={current === 'repair'  ? 'is-active' : ''}>事故車維修</a>
            <a href="shop.html"    className={current === 'shop'    ? 'is-active' : ''}>特斯拉零件</a>
            <a href="about.html"   className={current === 'about'   ? 'is-active' : ''}>關於我們</a>
            <a href="faq.html"     className={current === 'faq'     ? 'is-active' : ''}>常見問題</a>
            <a href="contact.html" className={current === 'contact' ? 'is-active' : ''}>聯絡</a>
          </nav>

          {/* Desktop CTA */}
          <a className="ev-btn ev-btn--line ev-btn--sm ev-nav__cta-desktop"
             href={LINE_URL} target="_blank" rel="noopener noreferrer">
            <LineGlyph />加入 LINE
          </a>

          {/* Hamburger — mobile only (hidden via CSS on desktop) */}
          <button
            className="ev-nav__hamburger"
            onClick={() => setOpen(true)}
            aria-label="開啟選單"
            aria-expanded={open}
          >
            <MenuIcon />
          </button>
        </div>
      </div>

      {/* Full-screen overlay — mobile only */}
      {open && (
        <div className="ev-nav__overlay" role="dialog" aria-modal="true" aria-label="主選單">

          {/* ✕ Close button — top-right */}
          <button
            className="ev-nav__overlay-close"
            onClick={close}
            aria-label="關閉選單"
            style={{ position: 'relative', zIndex: 9999 }}
          >
            <CloseIcon />
          </button>

          {/* Nav links */}
          <nav className="ev-nav__overlay-links">
            <a href="buyback.html" onClick={close}>事故車收購</a>
            <a href="repair.html"  onClick={close}>事故車維修</a>
            <a href="shop.html"    onClick={close}>特斯拉零件</a>
            <a href="about.html"   onClick={close}>關於我們</a>
            <a href="faq.html"     onClick={close}>常見問題</a>
            <a href="contact.html" onClick={close}>聯絡</a>
          </nav>

          {/* LINE CTA */}
          <div className="ev-nav__overlay-cta">
            <a className="ev-btn ev-btn--line"
               href={LINE_URL} target="_blank" rel="noopener noreferrer"
               onClick={close}>
              <LineGlyph />加入 LINE
            </a>
          </div>
        </div>
      )}
    </>
  );
}

/* ---------- Shared glyphs ---------- */

function LineGlyph({ width = 14, height = 14 }) {
  return (
    <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314" />
    </svg>
  );
}

window.Nav      = Nav;
window.LineGlyph = LineGlyph;
window.LINE_URL  = LINE_URL;