/* App shell — Nav + composition + Tweaks panel */

const HEADLINES = {
  "Debug voice agents like you debug code": "Debug voice agents · like you debug {{code}}.",
  "Debug voice agents": "Debug voice agents",
  "Find what breaks conversations": "Find what breaks · conversations",
  "Make every conversation visible": "Make every conversation · visible",
  "Understand failures in production voice agents": "Understand failures · in production voice agents",
  "Conversations, observable": "Conversations, · observable",
};

const PALETTES = {
  graphite: { a: "oklch(0.78 0.06 270)", b: "oklch(0.84 0.06 55)",  c: "oklch(0.80 0.05 160)" }, // default — lavender + peach + sage
  bone:     { a: "oklch(0.82 0.04 80)",  b: "oklch(0.80 0.05 30)",  c: "oklch(0.78 0.05 220)" }, // warm bone
  graphene: { a: "oklch(0.74 0.06 220)", b: "oklch(0.80 0.05 180)", c: "oklch(0.78 0.05 270)" }, // cool charcoal
  ember:    { a: "oklch(0.82 0.07 35)",  b: "oklch(0.78 0.06 10)",  c: "oklch(0.80 0.04 80)" },  // warm ember
};

const BGS = {
  bone:  { bg: "#F6F4EF", soft: "#EFECE5", panel: "#FBFAF7", ink: "#18181A" }, // default warm
  paper: { bg: "#F4F4F2", soft: "#ECECEA", panel: "#FAFAF9", ink: "#15161A" }, // neutral
  mist:  { bg: "#F1F3F5", soft: "#E8EBEE", panel: "#F8FAFB", ink: "#16191E" }, // cool
  ink:   { bg: "#15161A", soft: "#1D1F24", panel: "#1F2228", ink: "#F4F2EC" }, // dark
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Debug voice agents like you debug code",
  "palette": "graphite",
  "bg": "bone",
  "ambient": true,
  "density": "spacious"
}/*EDITMODE-END*/;

function applyTokens({ palette, bg }) {
  const p = PALETTES[palette] || PALETTES.graphite;
  const b = BGS[bg] || BGS.bone;
  const root = document.documentElement;
  root.style.setProperty("--accent-a", p.a);
  root.style.setProperty("--accent-b", p.b);
  root.style.setProperty("--accent-c", p.c);
  root.style.setProperty("--bg", b.bg);
  root.style.setProperty("--bg-soft", b.soft);
  root.style.setProperty("--panel", b.panel);
  root.style.setProperty("--ink", b.ink);
  // derived inks for dark mode
  if (bg === "ink") {
    root.style.setProperty("--ink-soft", "#C9C6BD");
    root.style.setProperty("--mute", "#8A8881");
    root.style.setProperty("--mute-2", "#5C5B55");
    root.style.setProperty("--hair", "rgba(255,255,255,0.07)");
    root.style.setProperty("--hair-strong", "rgba(255,255,255,0.14)");
  } else {
    root.style.setProperty("--ink-soft", "#3A3A3B");
    root.style.setProperty("--mute", "#7C7C77");
    root.style.setProperty("--mute-2", "#A8A8A2");
    root.style.setProperty("--hair", "rgba(20,20,20,0.07)");
    root.style.setProperty("--hair-strong", "rgba(20,20,20,0.12)");
  }
}

function Nav() {
  return (
    <nav className="top">
      <div className="wrap row">
        <div className="left">
          <div className="brand" aria-label="Audia">
            <span className="dot"/>
            <span className="brand-name">Audia</span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <button className="btn primary" style={{ padding: "7px 12px" }} onClick={() => window.openEarlyAccess && window.openEarlyAccess()}>Get early access</button>
        </div>
      </div>
    </nav>
  );
}

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

  React.useEffect(() => {
    applyTokens({ palette: tweaks.palette, bg: tweaks.bg });
  }, [tweaks.palette, tweaks.bg]);

  React.useEffect(() => {
    document.querySelectorAll(".ambient .blob").forEach(el => {
      el.style.display = tweaks.ambient ? "block" : "none";
    });
  }, [tweaks.ambient]);

  React.useEffect(() => {
    // density tweak — adjust section padding via class on body
    document.body.classList.toggle("compact", tweaks.density === "compact");
  }, [tweaks.density]);

  return (
    <>
      <Nav/>
      <Hero headline={HEADLINES[tweaks.headline] || HEADLINES["Find what breaks conversations"]}/>
      <ModesSection/>
      <HowSection/>
      <SignalsSection/>
      <ReplaySection/>
      <IntegrationsSection/>
      <CtaSection/>
      <Footer/>
      <EarlyAccessModal/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Headline">
          <TweakSelect
            label="Variant"
            value={tweaks.headline}
            onChange={v => setTweak("headline", v)}
            options={Object.keys(HEADLINES).map(k => ({ value: k, label: k }))}
          />
        </TweakSection>

        <TweakSection label="Accent palette">
          <TweakSelect
            label="Palette"
            value={tweaks.palette}
            onChange={v => setTweak("palette", v)}
            options={[
              { value: "graphite", label: "Graphite · lavender + peach + sage" },
              { value: "bone",     label: "Bone · warm neutrals" },
              { value: "graphene", label: "Graphene · cool charcoal" },
              { value: "ember",    label: "Ember · warm reds" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Surface">
          <TweakSelect
            label="Background"
            value={tweaks.bg}
            onChange={v => setTweak("bg", v)}
            options={[
              { value: "bone",  label: "Bone · warm off-white" },
              { value: "paper", label: "Paper · neutral" },
              { value: "mist",  label: "Mist · cool" },
              { value: "ink",   label: "Ink · dark" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Ambience">
          <TweakToggle value={tweaks.ambient} onChange={v => setTweak("ambient", v)} label="Color blobs"/>
        </TweakSection>

        <TweakSection label="Density">
          <TweakRadio
            label="Spacing"
            value={tweaks.density}
            onChange={v => setTweak("density", v)}
            options={[
              { value: "spacious", label: "Spacious" },
              { value: "compact",  label: "Compact" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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