// components/nav.el — Top navigation bar.
//
// Responsive: desktop shows full link bar, ≤1060px collapses to hamburger.
// Hamburger toggles .nav-mobile panel. Closes on link click or outside click.

extern fn el_nav(attrs: String, children: String) -> String
extern fn el_div(attrs: String, children: String) -> String
extern fn el_a(href: String, attrs: String, children: String) -> String
extern fn el_img(src: String, alt: String, attrs: String) -> String
extern fn el_button(attrs: String, label: String) -> String
extern fn el_span(attrs: String, children: String) -> String
extern fn el_script_src(src: String, defer_load: Bool) -> String

fn nav() -> String {
    let logo_img: String = el_img(
        "/assets/brand/neuron-wordmark-on-light.png",
        "Neuron",
        "srcset=\"/assets/brand/neuron-wordmark-on-light@2x.png 2x\" height=\"28\""
    )
    let logo: String = el_a("/", "class=\"nav-logo\" aria-label=\"Neuron home\"", logo_img)

    let dropdown_menu: String = el_div(
        "class=\"nav-dropdown-menu\"",
        el_a("/#mission", "class=\"nav-dropdown-item\"", "Our mission") +
        el_a("/#safety", "class=\"nav-dropdown-item\"", "Safety") +
        el_a("/#environmental", "class=\"nav-dropdown-item\"", "Environment")
    )
    let dropdown: String = el_div(
        "class=\"nav-dropdown\"",
        el_button("class=\"nav-link nav-dropdown-btn\" aria-haspopup=\"true\" aria-expanded=\"false\"", "Mission ▾") +
        dropdown_menu
    )

    let nav_links: String = el_div(
        "class=\"nav-links\"",
        el_a("/#how-it-works", "class=\"nav-link\"", "How it works") +
        el_a("/#enterprise", "class=\"nav-link\"", "Enterprise") +
        dropdown +
        el_a("/#marketplace", "class=\"nav-link\"", "Marketplace") +
        el_a("/#pricing", "class=\"nav-link\"", "Pricing") +
        el_a("/about", "class=\"nav-link\"", "About") +
        el_a("/said", "class=\"nav-link\"", "Gallery") +
        el_a("/account", "class=\"nav-link\"", "Account") +
        el_a("/#pricing", "class=\"nav-cta\"", "Get Access")
    )

    let hamburger_spans: String =
        el_span("", "") +
        el_span("", "") +
        el_span("", "")
    let hamburger: String = el_button(
        "class=\"nav-hamburger\" id=\"nav-hamburger\" aria-label=\"Open navigation\" aria-expanded=\"false\" aria-controls=\"nav-mobile\"",
        hamburger_spans
    )

    let nav_mobile: String = el_div(
        "class=\"nav-mobile\" id=\"nav-mobile\" role=\"navigation\" aria-label=\"Mobile navigation\"",
        el_a("/#how-it-works", "class=\"nav-mobile-link\"", "How it works") +
        el_a("/#enterprise", "class=\"nav-mobile-link\"", "Enterprise") +
        el_a("/#mission", "class=\"nav-mobile-link\"", "Mission") +
        el_a("/#safety", "class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:0.8rem;color:var(--t3)\"", "- Safety") +
        el_a("/#environmental", "class=\"nav-mobile-link\" style=\"padding-left:1.75rem;font-size:0.8rem;color:var(--t3)\"", "- Environment") +
        el_a("/#marketplace", "class=\"nav-mobile-link\"", "Marketplace") +
        el_a("/#pricing", "class=\"nav-mobile-link\"", "Pricing") +
        el_a("/about", "class=\"nav-mobile-link\"", "About") +
        el_a("/said", "class=\"nav-mobile-link\"", "Gallery") +
        el_a("/account", "class=\"nav-mobile-link\"", "Account") +
        el_a("/#pricing", "class=\"nav-mobile-cta\"", "Get Access")
    )

    let nav_inner: String = el_div("class=\"nav-inner\"", logo + nav_links + hamburger + nav_mobile)

    el_nav("id=\"nav\"", nav_inner + el_script_src("/js/nav.js", true))
}