@extends('layouts.auth')

@section('title', 'InsightsReady • Sign in')

@push('styles')
    <style>
        .auth{ min-height:100vh; display:grid; grid-template-columns:1fr; }
        @media (min-width: 980px){ .auth{grid-template-columns: 1.1fr 0.9fr} }
        .auth__hero{
            position:relative; background:var(--brand-teal); color:#fff; padding:32px 28px 48px;
            display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
        }
        .auth__hero::before{
            content:""; position:absolute; inset:0;
            background:
                    radial-gradient(circle 26px at 14% 38%, transparent 22px, rgba(255,255,255,.65) 22px 24px, transparent 26px),
                    radial-gradient(circle 26px at 44% 48%, transparent 22px, rgba(255,255,255,.65) 22px 24px, transparent 26px),
                    radial-gradient(circle 26px at 74% 60%, transparent 22px, rgba(255,255,255,.65) 22px 24px, transparent 26px),
                    repeating-linear-gradient( 335deg, rgba(255,255,255,.55) 0 4px, transparent 4px 70px);
            opacity:.28; pointer-events:none;
        }
        .auth__brand{display:flex;align-items:center;gap:12px}
        .auth__brand img{height:44px;width:auto;display:block}
        .auth__brand .name{font-weight:700;letter-spacing:.08em}
        .auth__copy{max-width:780px;margin-top:18vh}
        .auth__title{font-size: clamp(28px, 5.2vw, 56px); line-height:1.05; margin:0 0 12px}
        .auth__subtitle{font-size: clamp(16px, 2vw, 20px); margin:0; opacity:.9}
        .auth__panel{ background:#fff; display:flex;flex-direction:column;justify-content:center; padding:36px; gap:16px; }
        @media (min-width: 620px){ .auth__panel{padding:54px} }
        .card{max-width:520px; width:100%; margin:0 auto}
        .card__title{font-size:32px; margin:0 0 14px; font-weight:700; color:var(--text-900)}
        .btn{display:flex;align-items:center;justify-content:center;gap:10px; width:100%; font-weight:600; border:1px solid var(--border); background:#fff; color:var(--text-900); border-radius:12px; padding:12px 16px; cursor:pointer; transition:.2s ease box-shadow, .2s ease transform, .2s ease background-color; }
        .btn:hover{box-shadow:var(--shadow)}
        .btn:focus-visible{outline:none; box-shadow:var(--focus)}
        .btn svg{width:18px;height:18px;flex:0 0 auto}
        .btn--primary{background:var(--brand-teal); color:#fff; border-color:transparent}
        .btn--primary:hover{background:var(--brand-teal-600)}
        .btn--primary:active{transform:translateY(1px)}
        .divider{position:relative; text-align:center; color:var(--muted); margin:8px 0}
        .divider span{background:#fff; padding:0 10px; position:relative; z-index:1; font-weight:500}
        .divider::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border)}
        .field{display:grid; gap:6px; margin:10px 0}
        .label{font-size:14px; color:var(--text-700); font-weight:600}
        .input{appearance:none; width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; font-size:16px; color:var(--text-900); transition:.2s ease box-shadow, .2s ease border-color}
        .input::placeholder{color:#aab0b6}
        .input:focus{outline:none; border-color:var(--brand-teal); box-shadow:var(--focus)}
        .actions{display:grid; gap:12px; margin-top:8px}
        .links{display:flex; flex-direction:column; gap:8px; margin-top:10px; font-size:14px}
        .links a{color:var(--brand-teal-700); text-decoration:none}
        .links a:hover{text-decoration:underline}
        .sr-only{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}
    </style>
@endpush

@section('content')
    <div class="auth" role="application">
        <!-- Left / Hero -->
        <section class="auth__hero" aria-label="Welcome panel">
            <header class="auth__brand" aria-label="Brand">
                <img src="{{ asset('business_insights_modules_bim_logo.jpeg') }}" alt="Insights Ready logo" />
                <span class="sr-only">InsightsReady</span>
            </header>

            <div class="auth__copy">
                <h1 class="auth__title">Welcome to InsightsReady</h1>
                <p class="auth__subtitle">Sign in to access your analytics workspace</p>
            </div>
        </section>

        <!-- Right / Form -->
        <main class="auth__panel" aria-label="Sign in panel">
            <div class="card" role="form" aria-labelledby="signin-title">
                <h2 id="signin-title" class="card__title">Sign in</h2>

                <button class="btn" type="button" aria-label="Continue with Microsoft">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 3l8-1v9H3V3zm18 0v8h-9V2l9 1zM3 13h8v9l-8-1v-8zm10 0h8v8l-8 1v-9z"/></svg>
                    <span>Continue with Microsoft</span>
                </button>

                <button class="btn" type="button" aria-label="Continue with Google">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.35 11.1h-9.9v2.9h5.7c-.25 1.6-1.75 4.7-5.7 4.7-3.43 0-6.23-2.83-6.23-6.3s2.8-6.3 6.23-6.3c1.96 0 3.27.84 4.02 1.56l2.74-2.65C17.21 3 15.03 2 12.18 2 6.87 2 2.57 6.33 2.57 11.7S6.87 21.4 12.18 21.4c7.03 0 8.7-5.55 8.7-8.37 0-.57-.06-1.03-.13-1.93z"/></svg>
                    <span>Continue with Google</span>
                </button>

                <div class="divider" aria-hidden="true"><span>or</span></div>

                <form action="{{ route('login') }}" method="post" novalidate>
                    @csrf
                    <div class="field">
                        <label for="email" class="label">Email address</label>
                        <input class="input"
                               type="email"
                               id="email"
                               name="email"
                               value="{{ old('email') }}"
                               placeholder="name@company.com"
                               autocomplete="email"
                               required />
                    </div>
                    <div class="field">
                        <label for="password" class="label">Password</label>
                        <input class="input"
                               type="password"
                               id="password"
                               name="password"
                               placeholder="••••••••"
                               autocomplete="current-password"
                               required />
                    </div>

                    <div class="actions">
                        <button class="btn btn--primary" type="submit">Sign In</button>
                    </div>
                </form>

                <div class="links">
                    <a href="#">Forgot password?</a>
                    <div>Don’t have an account? <a href="{{ url('/signup') }}">Create one</a></div>
                </div>
            </div>
        </main>
    </div>

    @if ($errors->any())
        <script>
            @foreach ($errors->all() as $error)
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                title: '{{ $errors->first() }}',
                showConfirmButton: false,
                timer: 4000
            });
            @endforeach
        </script>
    @endif
@endsection