<?php
session_start();
require_once 'includes/functions.php';
require_once 'includes/i18n.php';
require_once 'includes/icons.php';
require_once 'affiliate_lib.php';

// Track affiliate referral click (zet 90d cookie)
if (!empty($_GET['ref'])) {
    trackAffiliateClick(trim($_GET['ref']));
}

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email    = trim($_POST['email'] ?? '');
    $password = trim($_POST['password'] ?? '');

    // Search across legacy users.json AND every tenant's users.json
    $found = findUserByEmail($email);
    if ($found) {
        $user     = $found['user'];
        $tenantId = $found['tenant_id']; // null for legacy users

        // Support both hashed and plaintext passwords (legacy compat)
        $valid = str_starts_with($user['password'], '$2y$') || str_starts_with($user['password'], '$2a$')
            ? password_verify($password, $user['password'])
            : $user['password'] === $password;

        if ($valid) {
            // For tenant users: check if tenant is active
            if ($tenantId) {
                $tenant = getTenant($tenantId);
                if (!$tenant) {
                    $error = t('login.error.not_found');
                } elseif (($tenant['status'] ?? 'active') === 'suspended') {
                    $error = t('login.error.suspended');
                } else {
                    $_SESSION['user_id']   = $user['id'];
                    $_SESSION['tenant_id'] = $tenantId;
                    recordUserLogin($user['id'], $tenantId);
                    header('Location: dashboard.php');
                    exit;
                }
            } else {
                // Legacy user — no tenant
                $_SESSION['user_id'] = $user['id'];
                unset($_SESSION['tenant_id']);
                recordUserLogin($user['id'], null);
                header('Location: dashboard.php');
                exit;
            }
        } else {
            $error = t('login.error.invalid');
        }
    } else {
        $error = t('login.error.invalid');
    }
}

/**
 * Schrijf last_login timestamp op user-record bij succesvolle inlog.
 * Tenant-aware: schrijft naar de juiste users.json (legacy root of
 * tenant-specifiek pad).
 *
 * Wordt aangeroepen ná de password check, voordat we redirecten.
 * Failures hier mogen de login niet blokkeren — daarom @-suppress.
 */
function recordUserLogin(string $userId, ?string $tenantId): void {
    $usersPath = $tenantId
        ? DROPDESK_TENANTS_DIR . '/' . $tenantId . '/users.json'
        : DROPDESK_DATA_ROOT . '/users.json';
    if (!file_exists($usersPath)) return;

    $users = @json_decode(@file_get_contents($usersPath), true);
    if (!is_array($users)) return;

    $now = date('Y-m-d\TH:i:s');
    $changed = false;
    foreach ($users as &$u) {
        if (($u['id'] ?? null) === $userId) {
            $u['last_login'] = $now;
            $changed = true;
            break;
        }
    }
    unset($u);
    if ($changed) {
        @file_put_contents(
            $usersPath,
            json_encode($users, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)
        );
    }
}
if (isset($_SESSION['user_id'])) { header('Location: dashboard.php'); exit; }
?>
<!DOCTYPE html>
<html lang="<?= getCurrentLang() ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DropDesk — <?= t('login.title') ?></title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="theme-color" content="#f1f1f1">
<!-- Bewust geen webfont — system fonts + Georgia/Times serif voor headings.
     Voelt authentieker en is sneller dan elke Google Font load. -->
<style>
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#f1f1f1;
    --surface:#ffffff;
    --surface2:#fafbfb;
    --border:#d4d4d4;
    --border-soft:#ebebeb;
    --text:#202223;
    --muted:#6d7175;
    --accent:#e8654a;
    --accent-text:#b94a31;
    --green:#1d9e75;
    --blue:#3a6dc7;
    --yellow:#b6800f;
    --red:#c93a3a;
    --radius:12px;
    --shadow-card:0 1px 0 rgba(0,0,0,.05);
    --shadow-pop:0 18px 50px rgba(0,0,0,.12);
  }
  html,body{min-height:100%}
  body{
    background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-size:13px;
  }
  a{color:inherit;text-decoration:none}
  button,input{font-family:inherit}
  .nav-ico{width:16px;height:16px;vertical-align:-3px;flex-shrink:0}

  /* Subtle Shopify/Polaris background */
  .blob{position:fixed;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.38;z-index:0}
  .blob.b1{top:-18%;right:-12%;width:560px;height:560px;background:radial-gradient(circle, rgba(232,101,74,.16) 0%, transparent 70%);animation:float1 22s ease-in-out infinite}
  .blob.b2{bottom:-20%;left:-15%;width:520px;height:520px;background:radial-gradient(circle, rgba(32,34,35,.06) 0%, transparent 70%);animation:float2 26s ease-in-out infinite}
  .blob.b3{display:none}
  @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,38px)}}
  @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(42px,-26px)}}
  @keyframes float3{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,30px)}}

  .layout{
    position:relative;z-index:1;min-height:100vh;
    display:grid;grid-template-columns:minmax(520px, 0.95fr) minmax(480px, 1.05fr);
    gap:0;
  }
  .form-side{order:1}.brand-side{order:2}

  /* Brand panel */
  .brand-side{
    padding:44px 56px;display:flex;flex-direction:column;justify-content:space-between;
    background:linear-gradient(135deg, rgba(255,255,255,.82) 0%, rgba(250,251,251,.92) 100%);
    border-left:1px solid var(--border);animation:fadeInRight .55s ease both;
  }
  @keyframes fadeInRight{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
  @keyframes fadeInLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}

  .brand-header .logo,
  .mobile-logo .logo{
    display:inline-flex;align-items:center;
  }
  .brand-header .logo img,
  .mobile-logo .logo img{
    height:96px;width:auto;display:block;
  }

  .brand-hero{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:560px;padding:42px 0}
  .brand-tagline{
    display:inline-flex;width:fit-content;align-items:center;gap:8px;
    font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--accent-text);
    padding:0;margin-bottom:16px;
  }
  .brand-tagline::before{
    content:"";width:20px;height:1px;background:currentColor;opacity:.5;
  }
  .brand-hero h1{
    font-family:inherit;
    font-weight:700;font-size:38px;line-height:1.15;letter-spacing:-.02em;
    margin-bottom:20px;color:var(--text);
  }
  .brand-hero h1 .grad{color:var(--accent-text);font-weight:700}
  .brand-hero p{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:28px;max-width:465px}

  /* Metric cards — product-proof i.p.v. abstracte feature-icons. Drie cards
     met echte mini bar charts; donker-op-licht thema. Bewust niet de "AI
     style" pastel tegels: deze voelen als product screenshots. */
  .metrics{display:flex;flex-direction:column;gap:14px;margin-top:6px}
  .metric{
    display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:center;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:18px 20px;box-shadow:0 1px 0 rgba(0,0,0,.02), 0 4px 14px rgba(31,34,48,.04);
    transition:transform .2s, box-shadow .2s;
  }
  .metric:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(0,0,0,.02), 0 8px 22px rgba(31,34,48,.06)}
  .metric-chart{position:relative;height:96px}
  .metric-chart svg{width:100%;height:100%;display:block;overflow:visible}
  .metric-chart .bar{fill:#e6e7e9;transition:fill .15s}
  .metric-chart .bar.accent{fill:var(--accent)}
  .metric-chart .bar.muted{fill:#cfd1d4}
  .metric-chart .axis{stroke:#e6e7e9;stroke-width:1}
  .metric-chart .label{
    font-family:inherit;
    font-size:10px;fill:var(--muted);
  }
  .metric-chart .peak{
    fill:#202223;font-family:inherit;
    font-size:10.5px;font-weight:600;
  }
  .metric-chart .peak-bg{fill:#fff;stroke:var(--border);stroke-width:1}
  .metric-meta .metric-label{
    font-family:inherit;
    font-size:11px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);margin-bottom:6px;
  }
  .metric-meta .metric-value{
    font-family:inherit;
    font-size:28px;font-weight:700;letter-spacing:-.02em;
    color:var(--text);line-height:1.1;margin-bottom:6px;
  }
  .metric-meta .metric-value .unit{font-size:15px;color:var(--muted);font-weight:500;margin-left:3px}
  .metric-meta .metric-value .delta{
    display:inline-block;margin-left:8px;font-size:12px;
    color:var(--green);background:rgba(29,158,117,.1);
    padding:3px 8px;border-radius:5px;font-weight:600;
    vertical-align:4px;
  }
  .metric-meta .metric-value .delta.down{color:var(--accent-text);background:rgba(232,101,74,.1)}
  .metric-meta .metric-desc{font-size:12.5px;color:var(--muted);line-height:1.5}

  .brand-footer{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:14px;flex-wrap:wrap}.brand-footer a:hover{color:var(--text)}.brand-footer .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.45}

  /* Login panel */
  .form-side{display:flex;align-items:center;justify-content:center;padding:34px 28px;background:rgba(241,241,241,.72);animation:fadeInLeft .55s ease both}
  .form-wrap{width:100%;max-width:438px}.mobile-logo{display:none;margin-bottom:24px;text-align:center}
  .form-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:38px 38px;box-shadow:var(--shadow-pop)}
  .form-card h2{font-family:inherit;font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:8px;color:var(--text)}
  .form-card .sub{font-size:13.5px;color:var(--muted);margin-bottom:28px;line-height:1.55}
  .field{margin-bottom:17px;position:relative}.field label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
  .field-with-icon{position:relative}.field-with-icon .input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex;align-items:center;justify-content:center;width:18px;height:18px;transition:color .15s}.field-with-icon .input-icon .nav-ico{width:16px;height:16px}.field-with-icon:focus-within .input-icon{color:var(--accent-text)}
  .field-with-icon input,.field .field-with-icon input{padding-left:44px!important}
  .field input{width:100%;background:#fff;border:1px solid #babfc3;border-radius:8px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:15px;outline:none;transition:border-color .15s, box-shadow .15s;box-shadow:0 1px 0 rgba(0,0,0,.03)}
  .field input:focus{border-color:#8c9196;box-shadow:0 0 0 1px #8c9196}.field input::placeholder{color:#9ca3af}
  .forgot-row{display:flex;justify-content:flex-end;align-items:center;margin:-5px 0 20px;font-size:12.5px}.forgot-row a{color:var(--muted);transition:color .15s;font-weight:500}.forgot-row a:hover{color:var(--accent-text)}
  .btn-primary{width:100%;background:#202223;color:#fff;border:1px solid #202223;border-radius:8px;padding:13px 15px;font-weight:650;font-size:14px;cursor:pointer;transition:background .12s,border-color .12s,transform .12s;box-shadow:0 1px 0 rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;gap:8px}.btn-primary:hover{background:#303030;border-color:#303030;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary .nav-ico{width:15px;height:15px;transform:rotate(180deg)}
  .error{background:#ffeae6;border:1px solid rgba(232,101,74,.28);border-radius:9px;padding:11px 13px;font-size:13px;color:var(--accent-text);margin-bottom:18px;display:flex;align-items:center;gap:9px;line-height:1.4}.error::before{content:'⚠';font-size:14px;line-height:1}
  .signup-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--border-soft);text-align:center;font-size:13px;color:var(--muted)}.signup-cta a{color:var(--accent-text);font-weight:650;transition:opacity .15s}.signup-cta a:hover{opacity:.82;text-decoration:underline}
  .lang-switch{display:flex;justify-content:center;gap:6px;margin-top:18px}.lang-switch a{font-size:11px;padding:5px 11px;border-radius:999px;font-weight:600;transition:all .15s;border:1px solid transparent}.lang-switch a.active{background:#202223;color:#fff;border-color:#202223}.lang-switch a:not(.active){color:var(--muted);background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-card)}.lang-switch a:not(.active):hover{border-color:#8c9196;color:var(--text)}

  @media (max-width:1200px){.layout{grid-template-columns:minmax(460px,.95fr) minmax(440px,1.05fr)}.brand-side{padding:40px 42px}.brand-hero h1{font-size:38px}}
  @media (max-width:980px){.layout{grid-template-columns:1fr}.brand-side{display:flex!important;order:2;padding:30px 24px;border-left:0;border-top:1px solid var(--border)}.form-side{order:1;padding:28px 20px}.brand-side .brand-header{display:none}.brand-hero{padding:0;max-width:100%}.brand-hero h1{font-size:30px}.brand-hero p{font-size:14px}.mobile-logo{display:block}}
  @media (max-width:560px){.form-card{padding:30px 22px;border-radius:12px}.form-card h2{font-size:25px}.form-card .sub{font-size:13px;margin-bottom:24px}.field input{font-size:16px;padding:12px 14px}.field-with-icon input,.field .field-with-icon input{padding-left:42px!important}.field-with-icon .input-icon{left:13px}.btn-primary{padding:13px;font-size:14px}.blob{display:none}.mobile-logo .logo img{height:84px}.brand-side{padding:24px 18px}.brand-hero h1{font-size:30px}.brand-hero p{font-size:13px;margin-bottom:22px}.brand-tagline{font-size:10px;margin-bottom:14px}.metric{grid-template-columns:1fr;gap:14px;padding:16px}.metric-chart{height:80px}.metric-meta .metric-value{font-size:22px}}
  @media (max-width:360px){.form-side{padding:18px 12px}.form-card{padding:24px 18px}.form-card h2{font-size:22px}}
  @media (max-width:980px) and (max-height:520px) and (orientation:landscape){.form-side{padding:12px 16px;align-items:flex-start}.mobile-logo{display:none}.form-card{padding:22px 24px}.form-card h2{font-size:20px;margin-bottom:4px}.form-card .sub{margin-bottom:18px}.field{margin-bottom:12px}}
</style>
</head>
<body>

<!-- Animated background -->
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>

<div class="layout">

  <!-- LEFT: brand showcase -->
  <div class="brand-side">
    <div class="brand-header">
      <div class="logo">
        <img src="/logo_dark.png" alt="DropDesk">
      </div>
    </div>

    <div class="brand-hero">
      <span class="brand-tagline"><?= t('login.brand.tag') ?></span>
      <h1><?= t('login.brand.headline_1') ?> <span class="grad"><?= t('login.brand.headline_2') ?></span></h1>
      <p><?= t('login.brand.lead') ?></p>

      <div class="metrics">

        <!-- Metric 1: Response time — bars worden korter over tijd (positief = sneller) -->
        <div class="metric">
          <div class="metric-chart">
            <svg viewBox="0 0 220 96" preserveAspectRatio="none" aria-hidden="true">
              <!-- Baseline -->
              <line class="axis" x1="0" y1="80" x2="220" y2="80"/>
              <!-- Bars: respons-tijd daalt van hoog (links) naar laag (rechts) -->
              <rect class="bar muted"  x="6"   y="14" width="18" height="66" rx="2"/>
              <rect class="bar muted"  x="32"  y="22" width="18" height="58" rx="2"/>
              <rect class="bar muted"  x="58"  y="32" width="18" height="48" rx="2"/>
              <rect class="bar muted"  x="84"  y="38" width="18" height="42" rx="2"/>
              <rect class="bar muted"  x="110" y="46" width="18" height="34" rx="2"/>
              <rect class="bar muted"  x="136" y="54" width="18" height="26" rx="2"/>
              <rect class="bar muted"  x="162" y="60" width="18" height="20" rx="2"/>
              <rect class="bar accent" x="188" y="65" width="18" height="15" rx="2"/>
              <!-- Callout boven de accent bar -->
              <g transform="translate(178, 52)">
                <rect class="peak-bg" x="0" y="0" width="38" height="14" rx="3"/>
                <text class="peak" x="19" y="10" text-anchor="middle">12 min</text>
              </g>
            </svg>
          </div>
          <div class="metric-meta">
            <div class="metric-label"><?= t('login.brand.metric.response.label') ?></div>
            <div class="metric-value">12<span class="unit">min</span><span class="delta down">−73%</span></div>
            <div class="metric-desc"><?= t('login.brand.metric.response.desc') ?></div>
          </div>
        </div>

        <!-- Metric 2: First-reply resolution — bars stijgen over tijd -->
        <div class="metric">
          <div class="metric-chart">
            <svg viewBox="0 0 220 96" preserveAspectRatio="none" aria-hidden="true">
              <line class="axis" x1="0" y1="80" x2="220" y2="80"/>
              <rect class="bar muted"  x="6"   y="56" width="18" height="24" rx="2"/>
              <rect class="bar muted"  x="32"  y="50" width="18" height="30" rx="2"/>
              <rect class="bar muted"  x="58"  y="44" width="18" height="36" rx="2"/>
              <rect class="bar muted"  x="84"  y="38" width="18" height="42" rx="2"/>
              <rect class="bar muted"  x="110" y="30" width="18" height="50" rx="2"/>
              <rect class="bar muted"  x="136" y="24" width="18" height="56" rx="2"/>
              <rect class="bar muted"  x="162" y="18" width="18" height="62" rx="2"/>
              <rect class="bar accent" x="188" y="12" width="18" height="68" rx="2"/>
              <g transform="translate(180, -1)">
                <rect class="peak-bg" x="0" y="0" width="34" height="14" rx="3"/>
                <text class="peak" x="17" y="10" text-anchor="middle">68%</text>
              </g>
            </svg>
          </div>
          <div class="metric-meta">
            <div class="metric-label"><?= t('login.brand.metric.firstreply.label') ?></div>
            <div class="metric-value">68<span class="unit">%</span><span class="delta">+42%</span></div>
            <div class="metric-desc"><?= t('login.brand.metric.firstreply.desc') ?></div>
          </div>
        </div>

        <!-- Metric 3: ROAS — bars stijgen, voor de ads kant van het product -->
        <div class="metric">
          <div class="metric-chart">
            <svg viewBox="0 0 220 96" preserveAspectRatio="none" aria-hidden="true">
              <line class="axis" x1="0" y1="80" x2="220" y2="80"/>
              <rect class="bar muted"  x="6"   y="52" width="18" height="28" rx="2"/>
              <rect class="bar muted"  x="32"  y="48" width="18" height="32" rx="2"/>
              <rect class="bar muted"  x="58"  y="40" width="18" height="40" rx="2"/>
              <rect class="bar muted"  x="84"  y="34" width="18" height="46" rx="2"/>
              <rect class="bar muted"  x="110" y="28" width="18" height="52" rx="2"/>
              <rect class="bar muted"  x="136" y="22" width="18" height="58" rx="2"/>
              <rect class="bar muted"  x="162" y="16" width="18" height="64" rx="2"/>
              <rect class="bar accent" x="188" y="10" width="18" height="70" rx="2"/>
              <g transform="translate(180, -3)">
                <rect class="peak-bg" x="0" y="0" width="34" height="14" rx="3"/>
                <text class="peak" x="17" y="10" text-anchor="middle">4.2x</text>
              </g>
            </svg>
          </div>
          <div class="metric-meta">
            <div class="metric-label"><?= t('login.brand.metric.roas.label') ?></div>
            <div class="metric-value">4.2<span class="unit">x</span><span class="delta">+1.6x</span></div>
            <div class="metric-desc"><?= t('login.brand.metric.roas.desc') ?></div>
          </div>
        </div>

        <!-- Metric 4: CSAT — bars rond constant niveau, lichte stijging -->
        <div class="metric">
          <div class="metric-chart">
            <svg viewBox="0 0 220 96" preserveAspectRatio="none" aria-hidden="true">
              <line class="axis" x1="0" y1="80" x2="220" y2="80"/>
              <rect class="bar muted"  x="6"   y="34" width="18" height="46" rx="2"/>
              <rect class="bar muted"  x="32"  y="30" width="18" height="50" rx="2"/>
              <rect class="bar muted"  x="58"  y="32" width="18" height="48" rx="2"/>
              <rect class="bar muted"  x="84"  y="26" width="18" height="54" rx="2"/>
              <rect class="bar muted"  x="110" y="24" width="18" height="56" rx="2"/>
              <rect class="bar muted"  x="136" y="20" width="18" height="60" rx="2"/>
              <rect class="bar muted"  x="162" y="18" width="18" height="62" rx="2"/>
              <rect class="bar accent" x="188" y="14" width="18" height="66" rx="2"/>
              <g transform="translate(178, 1)">
                <rect class="peak-bg" x="0" y="0" width="38" height="14" rx="3"/>
                <text class="peak" x="19" y="10" text-anchor="middle">4.8/5</text>
              </g>
            </svg>
          </div>
          <div class="metric-meta">
            <div class="metric-label"><?= t('login.brand.metric.csat.label') ?></div>
            <div class="metric-value">4.8<span class="unit">/5</span><span class="delta">+0.6</span></div>
            <div class="metric-desc"><?= t('login.brand.metric.csat.desc') ?></div>
          </div>
        </div>

      </div>
    </div>

    <div class="brand-footer">
      <span>© <?= date('Y') ?> DropDesk</span>
      <span class="dot"></span>
      <a href="privacy.php?lang=<?= getCurrentLang() ?>"><?= t('login.brand.privacy') ?></a>
      <span class="dot"></span>
      <a href="terms.php?lang=<?= getCurrentLang() ?>"><?= t('login.brand.terms') ?></a>
    </div>
  </div>

  <!-- RIGHT: form -->
  <div class="form-side">
    <div class="form-wrap">

      <div class="mobile-logo">
        <div class="logo">
          <img src="/logo_dark.png" alt="DropDesk">
        </div>
      </div>

      <div class="form-card">
        <h2><?= t('login.title') ?></h2>
        <p class="sub"><?= t('login.subtitle') ?></p>

        <?php if ($error): ?>
          <div class="error"><?= htmlspecialchars($error) ?></div>
        <?php endif; ?>

        <form method="POST" autocomplete="on">
          <div class="field">
            <label><?= t('login.email') ?></label>
            <div class="field-with-icon">
              <input type="email" name="email" placeholder="<?= t('login.email_placeholder') ?>"
                     required autocomplete="email" id="emailInput">
              <span class="input-icon"><?= nav_icon('users') ?></span>
            </div>
          </div>

          <div class="field">
            <label><?= t('login.password') ?></label>
            <div class="field-with-icon">
              <input type="password" name="password" placeholder="••••••••"
                     required autocomplete="current-password">
              <span class="input-icon"><?= nav_icon('shield') ?></span>
            </div>
          </div>

          <div class="forgot-row">
            <a href="forgot_password.php"><?= t('login.forgot_password') ?></a>
          </div>

          <button type="submit" class="btn-primary">
            <?= t('login.submit') ?>
            <?= nav_icon('arrow-left') /* CSS-rotated to point right */ ?>
          </button>
        </form>

        <div class="signup-cta">
          <?= t('login.no_account') ?> <a href="signup.php"><?= t('login.signup_link') ?> →</a>
        </div>
      </div>

      <div class="lang-switch">
        <?php $curLang = getCurrentLang(); foreach (getSupportedLanguages() as $code => $label): ?>
          <a href="?lang=<?= $code ?>" class="<?= $curLang === $code ? 'active' : '' ?>">
            <?= $code === 'nl' ? '🇳🇱' : '🇬🇧' ?> <?= strtoupper($code) ?>
          </a>
        <?php endforeach; ?>
      </div>

    </div>
  </div>

</div>

<script>
  // Autofocus the email field on desktop only — on mobile this would pop up
  // the keyboard immediately and cover the brand panel, which is jarring.
  if (window.matchMedia('(min-width: 768px)').matches) {
    document.getElementById('emailInput')?.focus();
  }
</script>
</body>
</html>