/* App shell + router */

function App() {
  const [route, setRoute] = useState(() => parseHash(window.location.hash));
  const [modal, setModal] = useState(null); // null | 'quote' | 'showroom'
  const [lang, setLang] = useState("en");

  useEffect(() => {
    const onHash = () => setRoute(parseHash(window.location.hash));
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (r) => {
    const hash = toHash(r);
    if(window.location.hash !== hash) window.location.hash = hash;
    setRoute(r);
    window.scrollTo({top:0, behavior:"instant"});
  };

  const onQuote    = () => setModal("quote");
  const onShowroom = () => setModal("showroom");

  let page;
  switch(route.page) {
    case "home":     page = <HomePage navigate={navigate} onQuote={onQuote} onShowroom={onShowroom} />; break;
    case "products": page = <ProductsPage navigate={navigate} onQuote={onQuote} />; break;
    case "category": page = <CategoryPage id={route.id} navigate={navigate} onQuote={onQuote} />; break;
    case "sectors":  page = <SectorsPage navigate={navigate} onQuote={onQuote} />; break;
    case "sector":   page = <SectorPage id={route.id} navigate={navigate} onQuote={onQuote} />; break;
    case "projects": page = <ProjectsPage navigate={navigate} onQuote={onQuote} />; break;
    case "showroom": page = <ShowroomPage navigate={navigate} onQuote={onShowroom} />; break;
    case "about":    page = <AboutPage navigate={navigate} onQuote={onQuote} />; break;
    case "contact":  page = <ContactPage navigate={navigate} />; break;
    default:         page = <HomePage navigate={navigate} onQuote={onQuote} onShowroom={onShowroom} />;
  }

  return (
    <>
      <Nav route={route} navigate={navigate} onQuote={onQuote}
           onLang={()=>setLang(l => l==="en" ? "ar" : "en")} lang={lang} />
      {page}
      <Footer navigate={navigate} onQuote={onQuote} />

      <Modal open={modal==="quote"} onClose={()=>setModal(null)} title="Request a quote" wide>
        <QuoteForm mode="quote" />
      </Modal>
      <Modal open={modal==="showroom"} onClose={()=>setModal(null)} title="Book a showroom visit" wide>
        <QuoteForm mode="showroom" />
      </Modal>

      {/* Language announcement (placeholder behaviour) */}
      {lang === "ar" && (
        <div style={{
          position:"fixed", bottom:24, left:24, zIndex:80,
          background:"var(--ink)", color:"#fff", padding:"14px 16px",
          fontSize:13, fontFamily:"JetBrains Mono, monospace", letterSpacing:"0.04em",
          maxWidth: 320,
        }}>
          <div style={{marginBottom:6, color:"#9b97ff"}}>AR / RTL</div>
          <div>Arabic content &amp; RTL layout shipped in build. Toggle for demo.</div>
          <button onClick={()=>setLang("en")} className="mono" style={{
            marginTop:10, background:"transparent", border:"1px solid #3b4150", color:"#fff",
            padding:"5px 9px", cursor:"pointer",
          }}>SWITCH BACK</button>
        </div>
      )}
    </>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Hash router
function parseHash(h) {
  const raw = (h || "").replace(/^#\/?/, "").trim();
  if(!raw) return {page:"home"};
  const parts = raw.split("/").filter(Boolean);
  const [seg0, seg1] = parts;
  if(seg0 === "products" && seg1) return {page:"category", id: seg1};
  if(seg0 === "sectors" && seg1)  return {page:"sector",   id: seg1};
  const known = ["home","products","sectors","projects","showroom","about","contact"];
  if(known.includes(seg0)) return {page: seg0};
  return {page:"home"};
}
function toHash(r) {
  if(r.page==="category") return "#/products/" + r.id;
  if(r.page==="sector")   return "#/sectors/"  + r.id;
  if(r.page==="home")     return "#/";
  return "#/" + r.page;
}

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