// Main app — composes the landing page + tweaks

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroAccent": "blue",
  "showFab": true,
  "robotPersonality": "wave"
}/*EDITMODE-END*/;

const ScrollTopBtn = () => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 300);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <button
      className={`scroll-top-btn${visible ? " visible" : ""}`}
      aria-label="Scroll to top"
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
    >
      <IconRocket size={22} />
    </button>
  );
};

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <div className="container nav">
      <div className={`nav-inner${open ? " nav-open" : ""}`}>
        {/* top bar */}
        <div className="nav-bar">
          <a href="#" className="brand" onClick={close}>
            <img src="assets/logo.png" alt="DCC" style={{ width: 40, height: 40, borderRadius: 10 }} />
            <span>Digital Code Camp</span>
          </a>
          <div className="nav-links">
            <a href="#camp">Summer Camp</a>
            <a href="#programs">Programs</a>
            <a href="#why">Why DCC</a>
            <a href="#schools">For Schools</a>
            <a href="#kits">Buy Kits</a>
            <a href="#testimonials">Reviews</a>
          </div>
          <div className="nav-cta">
            <a href="#" className="btn btn-sm btn-ghost" onClick={(e) => { e.preventDefault(); close(); window.openForm("parent", "Book Demo"); }}>Book demo</a>
            <a href="#" className="btn btn-sm btn-primary" onClick={(e) => { e.preventDefault(); close(); window.openForm("parent", "Enrol Now"); }}>Enroll <Arrow size={14} /></a>
          </div>
          <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
            <span /><span /><span />
          </button>
        </div>
        {/* mobile dropdown */}
        {open && (
          <div className="nav-mobile">
            <a href="#camp" onClick={close}>Summer Camp</a>
            <a href="#programs" onClick={close}>Programs</a>
            <a href="#why" onClick={close}>Why DCC</a>
            <a href="#schools" onClick={close}>For Schools</a>
            <a href="#kits" onClick={close}>Buy Kits</a>
            <a href="#testimonials" onClick={close}>Reviews</a>
            <div className="nav-mobile-cta">
              <a href="#" className="btn btn-sm btn-ghost" style={{flex:1,justifyContent:"center"}} onClick={(e) => { e.preventDefault(); close(); window.openForm("parent", "Book Demo"); }}>Book demo</a>
              <a href="#" className="btn btn-sm btn-primary" style={{flex:1,justifyContent:"center"}} onClick={(e) => { e.preventDefault(); close(); window.openForm("parent", "Enrol Now"); }}>Enroll <Arrow size={14} /></a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// Reveal-on-scroll observer
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  useReveal();

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <div className="reveal"><CampSection /></div>
      <div className="reveal"><ProgramsSection /></div>
      <div className="reveal"><HowItWorks /></div>
      <div className="reveal"><WhyParents /></div>
      <div className="reveal"><ForSchools /></div>
      <div className="reveal"><Testimonials /></div>
      <div className="reveal"><BuyKits /></div>
      <div className="reveal"><FinalCTA /></div>
      <Footer />
      <FormModal />

      <ScrollTopBtn />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Quick toggles">
          <TweakToggle
            label="Floating WhatsApp button"
            value={tweaks.showFab}
            onChange={v => setTweak('showFab', v)}
          />
        </TweakSection>
        <TweakSection title="About this design">
          <p style={{ fontSize: 12, color: "var(--muted)", margin: 0, lineHeight: 1.5 }}>
            Hi-fi original landing page for Digital Code Camp.
            Brand fonts: Space Grotesk + Plus Jakarta Sans.
            Logo at <span className="mono">assets/logo.png</span>.
          </p>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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