const Nav = ({route, setRoute, onContact, theme}) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [openMobile, setOpenMobile] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, {passive: true});
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // Nav sits over a dark hero only on the home page (the sub-hero on other pages uses var(--bg))
  const overDark = route === "home";
  const items = [
    {id: "home", label: "Home", ko: "홈"},
    {id: "product", label: "Products", ko: "제품"},
    {id: "care", label: "Care", ko: "케어 서비스"},
    {id: "support", label: "Support", ko: "고객지원"},
    {id: "contact", label: "Contact", ko: "문의"},
  ];
  return (
    <header className={`pas-nav ${scrolled ? "is-scrolled" : ""} ${overDark ? "is-over-dark" : ""}`}>
      <div className="pas-nav-inner">
        <button className="pas-nav-logo" onClick={() => setRoute("home")} aria-label="PAS home">
          <Logo size={26} />
        </button>
        <nav className="pas-nav-links">
          {items.map(it => (
            <button
              key={it.id}
              className={`pas-nav-link ${route === it.id ? "is-active" : ""}`}
              onClick={() => setRoute(it.id)}
            >
              {it.label}
              <span className="pas-nav-link-ko">{it.ko}</span>
            </button>
          ))}
        </nav>
        <div className="pas-nav-right">
          <button className="pas-nav-lang">KO<span>/EN</span></button>
          <button className="pas-btn pas-btn-sm" onClick={onContact}>
            상담문의
            <Icon name="arrow" size={14}/>
          </button>
          <button className="pas-nav-burger" onClick={() => setOpenMobile(v => !v)} aria-label="menu">
            <Icon name={openMobile ? "close" : "menu"} size={20}/>
          </button>
        </div>
      </div>
      {openMobile && (
        <div className="pas-nav-mobile">
          {items.map(it => (
            <button key={it.id} className={`pas-nav-mobile-link ${route === it.id ? "is-active" : ""}`} onClick={() => {setRoute(it.id); setOpenMobile(false);}}>
              <span>{it.ko}</span>
              <span className="mono">{it.label}</span>
            </button>
          ))}
        </div>
      )}
    </header>
  );
};

const Footer = ({setRoute}) => {
  return (
    <footer className="pas-footer">
      <div className="pas-footer-top">
        <div className="pas-footer-brand">
          <Logo size={34}/>
          <div className="pas-footer-tagline">Pharmacy AI Solution<br/><span>약국 경영의 모든 순간, AI와 함께</span></div>
          <div className="pas-footer-cta">
            <div className="pas-footer-phone">
              <div className="mono muted">제품·서비스 문의</div>
              <div className="phone-num">02-2039-7767</div>
            </div>
          </div>
        </div>
        <div className="pas-footer-cols">
          <div>
            <div className="pas-footer-h">Products</div>
            <ul>
              <li><button onClick={() => setRoute("product")}>PAS System</button></li>
              <li><button onClick={() => setRoute("product")}>OCR 처방입력</button></li>
              <li><button onClick={() => setRoute("product")}>DS Pay</button></li>
              <li><button onClick={() => setRoute("product")}>JVM 연동</button></li>
              <li><button onClick={() => setRoute("product")}>PAS Pass</button></li>
              <li><button onClick={() => setRoute("product")}>3sec ERP</button></li>
            </ul>
          </div>
          <div>
            <div className="pas-footer-h">Services</div>
            <ul>
              <li><button onClick={() => setRoute("care")}>신규 개국 케어</button></li>
              <li><button onClick={() => setRoute("support")}>고객지원</button></li>
              <li><button onClick={() => setRoute("support")}>전국 대리점</button></li>
              <li><button onClick={() => setRoute("contact")}>제품 문의</button></li>
            </ul>
          </div>
          <div>
            <div className="pas-footer-h">Company</div>
            <ul>
              <li><button>회사 소개</button></li>
              <li><button>뉴스룸</button></li>
              <li><button>채용</button></li>
              <li><button>파트너십</button></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="pas-footer-bot">
        <div className="pas-footer-meta">
          <div>PAS Corp. 대표이사 홍동기 · 사업자등록번호 201-81-00000 · 통신판매업신고 제02282호</div>
          <div>순화궁로 418, 15층 15호 · FAX 02-858-0000 · 제품/서비스 문의 02-2039-7767</div>
          <div className="muted">본 사이트의 콘텐츠는 저작권법의 보호를 받습니다. © 2026 PAS Corp. All rights reserved.</div>
        </div>
        <div className="pas-footer-legal">
          <button>개인정보처리방침</button>
          <button>이용약관</button>
          <button className="pas-footer-family">패밀리 사이트 <Icon name="chevron-down" size={14}/></button>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, {Nav, Footer});