@extends('layouts.guest')
@section('title', 'Entrar - ERP-PLUS')

@push('styles')
<style>
    body {
        display: flex !important;
        padding: 0 !important;
        min-height: 100vh;
        background: #fff !important;
        align-items: stretch !important;
    }

    .auth-left {
        flex: 1;
        background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 48px 52px;
        color: #fff;
        min-height: 100vh;
        position: relative;
        overflow: hidden;
    }
    .auth-left::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -80px;
        width: 360px;
        height: 360px;
        background: rgba(255,255,255,.05);
        border-radius: 50%;
        pointer-events: none;
    }
    .auth-left::after {
        content: '';
        position: absolute;
        bottom: -120px;
        left: -60px;
        width: 440px;
        height: 440px;
        background: rgba(255,255,255,.04);
        border-radius: 50%;
        pointer-events: none;
    }
    .auth-brand { display: flex; align-items: center; gap: 12px; }
    .auth-brand-mark {
        width: 42px; height: 42px; border-radius: 10px;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.3);
        display: grid; place-items: center;
        font-weight: 800; font-size: 16px; letter-spacing: -.5px;
        backdrop-filter: blur(8px);
    }
    .auth-brand-name { font-size: 18px; font-weight: 700; }
    .auth-brand-sub  { font-size: 12px; opacity: .7; margin-top: 1px; }

    .auth-hero { position: relative; z-index: 1; }
    .auth-hero h2 {
        font-size: 32px; font-weight: 800; line-height: 1.2;
        margin: 0 0 14px; letter-spacing: -.5px;
    }
    .auth-hero p { font-size: 16px; opacity: .8; line-height: 1.6; margin: 0 0 36px; max-width: 380px; }

    .features { display: grid; gap: 16px; }
    .feature { display: flex; gap: 14px; align-items: flex-start; }
    .feature-icon {
        width: 36px; height: 36px; border-radius: 8px;
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.2);
        display: grid; place-items: center; flex-shrink: 0;
    }
    .feature-text strong { font-size: 14px; font-weight: 600; display: block; }
    .feature-text span   { font-size: 12.5px; opacity: .72; line-height: 1.4; margin-top: 1px; display: block; }

    .auth-footer { position: relative; z-index: 1; }
    .auth-footer p {
        font-size: 12px; opacity: .6;
        border-top: 1px solid rgba(255,255,255,.15);
        padding-top: 20px; margin: 0;
    }

    .auth-right {
        width: 460px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 52px;
        background: #fff;
        min-height: 100vh;
    }
    .auth-form-wrap { width: 100%; max-width: 360px; }
    .auth-form-wrap h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; color: #0f172a; }
    .auth-form-wrap > p { font-size: 14px; color: #64748b; margin: 0 0 28px; }

    .alert-error {
        background: #fef2f2; border: 1px solid #fca5a5;
        color: #dc2626; border-radius: 8px;
        padding: 11px 14px; font-size: 13px; margin-bottom: 20px;
    }
    .f-group { display: grid; gap: 5px; margin-bottom: 16px; }
    .f-label {
        font-size: 12.5px; font-weight: 600; color: #374151;
        display: flex; align-items: center; justify-content: space-between;
    }
    .f-label a { font-weight: 500; color: #2563eb; text-decoration: none; font-size: 12px; }
    .f-input {
        width: 100%; min-height: 44px; border: 1px solid #e2e8f0;
        border-radius: 8px; padding: 10px 13px; font: inherit;
        font-size: 14px; color: #0f172a; background: #fff;
        transition: border-color .12s, box-shadow .12s;
    }
    .f-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
    .check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; margin-bottom: 20px; }
    .check-row input { width: auto; min-height: 0; }
    .btn-primary {
        width: 100%; min-height: 46px; background: #2563eb; color: #fff;
        border: none; border-radius: 8px; font: inherit; font-size: 15px;
        font-weight: 700; cursor: pointer;
        box-shadow: 0 2px 8px rgba(37,99,235,.35);
        transition: background .15s, box-shadow .15s;
    }
    .btn-primary:hover { background: #1d4ed8; box-shadow: 0 4px 14px rgba(37,99,235,.4); }
    .auth-link-row { text-align: center; margin-top: 20px; font-size: 13px; color: #64748b; }
    .auth-link-row a { color: #2563eb; font-weight: 700; text-decoration: none; }

    @media (max-width: 900px) {
        body { flex-direction: column !important; }
        .auth-left { min-height: auto; padding: 32px 28px; }
        .auth-hero h2 { font-size: 22px; }
        .features { grid-template-columns: 1fr 1fr; }
        .auth-right { width: 100%; min-height: auto; padding: 36px 28px; }
        .auth-form-wrap { max-width: 100%; }
    }
    @media (max-width: 540px) {
        .auth-left { padding: 24px 20px; }
        .auth-right { padding: 28px 20px; }
        .features { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
{{-- LEFT: marketing panel --}}
<div class="auth-left">
    <div class="auth-brand">
        <div class="auth-brand-mark">EP</div>
        <div>
            <div class="auth-brand-name">ERP-PLUS</div>
            <div class="auth-brand-sub">Sistema de gestao empresarial</div>
        </div>
    </div>

    <div class="auth-hero">
        <h2>ERP completo<br>para sua empresa<br>em um so lugar</h2>
        <p>NF-e, NFC-e, NFS-e, PDV, estoque, financeiro e muito mais — tudo integrado em uma unica plataforma.</p>

        <div class="features">
            <div class="feature">
                <div class="feature-icon">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
                <div class="feature-text">
                    <strong>NF-e / NFC-e / NFS-e</strong>
                    <span>Documentos fiscais de entrada e saida, sincronizados direto com a SEFAZ</span>
                </div>
            </div>
            <div class="feature">
                <div class="feature-icon">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                </div>
                <div class="feature-text">
                    <strong>Download e manifestacao</strong>
                    <span>Baixe XMLs em lote e faca manifestacao do destinatario direto pelo sistema</span>
                </div>
            </div>
            <div class="feature">
                <div class="feature-icon">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                </div>
                <div class="feature-text">
                    <strong>PDV e Caixa</strong>
                    <span>Ponto de venda completo com controle de caixa, vendas e formas de pagamento</span>
                </div>
            </div>
            <div class="feature">
                <div class="feature-icon">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                </div>
                <div class="feature-text">
                    <strong>Produtos e Estoque</strong>
                    <span>Gestao de produtos com entrada automatica por XML e controle de estoque</span>
                </div>
            </div>
            <div class="feature">
                <div class="feature-icon">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <div class="feature-text">
                    <strong>Financeiro e Assinaturas</strong>
                    <span>Controle de cobrancas, historico de pagamentos e gestao de planos</span>
                </div>
            </div>
        </div>
    </div>

    <div class="auth-footer">
        <p>Plataforma segura com criptografia de ponta a ponta. Dados fiscais e financeiros protegidos 24h.</p>
    </div>
</div>

{{-- RIGHT: login form --}}
<div class="auth-right">
    <div class="auth-form-wrap">
        <h1>Bem-vindo de volta</h1>
        <p>Entre com suas credenciais para acessar o sistema</p>

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

        <form method="POST" action="{{ route('login.store') }}">
            @csrf
            <div class="f-group">
                <label class="f-label" for="email">E-mail</label>
                <input class="f-input" id="email" name="email" type="email"
                       value="{{ old('email') }}" required autofocus autocomplete="email"
                       placeholder="seu@email.com">
            </div>
            <div class="f-group">
                <label class="f-label" for="password">
                    Senha
                    <a href="{{ route('password.request') }}">Esqueci a senha</a>
                </label>
                <input class="f-input" id="password" name="password" type="password"
                       required autocomplete="current-password" placeholder="••••••••">
            </div>
            <div class="check-row">
                <input id="remember" name="remember" type="checkbox">
                <label for="remember">Manter conectado por 30 dias</label>
            </div>
            <button class="btn-primary" type="submit">Entrar na plataforma</button>
        </form>

        <div class="auth-link-row">
            Nao tem conta?
            <a href="{{ route('register') }}">Cadastre-se gratuitamente</a>
        </div>
    </div>
</div>
@endsection