<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title><?= e(APP_NAME) ?> · <?= e($title ?? 'Sign In') ?></title>
    <link rel="icon"           type="image/x-icon" href="<?= url('/public/static/img/favicon.ico') ?>">
    <link rel="icon" sizes="16x16" type="image/png" href="<?= url('/public/static/img/favicon-16.png') ?>">
    <link rel="icon" sizes="32x32" type="image/png" href="<?= url('/public/static/img/favicon-32.png') ?>">
    <link rel="apple-touch-icon"                    href="<?= url('/public/static/img/apple-touch-icon.png') ?>">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= url('/public/static/css/rsflow.css') ?>">
    <style>
        :root {
            --auth-bg-1:  #0b2545;
            --auth-bg-2:  #13315c;
            --auth-bg-3:  #1a4d8c;
            --auth-accent:#3da5d9;
            --auth-warn:  #f2a900;
        }
        html, body { height: 100%; }
        body {
            margin: 0;
            background:
              radial-gradient(1200px 600px at 10% -10%, rgba(61,165,217,.18), transparent 60%),
              radial-gradient(900px 500px at 110% 110%, rgba(242,169,0,.15), transparent 60%),
              linear-gradient(135deg, var(--auth-bg-1) 0%, var(--auth-bg-2) 55%, var(--auth-bg-3) 100%);
            font-family: 'Outfit', system-ui, sans-serif;
            color: #e6edf3;
        }
        .auth-wrap {
            min-height: 100vh; display: grid;
            grid-template-columns: 1fr 1fr; align-items: stretch;
        }
        @media (max-width: 991.98px) {
            .auth-wrap { grid-template-columns: 1fr; }
            .auth-brand-panel { display: none; }
        }

        .auth-brand-panel {
            padding: 56px 64px;
            display: flex; flex-direction: column; justify-content: space-between;
            position: relative; overflow: hidden;
        }
        .auth-brand-panel::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(700px 350px at 20% 30%, rgba(61,165,217,.10), transparent 70%);
            pointer-events: none;
        }
        .brand-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
        .brand-top .brand-mark {
            width: 56px; height: 56px; border-radius: 10px;
            /* transparent — the orchid PNG carries its own colour on the dark auth background */
            background: transparent;
            display: flex; align-items: center; justify-content: center;
            padding: 4px;
        }
        .brand-top .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
        .brand-top .brand-name  { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
        .brand-top .brand-sub   { font-size: 11px; color: #9fb3c8; letter-spacing: 2px; text-transform: uppercase; }
        .brand-tagline { position: relative; z-index: 1; }
        .brand-tagline h1 { font-size: 32px; font-weight: 800; line-height: 1.15; margin: 0 0 12px 0; color: #fff; }
        .brand-tagline p  { color: #9fb3c8; font-size: 15px; line-height: 1.55; max-width: 460px; margin: 0; }
        .brand-stats { display: flex; gap: 36px; margin-top: 28px; position: relative; z-index: 1; }
        .brand-stats .stat .v { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
        .brand-stats .stat .l { font-size: 10px; color: #9fb3c8; text-transform: uppercase; letter-spacing: 1.8px; margin-top: 2px; }

        .brand-illustration {
            position: relative; z-index: 1;
            margin: 24px 0;
            display: flex; justify-content: center; align-items: center;
        }
        .brand-illustration svg { width: 100%; max-width: 480px; height: auto; }
        @keyframes signalPulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
        .sig-wave-1 { animation: signalPulse 1.8s ease-in-out infinite; }
        .sig-wave-2 { animation: signalPulse 1.8s ease-in-out .3s infinite; }
        .sig-wave-3 { animation: signalPulse 1.8s ease-in-out .6s infinite; }

        .auth-form-panel {
            display: flex; align-items: center; justify-content: center;
            padding: 32px; background: #f4f7fb;
        }
        .auth-card {
            background: #fff; border-radius: 16px; padding: 44px 40px;
            width: 100%; max-width: 460px;
            box-shadow: 0 24px 60px rgba(11,37,69,.18);
            color: #1a2636;
        }
        .auth-card h2 { font-size: 26px; font-weight: 800; margin: 0 0 6px 0; color: #0b2545; }
        .auth-card .auth-sub { font-size: 14px; color: #6b7a8d; margin-bottom: 28px; }
        .auth-card .form-label {
            font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
            font-weight: 700; color: #5b6b7c;
        }
        .auth-card .form-control, .auth-card .form-select {
            border-radius: 9px; padding: .7rem 1rem;
            border: 1.5px solid #e2e8f0; font-size: 15px;
            transition: border-color .15s, box-shadow .15s;
        }
        .auth-card .form-control:focus, .auth-card .form-select:focus {
            border-color: var(--auth-accent);
            box-shadow: 0 0 0 4px rgba(61,165,217,.18);
        }
        .btn-signin {
            background: linear-gradient(135deg, #1a4d8c 0%, #3da5d9 100%);
            color: #fff; border: none; border-radius: 9px;
            padding: .85rem; font-weight: 700; font-size: 15px; letter-spacing: .5px;
            transition: transform .12s, box-shadow .2s;
            box-shadow: 0 8px 22px rgba(26,77,140,.28);
            width: 100%;
        }
        .btn-signin:hover {
            background: linear-gradient(135deg, #0b2545 0%, #3da5d9 100%);
            color: #fff; transform: translateY(-1px);
            box-shadow: 0 12px 28px rgba(26,77,140,.32);
        }
        .auth-foot { color: #94a3b8; font-size: 12px; }
    </style>
</head>
<body>

<div class="auth-wrap">

    <!-- ── Left: brand + illustration ─────────────────────────────── -->
    <div class="auth-brand-panel">
        <div class="brand-top">
            <div class="brand-mark"><img src="<?= url('/public/static/img/logo.png') ?>" alt="OrchView"></div>
            <div>
                <div class="brand-name"><?= e(\Core\Settings::get('company_name', APP_NAME)) ?></div>
                <div class="brand-sub">Plant Operations</div>
            </div>
        </div>

        <div class="brand-illustration">
            <svg viewBox="0 0 600 380" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <defs>
                    <linearGradient id="ground" x1="0" x2="0" y1="0" y2="1">
                        <stop offset="0" stop-color="#0b2545" stop-opacity="0"/>
                        <stop offset="1" stop-color="#0b2545" stop-opacity=".35"/>
                    </linearGradient>
                </defs>
                <!-- ground -->
                <path d="M0 290 L80 220 L160 270 L240 200 L340 280 L440 210 L520 270 L600 240 L600 380 L0 380 Z" fill="url(#ground)" opacity=".55"/>
                <path d="M0 320 L120 260 L210 310 L320 250 L420 320 L520 280 L600 320 L600 380 L0 380 Z" fill="url(#ground)" opacity=".8"/>
                <!-- sun -->
                <circle cx="500" cy="80" r="34" fill="#f2a900" opacity=".85"/>
                <circle cx="500" cy="80" r="50" fill="#f2a900" opacity=".18"/>
                <!-- transformer / substation -->
                <g transform="translate(100,180)">
                    <rect x="0" y="40" width="120" height="90" rx="6" fill="#13315c" stroke="#cbd5e1" stroke-width="1.5"/>
                    <rect x="10" y="52" width="100" height="30" rx="3" fill="none" stroke="#cbd5e1" stroke-width="1"/>
                    <rect x="10" y="88" width="100" height="30" rx="3" fill="none" stroke="#cbd5e1" stroke-width="1"/>
                    <rect x="18" y="14" width="4" height="28" fill="#f2a900"/>
                    <rect x="42" y="8"  width="4" height="34" fill="#f2a900"/>
                    <rect x="72" y="8"  width="4" height="34" fill="#f2a900"/>
                    <rect x="98" y="14" width="4" height="28" fill="#f2a900"/>
                    <text x="60" y="72" text-anchor="middle" fill="#3da5d9" font-family="Outfit, sans-serif" font-weight="700" font-size="10">POWER</text>
                    <g transform="translate(60,14)" fill="none" stroke="#3da5d9" stroke-width="2.5" stroke-linecap="round">
                        <path class="sig-wave-1" d="M-24 -4 Q0 -16 24 -4"/>
                        <path class="sig-wave-2" d="M-38 -18 Q0 -36 38 -18"/>
                        <path class="sig-wave-3" d="M-52 -30 Q0 -56 52 -30"/>
                    </g>
                </g>
                <!-- solar panel -->
                <g transform="translate(310,200)">
                    <rect x="22" y="80" width="4" height="40" fill="#94a3b8"/>
                    <rect x="56" y="80" width="4" height="40" fill="#94a3b8"/>
                    <rect x="-6" y="40" width="100" height="60" rx="3" fill="#1a4d8c" stroke="#3da5d9" stroke-width="1.5"/>
                    <g stroke="#3da5d9" stroke-width=".7" opacity=".6">
                        <line x1="-6" y1="60" x2="94" y2="60"/>
                        <line x1="-6" y1="80" x2="94" y2="80"/>
                        <line x1="19" y1="40" x2="19" y2="100"/>
                        <line x1="44" y1="40" x2="44" y2="100"/>
                        <line x1="69" y1="40" x2="69" y2="100"/>
                    </g>
                </g>
                <!-- generator -->
                <g transform="translate(430,250)">
                    <rect x="0" y="20" width="90" height="50" rx="5" fill="#13315c" stroke="#cbd5e1" stroke-width="1.5"/>
                    <rect x="6" y="28" width="78" height="22" rx="2" fill="none" stroke="#cbd5e1" stroke-width="1"/>
                    <circle cx="14" cy="64" r="4" fill="#cbd5e1"/>
                    <circle cx="76" cy="64" r="4" fill="#cbd5e1"/>
                    <rect x="70" y="-2" width="6" height="24" fill="#94a3b8"/>
                    <circle cx="73" cy="-10" r="5" fill="#cbd5e1" opacity=".35"/>
                    <circle cx="79" cy="-22" r="7" fill="#cbd5e1" opacity=".22"/>
                    <text x="45" y="44" text-anchor="middle" fill="#3da5d9" font-family="Outfit, sans-serif" font-weight="700" font-size="9">GEN</text>
                </g>
                <!-- technician -->
                <g transform="translate(255,250)">
                    <rect x="-12" y="20" width="24" height="36" rx="4" fill="#f2a900"/>
                    <rect x="-12" y="34" width="24" height="3" fill="#fff" opacity=".85"/>
                    <rect x="-22" y="22" width="8" height="22" rx="3" fill="#f2a900"/>
                    <rect x="14"  y="22" width="8" height="22" rx="3" fill="#f2a900"/>
                    <rect x="-10" y="56" width="8" height="22" rx="2" fill="#1a4d8c"/>
                    <rect x="2"   y="56" width="8" height="22" rx="2" fill="#1a4d8c"/>
                    <circle cx="0" cy="10" r="8" fill="#f4d6b2"/>
                    <path d="M-11 6 Q0 -6 11 6 L11 8 L-11 8 Z" fill="#f2a900" stroke="#cbd5e1" stroke-width=".8"/>
                    <rect x="-11" y="7" width="22" height="2" fill="#13315c"/>
                </g>
            </svg>
        </div>

        <div>
            <div class="brand-tagline">
                <h1>Run plant ops<br>with confidence.</h1>
                <p>Track equipment across generators, transformers, AC and more. Log incidents, dispatch work orders,
                   approve expenses — from web and mobile.</p>
            </div>
            <div class="brand-stats">
                <div class="stat"><div class="v">WO</div><div class="l">Work Orders</div></div>
                <div class="stat"><div class="v">RCA</div><div class="l">Incident Analysis</div></div>
                <div class="stat"><div class="v">PM</div><div class="l">Preventive Maint.</div></div>
            </div>
        </div>
    </div>

    <!-- ── Right: sign-in card ────────────────────────────────────── -->
    <div class="auth-form-panel">
        <div class="auth-card">
            <h2>Welcome back</h2>
            <div class="auth-sub">Sign in to your OrchView workspace.</div>
            <?= $content ?>
            <hr class="my-4" style="border-color:#e2e8f0;">
            <div class="auth-foot text-center">
                &copy; <?= date('Y') ?> <?= e(\Core\Settings::get('company_name', APP_NAME)) ?>
            </div>
        </div>
    </div>
</div>

</body>
</html>
