---
import Base from "../layouts/Base.astro";
import Root from "../components/AppLayout.jsx";
import LyricSearch from '../components/LyricSearch.jsx';

const hostHeader = Astro.request?.headers?.get('host') || '';
const host = hostHeader.split(':')[0];
import { getSubsiteByHost } from '../utils/subsites.js';
import { getSubsiteByPath } from '../utils/subsites.js';
const detected = getSubsiteByHost(host) ?? getSubsiteByPath(Astro.url.pathname) ?? null;
const isReq = detected?.short === 'req' || getSubsiteByPath(Astro.url.pathname)?.short === 'req';

import { WHITELABELS } from "../config";
const whitelabel = WHITELABELS[host] ?? (detected ? WHITELABELS[detected.host] : null);
---

<Base title="Lyric Search">
  {whitelabel ? (
    <section class="page-section">
      <Root child="ReqForm" client:only="react" />
    </section>
  ) : (
    <section class="page-section">
      <Root child="LyricSearch" client:only="react" />
    </section>
  )}
</Base>
