<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veld Botanicals | Business Hub</title>
    <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=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --black:     #1C1C1C;
            --black2:    #2A2A2A;
            --grey-dk:   #555555;
            --grey-md:   #888888;
            --grey-lt:   #BBBBBB;
            --grey-bg:   #F2F2F2;
            --grey-line: #E0E0E0;
            --white:     #FFFFFF;
            --off-white: #F8F8F8;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Montserrat', sans-serif;
            background: var(--off-white);
            color: var(--black);
            min-height: 100vh;
        }

        /* =====================================================
           LOGIN SCREEN
           ===================================================== */
        #login-screen {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--black);
            padding: 24px;
        }

        .login-card {
            background: var(--white);
            width: 100%;
            max-width: 420px;
            padding: 52px 44px 48px;
        }

        /* Brand block */
        .login-brand {
            text-align: center;
            margin-bottom: 36px;
        }

        .login-brand-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 48px;
            color: var(--black);
            letter-spacing: 0.06em;
            line-height: 1;
            display: block;
        }

        .login-brand-sub {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }

        .login-brand-sub-line {
            flex: 1;
            height: 1px;
            background: var(--grey-line);
            max-width: 48px;
        }

        .login-brand-sub-text {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--grey-md);
        }

        .login-divider {
            height: 1px;
            background: var(--grey-line);
            margin-bottom: 30px;
        }

        /* Form */
        .form-group {
            margin-bottom: 18px;
        }

        .form-group label {
            display: block;
            font-size: 10px;
            font-weight: 700;
            color: var(--grey-md);
            letter-spacing: 0.18em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .form-group input {
            width: 100%;
            padding: 13px 16px;
            border: 1.5px solid var(--grey-line);
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: var(--black);
            background: var(--off-white);
            outline: none;
            border-radius: 0;
            -webkit-appearance: none;
            transition: border-color 0.15s, background 0.15s;
        }

        .form-group input:focus {
            border-color: var(--black);
            background: var(--white);
        }

        .login-btn {
            width: 100%;
            margin-top: 6px;
            padding: 16px;
            background: var(--black);
            color: var(--white);
            border: none;
            font-family: 'Bebas Neue', sans-serif;
            font-size: 20px;
            letter-spacing: 0.14em;
            cursor: pointer;
            transition: background 0.15s;
        }

        .login-btn:hover  { background: var(--black2); }
        .login-btn:active { opacity: 0.9; }

        .login-error {
            border-left: 3px solid #DC2626;
            background: #FFF5F5;
            color: #B91C1C;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.02em;
            margin-bottom: 20px;
            display: none;
        }

        /* =====================================================
           HUB SCREEN
           ===================================================== */
        #hub-screen {
            display: none;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Topbar */
        .topbar {
            background: var(--black);
            height: 64px;
            padding: 0 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .topbar-brand {
            display: flex;
            align-items: baseline;
            gap: 12px;
        }

        .topbar-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 26px;
            color: var(--white);
            letter-spacing: 0.06em;
            line-height: 1;
        }

        .topbar-wellness {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .topbar-user {
            font-size: 12px;
            font-weight: 500;
            color: rgba(255,255,255,0.5);
        }

        .topbar-user strong {
            color: var(--white);
            font-weight: 700;
        }

        .role-chip {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 4px 10px;
            border: 1px solid rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.45);
        }

        .signout-btn {
            padding: 8px 18px;
            background: transparent;
            color: rgba(255,255,255,0.6);
            border: 1px solid rgba(255,255,255,0.2);
            font-family: 'Montserrat', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.15s;
        }

        .signout-btn:hover {
            background: rgba(255,255,255,0.1);
            color: var(--white);
        }

        /* Hero */
        .hub-hero {
            background: var(--black);
            padding: 56px 40px 60px;
            position: relative;
            overflow: hidden;
        }

        .hub-hero-watermark {
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Bebas Neue', sans-serif;
            font-size: 260px;
            color: rgba(255,255,255,0.04);
            line-height: 1;
            pointer-events: none;
            user-select: none;
            letter-spacing: 0.04em;
        }

        .hub-hero-inner {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
        }

        .hub-hero-eyebrow {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.3);
            margin-bottom: 12px;
        }

        .hub-hero h1 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 80px;
            color: var(--white);
            line-height: 0.92;
            letter-spacing: 0.02em;
        }

        .hub-hero h1 span {
            color: rgba(255,255,255,0.28);
        }

        .hub-hero p {
            font-size: 13px;
            font-weight: 500;
            color: rgba(255,255,255,0.4);
            margin-top: 18px;
            line-height: 1.7;
            max-width: 400px;
        }

        .hero-bar {
            width: 48px;
            height: 3px;
            background: var(--white);
            margin-top: 28px;
        }

        /* Content */
        .hub-content {
            flex: 1;
            padding: 48px 40px 72px;
            max-width: 1280px;
            width: 100%;
            margin: 0 auto;
        }

        .section-label {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--grey-md);
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 28px;
        }

        .section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--grey-line);
        }

        /* Pillars grid */
        .pillars-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border: 2px solid var(--black);
        }

        @media (max-width: 900px) {
            .pillars-grid    { grid-template-columns: 1fr; }
            .hub-hero h1     { font-size: 54px; }
            .topbar          { padding: 0 20px; }
            .hub-hero        { padding: 40px 20px 44px; }
            .hub-content     { padding: 36px 20px 56px; }
        }

        .resources-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .resources-grid .dash-item {
            padding: 16px 22px;
        }

        /* Pillar card */
        .pillar-card {
            background: var(--white);
            display: flex;
            flex-direction: column;
            border-right: 2px solid var(--black);
            transition: background 0.15s;
        }

        .pillar-card:last-child { border-right: none; }
        .pillar-card:hover      { background: var(--off-white); }
        .pillar-card.no-access  { opacity: 0.3; pointer-events: none; }

        .pillar-head {
            padding: 32px 32px 26px;
            border-bottom: 2px solid var(--black);
        }

        .pillar-eyebrow {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--grey-md);
            margin-bottom: 8px;
        }

        .pillar-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 60px;
            color: var(--black);
            line-height: 0.95;
            letter-spacing: 0.02em;
        }

        .pillar-desc {
            font-size: 12px;
            font-weight: 500;
            color: var(--grey-dk);
            line-height: 1.7;
            margin-top: 12px;
        }

        .pillar-body {
            padding: 24px 32px;
            flex: 1;
        }

        .dash-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .dash-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 13px 16px;
            background: var(--grey-bg);
            border: 1.5px solid var(--grey-line);
            text-decoration: none;
            color: var(--black);
            transition: all 0.15s;
        }

        .dash-item.is-live:hover {
            background: var(--black);
            color: var(--white);
            border-color: var(--black);
        }

        .dash-item.is-live:hover .dash-arrow { color: var(--white); }
        .dash-item.is-inactive { opacity: 0.5; cursor: default; }

        .dash-name {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .dash-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .badge {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 3px 9px;
            border: 1.5px solid;
            white-space: nowrap;
        }

        .badge-pending  { color: #92400E; border-color: #FCD34D; background: #FFFBEB; }
        .badge-soon     { color: #4C1D95; border-color: #C4B5FD; background: #F5F3FF; }
        .badge-live     { color: #065F46; border-color: #6EE7B7; background: #ECFDF5; }
        .badge-noaccess { color: var(--grey-md); border-color: var(--grey-line); background: var(--grey-bg); }

        .dash-arrow { color: var(--grey-lt); transition: color 0.15s; }

        .pillar-footer {
            padding: 0 32px 26px;
        }

        .more-text {
            font-size: 9px;
            font-weight: 700;
            color: var(--grey-lt);
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        /* Footer */
        .hub-footer {
            background: var(--black);
            padding: 18px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .hub-footer span {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 13px;
            color: rgba(255,255,255,0.22);
            letter-spacing: 0.12em;
        }
    </style>
</head>
<body>

<!-- ============================================================
     ✏️  EMPLOYEE CONFIG
     access values: "people"  |  "performance"  |  "production"
     ============================================================ -->
<script>
const EMPLOYEES = [
    { username: "zack",    password: "veld2026",  name: "Zack Murray",  role: "Admin",  access: ["people", "performance", "production"] },
    { username: "sarah",   password: "staff001",  name: "Sarah",        role: "Staff",  access: ["performance"] },
    { username: "james",   password: "staff002",  name: "James",        role: "Staff",  access: ["performance", "people"] },
    // { username: "newuser", password: "password", name: "Full Name", role: "Staff", access: ["performance"] },
];

// ============================================================
// ✏️  DASHBOARD LINKS
// status: "link_pending" | "coming_soon" | "active"
// ============================================================
const PILLARS = {
    people: {
        eyebrow:     "Talent & Culture",
        title:       "People",
        description: "Human resources, team performance, and people development across the organisation.",
        dashboards: [
            { name: "HR Performance Dashboard",  url: "https://people.soiloils.com/", status: "active" },
        ]
    },
    performance: {
        eyebrow:     "Sales & Incentives",
        title:       "Performance",
        description: "Sales performance, incentive tracking, and business targets.",
        dashboards: [
            { name: "SOiL Incentive Dashboard",  url: "https://performance.soiloils.com/", status: "active" },
            { name: "Global Pricelist",           url: "https://soiloils-pricing.pages.dev/", status: "active" },
        ]
    },
    production: {
        eyebrow:     "Operations & Output",
        title:       "Production",
        description: "Production metrics, inventory management, and operational tracking.",
        dashboards: [
            { name: "Production Dashboard",      url: "#", status: "coming_soon" },
        ]
    }
};
</script>


<!-- ====================================================
     LOGIN SCREEN
     ==================================================== -->
<div id="login-screen">
    <div class="login-card">

        <div class="login-brand">
            <span class="login-brand-name">Veld Botanicals</span>
            <div class="login-brand-sub">
                <div class="login-brand-sub-line"></div>
                <span class="login-brand-sub-text">Elements of Wellness</span>
                <div class="login-brand-sub-line"></div>
            </div>
        </div>

        <div class="login-divider"></div>

        <div id="login-error" class="login-error">
            Incorrect username or password. Please try again.
        </div>

        <div class="form-group">
            <label>Username</label>
            <input type="text" id="login-username" placeholder="your.username" autocomplete="username" />
        </div>

        <div class="form-group">
            <label>Password</label>
            <input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password" />
        </div>

        <button class="login-btn" onclick="handleLogin()">SIGN IN</button>

    </div>
</div>


<!-- ====================================================
     HUB SCREEN
     ==================================================== -->
<div id="hub-screen">

    <nav class="topbar">
        <div class="topbar-brand">
            <span class="topbar-name">Veld Botanicals</span>
            <span class="topbar-wellness">Elements of Wellness</span>
        </div>
        <div class="topbar-right">
            <span id="hub-role-chip" class="role-chip"></span>
            <span class="topbar-user">Welcome, <strong id="hub-user-name"></strong></span>
            <button class="signout-btn" onclick="handleSignOut()">Sign Out</button>
        </div>
    </nav>

    <section class="hub-hero">
        <div class="hub-hero-watermark">VB</div>
        <div class="hub-hero-inner">
            <div class="hub-hero-eyebrow">Veld Botanicals · Elements of Wellness</div>
            <h1><span>The</span><br>Three P's</h1>
            <p>Your central access point for People, Performance, and Production across Veld Botanicals.</p>
            <div class="hero-bar"></div>
        </div>
    </section>

    <main class="hub-content">
        <div class="section-label">Dashboards &amp; Insights</div>
        <div class="pillars-grid" id="pillars-grid"></div>

        <div class="section-label" style="margin-top:44px">Resources</div>
        <div class="resources-grid">
            <a href="/SOiL-Dashboard-Staff-Manual.docx" target="_blank" rel="noopener" class="dash-item is-live">
                <span class="dash-name">Staff Manual — Dashboard Guide</span>
                <div class="dash-right"><span class="badge badge-live">Download</span></div>
            </a>
        </div>
    </main>

    <footer class="hub-footer">
        <span>Veld Botanicals — Business Hub</span>
        <span>Internal Use Only</span>
    </footer>

</div>


<script>
let currentUser = null;

function handleLogin() {
    const username = document.getElementById('login-username').value.trim().toLowerCase();
    const password = document.getElementById('login-password').value;
    const errEl    = document.getElementById('login-error');

    const match = EMPLOYEES.find(e =>
        e.username.toLowerCase() === username && e.password === password
    );

    if (match) {
        errEl.style.display = 'none';
        currentUser = match;
        localStorage.setItem('veld_session', JSON.stringify(match));
        showHub(match);
    } else {
        errEl.style.display = 'block';
        document.getElementById('login-password').value = '';
    }
}

function handleSignOut() {
    localStorage.removeItem('veld_session');
    currentUser = null;
    document.getElementById('hub-screen').style.display   = 'none';
    document.getElementById('login-screen').style.display = 'flex';
    document.getElementById('login-username').value = '';
    document.getElementById('login-password').value = '';
}

document.addEventListener('keydown', e => {
    if (e.key === 'Enter' && document.getElementById('login-screen').style.display !== 'none') {
        handleLogin();
    }
});

function showHub(user) {
    document.getElementById('login-screen').style.display  = 'none';
    document.getElementById('hub-screen').style.display    = 'flex';
    document.getElementById('hub-user-name').textContent   = user.name;
    document.getElementById('hub-role-chip').textContent   = user.role;
    renderPillars(user);
}

function renderPillars(user) {
    const grid = document.getElementById('pillars-grid');
    grid.innerHTML = '';

    const arrowIcon = `<svg class="dash-arrow" width="13" height="13" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <line x1="7" y1="17" x2="17" y2="7"/>
        <polyline points="7 7 17 7 17 17"/>
    </svg>`;

    Object.entries(PILLARS).forEach(([key, pillar]) => {
        const hasAccess = user.access.includes(key);

        const items = pillar.dashboards.map(d => {
            if (!hasAccess) {
                return `<div class="dash-item is-inactive">
                    <span class="dash-name">${d.name}</span>
                    <div class="dash-right"><span class="badge badge-noaccess">No Access</span></div>
                </div>`;
            }
            if (d.status === 'active' && d.url && d.url !== '#') {
                return `<a href="${d.url}" target="_blank" rel="noopener" class="dash-item is-live">
                    <span class="dash-name">${d.name}</span>
                    <div class="dash-right"><span class="badge badge-live">Live</span>${arrowIcon}</div>
                </a>`;
            }
            const [bc, bt] = d.status === 'coming_soon'
                ? ['badge-soon', 'Coming Soon']
                : ['badge-pending', 'URL Pending'];
            return `<div class="dash-item is-inactive">
                <span class="dash-name">${d.name}</span>
                <div class="dash-right"><span class="badge ${bc}">${bt}</span></div>
            </div>`;
        }).join('');

        const card = document.createElement('div');
        card.className = `pillar-card pillar-${key}${hasAccess ? '' : ' no-access'}`;
        card.innerHTML = `
            <div class="pillar-head">
                <div class="pillar-eyebrow">${pillar.eyebrow}</div>
                <div class="pillar-title">${pillar.title}</div>
                <p class="pillar-desc">${pillar.description}</p>
            </div>
            <div class="pillar-body">
                <ul class="dash-list">${items}</ul>
            </div>
            <div class="pillar-footer">
                <span class="more-text">More dashboards added as they launch</span>
            </div>
        `;
        grid.appendChild(card);
    });
}

(function () {
    const saved = localStorage.getItem('veld_session');
    if (!saved) return;
    try {
        const u = JSON.parse(saved);
        const valid = EMPLOYEES.find(e => e.username === u.username && e.password === u.password);
        if (valid) { currentUser = valid; showHub(valid); }
        else localStorage.removeItem('veld_session');
    } catch (_) { localStorage.removeItem('veld_session'); }
})();
</script>

</body>
</html>