/* =========================================================
   APP — MobileBar / App / mount
   ========================================================= */

function MobileBar() {
  const C = window.COMPANY;
  return (
    <div className="mbar" aria-label="빠른 상담 메뉴">
      <a className="mbar__item mbar__item--call" href={`tel:${C.phoneMobile}`}>
        <Icon name="phone" size={21} />
        <span>전화 상담</span>
      </a>
      <a className="mbar__item mbar__item--quote" href="#contact">
        <Icon name="bolt" size={21} />
        <span>무료 견적</span>
      </a>
    </div>
  );
}

function App() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // On PC (mouse-primary, no phone dialer), route "call" buttons to the contact
  // form instead of a dead tel: link. On mobile/tablet, keep the real call.
  useEffect(() => {
    const onClick = (e) => {
      const link = e.target.closest && e.target.closest('a[href^="tel:"]');
      if (!link) return;
      const isDesktop = window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
      if (!isDesktop) return;
      const contact = document.getElementById("contact");
      if (!contact) return;
      e.preventDefault();
      contact.scrollIntoView({ behavior: "smooth", block: "start" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <React.Fragment>
      <Header scrolled={scrolled} onMenu={() => setMenuOpen(true)} />
      <Drawer open={menuOpen} onClose={() => setMenuOpen(false)} />
      <main>
        <Hero />
        <TrustBar />
        <Why />
        <Credentials />
        <Types />
        <Process />
        <ConstructionProcessCase />
        <Gallery />
        <FeaturedProject />
        <Trust />
        <Subsidy />
        <FAQ />
        <Notice />
        <Contact />
        <Footer />
      </main>
      <MobileBar />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);