import React from "react";
import * as Iso from "@eno/iso";

const Comp = React.lazy(()=>import("./deep/component.tsx"));

export default ()=>
{
    const [countGet, countSet] = React.useState(1);
    return <div class="p-4 font-sans">
        <Iso.Meta.Metas title="Main Page!"/>
        <header class="max-w-4xl mx-auto">
            <nav class="p-4 flex gap-8 border-b font-black text-sm">
                <a class="" href="/">Home</a>
                <a href="/about">About</a>
                <a href="/details">Details</a>
            </nav>
        </header>

        <main class="max-w-4xl mx-auto p-4">
        <Iso.Switch>
            <Iso.Case value="/">
                <>
                    <Iso.Meta.Metas title="Home Page" />
                    <h1>iso: isomorphic typescript is simpler than ever.</h1>
                    <div>
                        <button></button>
                    </div>
                </>
            </Iso.Case>
            <Iso.Case value="about">
                <>
                    <h1>About</h1>
                    <p>Iso puts the Deno runtime and ES modules to work behind the scenes to turn your next single-page React+TypeScript application into an SEO capable website <em>with full hydration</em>.</p>
                    <p>The best part? It&apos;s all so simple you won't even even know it&apos;s there.</p>
                    <p>Say goodbye to stylesheets and CSS-in-JS bloat. Tailwind classes are available out of the gate so you can hit the ground running, and Iso will keep up the pace with state-preserving hot module reloading. </p>
                    <p>Batteries-included URL routing, page meta, and data fetching APIs are designed from the ground up to be as simple as possible.</p>
                    <p>Get fully featured in seconds.</p>
                </>
            </Iso.Case>
            <Iso.Case value="details">
                <>
                    <h1>Details</h1>
                    <p>
                        Iso uses Preact/Compat and Twind in lieu of React and Tailwind so you can keep the API's you know, serve less kilobytes, and gain new ways to simplify your layout code.
                    </p>
                    <p>While you can always:</p>
                    <pre>
                        {`<div className="font-serif font-bold font-italic"></div>`}
                    </pre>
                    <p>Now you can just:</p>
                    <pre>
                        {`<div class="font(serif bold italic)"></div>`}
                    </pre>
                    <p>
                        Iso is a Deno project! If you're coming from a Node background be sure to:
                    </p>
                    <ol>
                        <li>Get the latest Deno runtime and extension for your IDE</li>
                        <li>Use file extensions in import statements</li>
                        <li>Add new modules to the deno.jsonc config</li>
                    </ol>
                </>
            </Iso.Case>
            <Iso.Case value="lol/idk">lol/idk</Iso.Case>
            <Iso.Case default><p>404!</p></Iso.Case>
        </Iso.Switch>
        </main>

        <footer>
            footer
        </footer>

    </div>;
};