/* ============================================================
   App — main shell with screen routing + chat modal state
   ============================================================ */

function App() {
  const [screen, setScreen] = React.useState(() => {
    const hash = window.location.hash.slice(1);
    return ["home", "hizmetler", "kombi", "sss", "iletisim"].includes(hash) ? hash : "home";
  });
  const [chatOpen, setChatOpen] = React.useState(false);
  const [chatService, setChatService] = React.useState(null);

  const navigate = (s) => {
    setScreen(s);
    window.location.hash = s;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const openChat = (service = null) => {
    setChatService(service);
    setChatOpen(true);
  };

  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.slice(1);
      if (["home", "hizmetler", "kombi", "sss", "iletisim"].includes(h)) setScreen(h);
    };
    window.addEventListener("hashchange", onHash);

    const onNav = (e) => navigate(e.detail);
    window.addEventListener("nav", onNav);

    const onOpenChat = () => openChat();
    window.addEventListener("open-chat", onOpenChat);

    return () => {
      window.removeEventListener("hashchange", onHash);
      window.removeEventListener("nav", onNav);
      window.removeEventListener("open-chat", onOpenChat);
    };
  }, []);

  // Lock body scroll when chat open
  React.useEffect(() => {
    document.body.style.overflow = chatOpen ? "hidden" : "";
  }, [chatOpen]);

  const navMap = {
    home: "home", kombi: "kombi", sss: "sss", iletisim: "iletisim",
  };

  return (
    <div className="app">
      <Header current={screen} onNav={navigate} />
      <main className="app-main" key={screen}>
        {screen === "home" && <ScreenHome openChat={openChat} onNav={navigate} />}
        {screen === "hizmetler" && <ScreenHizmetler openChat={openChat} onNav={navigate} />}
        {screen === "kombi" && <ScreenKombi openChat={openChat} onNav={navigate} />}
        {screen === "sss" && <ScreenSSS openChat={openChat} onNav={navigate} />}
        {screen === "iletisim" && <ScreenIletisim openChat={openChat} onNav={navigate} />}
      </main>
      <Footer onNav={navigate} />
      <MobileBar />

      {/* Floating chat trigger (desktop) */}
      <button
        className="hide-mobile"
        onClick={() => openChat()}
        aria-label="Sohbet başlat"
        style={{
          position: "fixed", right: 24, bottom: 24, zIndex: 40,
          height: 56, padding: "0 22px 0 20px",
          borderRadius: 28,
          background: "var(--green-700)", color: "#fff",
          border: 0, cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 10,
          font: "inherit", fontWeight: 700, fontSize: 14.5,
          boxShadow: "0 18px 40px -12px oklch(44% 0.095 155 / 0.5)",
          transition: "transform 200ms ease",
        }}
        onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-2px)"}
        onMouseLeave={(e) => e.currentTarget.style.transform = "none"}
      >
        <Icon.Send width="16" height="16" />
        Servis Talep Et
      </button>

      <ChatRequest open={chatOpen} onClose={() => setChatOpen(false)} initialService={chatService} />
    </div>
  );
}

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