import { h, mount } from "@getforma/core";

type DemoProps = { count: number; rawHtmlHref: string };

function NoJavaScriptDemo(props: DemoProps) {
  return (
    <div class="native-shell">
      <a class="native-skip" href="#native-main">
        Skip to content
      </a>
      <header class="native-header">
        <a class="native-brand" href="/" aria-label="Forma home">
          forma<span>.</span>
        </a>
        <nav aria-label="Main navigation">
          <a href="/docs/3.0/overview/">Docs</a>
          <a href="/learn/">Learn</a>
          <a href="/play/">Playground</a>
          <a href="/labs/">Labs</a>
          <a href="/examples/">Examples</a>
          <a href="/benchmarks/">Evidence</a>
          <a href="/blog/">Blog</a>
        </nav>
      </header>
      <main class="native-main" id="native-main">
        <p class="native-eyebrow">THE NATIVE LAB / ZERO JAVASCRIPT</p>
        <h1>
          A complete page.
          <br />
          No browser runtime.
        </h1>
        <p class="native-lede">
          Rust renders declared request props through the same native pipeline.
          There are no islands here, so the build sends no JavaScript.
        </p>
        <div class="native-proof">
          <span>REQUEST-TIME HTML</span>
          <span>ZERO EXECUTABLE SCRIPTS</span>
          <span>NATIVE FORM NAVIGATION</span>
        </div>
        <div class="native-grid" id="native-result" tabindex="-1">
          <section class="native-counter" aria-labelledby="server-value-title">
            <p class="native-eyebrow" id="server-value-title">
              THIS REQUEST'S SERVER VALUE
            </p>
            <p class="native-value">
              <span id="native-count">{props.count}</span>
            </p>
            <p class="native-note">
              Submit the form to change this number. Rust returns a new page at
              this result, with no JavaScript required.
            </p>
          </section>
          <section class="native-panel" aria-labelledby="native-request-title">
            <h2 id="native-request-title">Ask Rust for a new page.</h2>
            <p>
              The number travels in the URL, and Rust puts it in the HTML.
              Refreshing uses that URL again; nothing is saved to a database.
            </p>
            <form method="get" action="/lab/native/no-js/#native-result">
              <label for="native-seed">Initial count · 0–9,999</label>
              <input
                id="native-seed"
                name="count"
                type="number"
                min="0"
                max="9999"
                step="1"
                required
                value={props.count}
              />
              <button type="submit">Render from Rust</button>
            </form>
          </section>
        </div>
        <section class="native-explainer">
          <h2>Choose interaction deliberately.</h2>
          <p>
            Both demos render real request data in Rust. Example 05 adds instant
            browser interaction; this example uses ordinary form navigation. It
            is dynamic server rendering, even without JavaScript in the browser.
          </p>
          <div class="native-source-links">
            <a href="/lab/native/inspect/">Actual FMIR and build diagnostics</a>
            <a href="/lab/native/source/no-js.tsx">Actual TypeScript source</a>
            <a href="/lab/native/source/server.rs">Actual Rust handler</a>
            <a href={props.rawHtmlHref}>Raw HTML · server value</a>
          </div>
          <p class="native-note">
            The raw HTML view renders a new response with the same request
            count. It is not a capture of this response.
          </p>
          <a class="native-text-link" href="/lab/native/">
            Compare the island route →
          </a>
        </section>
        <footer class="native-footer">
          <a href="/docs/3.0/overview/">Read the Forma documentation →</a>
          <span>Published Forma 3.0.0 · native rendering.</span>
        </footer>
      </main>
    </div>
  );
}

mount(
  () =>
    NoJavaScriptDemo({
      count: 0,
      rawHtmlHref: "/lab/native/no-js/html/?count=0",
    }),
  "#app",
);