<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sign In — {{ config('app.name') }}</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --sidebar: #0f172a;
            --sidebar-deep: #020617;
            --accent: #6366f1;
            --accent-glow: rgba(99, 102, 241, 0.35);
            --re: #10b981;
            --cn: #f97316;
            --text: #0f172a;
            --muted: #64748b;
            --border: #e2e8f0;
            --input-bg: #f8fafc;
        }

        html, body {
            height: 100%;
            font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        .page {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 100vh;
        }

        /* ── Left brand panel ── */
        .brand-panel {
            position: relative;
            background: var(--sidebar);
            color: #fff;
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }

        .brand-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 60% at 20% 80%, rgba(249, 115, 22, 0.18) 0%, transparent 60%),
                radial-gradient(ellipse 70% 50% at 80% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 55%),
                radial-gradient(ellipse 50% 40% at 50% 50%, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
            pointer-events: none;
        }

        .brand-panel::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        .brand-top { position: relative; z-index: 1; }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 3rem;
        }

        .logo-mark {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--accent) 0%, #818cf8 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px var(--accent-glow);
        }

        .logo-mark svg { width: 22px; height: 22px; color: #fff; }

        .logo-text {
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.3;
        }

        .hero h1 {
            font-size: clamp(1.75rem, 3vw, 2.35rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1rem;
            color: #94a3b8;
            line-height: 1.65;
            max-width: 380px;
        }

        .modules {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
            margin-top: 2.5rem;
        }

        .module-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.15rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            backdrop-filter: blur(8px);
            transition: background 0.2s, border-color 0.2s;
        }

        .module-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.14);
        }

        .module-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .module-icon.re { background: rgba(16, 185, 129, 0.15); color: var(--re); }
        .module-icon.cn { background: rgba(249, 115, 22, 0.15); color: var(--cn); }

        .module-icon svg { width: 20px; height: 20px; }

        .module-info strong {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.15rem;
        }

        .module-info span {
            font-size: 0.78rem;
            color: #64748b;
        }

        .brand-footer {
            position: relative;
            z-index: 1;
            font-size: 0.78rem;
            color: #475569;
        }

        /* ── Right form panel ── */
        .form-panel {
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem;
        }

        .form-wrap {
            width: 100%;
            max-width: 400px;
        }

        .form-header { margin-bottom: 2rem; }

        .form-header h2 {
            font-size: 1.65rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.02em;
            margin-bottom: 0.4rem;
        }

        .form-header p {
            font-size: 0.9rem;
            color: var(--muted);
        }

        .alert {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #b91c1c;
            padding: 0.85rem 1rem;
            border-radius: 10px;
            font-size: 0.84rem;
            line-height: 1.45;
            margin-bottom: 1.25rem;
        }

        .alert svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }

        .field { margin-bottom: 1.15rem; }

        .field label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: #334155;
            margin-bottom: 0.45rem;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap svg {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            color: #94a3b8;
            pointer-events: none;
            transition: color 0.15s;
        }

        .input-wrap input {
            width: 100%;
            padding: 0.78rem 0.9rem 0.78rem 2.65rem;
            background: var(--input-bg);
            border: 1.5px solid var(--border);
            border-radius: 10px;
            font-size: 0.9rem;
            color: var(--text);
            font-family: inherit;
            transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
        }

        .input-wrap input::placeholder { color: #94a3b8; }

        .input-wrap input:focus {
            outline: none;
            border-color: var(--accent);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
        }

        .input-wrap:focus-within svg { color: var(--accent); }

        .form-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

        .remember {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.84rem;
            color: #475569;
            cursor: pointer;
            user-select: none;
        }

        .remember input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--accent);
            cursor: pointer;
        }

        .btn-signin {
            width: 100%;
            padding: 0.82rem;
            background: linear-gradient(135deg, var(--sidebar) 0%, #1e293b 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 0.95rem;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            letter-spacing: 0.01em;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
            transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
        }

        .btn-signin:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35);
        }

        .btn-signin:active { transform: translateY(0); }

        .form-footer {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            text-align: center;
            font-size: 0.8rem;
            color: #94a3b8;
        }

        .form-footer strong { color: #64748b; font-weight: 600; }

        /* ── Responsive ── */
        @media (max-width: 900px) {
            .page { grid-template-columns: 1fr; }

            .brand-panel {
                padding: 2rem 1.75rem;
                min-height: auto;
            }

            .hero h1 { font-size: 1.5rem; }
            .modules { margin-top: 1.5rem; }
            .brand-footer { display: none; }

            .form-panel { padding: 2rem 1.5rem 2.5rem; }
        }

        @media (max-width: 480px) {
            .module-card { padding: 0.85rem; }
            .form-header h2 { font-size: 1.4rem; }
        }
    </style>
</head>
<body>
    <div class="page">
        {{-- Brand side --}}
        <aside class="brand-panel">
            <div class="brand-top">
                <div class="logo">
                    <div class="logo-mark">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5M3.75 9.75v10.5m16.5-10.5v10.5M5.25 9.75h13.5M9 3.75v6m6-6v6M4.5 9.75V6.375c0-.621.504-1.125 1.125-1.125h13.275c.621 0 1.125.504 1.125 1.125V9.75" />
                        </svg>
                    </div>
                    <span class="logo-text">{{ config('app.name') }}</span>
                </div>

                <div class="hero">
                    <h1>Manage your business<br>in one place</h1>
                    <p>Secure access to your assigned workspace. Sign in and you'll be taken directly to your dashboard.</p>
                </div>

                <div class="modules">
                    <div class="module-card">
                        <div class="module-icon re">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                            </svg>
                        </div>
                        <div class="module-info">
                            <strong>Real Estate</strong>
                            <span>Leads, properties, bookings & finance</span>
                        </div>
                    </div>
                    <div class="module-card">
                        <div class="module-icon cn">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085" />
                            </svg>
                        </div>
                        <div class="module-info">
                            <strong>Construction</strong>
                            <span>Projects, materials, vendors & progress</span>
                        </div>
                    </div>
                </div>
            </div>

            <p class="brand-footer">&copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.</p>
        </aside>

        {{-- Form side --}}
        <main class="form-panel">
            <div class="form-wrap">
                <div class="form-header">
                    <h2>Welcome back</h2>
                    <p>Enter your credentials to access your workspace</p>
                </div>

                @if ($errors->any())
                    <div class="alert" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                        </svg>
                        <span>{{ $errors->first() }}</span>
                    </div>
                @endif

                <form method="POST" action="{{ route('login.attempt') }}" novalidate>
                    @csrf

                    <div class="field">
                        <label for="email">Email address</label>
                        <div class="input-wrap">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                            </svg>
                            <input
                                type="email"
                                id="email"
                                name="email"
                                value="{{ old('email') }}"
                                placeholder="you@company.com"
                                required
                                autofocus
                                autocomplete="email"
                            >
                        </div>
                    </div>

                    <div class="field">
                        <label for="password">Password</label>
                        <div class="input-wrap">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                            </svg>
                            <input
                                type="password"
                                id="password"
                                name="password"
                                placeholder="Enter your password"
                                required
                                autocomplete="current-password"
                            >
                        </div>
                    </div>

                    <div class="form-row">
                        <label class="remember">
                            <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                            Remember me
                        </label>
                    </div>

                    <button type="submit" class="btn-signin">Sign in to workspace</button>
                </form>

                <div class="form-footer">
                    Access is role-based. You will be directed to <strong>your assigned panel</strong> after login.
                </div>
            </div>
        </main>
    </div>
</body>
</html>
