// kevinz.ai — top-level app + tweaks wiring

const KZ_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "auto",
  "displayFont": "mono",
  "scanlines": true,
  "showHero": true,
  "showStats": true,
  "showToolchain": true,
  "showNewsletter": true,
  "showCommander": true,
  "showProjects": true,
  "showWriting": true,
  "showXFeed": true,
  "showCredentials": true,
  "showConsulting": true,
  "showContact": true,
  "showAsciiCTA": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(KZ_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.scanlines = tweaks.scanlines ? "on" : "off";
    document.body.dataset.theme = tweaks.theme;
    document.body.dataset.font = tweaks.displayFont;
  }, [tweaks.scanlines, tweaks.theme, tweaks.displayFont]);

  // Standalone ASCII tool view: ?view=ascii renders just the AsciiPicCTA
  // with a slim back-nav. Shareable URL for Twitter/social traffic; same
  // React shell so styles/tokens are inherited (no duplicate CSS).
  const isAsciiView = typeof window !== "undefined" &&
    new URLSearchParams(window.location.search).get("view") === "ascii";

  React.useEffect(() => {
    if (isAsciiView) {
      document.title = "Your face in 80 characters — kevinz.ai";
    }
  }, [isAsciiView]);

  if (isAsciiView) {
    return (
      <div style={{ minHeight: "100vh", paddingTop: 0 }}>
        <div className="topbar">
          <div className="container topbar-inner" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 24px" }}>
            <a href="/" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "inherit", textDecoration: "none" }}>
              <span style={{ width: 26, height: 26, border: "1px solid var(--amber)", color: "var(--amber)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 12 }}>KZ</span>
              <span style={{ fontWeight: 700 }}>kevinz.ai</span>
              <span className="dim" style={{ marginLeft: 8, fontSize: 11 }}>/ ascii portrait tool</span>
            </a>
            <a href="/" style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.16em", textTransform: "uppercase", textDecoration: "none" }}>← back</a>
          </div>
        </div>
        <window.AsciiPicCTA />
        <Footer />
      </div>
    );
  }

  return (
    <>
      <window.BootScreen />
      <TopBar />
      {tweaks.showHero && <Hero />}
      <window.NvidiaStrip />
      {tweaks.showStats && <StatsBar />}
      {tweaks.showProjects && <Projects />}
      {tweaks.showCommander && <Commander />}
      <window.CommanderDemo />
      {tweaks.showProjects && <window.ReadyIQ />}
      {tweaks.showProjects && <window.DMHub />}
      {tweaks.showProjects && <window.MyWiFi />}
      {tweaks.showProjects && <window.GuestNetworks />}
      {tweaks.showProjects && <window.OpenClawHermes />}
      {tweaks.showAsciiCTA && <window.AsciiCtaTeaser />}
      {tweaks.showWriting && <Writing />}
      {tweaks.showCredentials && <Credentials />}
      {tweaks.showNewsletter && <Newsletter />}
      {tweaks.showConsulting && <WorkWithMe />}
      {tweaks.showToolchain && <window.Toolchain />}
      {tweaks.showContact && <window.Contact />}
      {tweaks.showXFeed && <window.XFeed />}
      <Footer />
      <window.StickyNewsletter />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Theme">
          <window.TweakRadio
            label="Accent"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "auto", label: "Auto · per-section (Vercel)" },
              { value: "blue", label: "Vercel Blue" },
              { value: "violet", label: "Violet" },
              { value: "green", label: "Green" },
              { value: "magenta", label: "Magenta" },
              { value: "cyan", label: "Cyan" },
              { value: "amber", label: "Amber" },
              { value: "white", label: "Mono / white" },
            ]}
          />
          <window.TweakRadio
            label="Headline font"
            value={tweaks.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={[
              { value: "mono", label: "JetBrains Mono (default)" },
              { value: "departure", label: "Departure Mono (pixel)" },
              { value: "grotesk", label: "Space Grotesk (modern)" },
              { value: "geist", label: "Geist (Vercel-ish)" },
              { value: "serif", label: "Instrument Serif (italic)" },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection title="CRT">
          <window.TweakToggle label="Scanlines" value={tweaks.scanlines} onChange={(v) => setTweak("scanlines", v)} />
        </window.TweakSection>

        <window.TweakSection title="Sections">
          <window.TweakToggle label="Hero" value={tweaks.showHero} onChange={(v) => setTweak("showHero", v)} />
          <window.TweakToggle label="Stats bar" value={tweaks.showStats} onChange={(v) => setTweak("showStats", v)} />
          <window.TweakToggle label="Tools I use" value={tweaks.showToolchain} onChange={(v) => setTweak("showToolchain", v)} />
          <window.TweakToggle label="Newsletter" value={tweaks.showNewsletter} onChange={(v) => setTweak("showNewsletter", v)} />
          <window.TweakToggle label="Commander" value={tweaks.showCommander} onChange={(v) => setTweak("showCommander", v)} />
          <window.TweakToggle label="Projects" value={tweaks.showProjects} onChange={(v) => setTweak("showProjects", v)} />
          <window.TweakToggle label="Writing" value={tweaks.showWriting} onChange={(v) => setTweak("showWriting", v)} />
          <window.TweakToggle label="X / Building in Public" value={tweaks.showXFeed} onChange={(v) => setTweak("showXFeed", v)} />
          <window.TweakToggle label="Credentials" value={tweaks.showCredentials} onChange={(v) => setTweak("showCredentials", v)} />
          <window.TweakToggle label="Consulting CTA" value={tweaks.showConsulting} onChange={(v) => setTweak("showConsulting", v)} />
          <window.TweakToggle label="Contact + Cal.com" value={tweaks.showContact} onChange={(v) => setTweak("showContact", v)} />
          <window.TweakToggle label="ASCII Profile CTA" value={tweaks.showAsciiCTA} onChange={(v) => setTweak("showAsciiCTA", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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