<!DOCTYPE html>
<html lang="pt-BR" class="h-full scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $site->nome() }} · Monitor automático de XML de compras</title>
    <meta name="description" content="{{ $site->get('login_subtitulo') }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <x-marca.head />
</head>
<body class="h-full bg-white">

<header class="sticky top-0 z-30 border-b border-slate-200 bg-white/85 backdrop-blur">
    <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
        <a href="{{ route('home') }}" class="flex items-center gap-3">
            <x-marca.logo classe="h-9 max-w-[11rem]" />
            <span class="font-semibold text-slate-900">{{ $site->nome() }}</span>
        </a>

        <nav class="flex items-center gap-2">
            @auth
                <a href="{{ route('painel.inicial') }}" class="btn-primary btn-sm">Ir para o painel</a>
            @else
                <a href="{{ route('login') }}" class="btn-secondary btn-sm">Entrar</a>
                @if ($site->bool('login_permitir_cadastro'))
                    <a href="{{ route('register') }}" class="btn-primary btn-sm">Cadastrar empresa</a>
                @endif
            @endauth
        </nav>
    </div>
</header>

<main>
    {{-- Hero --}}
    <section class="relative overflow-hidden border-b border-slate-200 bg-brand-950">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_75%_20%,rgba(69,140,153,0.35),transparent_55%)]"></div>
        <div class="relative mx-auto grid max-w-6xl gap-12 px-6 py-20 lg:grid-cols-[1.1fr_1fr] lg:py-28">
            <div>
                <p class="text-xs font-semibold tracking-[0.2em] text-brand-400 uppercase">
                    {{ $site->get('site_descricao') ?: 'Escrituração de entradas' }}
                </p>
                <h1 class="mt-5 text-4xl leading-tight font-semibold text-white sm:text-5xl">
                    {{ $site->get('login_titulo') }}
                </h1>
                @if ($site->get('login_subtitulo'))
                    <p class="mt-6 max-w-xl text-lg text-brand-200">{{ $site->get('login_subtitulo') }}</p>
                @endif

                <div class="mt-9 flex flex-wrap gap-3">
                    @if ($site->bool('login_permitir_cadastro'))
                        <a href="{{ route('register') }}" class="btn-primary bg-white text-brand-900 hover:bg-brand-50">
                            Começar teste de 14 dias
                        </a>
                    @else
                        <a href="{{ route('login') }}" class="btn-primary bg-white text-brand-900 hover:bg-brand-50">
                            Entrar no sistema
                        </a>
                    @endif
                    <a href="#como-funciona" class="btn border border-white/25 text-white hover:bg-white/10">
                        Como funciona
                    </a>
                </div>

                <p class="mt-5 text-sm text-brand-300">
                    Sem captcha, sem digitar chave de acesso, sem pedir arquivo ao fornecedor.
                </p>
            </div>

            {{-- Amostra da interface --}}
            <div class="relative">
                <div class="rounded-xl border border-white/10 bg-white/5 p-2 shadow-2xl backdrop-blur">
                    <div class="rounded-lg bg-white p-5">
                        <div class="flex items-center justify-between border-b border-slate-100 pb-3">
                            <p class="text-sm font-semibold text-slate-900">Notas de compra</p>
                            <span class="badge bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200">Monitor ativo</span>
                        </div>
                        <div class="divide-y divide-slate-100">
                            @foreach ([
                                ['Distribuidora Andrade LTDA', '12.345.678/0001-90', 'R$ 8.420,55', 'Autorizada'],
                                ['Metalúrgica São Jorge S/A', '98.765.432/0001-10', 'R$ 23.190,00', 'Autorizada'],
                                ['Papelaria Central ME', '11.222.333/0001-44', 'R$ 612,30', 'Cancelada'],
                            ] as [$nome, $cnpj, $valor, $status])
                                <div class="flex items-center justify-between gap-4 py-3">
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-medium text-slate-800">{{ $nome }}</p>
                                        <p class="tabular text-xs text-slate-500">{{ $cnpj }}</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="tabular text-sm font-semibold text-slate-900">{{ $valor }}</p>
                                        <p class="text-xs {{ $status === 'Cancelada' ? 'text-rose-600' : 'text-emerald-600' }}">{{ $status }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Como funciona --}}
    <section id="como-funciona" class="mx-auto max-w-6xl px-6 py-20">
        <h2 class="text-2xl font-semibold text-slate-900 sm:text-3xl">Três passos e o arquivo nunca mais falta</h2>
        <p class="mt-3 max-w-2xl text-slate-600">
            A SEFAZ mantém uma fila de documentos destinados a cada CNPJ. O monitor percorre essa fila
            pelo cursor NSU e guarda cada documento novo.
        </p>

        <div class="mt-12 grid gap-6 md:grid-cols-3">
            @foreach ([
                ['01', 'Cadastre a empresa', 'CNPJ, inscrição estadual e UF. Leva menos de dois minutos.'],
                ['02', 'Envie o certificado A1', 'O arquivo .pfx fica em diretório privado e a senha é criptografada com a chave da aplicação.'],
                ['03', 'Receba os XMLs', 'A cada ciclo o monitor consulta a SEFAZ, baixa os documentos novos e arquiva por competência.'],
            ] as [$numero, $titulo, $texto])
                <div class="card card-pad">
                    <span class="tabular text-sm font-semibold text-brand-600">{{ $numero }}</span>
                    <h3 class="mt-3 text-base font-semibold text-slate-900">{{ $titulo }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ $texto }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Recursos --}}
    <section class="border-y border-slate-200 bg-slate-50">
        <div class="mx-auto max-w-6xl px-6 py-20">
            <h2 class="text-2xl font-semibold text-slate-900 sm:text-3xl">O que vem junto</h2>

            <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ([
                    ['Monitor automático', 'Ciclos programados por empresa, respeitando o limite de consultas do NFeDistribuicaoDFe.'],
                    ['Manifestação do destinatário', 'Registre ciência da operação e destrave o XML completo das notas que vieram só como resumo.'],
                    ['Eventos e cancelamentos', 'Carta de correção, cancelamento e substituição atualizam a situação da nota automaticamente.'],
                    ['Download em lote', 'Pacote .zip organizado em ano/mês, pronto para entregar à contabilidade.'],
                    ['Vários usuários', 'Administradores e operadores da mesma empresa, cada um com seu acesso.'],
                    ['Painel master', 'Visão consolidada de todas as empresas, certificados a vencer e falhas de sincronização.'],
                ] as [$titulo, $texto])
                    <div class="card card-pad">
                        <h3 class="text-base font-semibold text-slate-900">{{ $titulo }}</h3>
                        <p class="mt-2 text-sm text-slate-600">{{ $texto }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Chamada final --}}
    <section class="mx-auto max-w-6xl px-6 py-20">
        <div class="rounded-2xl bg-brand-950 px-8 py-12 text-center sm:px-16">
            <h2 class="text-2xl font-semibold text-white sm:text-3xl">Pare de caçar XML de fornecedor</h2>
            <p class="mx-auto mt-3 max-w-xl text-brand-200">
                Cadastre a empresa, envie o certificado e deixe o monitor trabalhar.
            </p>
            <a href="{{ $site->bool('login_permitir_cadastro') ? route('register') : route('login') }}"
               class="btn-primary mt-8 bg-white text-brand-900 hover:bg-brand-50">
                {{ $site->bool('login_permitir_cadastro') ? 'Criar conta gratuita' : 'Acessar o sistema' }}
            </a>
        </div>
    </section>
</main>

<footer class="border-t border-slate-200">
    <div class="mx-auto max-w-6xl px-6 py-8 text-sm text-slate-500">
        <p>&copy; {{ date('Y') }} {{ $site->nome() }}. Serviço independente, sem vínculo com a Secretaria da Fazenda.</p>
        <x-marca.creditos classe="mt-2" />
    </div>
</footer>

</body>
</html>
