// OEG Homepage — App shell
// Composes Nav + Hero (one of 3 variants) + body sections + Footer + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "heroVariant": "cube"
}/*EDITMODE-END*/;

const FALLBACK_NAV_LIBRARIES = [
  { slug: "basic-process-science", name: "Basic Process Science" },
  { slug: "pumps",                 name: "Centrifugal Pumps" },
  { slug: "compressors",           name: "Compressors" },
  { slug: "distillation",          name: "Distillation" },
  { slug: "fcc",                   name: "Fluid Catalytic Cracking" },
  { slug: "fired-heaters",         name: "Fired Heaters" },
  { slug: "gear-pumps",            name: "Gear Pumps" },
  { slug: "heat-exchangers",       name: "Heat Exchangers" },
  { slug: "instrumentation",       name: "Instrumentation" },
  { slug: "midstream",             name: "Midstream" },
  { slug: "valves",                name: "Valves" },
];

const NavBar = ({ mc = {} }) => {
  const [trainingOpen, setTrainingOpen] = React.useState(false);
  const [mobileOpen,   setMobileOpen]   = React.useState(false);

  const rawLibs = (mc.trainingLibraries && mc.trainingLibraries.length)
    ? mc.trainingLibraries
    : FALLBACK_NAV_LIBRARIES;
  const libraries    = rawLibs.filter(l => !l.hidden);
  const customPages  = (mc.customPages || []).filter(p => !p.hidden);

  const close = () => setMobileOpen(false);

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-brand" href="index.html">
          <img className="logo-light" src="managed-media/oeg-logo-dark.png"  alt="OEG — The Operations Excellence Group" />
          <img className="logo-dark"  src="managed-media/oeg-logo-white.png" alt="OEG — The Operations Excellence Group" />
        </a>

        <div className={`nav-links${mobileOpen ? " nav-links-open" : ""}`}>
          <a className="nav-link active" href="index.html" onClick={close}>Home</a>
          <a className="nav-link" href="knowledge-library.html" onClick={close}>Knowledge Library</a>
          <a className="nav-link" href="tap.html" onClick={close}>TAP</a>
          <a className="nav-link" href="reference-library.html" onClick={close}>Reference Library</a>
          {customPages.map(p => (
            <a key={p.slug} className="nav-link" href={p.filename || (p.slug + '.php')} onClick={close}>
              {p.navLabel || p.name}
            </a>
          ))}

          {/* Training Solutions dropdown */}
          <div className="nav-dropdown-wrap"
               onMouseEnter={() => setTrainingOpen(true)}
               onMouseLeave={() => setTrainingOpen(false)}>
            <a className="nav-link nav-link-dropdown" href="training/libraries-pumps.html" onClick={close}>
              Training Solutions
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" style={{ marginLeft: 4 }}>
                <path d="M6 9l6 6 6-6" />
              </svg>
            </a>
            {trainingOpen && (
              <div className="nav-dropdown">
                <div className="nav-dropdown-label">Content Libraries</div>
                {libraries.map(lib => (
                  <a key={lib.slug} href={`training/libraries-${lib.slug}.html`} className="nav-dropdown-item" onClick={close}>
                    {lib.name}
                  </a>
                ))}
              </div>
            )}
          </div>

          <a className="nav-link" href="#about" onClick={close}>About</a>
          <a className="nav-link" href="#contact" onClick={close}>Contact</a>
        </div>

        <button
          className="nav-hamburger"
          onClick={() => setMobileOpen(m => !m)}
          aria-label={mobileOpen ? "Close menu" : "Open menu"}
          aria-expanded={mobileOpen}
        >
          {mobileOpen
            ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
          }
        </button>
      </div>
    </nav>
  );
};

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Media config loaded from managed-media/site-media-config.json
  const [mc, setMc] = React.useState({});
  React.useEffect(() => {
    fetch('managed-media/site-media-config.json')
      .then(r => r.json())
      .then(setMc)
      .catch(() => {}); // fail silently — hardcoded fallbacks take over in each component
  }, []);

  // Sync theme from localStorage on first load
  React.useEffect(() => {
    const saved = localStorage.getItem('oeg_theme_pref');
    if (saved) setTweak('theme', saved);
  }, []);

  // Listen for footer theme toggle
  React.useEffect(() => {
    const handler = (e) => setTweak('theme', e.detail);
    window.addEventListener('oeg:theme', handler);
    return () => window.removeEventListener('oeg:theme', handler);
  }, []);

  React.useEffect(() => {
    document.body.setAttribute("data-theme", t.theme || "light");
  }, [t.theme]);

  let Hero;
  if (t.heroVariant === "split") Hero = HeroSplit;
  else if (t.heroVariant === "cube") Hero = HeroCube;
  else Hero = HeroBold;

  return (
    <>
      <NavBar mc={mc} />
      <Hero />
      <ProductScreen />
      <Logos mc={mc} />
      <HeroVideo mc={mc} />
      <Tour />
      <Gallery mc={mc} />
      <Outcomes />
      <Quote />
      <How />
      <KLSection mc={mc} />
      <TAPSection />
      <RLSection />
      <TrainingLibraries mc={mc} />
      <About />
      <Testimonials />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Color mode"
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "light", label: "Light" },
              { value: "dark",  label: "Dark"  },
            ]}
          />
        </TweakSection>
        <TweakSection label="Hero variation">
          <TweakSelect
            label="Layout"
            value={t.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "bold",  label: "01 — Bold statement + screenshot" },
              { value: "split", label: "02 — Split: Studio | Library"   },
              { value: "cube",  label: "03 — Isometric cube centerpiece" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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