<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Login - HIPL CRM</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=outfit:300,400,500,600,700,800&display=swap" rel="stylesheet" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body style="font-family: 'Outfit', sans-serif; background: linear-gradient(135deg, #f6efe5 0%, #dfe8ff 45%, #fff9ef 100%); min-height: 100vh;">
    <div class="container py-5">
        <div class="row align-items-center min-vh-100 g-4">
            <div class="col-12 col-lg-6">
                <div class="pe-lg-5">
                    <div class="text-uppercase fw-semibold mb-3" style="letter-spacing: .18em; color: #875d2a;">HIPL CRM</div>
                    <h1 class="display-3 fw-bold mb-4" style="color: #14213d; line-height: 1.05;">
                        Built for faster follow-ups and cleaner lead control.
                    </h1>
                    <p class="fs-5 mb-4" style="color: #46506b; max-width: 36rem;">
                        Access your sales workspace, review incoming website leads, update statuses, and keep every opportunity moving with clarity.
                    </p>

                    <div class="row g-3">
                        <div class="col-12 col-sm-6">
                            <div class="p-4 rounded-4 h-100 border" style="background: rgba(255,255,255,.75); border-color: rgba(20,33,61,.08) !important; backdrop-filter: blur(10px);">
                                <div class="fw-semibold mb-2" style="color: #14213d;">Lead Visibility</div>
                                <div class="small" style="color: #5d6783;">Track every website inquiry from one place with clear statuses and export-ready data.</div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6">
                            <div class="p-4 rounded-4 h-100 border" style="background: rgba(255,255,255,.75); border-color: rgba(20,33,61,.08) !important; backdrop-filter: blur(10px);">
                                <div class="fw-semibold mb-2" style="color: #14213d;">Webhook Ready</div>
                                <div class="small" style="color: #5d6783;">Connect Elementor and website forms directly into the CRM without manual entry.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-5 offset-lg-1">
                <div class="p-4 p-md-5 rounded-5 shadow-lg border" style="background: rgba(255,255,255,.88); border-color: rgba(20,33,61,.08) !important; backdrop-filter: blur(14px);">
                    <div class="mb-4">
                        <div class="badge rounded-pill px-3 py-2 mb-3" style="background: #14213d; color: #fff;">Secure Admin Access</div>
                        <h2 class="fw-bold mb-2" style="color: #14213d;">Welcome back</h2>
                        <p class="mb-0" style="color: #67728f;">Sign in to manage leads, tokens, and website performance.</p>
                    </div>

                    @if (session('status'))
                        <div class="alert alert-success rounded-4">{{ session('status') }}</div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger rounded-4">
                            {{ $errors->first() }}
                        </div>
                    @endif

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

                        <div class="mb-3">
                            <label for="email" class="form-label fw-semibold" style="color: #14213d;">Email Address</label>
                            <input id="email"
                                   type="email"
                                   name="email"
                                   value="{{ old('email') }}"
                                   class="form-control form-control-lg rounded-4"
                                   style="border-color: #d5dcee; min-height: 56px;"
                                   placeholder="admin@company.com"
                                   required
                                   autofocus
                                   autocomplete="username">
                        </div>

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label for="password" class="form-label fw-semibold mb-0" style="color: #14213d;">Password</label>
                                @if (Route::has('password.request'))
                                    <a href="{{ route('password.request') }}" class="small text-decoration-none" style="color: #875d2a;">Forgot password?</a>
                                @endif
                            </div>

                            <input id="password"
                                   type="password"
                                   name="password"
                                   class="form-control form-control-lg rounded-4"
                                   style="border-color: #d5dcee; min-height: 56px;"
                                   placeholder="Enter your password"
                                   required
                                   autocomplete="current-password">
                        </div>

                        <div class="form-check mb-4">
                            <input class="form-check-input" type="checkbox" value="1" id="remember" name="remember">
                            <label class="form-check-label" for="remember" style="color: #46506b;">Keep me signed in on this device</label>
                        </div>

                        <button type="submit"
                                class="btn w-100 btn-lg rounded-4 fw-semibold"
                                style="background: linear-gradient(135deg, #14213d, #355c7d); color: #fff; min-height: 58px;">
                            Login to CRM
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
