// App shell — composes all sections, manages theme, replay key, and Tweaks.

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = {
  "bg": "butter",
  "dark": false
};

const BG_PRESETS = {
  cream:   { label: "Cream (default)",  swatch: "#F0EBE2", paper: "#F0EBE2", surface: "#FFFFFF",  s2: "#FAF7F1", s3: "#E8E2D4" },
  oat:     { label: "Oat",              swatch: "#E8E2D4", paper: "#E8E2D4", surface: "#FAF6EE",  s2: "#F2ECDF", s3: "#DCD4C2" },
  bone:    { label: "Bone (off-white)", swatch: "#FAF8F4", paper: "#FAF8F4", surface: "#FFFFFF",  s2: "#F2EFE8", s3: "#E6E2D8" },
  cooler:  { label: "Cool paper",       swatch: "#EEEAE0", paper: "#EEEAE0", surface: "#FCFAF4",  s2: "#F5F1E6", s3: "#E2DDD0" },
  sage:    { label: "Pale sage",        swatch: "#E8EDE3", paper: "#E8EDE3", surface: "#F8FAF5",  s2: "#F0F4EC", s3: "#D8DFD0" },
  stone:   { label: "Cool stone",       swatch: "#ECECE8", paper: "#ECECE8", surface: "#FAFAF7",  s2: "#F3F3EF", s3: "#DEDED9" },
  butter:  { label: "Pale butter",      swatch: "#F2EDD8", paper: "#F2EDD8", surface: "#FBF7E6",  s2: "#F6F1DE", s3: "#E2DBBF" },
  sky:     { label: "Soft sky",         swatch: "#E4ECEC", paper: "#E4ECEC", surface: "#F4F8F8",  s2: "#ECF1F1", s3: "#D2DCDC" },
  clay:    { label: "Pale clay",        swatch: "#EDDFCF", paper: "#EDDFCF", surface: "#F9F1E5",  s2: "#F2E6D5", s3: "#D9C8B2" },
  whisper: { label: "Whisper white",    swatch: "#FCFAF6", paper: "#FCFAF6", surface: "#FFFFFF",  s2: "#F6F3EC", s3: "#E8E4DA" },
};

function applyBg(preset) {
  const p = BG_PRESETS[preset] || BG_PRESETS.cream;
  const root = document.documentElement;
  if (root.dataset.theme === "dark") {
    root.style.removeProperty("--paper");
    root.style.removeProperty("--surface");
    root.style.removeProperty("--surface-2");
    root.style.removeProperty("--surface-3");
    return;
  }
  root.style.setProperty("--paper",     p.paper);
  root.style.setProperty("--surface",   p.surface);
  root.style.setProperty("--surface-2", p.s2);
  root.style.setProperty("--surface-3", p.s3);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [replayKey, setReplayKey] = useStateA(0);

  useEffectA(() => {
    document.documentElement.dataset.theme = t.dark ? "dark" : "light";
    applyBg(t.bg);
  }, [t.dark, t.bg]);

  const presetKeys = Object.keys(BG_PRESETS);

  return (
    <div>
      <TopNav dark={t.dark} onToggleTheme={() => setTweak("dark", !t.dark)} />
      <HeroSection replayKey={replayKey} onReplay={() => setReplayKey(k => k + 1)} />
      <FeaturesSection />
      <HowSection />
      <VoiceSection />
      <DemoSection />
      <PrivacySection />
      <PricingSection />
      <ComparisonSection />
      <FaqSection />
      <CtaSection />
      <FooterSection />

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Background (light mode)" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
          {presetKeys.map(k => {
            const p = BG_PRESETS[k];
            const active = t.bg === k;
            return (
              <button key={k} onClick={() => setTweak("bg", k)} title={p.label} style={{
                aspectRatio: "1 / 1", borderRadius: 8,
                border: active ? "2px solid #2B6CFF" : "1px solid rgba(0,0,0,0.12)",
                background: p.swatch, cursor: "pointer", position: "relative", padding: 0, outline: "none",
              }}>
                {active && <span style={{
                  position: "absolute", inset: 0,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, color: "#2B6CFF", fontWeight: 700,
                }}>✓</span>}
              </button>
            );
          })}
        </div>
        <div style={{ fontSize: 10.5, color: "rgba(0,0,0,0.55)", lineHeight: 1.4, marginTop: 2 }}>
          {BG_PRESETS[t.bg]?.label || "—"}
        </div>
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakSection label="Hero" />
        <TweakButton label="Replay chat animation" onClick={() => setReplayKey(k => k + 1)} />
      </TweaksPanel>
    </div>
  );
}

// Animations + responsive styles
const styleEl = document.createElement("style");
styleEl.textContent = `
@keyframes meloDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
@keyframes meloMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body, .melo-section, .melo-card, .melo-chat, .melo-bubble, .melo-pill, .melo-toggle, .melo-nav, .melo-footer-card {
  transition: background-color 220ms cubic-bezier(0.2,0,0,1), color 220ms cubic-bezier(0.2,0,0,1), border-color 220ms cubic-bezier(0.2,0,0,1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
`;
document.head.appendChild(styleEl);

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