<?php
declare(strict_types=1);

function qrator_base_path(): string {
    $script = str_replace('\\', '/', $_SERVER['SCRIPT_NAME'] ?? '');
    $dir = rtrim(dirname($script), '/');
    return ($dir === '' || $dir === '.') ? '' : $dir;
}
function qrator_url(string $path = ''): string {
    return qrator_base_path() . '/' . ltrim($path, '/');
}
function qrator_admin_url(): string {
    return qrator_url('admin/login.php');
}
function qrator_e(string $value): string {
    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
}
function qrator_front_header(string $title, string $description): void {
    $fullTitle = $title . ' | QRator';
    $canonical = qrator_url(basename($_SERVER['SCRIPT_NAME'] ?? 'index.php'));
?>
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= qrator_e($fullTitle) ?></title>
<meta name="description" content="<?= qrator_e($description) ?>">
<link rel="canonical" href="<?= qrator_e($canonical) ?>">
<link rel="stylesheet" href="<?= qrator_e(qrator_url('public/assets/frontend.css')) ?>">
</head>
<body class="front-body">
<div class="qrator-preloader" data-preloader aria-hidden="true">
  <div class="preloader-card">
    <img src="<?= qrator_e(qrator_url('public/assets/qrator-mark.png')) ?>" alt="" aria-hidden="true">
    <div class="preloader-qr" aria-hidden="true"><span></span><span></span><span></span><strong>QR</strong></div>
    <p>QRator lädt...</p>
  </div>
</div>
<div class="front-mobile-overlay" data-front-menu-overlay></div>
<header class="front-header">
  <a class="front-brand" href="<?= qrator_e(qrator_url('index.php')) ?>" aria-label="QRator Startseite">
    <img src="<?= qrator_e(qrator_url('public/assets/qrator-mark.png')) ?>" alt="QRator Logo">
    <span><strong>QRator</strong><small>QR-Code Manager</small></span>
  </a>
  <nav class="front-nav" id="front-nav" aria-label="Hauptnavigation">
    <a href="<?= qrator_e(qrator_url('qr-codes.php')) ?>">QR-Codes</a>
    <a href="<?= qrator_e(qrator_url('dynamische-qr-codes.php')) ?>">Dynamische QR-Codes</a>
    <a href="<?= qrator_e(qrator_url('vorteile.php')) ?>">Vorteile</a>
    <a href="<?= qrator_e(qrator_url('qr-code-generator.php')) ?>">Generator</a>
    <a href="<?= qrator_e(qrator_url('faq.php')) ?>">FAQ</a>
  </nav>
  <div class="front-header-actions">
    <a class="front-login" href="<?= qrator_e(qrator_admin_url()) ?>">Login</a>
    <button class="front-menu-toggle" type="button" data-front-menu-toggle aria-controls="front-nav" aria-expanded="false" aria-label="Menü öffnen"><span></span><span></span><span></span></button>
  </div>
</header>
<main>
<?php }
function qrator_front_footer(): void { ?>
</main>
<footer class="front-footer">
  <div class="footer-brand-block">
    <img src="<?= qrator_e(qrator_url('public/assets/qrator-mark.png')) ?>" alt="QRator Logo">
    <div><strong>QRator</strong><p>Dynamische QR-Codes auf dem eigenen Webserver verwalten.</p></div>
  </div>
  <div class="front-footer-grid">
    <div><h3>Produkt</h3><a href="<?= qrator_e(qrator_url('qr-codes.php')) ?>">QR-Codes</a><a href="<?= qrator_e(qrator_url('dynamische-qr-codes.php')) ?>">Dynamische QR-Codes</a><a href="<?= qrator_e(qrator_url('qr-code-generator.php')) ?>">Generator</a><a href="<?= qrator_e(qrator_url('vorteile.php')) ?>">Vorteile</a></div>
    <div><h3>Hilfe</h3><a href="<?= qrator_e(qrator_url('faq.php')) ?>">FAQ</a><a href="<?= qrator_e(qrator_admin_url()) ?>">Login</a><a href="<?= qrator_e(qrator_url('install.php')) ?>">Installation</a></div>
    <div><h3>Rechtliches</h3><a href="<?= qrator_e(qrator_url('impressum.php')) ?>">Impressum</a><a href="<?= qrator_e(qrator_url('datenschutz.php')) ?>">Datenschutz</a></div>
    <div><h3>Kontakt</h3><p>web2use.ch<br>Rebmattstrasse 183<br>5275 Etzgen<br>Schweiz</p><a href="mailto:info@web2use.ch">info@web2use.ch</a><a href="https://web2use.ch" target="_blank" rel="noopener">web2use.ch</a></div>
  </div>
</footer>
<script>
(function(){
  const body=document.body;
  const toggle=document.querySelector('[data-front-menu-toggle]');
  const nav=document.getElementById('front-nav');
  const overlay=document.querySelector('[data-front-menu-overlay]');
  const closeFrontMenu=()=>{body.classList.remove('front-menu-open'); if(toggle) toggle.setAttribute('aria-expanded','false');};
  if(toggle && nav){
    toggle.addEventListener('click',()=>{const open=!body.classList.contains('front-menu-open');body.classList.toggle('front-menu-open',open);toggle.setAttribute('aria-expanded',open?'true':'false');});
    nav.querySelectorAll('a').forEach(a=>a.addEventListener('click',closeFrontMenu));
  }
  if(overlay) overlay.addEventListener('click',closeFrontMenu);
  const preloader=document.querySelector('[data-preloader]');
  const showLoader=()=>{ if(preloader){ preloader.classList.add('is-active'); preloader.setAttribute('aria-hidden','false'); } };
  const hideLoader=()=>{ if(preloader){ preloader.classList.remove('is-active'); preloader.setAttribute('aria-hidden','true'); } };
  window.addEventListener('pageshow',hideLoader);
  document.querySelectorAll('form').forEach(form=>form.addEventListener('submit',()=>showLoader()));
  document.addEventListener('click',(event)=>{const link=event.target.closest('a'); if(!link) return; const href=link.getAttribute('href')||''; if(!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:') || link.target==='_blank' || link.hasAttribute('download')) return; showLoader();});
})();
</script>
</body>
</html>
<?php }
