/* eslint-disable */
/* NEX Consultants — root app + routing */

function App() {
  const [route, setRoute] = React.useState("home");
  const [lang, setLang] = React.useState("EN");
  const [consultOpen, setConsultOpen] = React.useState(false);
  const [serviceDetail, setServiceDetail] = React.useState(null);
  const [guideOpen, setGuideOpen] = React.useState(null);
  const [toast, setToast] = React.useState(null);
  const [consultPrefill, setConsultPrefill] = React.useState(null);

  // expose toast for child views
  React.useEffect(() => {
    window.__showToast = (msg) => setToast(msg);
  }, []);

  // Scroll-to-top on route change
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);

  // RTL handling
  React.useEffect(() => {
    document.documentElement.dir = lang === "AR" ? "rtl" : "ltr";
    document.documentElement.lang = lang.toLowerCase();
  }, [lang]);

  const openConsult = (prefill) => {
    setConsultPrefill(typeof prefill === "string" ? prefill : null);
    setConsultOpen(true);
  };

  const onOpenService = (s) => setServiceDetail(s);
  const onOpenGuide = (g) => setGuideOpen(g);

  let view;
  if (route === "home")          view = <Home setRoute={setRoute} onConsult={openConsult} onOpenService={onOpenService}/>;
  else if (route === "services") view = <ServicesView onOpenService={onOpenService}/>;
  else if (route === "jurisdictions") view = <JurisdictionsView setRoute={setRoute}/>;
  else if (route === "calculator")    view = <CalculatorView onConsult={openConsult}/>;
  else if (route === "resources")     view = <ResourcesView onOpenGuide={onOpenGuide}/>;
  else if (route === "about")         view = <AboutView onConsult={openConsult}/>;
  else if (route === "contact")       view = <ContactView/>;

  return (
    <>
      <NavBar
        route={route}
        setRoute={setRoute}
        lang={lang}
        setLang={setLang}
        onConsult={() => openConsult()}
      />
      {view}
      <TrustStrip/>
      <Footer setRoute={setRoute}/>
      <WAFab/>

      {/* Consultation modal */}
      <Modal open={consultOpen} onClose={() => setConsultOpen(false)}>
        <h3>Request a free consultation</h3>
        <p className="sub" style={{ marginTop: 6 }}>
          A senior partner will follow up within one business day.
        </p>
        <div style={{ marginTop: 18 }}>
          <ConsultationForm
            light
            prefillService={consultPrefill}
            onSubmit={() => {
              setConsultOpen(false);
              setToast("Consultation requested. We'll be in touch shortly.");
            }}
          />
        </div>
      </Modal>

      {/* Service detail modal */}
      <Modal open={!!serviceDetail} onClose={() => setServiceDetail(null)} wide>
        <ServiceDetail
          service={serviceDetail}
          onConsult={(title) => { setServiceDetail(null); openConsult(title); }}
        />
      </Modal>

      {/* Guide modal */}
      <Modal open={!!guideOpen} onClose={() => setGuideOpen(null)} wide>
        {guideOpen && (
          <>
            <span className="guide__tag" style={{ color: "var(--blue)" }}>{guideOpen.tag} · {guideOpen.read}</span>
            <h3 style={{ marginTop: 8, fontSize: 26, letterSpacing: "-0.02em", lineHeight: 1.2 }}>{guideOpen.title}</h3>
            <p className="sub" style={{ marginTop: 10, fontSize: 15 }}>{guideOpen.excerpt}</p>
            <div style={{
              marginTop: 22, padding: 20,
              background: "var(--paper-2)", border: "1px solid var(--line)",
              borderRadius: 12,
            }}>
              <p style={{ fontSize: 14, color: "var(--text-2)" }}>
                <strong style={{ color: "var(--ink)" }}>Full article preview.</strong>{" "}
                The complete guide is part of the production knowledge hub, with inline
                consultation CTAs and a deep-link to the cost calculator. This prototype
                shows the index and a representative excerpt — final content is migrated
                from the existing NEX library and edited for the new IA.
              </p>
            </div>
            <div style={{ marginTop: 20, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button className="btn btn--primary" onClick={() => { setGuideOpen(null); openConsult(); }}>
                Request a consultation
              </button>
              <button className="btn btn--ghost" onClick={() => setGuideOpen(null)}>
                Close
              </button>
            </div>
          </>
        )}
      </Modal>

      {toast && <Toast onDone={() => setToast(null)}>{toast}</Toast>}
    </>
  );
}

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