// Main app — wires everything together with Tweaks

const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "verdant",
  "typography": "industrial",
  "showTicker": true,
  "darkHeroAccent": false
}/*EDITMODE-END*/;

const PALETTES = {
  verdant: {
    name: "Verdant — vibrant grow-room green",
    "--bg": "#f1f4ea",
    "--bg-alt": "#e2ead0",
    "--ink": "#0c1a10",
    "--ink-soft": "#1a3322",
    "--muted": "#5a7050",
    "--rule": "#0c1a10",
    "--rule-soft": "#b9c9a3",
    "--accent": "#3f8c3a",
    "--accent-ink": "#f1f4ea",
    "--accent-bright": "#6fbb3a",
    "--leaf": "#3f8c3a",
  },
  greenhouse: {
    name: "Greenhouse — saturated daylight",
    "--bg": "#eef7e2",
    "--bg-alt": "#dceec1",
    "--ink": "#08180a",
    "--ink-soft": "#16321a",
    "--muted": "#566b4d",
    "--rule": "#08180a",
    "--rule-soft": "#b1c98c",
    "--accent": "#2f9a2f",
    "--accent-ink": "#eef7e2",
    "--accent-bright": "#86d04a",
    "--leaf": "#2f9a2f",
  },
  canopy: {
    name: "Canopy — deep forest dark",
    "--bg": "#0f1a0f",
    "--bg-alt": "#172517",
    "--ink": "#eaf2dc",
    "--ink-soft": "#cbd9b5",
    "--muted": "#7e8e6c",
    "--rule": "#eaf2dc",
    "--rule-soft": "#28361f",
    "--accent": "#86d04a",
    "--accent-ink": "#0f1a0f",
    "--accent-bright": "#a6e25e",
    "--leaf": "#86d04a",
  },
  sprout: {
    name: "Sprout — fresh & bright",
    "--bg": "#f7faec",
    "--bg-alt": "#e6f0c9",
    "--ink": "#0a1c08",
    "--ink-soft": "#1d3a18",
    "--muted": "#6a7d52",
    "--rule": "#0a1c08",
    "--rule-soft": "#c7d99a",
    "--accent": "#4ea832",
    "--accent-ink": "#f7faec",
    "--accent-bright": "#94d44a",
    "--leaf": "#4ea832",
  },
  moss: {
    name: "Moss — muted agronomic",
    "--bg": "#eef0e2",
    "--bg-alt": "#dee2c8",
    "--ink": "#0e1a0e",
    "--ink-soft": "#1f2e1c",
    "--muted": "#637056",
    "--rule": "#0e1a0e",
    "--rule-soft": "#bcc8a0",
    "--accent": "#3a6a2c",
    "--accent-ink": "#eef0e2",
    "--accent-bright": "#7aa64a",
    "--leaf": "#3a6a2c",
  },
};

const TYPOGRAPHY = {
  industrial: {
    name: "Industrial — Inter / Plex Mono",
    "--font-sans": '"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
    "--font-mono": '"IBM Plex Mono", ui-monospace, monospace',
    "--font-display": '"Inter", -apple-system, "Helvetica Neue", sans-serif',
    "--display-weight": "600",
    "--display-tracking": "-0.02em",
    "--display-italic": "normal",
  },
  editorial: {
    name: "Editorial — Newsreader / JetBrains",
    "--font-sans": '"Manrope", -apple-system, "Helvetica Neue", sans-serif',
    "--font-mono": '"JetBrains Mono", ui-monospace, monospace',
    "--font-display": '"Newsreader", "Times New Roman", serif',
    "--display-weight": "400",
    "--display-tracking": "-0.025em",
    "--display-italic": "normal",
  },
  swiss: {
    name: "Swiss — Manrope only",
    "--font-sans": '"Manrope", -apple-system, "Helvetica Neue", sans-serif',
    "--font-mono": '"JetBrains Mono", ui-monospace, monospace',
    "--font-display": '"Manrope", "Helvetica Neue", sans-serif',
    "--display-weight": "700",
    "--display-tracking": "-0.04em",
    "--display-italic": "normal",
  },
  hybrid: {
    name: "Hybrid — Instrument Serif + Inter",
    "--font-sans": '"Inter", -apple-system, "Helvetica Neue", sans-serif',
    "--font-mono": '"IBM Plex Mono", ui-monospace, monospace',
    "--font-display": '"Instrument Serif", "Times New Roman", serif',
    "--display-weight": "400",
    "--display-tracking": "-0.02em",
    "--display-italic": "italic",
  },
};

function applyTweaks(t) {
  const root = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES.olive;
  const ty = TYPOGRAPHY[t.typography] || TYPOGRAPHY.industrial;
  Object.entries(p).forEach(([k, v]) => { if (k.startsWith("--")) root.style.setProperty(k, v); });
  Object.entries(ty).forEach(([k, v]) => { if (k.startsWith("--")) root.style.setProperty(k, v); });
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <>
      <style>{responsiveCSS}</style>
      <Nav />
      <Hero />
      {tweaks.showTicker && <Ticker />}
      <Tracks />
      <Advantages />
      <Technology />
      <BOT />
      <Markets />
      <Proof />
      <Sustainability />
      <About />
      <Booking />
      <Footer />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Palette">
          <TweakSelect
            label="Color theme"
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={Object.entries(PALETTES).map(([id, p]) => ({ value: id, label: p.name }))}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6, marginTop: 8 }}>
            {Object.entries(PALETTES).map(([id, p]) => (
              <button
                key={id}
                onClick={() => setTweak("palette", id)}
                title={p.name}
                style={{
                  height: 36,
                  border: tweaks.palette === id ? "2px solid #fff" : "1px solid rgba(255,255,255,0.2)",
                  outline: tweaks.palette === id ? "1px solid rgba(0,0,0,0.4)" : "none",
                  cursor: "pointer",
                  padding: 0,
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr 1fr",
                  overflow: "hidden",
                }}
              >
                <span style={{ background: p["--bg"] }}/>
                <span style={{ background: p["--ink"] }}/>
                <span style={{ background: p["--accent"] }}/>
              </button>
            ))}
          </div>
        </TweakSection>

        <TweakSection title="Typography">
          <TweakSelect
            label="Type system"
            value={tweaks.typography}
            onChange={(v) => setTweak("typography", v)}
            options={Object.entries(TYPOGRAPHY).map(([id, t]) => ({ value: id, label: t.name }))}
          />
        </TweakSection>

        <TweakSection title="Layout">
          <TweakToggle
            label="Show ticker strip"
            value={tweaks.showTicker}
            onChange={(v) => setTweak("showTicker", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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