<?php
/**
 * Slate — customer-facing shell header.
 *
 * Renders one of two layouts depending on $customerPageVariant:
 *
 *   'auth' (default for auth pages)
 *     — full-width light canvas, centered card, brand mark + product
 *       name at top. Used by login/register/verify/forgot/reset.
 *
 *   'dashboard'
 *     — topbar with brand + signed-in user + Sign out. Main content
 *       area centered to --content-max. Used by /customer/index.php
 *       and any plugin that adds customer-side pages.
 *
 * Pages set $customerPageVariant before requiring this partial,
 * then must require partials/footer.php at the bottom.
 */

if (!defined('SLATE_ROOT')) exit;

$customerPageVariant = $customerPageVariant ?? 'auth';
$pageTitle           = $pageTitle           ?? 'Account';
$siteName            = Database::setting('site_name') ?: 'Slate';
$brandSublabel       = Database::setting('brand_sublabel') ?: __('customer_portal', 'Customer Portal');
?>
<!DOCTYPE html>
<html lang="<?= e(I18n::currentLocale()) ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#FAFAFA">
    <title><?= e($pageTitle) ?> — <?= e($siteName) ?></title>
    <meta name="csrf" content="<?= e(csrf_token()) ?>">
    <?php slate_ui_emit_css(); ?>
    <?php require SLATE_ROOT . '/includes/a11y_head.php'; ?>
    <style>
    body { background: var(--bg); min-height: 100vh; min-height: 100dvh; }

    /* ── Auth-page shell (centered card) ──────────────────── */
    .auth-shell {
        min-height: 100vh; min-height: 100dvh;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        padding: var(--space-5) var(--space-4);
        gap: var(--space-5);
    }
    .auth-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--text);
    }
    .auth-brand:hover { color: var(--text); text-decoration: none; }
    .auth-brand-mark {
        width: 36px; height: 36px;
        border-radius: var(--radius);
        background: var(--accent);
        color: var(--on-accent);
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.04em;
        box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    }
    .auth-brand-text { line-height: 1.2; }
    .auth-brand-name {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }
    .auth-brand-sub {
        font-size: 11px;
        color: var(--subtle);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 1px;
    }
    .auth-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 28px 28px 24px;
        width: 100%;
        max-width: 400px;
        box-shadow: 0 1px 2px rgba(15,17,23,0.04);
    }
    .auth-card h1 {
        font-family: var(--font-display);
        font-size: 22px;
        margin: 0 0 6px;
    }
    .auth-card .auth-card-sub {
        font-size: 13px;
        color: var(--muted);
        margin: 0 0 var(--space-5);
    }
    .auth-footer {
        font-size: 13px;
        color: var(--muted);
        text-align: center;
    }
    .auth-footer a { color: var(--accent); }
    .auth-footer a:hover { color: var(--accent-deep); text-decoration: underline; }

    /* ── Dashboard shell ──────────────────────────────────── */
    .cust-topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        height: var(--topbar-height);
        background: rgba(245, 244, 241, 0.82);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 20px;
    }
    .cust-topbar .auth-brand-name { font-size: 15px; }
    .cust-topbar .auth-brand-sub  { display: none; }
    .cust-topbar .auth-brand-mark { width: 28px; height: 28px; font-size: 14px; }
    .cust-topbar-spacer { flex: 1; }
    .cust-topbar-user {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--text-2);
    }
    .cust-topbar-user .topbar-avatar { width: 28px; height: 28px; }
    .cust-topbar-user a { color: var(--muted); }
    .cust-topbar-user a:hover { color: var(--text); text-decoration: underline; }

    main.cust-content {
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
        padding: 24px 20px 56px;
    }

    @media (max-width: 480px) {
        .cust-topbar-user-name { display: none; }
        .cust-topbar { padding: 0 14px; }
        main.cust-content { padding: 16px 14px 40px; }
        .auth-card { padding: 22px 20px 20px; }
    }
    </style>
</head>
<body>
    <a class="skip-link" href="#cust-content"><?= __('skip_to_content', 'Skip to main content') ?></a>

<?php if ($customerPageVariant === 'dashboard'):
    $cust = Auth::customer();
?>
    <header class="cust-topbar">
        <a href="<?= e(SLATE_URL) ?>/customer/" class="auth-brand">
            <span class="auth-brand-mark" aria-hidden="true"><?= e(mb_strtoupper(mb_substr($siteName, 0, 1))) ?></span>
            <span class="auth-brand-text">
                <span class="auth-brand-name"><?= e($siteName) ?></span>
                <span class="auth-brand-sub"><?= e($brandSublabel) ?></span>
            </span>
        </a>
        <div class="cust-topbar-spacer"></div>
        <?php if ($cust): ?>
            <div class="cust-topbar-user">
                <span class="topbar-avatar" aria-hidden="true">
                    <?= e(mb_strtoupper(mb_substr($cust['name'] ?? $cust['email'] ?? 'A', 0, 1))) ?>
                </span>
                <span class="cust-topbar-user-name"><?= e($cust['name'] ?? $cust['email']) ?></span>
                <a href="<?= e(SLATE_URL) ?>/customer/logout.php?csrf=<?= e(csrf_token()) ?>"><?= __('sign_out', 'Sign out') ?></a>
            </div>
        <?php endif; ?>
    </header>
    <main class="cust-content" id="cust-content">

<?php else: /* 'auth' variant */ ?>

    <div class="auth-shell" id="cust-content">
        <a href="<?= e(SLATE_URL) ?>/" class="auth-brand">
            <span class="auth-brand-mark" aria-hidden="true"><?= e(mb_strtoupper(mb_substr($siteName, 0, 1))) ?></span>
            <span class="auth-brand-text">
                <span class="auth-brand-name"><?= e($siteName) ?></span>
                <span class="auth-brand-sub"><?= e($brandSublabel) ?></span>
            </span>
        </a>

<?php endif; ?>
