// === Main app ===

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "diner-classic",
  "mapStyle": "clean",
  "sectionOrder": ["stats", "why", "story", "process", "map", "contact"]
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = React.useState("es");
  const [tweaks, setTweaks] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  const copy = window.JR_DATA.copy[lang];
  const states = window.JR_DATA.states;
  const locations = window.JR_DATA.locations;

  // Smooth scroll
  const onJump = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  // Section registry
  const sectionMap = {
    stats: <Stats key="stats" copy={copy} />,
    why: <Why key="why" copy={copy} />,
    story: <Story key="story" copy={copy} lang={lang} />,
    process: <Process key="process" copy={copy} />,
    map: <MapSection key="map" copy={copy} locations={locations} mapStyle={tweaks.mapStyle} />,
    contact: <FormSection key="contact" copy={copy} states={states} lang={lang} />,
  };

  // Apply direction theme via data attribute
  React.useEffect(() => {
    document.documentElement.setAttribute("data-direction", tweaks.direction || "diner-classic");
  }, [tweaks.direction]);

  return (
    <div className="jr-app">
      <Nav lang={lang} setLang={setLang} copy={copy} onJump={onJump} />
      <Hero copy={copy} onJump={onJump} />
      {(tweaks.sectionOrder || TWEAK_DEFAULTS.sectionOrder).map(key => sectionMap[key]).filter(Boolean)}
      <Footer copy={copy} />

      {/* Tweaks panel — only renders when host activates */}
      <TweaksPanelUI tweaks={tweaks} setTweaks={setTweaks} />
    </div>
  );
}

// ---- Tweaks panel UI ----
function TweaksPanelUI({ tweaks, setTweaks }) {
  if (!window.TweaksPanel) return null;
  const TweaksPanel = window.TweaksPanel;
  const { TweakSection, TweakRadio, TweakSelect } = window;

  const sectionLabels = {
    stats: "Stats",
    why: "Why Franchise",
    story: "Brand Story",
    process: "Process",
    map: "Locations Map",
    contact: "Apply Form",
  };

  const moveSection = (key, delta) => {
    const order = [...(tweaks.sectionOrder || TWEAK_DEFAULTS.sectionOrder)];
    const idx = order.indexOf(key);
    const newIdx = idx + delta;
    if (newIdx < 0 || newIdx >= order.length) return;
    [order[idx], order[newIdx]] = [order[newIdx], order[idx]];
    setTweaks("sectionOrder", order);
  };

  const currentOrder = tweaks.sectionOrder || TWEAK_DEFAULTS.sectionOrder;

  return (
    <TweaksPanel>
      <TweakSection title="Visual direction">
        <TweakSelect
          value={tweaks.direction}
          onChange={(v) => setTweaks("direction", v)}
          options={[
            { value: "diner-classic", label: "Diner Classic (yellow / red)" },
            { value: "editorial-modern", label: "Editorial Modern (cream / blue)" },
            { value: "bold-pop", label: "Bold Pop (red / white)" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Map style">
        <TweakRadio
          value={tweaks.mapStyle}
          onChange={(v) => setTweaks("mapStyle", v)}
          options={[
            { value: "clean", label: "Clean" },
            { value: "diner", label: "Diner" },
            { value: "bold", label: "Bold" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Section order">
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {currentOrder.map((key, i) => (
            <div key={key} style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              padding: "8px 12px", background: "rgba(0,0,0,0.04)", borderRadius: 8,
              fontSize: 13, fontWeight: 500,
            }}>
              <span>{i + 1}. {sectionLabels[key] || key}</span>
              <span style={{ display: "flex", gap: 4 }}>
                <button
                  onClick={() => moveSection(key, -1)}
                  disabled={i === 0}
                  style={{ width: 26, height: 26, borderRadius: 6, border: "1px solid rgba(0,0,0,0.15)", background: "white", cursor: i === 0 ? "default" : "pointer", opacity: i === 0 ? 0.3 : 1 }}
                >↑</button>
                <button
                  onClick={() => moveSection(key, 1)}
                  disabled={i === currentOrder.length - 1}
                  style={{ width: 26, height: 26, borderRadius: 6, border: "1px solid rgba(0,0,0,0.15)", background: "white", cursor: i === currentOrder.length - 1 ? "default" : "pointer", opacity: i === currentOrder.length - 1 ? 0.3 : 1 }}
                >↓</button>
              </span>
            </div>
          ))}
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

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

// Hide splash — robust against load timing
function hideSplash() {
  const s = document.getElementById("splash");
  if (!s) return;
  s.classList.add("hide");
  setTimeout(() => s.remove(), 500);
}
setTimeout(hideSplash, 50);
setTimeout(hideSplash, 500); // safety net