/* crabcc landing — app root (hero + composition) */
const { useState: useStateA, useEffect: useEffectA } = React;
const DSA = window.CrabccDesignSystem_325a37;

function Hero({ dark }) {
  const { Button, ShaderBackground } = DSA;
  return (
    <section className="hero" id="top">
      <div className="hero__shader">
        <ShaderBackground theme={dark ? "dark" : "light"} intensity={0.28} />
      </div>
      <div className="wrap hero__inner">
        <div>
          <span className="hero__pill">
            <span style={{ color: "var(--accent)" }}>●</span>
            <b>v0.4</b> · Rust + SQLite + Tantivy · 🦀 private beta
          </span>
          <h1>
            grep is the wrong<br />
            default for an <span className="accent">agent</span>.
          </h1>
          <p className="hero__lede">
            <b style={{ color: "var(--text-body)", fontWeight: 600 }}>crabcc</b> is a symbol index for AI coding agents — a tiny
            Rust CLI &amp; MCP server that answers <code>where is this defined?</code> and
            <code> who calls this?</code> in milliseconds, in typed JSON, for a fraction of the tokens.
          </p>
          <InstallLine cmd="cargo install crabcc" />
          <div className="hero__cta">
            <Button as="a" href="https://github.com/crabcc-labs/crabcc" variant="primary" iconLeft={<GitHubIcon />}>star on github</Button>
            <Button as="a" href="#primitives" variant="ghost">see the primitives →</Button>
          </div>
          <AIBar />
          <div className="hero__stats">
            <div className="stat">
              <div className="stat__num">4412<span className="unit">×</span></div>
              <div className="stat__label">faster than grep -rn</div>
            </div>
            <div className="stat">
              <div className="stat__num">85<span className="unit">%</span></div>
              <div className="stat__label">fewer bytes to the model</div>
            </div>
            <div className="stat">
              <div className="stat__num">~250<span className="unit">ms</span></div>
              <div className="stat__label">no-op re-index</div>
            </div>
          </div>
        </div>
        <div className="reveal" style={{ minWidth: 0 }}>
          <TypedTerminal />
        </div>
      </div>
    </section>
  );
}

function App() {
  const [dark, setDark] = useStateA(() => {
    const saved = localStorage.getItem("crabcc-theme");
    return saved ? saved === "dark" : true;
  });

  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
    localStorage.setItem("crabcc-theme", dark ? "dark" : "light");
  }, [dark]);

  window.useReveal();

  return (
    <React.Fragment>
      <Header dark={dark} onToggle={() => setDark((d) => !d)} />
      <main>
        <Hero dark={dark} />
        <CallGraphSection />
        <Playground />
        <Primitives />
        <Benchmark />
        <Savings />
        <TokenCalculator />
        <HowItWorks />
        <Agents />
        <Trust />
        <FutureTasks />
        <CtaBand dark={dark} />
      </main>
      <Footer dark={dark} />
    </React.Fragment>
  );
}

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