---
/**
 * SubsiteBase.astro - Lightweight base layout for subsites
 * 
 * This layout excludes heavy CSS/JS from the main site to reduce payload.
 * It does NOT import AppLayout or its dependencies.
 */
interface Props {
  title?: string;
  description?: string;
  image?: string;
  hideFooter?: boolean;
}

import { ClientRouter } from "astro:transitions";
import BaseHead from "../components/BaseHead.astro";
import { metaData } from "../config";
import Footer from "../components/Footer.astro";

// Minimal font imports for subsites
import "@fontsource/ibm-plex-sans/500.css";
import "@fontsource/geist-sans/400.css";
import "@styles/global.css";

const { title, description, image, hideFooter = false } = Astro.props;
const hostHeader = Astro.request?.headers?.get('host') || '';
const host = hostHeader.split(':')[0];

import { getSubsiteByHost, getSubsiteFromSignal, getSubsiteByPath } from '../utils/subsites.js';
import { WHITELABELS } from "../config";

const detectedSubsite = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
const isReq = detectedSubsite?.short === 'req';

// Accept forced whitelabel via query param, headers or request locals
const forcedParam = Astro.url.searchParams.get('whitelabel') || Astro.request?.headers?.get('x-whitelabel') || (Astro.request as any)?.locals?.whitelabel || null;

let whitelabel: any = null;
if (forcedParam) {
  const forced = getSubsiteFromSignal(forcedParam);
  if (forced) whitelabel = WHITELABELS[forced.host] ?? null;
}

if (!whitelabel) {
  whitelabel = WHITELABELS[host] ?? (isReq ? WHITELABELS[detectedSubsite.host] : null);
}
---

<html lang="en" class="scrollbar-hide" data-subsite="true">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark light" />
    
    <style is:inline>
      html { visibility: hidden; }
      html.ready { visibility: visible; }
      html { background: #fff; }
      html.dark { background: #121212; }
    </style>
    <script src="/scripts/theme-init.js" is:inline></script>
    <ClientRouter />
    <BaseHead title={whitelabel?.siteTitle ?? title} description={description} image={image ?? metaData.ogImage} isWhitelabel={!!whitelabel} whitelabel={whitelabel} subsite={detectedSubsite} />
  </head>
  <body
    class="antialiased flex flex-col items-center mx-auto min-h-screen scrollbar-hide"
    style={`--brand-color: ${whitelabel?.brandColor ?? '#111827'}`}>
    
    <!-- Lightweight nav for subsites -->
    <div class="w-full sticky top-0 z-50">
      <script src="/scripts/nav-controls.js" defer></script>
      <nav class="w-full px-4 sm:px-6 py-3 backdrop-blur-xl bg-white/75 dark:bg-[#0a0a0a]/75 border-b border-neutral-200/40 dark:border-neutral-800/40 shadow-sm">
        <div class="max-w-7xl mx-auto">
          <div class="flex items-center justify-between">
            <a href="/" class="text-xl font-bold tracking-tight bg-gradient-to-r from-neutral-900 to-neutral-600 dark:from-white dark:to-neutral-400 bg-clip-text text-transparent hover:opacity-80 transition-opacity">
              {whitelabel?.logoText ?? detectedSubsite?.short?.toUpperCase() ?? 'Subsite'}
            </a>
            <button
              aria-label="Toggle theme"
              type="button"
              class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
              onclick="toggleTheme()"
            >
              <svg class="h-4 w-4 text-neutral-700 dark:text-neutral-300" viewBox="0 0 512 512" fill="currentColor">
                <path d="M448 256c0-106-86-192-192-192v384c106 0 192-86 192-192M0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0"/>
              </svg>
            </button>
          </div>
        </div>
      </nav>
    </div>
    
    <main class="flex-auto min-w-0 mt-6 md:mt-8 flex flex-col px-4 sm:px-6 md:px-0 max-w-3xl w-full pb-8">
      <noscript>
        <div style="background: #f44336; color: white; padding: 1em; text-align: center;">
          This site requires JavaScript to function. Please enable JavaScript in your browser.
        </div>
      </noscript>
      <slot />
      {!hideFooter && <Footer />}
    </main>
    
    <style is:global>
      .scrollbar-hide::-webkit-scrollbar { display: none; }
      .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
  </body>
</html>
