// The chrome around every server-rendered public page.
//
// The bundler's SSR entry is hardcoded to import { PublicLayout } from this exact
// path and to call it with { currentPath, children } — it is a contract, not a
// convention. The client takeover (public.tsx) wraps the same body in the same
// layout with the same currentPath, which is what makes the server markup and the
// post-takeover markup identical. If they diverged, the page would visibly rebuild
// itself the moment the bundle landed.
//
// Deliberately plain. This renders inside goja against a DOM shim at BUILD time,
// where there is no layout, no getBoundingClientRect and no window — so nothing in
// here may measure the page. That rules out the kit's floating components (Menu,
// Tooltip, Popover), which is why the Layers menu is a row of links here and a real
// menu everywhere else.

import { JSXElement } from "solid-js";

export function PublicLayout(props: { currentPath: string; children?: JSXElement }) {
    return (
        <div class="min-h-screen bg-surface">
            <nav class="border-b border-line">
                <div class="mx-auto flex max-w-2xl items-center gap-2 px-4 py-4">
                    <a href="/" class="flex items-center gap-2.5 no-underline">
                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-default bg-fill-neutral text-on-fill-neutral">
                            {/* The boat is the point of the name: kjol is Norwegian for KEEL. Inlined
                                rather than pulled from the icon kit, because the kit's <Icon> reads a
                                CSS custom property at runtime to pick its style — and under SSR there
                                is no computed style to read. */}
                            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M11.25 3.75v12M11.25 15.75H4.5l6.75-12M14.25 15.75h4.5l-4.5-7.5zM2.25 18.75h19.5l-2.4 3H4.65z" />
                            </svg>
                        </span>
                        <span class="flex items-baseline gap-1.5">
                            <span class="text-lg font-semibold tracking-tight text-ink">Kjøl JS Web</span>
                            <span class="text-sm text-ink-faint">Solid + Go toolchain</span>
                        </span>
                    </a>

                    <ul class="ml-auto flex items-center gap-1">
                        <li>
                            <a
                                href="/js"
                                class={
                                    props.currentPath === "/js"
                                        ? "rounded-default bg-surface-raised px-3 py-1.5 text-sm font-medium text-ink no-underline"
                                        : "rounded-default px-3 py-1.5 text-sm font-medium text-ink-soft no-underline hover:bg-surface-raised hover:text-ink"
                                }
                            >
                                Docs
                            </a>
                        </li>
                        <li>
                            <a
                                href="/wasm"
                                class="rounded-default px-3 py-1.5 text-sm font-medium text-ink-soft no-underline hover:bg-surface-raised hover:text-ink"
                            >
                                Wasm Web
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <main>{props.children}</main>

            <footer class="mx-auto max-w-2xl px-4 pb-14">
                <p class="text-sm text-ink-faint">
                    Kjøl JS Web is one layer of kjol — a shared base layer. kjol is Norwegian for keel.
                </p>
            </footer>
        </div>
    );
}