import { Logo } from '@assist/svg';
import { useLayoutEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { colord } from 'colord';

export const Header = () => {
	const [contrastBg, setContrastBg] = useState();
	const [focusColor, setFocusColor] = useState();

	useLayoutEffect(() => {
		const documentStyles = window.getComputedStyle(document.body);
		const bannerMain = documentStyles.getPropertyValue('--ext-banner-main');
		const b = colord(bannerMain || '#000000');
		const contrast = b.isDark() ? b.lighten(0.1) : b.darken(0.1);
		setContrastBg(contrast.toHex());
		const focus = b.isDark() ? b.lighten(0.3) : b.darken(0.3);
		setFocusColor(focus.toHex());
	}, []);

	return (
		<header className="flex w-full border-b border-gray-400 bg-banner-main">
			<div className="mx-auto mt-auto flex w-full max-w-[996px] flex-col px-4">
				<div className="my-6 flex flex-wrap items-center justify-between gap-x-4 gap-y-6">
					{window.extSharedData?.partnerLogo && (
						<div className="flex h-10 max-w-52 overflow-hidden md:max-w-72">
							<img
								className="max-h-full max-w-full object-contain"
								src={window.extSharedData.partnerLogo}
								alt={window.extSharedData.partnerName}
							/>
						</div>
					)}
					{!window.extSharedData?.partnerLogo && (
						<Logo className="logo max-h-9 w-32 text-banner-text sm:w-40" />
					)}
					<div
						id="assist-menu-bar"
						className={classNames(
							'flex-wrap items-center gap-4 lg:flex lg:w-auto',
						)}
					>
						<a
							style={{
								borderColor: contrastBg,
								'--tw-ring-color': focusColor,
								'--ext-override': focusColor,
							}}
							className="block cursor-pointer rounded-xs border border-gray-500 bg-white px-4 py-2 text-center text-sm text-gray-900 no-underline transition-colors duration-200 hover:bg-gray-100 focus:outline-hidden focus:ring focus:ring-gray-900 focus:ring-offset-1 lg:inline-block lg:rounded-xs"
							href={window.extSharedData.homeUrl}
							target="_blank"
						>
							{__('View site', 'extendify-local')}
						</a>
					</div>
				</div>
			</div>
		</header>
	);
};
{"translation-revision-date":"2023-10-17 14:47:46+0000","generator":"WP-CLI\/2.12.0","source":"src\/PageCreator\/api\/WPApi.js","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"ru","plural-forms":"nplurals=3; plural=(n % 10 == 1 && n % 100 != 11) ? 0 : ((n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 12 || n % 100 > 14)) ? 1 : 2);"},"Added by Launch":["\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c Launch"]}}}{"translation-revision-date":"2024-11-06T07:10:59+00:00","generator":"WP-CLI\/2.12.0","source":"src\/AutoLaunch\/functions\/wp.js","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"es_CO","plural-forms":"nplurals=2; plural=n != 1;"},"Blog Post %s":["Entrada de blog %s"]}}}<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//www.alignedsecurityforce.com.au/wp-content/plugins/wordpress-seo/css/main-sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://www.alignedsecurityforce.com.au/post-sitemap.xml</loc>
		<lastmod>2026-09-09T23:25:52+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://www.alignedsecurityforce.com.au/page-sitemap.xml</loc>
		<lastmod>2026-09-05T03:45:58+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://www.alignedsecurityforce.com.au/category-sitemap.xml</loc>
		<lastmod>2026-09-09T23:25:52+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://www.alignedsecurityforce.com.au/post_tag-sitemap.xml</loc>
		<lastmod>2026-09-01T05:14:39+00:00</lastmod>
	</sitemap>
</sitemapindex>
<!-- XML Sitemap generated by Yoast SEO -->