/* global React, ReactDOM, window,
   Nav, Hero, Why, Subjects, Courses, CourseModal,
   Journey, Teachers, Achievements, Testimonials, CTA, Footer,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, Mascot */

const { useState, useEffect, useRef } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);
  const mascotStyle = tweaks.mascotStyle;
  const [activeSubject, setActiveSubject] = useState("all");
  const [openCourse, setOpenCourse] = useState(null);
  const [activeNav, setActiveNav] = useState("top");
  const [route, setRoute] = useState("home");  // "home" | "login" | "register" | "portal"
  const signupRef = useRef(null);

  // Scroll spy
  useEffect(() => {
    const ids = ["top", "why", "courses", "journey", "teachers", "stories", "cta"];
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActiveNav(e.target.id);
      });
    }, { rootMargin: "-40% 0px -55% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const onNav = (id) => {
    if (id === "login") { setRoute("login"); return; }
    const el = document.getElementById(id === "top" ? "top" : id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  const onSignup = () => { setRoute("register"); };
  const onScrollCourses = () => onNav("courses");

  const onSelectSubject = (id) => {
    setActiveSubject(id);
    setTimeout(() => onNav("courses"), 50);
  };

  const onOpenCourse = (c) => setOpenCourse(c);
  const onEnroll = () => { setOpenCourse(null); setTimeout(() => setRoute("register"), 200); };
  const closeAuth = () => setRoute("home");

  return (
    <div className="shell">
      <Nav active={activeNav} onNav={onNav} onSignup={onSignup}/>
      <Hero mascotStyle={mascotStyle} onSignup={onSignup} onScrollCourses={onScrollCourses}/>
      <Why/>
      <Subjects onSelectSubject={onSelectSubject}/>
      <Courses
        activeSubject={activeSubject}
        setActiveSubject={setActiveSubject}
        onOpenCourse={onOpenCourse}/>
      <Journey/>
      <Teachers/>
      <Achievements mascotStyle={mascotStyle}/>
      <Testimonials/>
      <CTA mascotStyle={mascotStyle} signupRef={signupRef}/>
      <Footer/>

      {openCourse && (
        <CourseModal
          course={openCourse}
          onClose={() => setOpenCourse(null)}
          onEnroll={onEnroll}/>
      )}

      {route === "login" && (
        <LoginScreen
          onClose={closeAuth}
          onSignedIn={() => setRoute("portal")}
          onGoRegister={() => setRoute("register")}/>
      )}
      {route === "register" && (
        <RegisterScreen
          onClose={closeAuth}
          onSignedIn={() => setRoute("portal")}
          onGoLogin={() => setRoute("login")}/>
      )}
      {route === "portal" && (
        <Portal
          onExitToSite={closeAuth}
          onLogout={closeAuth}/>
      )}

      {route !== "portal" && <WhatsAppButton/>}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Mascot style">
          <div style={{ direction: "ltr", fontSize: 12, color: "#666", margin: "0 0 10px", lineHeight: 1.5 }}>
            Swap the star mascot used across the page.
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, direction: "ltr" }}>
            {[
              { id: "real", label: "Eyad" },
              { id: "geometric", label: "Geometric" },
              { id: "lineart", label: "Lineart" },
              { id: "sunny", label: "Sunny" },
            ].map(opt => (
              <button key={opt.id}
                onClick={() => setTweak("mascotStyle", opt.id)}
                style={{
                  display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
                  padding: 8, borderRadius: 10,
                  background: mascotStyle === opt.id ? "#0F1B3D" : "#f7f6f2",
                  color: mascotStyle === opt.id ? "#FBF6EC" : "#1A1F3A",
                  border: mascotStyle === opt.id ? "1.5px solid #D9A441" : "1.5px solid transparent",
                  cursor: "pointer",
                  fontWeight: 600,
                  fontSize: 10.5,
                  transition: "all .2s",
                }}>
                <div style={{ width: 42, height: 42, display: "grid", placeItems: "center", background: mascotStyle === opt.id ? "rgba(255,255,255,0.06)" : "white", borderRadius: 8 }}>
                  <Mascot style={opt.id} size={38}/>
                </div>
                <span>{opt.label}</span>
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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