---
import { Logos } from "starlight-theme-nova/components/Logos";
import type { Props } from "@astrojs/starlight/props";

const { siteTitle, locale } = Astro.props; // Starlight props

const sections = [
    { label: "Civil DX", value: "/civil-dx/" },
    { label: "기반기술", value: "/기반기술/" },
    { label: "설계", value: "/설계/" },
    { label: "시공", value: "/시공/" },
];

const currentPath = decodeURIComponent(Astro.url.pathname);
let currentSection = "";

// Determine current section
for (const section of sections) {
    if (currentPath.includes(section.value)) {
        currentSection = section.value;
        break;
    }
}
---

<div class="site-title-wrapper">
    <!-- Logo/Title -->
    <a
        href="/"
        class="site-title"
        aria-label={siteTitle ? siteTitle.textContent : "CivilEngineeringLab"}
    >
        <span class="logo-mark" data-testid="cel-mobile-mark">CEL</span>
        {
            siteTitle &&
                siteTitle.logoVisibleOnMobile !== false &&
                siteTitle.logo && (
                    <img
                        class="logo"
                        src={siteTitle.logo.src}
                        alt={siteTitle.logo.alt || "Logo"}
                        width="32"
                        height="32"
                    />
                )
        }
        <span class="title-text" data-testid="cel-full-title"
            >{siteTitle ? siteTitle.textContent : "CivilEngineeringLab"}</span
        >
    </a>

    <!-- Divider -->
    <span class="divider">|</span>

    <!-- Select Box -->
    <select class="section-select" onchange="window.location.href=this.value">
        <option value="" disabled selected={!currentSection}>섹션 선택</option>
        {
            sections.map((section) => (
                <option
                    value={section.value}
                    selected={section.value === currentSection}
                >
                    {section.label}
                </option>
            ))
        }
    </select>
</div>

<style>
    .site-title-wrapper {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .title-text {
        font-weight: bold;
        font-size: 1.2rem;
        color: var(--sl-color-text-accent);
        text-decoration: none;
    }
    .site-title {
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.25rem;
    }

    .logo-mark {
        display: none;
        font-weight: 800;
        letter-spacing: 0.12em;
        color: var(--sl-color-text);
        font-size: 1.1rem;
    }

    .divider {
        color: var(--sl-color-gray-4);
    }

    .section-select {
        background-color: var(--sl-color-bg-nav);
        color: var(--sl-color-white);
        border: 1px solid var(--sl-color-gray-5);
        border-radius: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .section-select:hover {
        border-color: var(--sl-color-gray-3);
    }

    /* Mobile handling */
    @media (max-width: 64rem) {
        .site-title-wrapper {
            gap: 0.5rem;
        }
        .logo {
            display: none;
        }
        .logo-mark {
            display: inline-flex;
        }
        .title-text {
            font-size: 1rem;
            display: none !important;
        }
        .section-select {
            max-width: 110px;
            padding: 0.25rem 0.4rem;
        }
        .divider {
            display: none;
        }
        :global(.nova-header-actions-lg .nova-theme-select) {
            display: none !important;
        }
    }

    @media (min-width: 64rem) {
        .logo-mark {
            display: none;
        }
        .title-text {
            display: inline;
        }
    }
</style>

<script type="module" src="/scripts/fuzzy-search-client.js"></script>