{# Find URL segment of current page to highlight current page on header links #}
{% set firstUrlSegment = craft.app.request.getSegment(1) %}

{# Set default text color #}
{% set textColor = "#262626" %}

{# Set background colour of header for each page #}
{% switch firstUrlSegment %}

	{% case "" %}
		{% set bgColor = "#f3f4f6" %}
	{% case "the-builds" %}
		{% set bgColor = "#f9f7f3" %}
	{% case "why-mopanui" %}
		{% set bgColor = "#f9f7f3" %}
	{% case "case-studies" %}
		{% set bgColor = "#f9f7f3" %}
	{% case "contact-us" %}
		{% set bgColor = "#f3f4f6" %}
	{% case "privacy-policy" %}
		{% set bgColor = "#f9f7f3" %}
	{% case "terms-and-conditions" %}
		{% set bgColor = "#f9f7f3" %}
	{% default %}
		{% set bgColor = "#f3f4f6" %}

{% endswitch %}

{# Get logos #}
{% set logo = craft.assets()
	.volume('icons')
	.title('Logo')
	.one()
%}

{# Set colours and icons for 404 page #}
{% if entry is not defined %}
	{% set bgColor = "#262626" %}
	{% set textColor = "#fff" %}

	{% set logo = craft.assets()
		.volume('icons')
		.title('Logo White')
		.one()
	%}
{% endif %}

<header class="inner-container flex items-center gap-8 justify-between py-11 relative z-40 xl:gap-10" style="background-color: {{ bgColor }}; color: {{ textColor }}">
	<a href="{{ url("/") }}">
		<span class="sr-only">Go to home page</span>
		<img src="{{ logo.getUrl() }}" alt="{{ logo.altText }}"/>
	</a>

	{% set menuIcon = craft.assets()
		.volume('icons')
		.title('Bars Solid')
		.one()
	%}

	<!-- Mobile Nav Menu Button -->
	<button type="button" data-collapse-toggle="header-nav" aria-controls="header-nav" aria-expanded="false">
		<span class="sr-only">Open main menu</span>
		{{ svg(menuIcon)|attr({ class:"h-9 w-9 fill-black hover:fill-spicy-mix lg:hidden #{textColor == '#fff' ? 'fill-white'} transition-all" }) }}
	</button>

	<nav id="header-nav" class="hidden absolute drop-shadow-lg flex-shrink-0 left-0 top-full py-11 w-screen z-50 md:left-auto md:right-0 md:w-1/2 lg:block lg:drop-shadow-none lg:py-0 lg:relative lg:w-auto" style="background-color: {{ bgColor }}">
		<ul class="flex flex-col gap-8 items-center lg:flex-row xl:gap-14">
			<li class="hover:text-spicy-mix transition-all {{ firstUrlSegment == 'the-builds' ? 'text-spicy-mix' }}">
				<a href="{{ url('the-builds') }}" class="font-acumin text-lg">The Builds</a>
			</li>
			<li class="hover:text-spicy-mix transition-all {{ firstUrlSegment == 'why-mopanui' ? 'text-spicy-mix' }}">
				<a href="{{ url('why-mopanui') }}" class="font-acumin text-lg">Why Mopanui</a>
			</li>
			<li class="hover:text-spicy-mix transition-all {{ firstUrlSegment == 'case-studies' ? 'text-spicy-mix' }}">
				<a href="{{ url('case-studies') }}" class="font-acumin text-lg">Our Projects</a>
			</li>
			<li class="hover:text-spicy-mix transition-all {{ firstUrlSegment == 'contact-us' ? 'text-spicy-mix' }}">
				<a href="{{ url('contact-us') }}" class="font-acumin text-lg">Contact Us</a>
			</li>
		</ul>
	</nav>
</header>