<?php
require_once __DIR__ . '/config.php';
$lang        = current_lang();
$page_title  = $page_title ?? '';
$page_active = $page_active ?? '';
$full_title  = $page_title ? ($page_title . ' · ' . SITE_NAME) : SITE_NAME;
$page_desc   = $page_desc ?? 'Klassieke Nederlandse scheepsontwerpen sinds 1974.';
?><!doctype html>
<html lang="<?= e($lang) ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= e($full_title) ?></title>
<meta name="description" content="<?= e($page_desc) ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= e(url('css/style.css')) ?>">
</head>
<body>

<div class="topbar">
  <span><?= e(t('home.tagline')) ?></span>
  <span class="lang">
    <a href="?lang=nl" class="<?= $lang === 'nl' ? 'active' : '' ?>">NL</a>·
    <a href="?lang=en" class="<?= $lang === 'en' ? 'active' : '' ?>">EN</a>
  </span>
</div>

<nav class="nav" id="mainNav">
  <a href="<?= e(url('index.php')) ?>" class="brand">
    <div class="brand-mark">M</div>
    <div>
      <div class="brand-name"><?= e(SITE_NAME) ?></div>
      <div class="brand-sub"><?= e(SITE_TAGLINE) ?></div>
    </div>
  </a>
  <button class="nav-toggle" onclick="document.getElementById('mainNav').classList.toggle('open')">Menu</button>
  <div class="nav-links">
    <a href="<?= e(url('over.php')) ?>" class="<?= $page_active === 'about' ? 'active' : '' ?>"><?= e(t('nav.about')) ?></a>
    <a href="<?= e(url('ontwerpen.php')) ?>" class="<?= $page_active === 'designs' ? 'active' : '' ?>"><?= e(t('nav.designs')) ?></a>
    <a href="<?= e(url('te-koop.php')) ?>" class="<?= $page_active === 'forsale' ? 'active' : '' ?>"><?= e(t('nav.forsale')) ?></a>
    <a href="<?= e(url('contact.php')) ?>" class="<?= $page_active === 'contact' ? 'active' : '' ?>"><?= e(t('nav.contact')) ?></a>
  </div>
</nav>
