import Link from 'next/link';
import { AssessmentLink } from './AssessmentLink';
import { BrandLogo } from './Logo';

export function SiteHeader() {
  return (
    <header className="site-header">
      <div className="container header-inner">
        <Link href="/" className="brand" aria-label="EntreJourneyMap home">
          <BrandLogo preload />
        </Link>
        <nav className="site-nav" aria-label="Main">
          <Link href="/archetypes" className="nav-link">
            The 8 archetypes
          </Link>
          <Link href="/#vip" className="nav-link">
            VIP Ticket
          </Link>
          <AssessmentLink
            label="Take the assessment"
            shortLabel="Start free"
            className="btn btn-primary btn-sm nowrap"
          />
        </nav>
      </div>
    </header>
  );
}