<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    
		<meta charset="utf-8" />

		<title>Início | null</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
		<meta content="Themesbrand" name="author" />
		<!-- App favicon -->
		<link rel="shortcut icon"
			  href="/brands/null/favicon.ico">
	
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />

    <style>
        :root {
            --brand-primary-h: 0;
            --brand-primary-s: 0%;
            --brand-primary-l: 0%;

            --brand-primary: hsl(var(--brand-primary-h), var(--brand-primary-s), var(--brand-primary-l));
            --brand-hover: hsl(var(--brand-primary-h), var(--brand-primary-s), calc(var(--brand-primary-l) - 10%));
            --brand-light: hsl(var(--brand-primary-h), var(--brand-primary-s), 95%);
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        main {
            flex: 1;
        }

        .navbar-custom { background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 15px 0; }

        .btn-brand {
            background-color: var(--brand-primary); border-color: var(--brand-primary); color: #ffffff;
            padding: 10px 25px; border-radius: 50px; transition: 0.3s; font-weight: 600;
        }
        .btn-brand:hover { background-color: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
        .text-brand { color: var(--brand-primary) !important; }

        .hero-section {
            padding: 120px 0 80px 0;
            background: linear-gradient(135deg, var(--brand-light) 0%, #ffffff 100%);
        }

        .services-section {
            padding: 80px 0;
            background-color: #ffffff;
        }
        .service-card {
            padding: 30px;
            border-radius: 10px;
            transition: transform 0.3s ease;
            height: 100%;
            border: 1px solid #f0f0f0;
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            border-color: var(--brand-primary);
        }
        .service-icon {
            width: 60px; height: 60px;
            background-color: var(--brand-light);
            color: var(--brand-primary);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; margin-bottom: 20px;
        }

        .tracking-box {
            background: white; padding: 30px; border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-top: 5px solid var(--brand-primary);
            transition: all 0.3s ease; /* Suaviza a mudança de tamanho */
        }
        .footer { background-color: #212529; color: #878a99; padding: 40px 0; margin-top: auto; }

        .timeline-box { position: relative; padding-left: 0; list-style: none; }
        .timeline-item { position: relative; padding-left: 40px; padding-bottom: 30px; }
        .timeline-item::before { content: ""; position: absolute; left: 14px; top: 5px; bottom: -5px; width: 2px; background-color: #e9ecef; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-item:last-child::before { display: none; }
        .timeline-dot { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; border: 2px solid var(--brand-primary); display: flex; align-items: center; justify-content: center; z-index: 1; }
        .timeline-dot i { font-size: 14px; color: var(--brand-primary); }
        .timeline-item.active .timeline-dot { background-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(0,0,0,0.05); }
        .timeline-item.active .timeline-dot i { color: #fff; }
        .timeline-date { font-size: 0.75rem; color: #878a99; margin-bottom: 2px; }
        .timeline-title { font-size: 1rem; font-weight: 600; color: #495057; margin-bottom: 2px; }
        .timeline-desc { font-size: 0.85rem; color: #74788d; }
        .fade-in { animation: fadeIn 0.5s ease-in; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .swal2-confirm { background-color: var(--brand-primary) !important; box-shadow: none !important; }

        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 30px;
            right: 30px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 32px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .whatsapp-float:hover {
            background-color: #20b857;
            color: #FFF;
            transform: scale(1.1);
        }

        .whatsapp-pulse {
            animation: whatsapp-pulse-animation 2s infinite;
        }

        @keyframes whatsapp-pulse-animation {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }

        @media (max-width: 768px) {
            .whatsapp-float {
                width: 50px;
                height: 50px;
                bottom: 20px;
                right: 20px;
                font-size: 26px;
            }
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="/brands/null/logo/simbolo_01_rgb.png" alt="Logo" height="40">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav align-items-center gap-3">
                <li class="nav-item"><a class="nav-link text-dark fw-medium" href="/null/cadastro">Seja um Entregador</a></li>
                <li class="nav-item"><a class="nav-link text-dark fw-medium" href="#servicos">Diferenciais</a></li>
                <li class="nav-item">
                    <a href="/null/entrar" class="btn btn-brand">Acesse o Portal</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main>
    <section class="hero-section" id="rastreio">
        <div class="container">
            <div class="row align-items-start">

                <div class="col-lg-6 mt-lg-5 pt-lg-4 mb-5 mb-lg-0">
                    <h1 class="display-4 fw-bold mb-3">Entregas rápidas com a <span class="text-brand"></span></h1>
                    <p class="lead text-muted mb-4">Conectamos sua empresa ao mundo com agilidade, segurança e tecnologia de ponta. Simplifique sua logística hoje.</p>
                    <div class="d-flex gap-2">
                        <a href="/null/cadastro" class="btn btn-brand btn-lg shadow">Quero ser Parceiro</a>
                        <a href="#servicos" class="btn btn-outline-dark btn-lg">Conheça Mais</a>
                    </div>
                </div>

                <div class="col-lg-5 offset-lg-1">
                    <div class="tracking-box" id="rastreio-container">

                        <div id="view-search">
                            <h4 class="fw-bold mb-3">Rastreie sua encomenda</h4>
                            <p class="text-muted fs-14 mb-4">Digite o código de rastreio para ver o status em tempo real.</p>
                            <form id="form-tracking">
                                <div class="mb-3">
                                    <label class="form-label text-muted">Código de Rastreio</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0"><i class="ri-map-pin-line text-brand"></i></span>
                                        <input type="text" id="input-tracking-code" class="form-control border-start-0 bg-light" placeholder="Ex: BR23561T1312P" required>
                                    </div>
                                </div>
                                <button type="submit" id="btn-consultar" class="btn btn-brand w-100">Consultar Agora</button>
                            </form>
                        </div>

                        <div id="view-result" style="display: none;">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="fw-bold mb-0">Status da Entrega</h5>
                                <button class="btn btn-sm btn-light text-muted" id="btn-nova-busca">
                                    <i class="ri-arrow-left-line align-middle"></i> Voltar
                                </button>
                            </div>

                            <div class="bg-light p-3 rounded mb-4 border-start border-4" style="border-color: var(--brand-primary) !important;">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center">
                                        <div id="display-icon" class="me-3"></div>
                                        <div>
                                            <small class="text-muted d-block text-uppercase" style="font-size: 0.75rem;">Código</small>
                                            <strong class="text-dark fs-16" id="display-code">---</strong>
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <small class="text-muted d-block text-uppercase" style="font-size: 0.75rem;">Destinatário</small>
                                        <strong class="text-dark" id="display-receiver">---</strong>
                                    </div>
                                </div>
                            </div>

                            <div class="timeline-box" id="timeline-list"></div>
                        </div>

                        <div id="view-loading" class="text-center py-5" style="display: none;">
                            <div class="spinner-border text-brand" role="status">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                            <p class="mt-2 text-muted">Buscando informações...</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="services-section" id="servicos">
        <div class="container">
            <div class="row justify-content-center text-center mb-5">
                <div class="col-lg-6">
                    <h2 class="fw-bold">Por que escolher a <span class="text-brand"></span>?</h2>
                    <p class="text-muted">Oferecemos a melhor experiência logística para o seu negócio.</p>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="service-card text-center">
                        <div class="service-icon mx-auto">
                            <i class="ri-rocket-line"></i>
                        </div>
                        <h5 class="fw-bold mb-3">Agilidade na Entrega</h5>
                        <p class="text-muted">Processos otimizados para garantir que sua encomenda chegue ao destino no menor tempo possível.</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="service-card text-center">
                        <div class="service-icon mx-auto">
                            <i class="ri-shield-check-line"></i>
                        </div>
                        <h5 class="fw-bold mb-3">Segurança Total</h5>
                        <p class="text-muted">Monitoramento constante e protocolos rigorosos para garantir a integridade do seu pacote.</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="service-card text-center">
                        <div class="service-icon mx-auto">
                            <i class="ri-map-2-line"></i>
                        </div>
                        <h5 class="fw-bold mb-3">Rastreio em Tempo Real</h5>
                        <p class="text-muted">Acompanhe cada etapa do processo com nossa tecnologia de ponta e total transparência.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<footer class="footer text-center">
    <div class="container">
        <div class="mb-3">
            <img src="/brands/null/logo/horizontal_02_rgb.png" height="80" style="opacity: 0.8;">
        </div>
        <p class="mb-0">&copy; <span>2026</span> <span></span>. Todos os direitos reservados.</p>
    </div>
</footer>



<script>
    window.settings = {
        brand: null,
        token: null
    };
</script>

<script src="/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/libs/axios/axios.min.js"></script>
<script src="/assets/libs/sweetalert2/sweetalert2.min.js"></script>

<script src="/assets/js/utils/icons.js"></script>
<script src="/assets/js/utils/error-translator.js"></script>
<script src="/assets/js/utils/status-map.js"></script>
<script src="/assets/js/api/api.js"></script>
<script src="/assets/js/api/delivery.api.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const TrackingManager = {
            dom: {
                viewSearch: document.getElementById('view-search'),
                viewResult: document.getElementById('view-result'),
                viewLoading: document.getElementById('view-loading'),

                form: document.getElementById('form-tracking'),
                input: document.getElementById('input-tracking-code'),
                btnBack: document.getElementById('btn-nova-busca'),

                displayIcon: document.getElementById('display-icon'),
                displayCode: document.getElementById('display-code'),
                displayReceiver: document.getElementById('display-receiver'),
                timelineList: document.getElementById('timeline-list')
            },

            init: function() {
                this.dom.form.addEventListener('submit', (e) => {
                    e.preventDefault();
                    const code = this.dom.input.value.trim();
                    if(code) this.fetchTracking(code);
                });

                this.dom.btnBack.addEventListener('click', () => {
                    this.switchView('search');
                    this.dom.input.value = '';
                    this.dom.input.focus();
                });
            },

            switchView: function(viewName) {
                this.dom.viewSearch.style.display = 'none';
                this.dom.viewResult.style.display = 'none';
                this.dom.viewLoading.style.display = 'none';

                if(viewName === 'search') this.dom.viewSearch.style.display = 'block';
                if(viewName === 'result') this.dom.viewResult.style.display = 'block';
                if(viewName === 'loading') this.dom.viewLoading.style.display = 'block';
            },

            fetchTracking: async function(code) {
                this.switchView('loading');

                try {
                    const data = await window.PublicAPI.getDeliveryDetails(code);
                    if (!data) throw new Error("DELIVERY_NOT_FOUND");

                    this.renderResult(data);
                    this.switchView('result');

                } catch (error) {
                    console.error("Erro tracking:", error);

                    let errorCode = 'UNKNOWN_ERROR';
                    if (error.response && error.response.data && error.response.data.code) {
                        errorCode = error.response.data.code;
                    } else if (error.message === "DELIVERY_NOT_FOUND") {
                        errorCode = 'DELIVERY_NOT_FOUND';
                    }

                    const message = window.translateErrorCode ? window.translateErrorCode(errorCode) : "Erro ao buscar entrega.";

                    Swal.fire({
                        icon: 'warning',
                        title: 'Atenção',
                        text: message,
                        confirmButtonText: 'Tentar Novamente',
                        confirmButtonColor: 'var(--brand-primary)',
                        backdrop: `rgba(0,0,0,0.1)`
                    });

                    this.switchView('search');
                }
            },

            renderResult: function(data) {
                if (window.IconUtils && window.settings && window.settings.brand) {
                    const originKey = data.origin || data.operationMode || "MANUAL";
                    this.dom.displayIcon.innerHTML = window.IconUtils.getOriginIcon(window.settings.brand, originKey);
                }

                this.dom.displayCode.textContent = data.trackingCode;
                this.dom.displayReceiver.textContent = data.receiverName || "Não informado";

                this.dom.timelineList.innerHTML = '';

                if (!data.events || data.events.length === 0) {
                    this.dom.timelineList.innerHTML = '<p class="text-center text-muted py-3">Aguardando atualizações.</p>';
                    return;
                }

                const sortedEvents = data.events.sort((a, b) => new Date(b.eventTime) - new Date(a.eventTime));

                sortedEvents.forEach((event, index) => {
                    const isLatest = index === 0;
                    const dateObj = new Date(event.eventTime);
                    const dateStr = dateObj.toLocaleDateString('pt-BR');
                    const timeStr = dateObj.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });

                    const statusKey = event.reasonCode || event.code || event.deliveryStatus;

                    const statusConfig = (window.StatusMap && window.StatusMap.getStatus(statusKey))
                        ? window.StatusMap.getStatus(statusKey)
                        : { text: event.deliveryStatus, icon: 'ri-flag-line', description: '' };

                    const message = event.message || statusConfig.description || "";

                    const item = document.createElement('div');
                    item.className = `timeline-item ${isLatest ? 'active' : ''} fade-in`;
                    item.style.animationDelay = `${index * 0.1}s`;

                    item.innerHTML = `
                    <div class="timeline-dot ${statusConfig.cssClass}">
                        <i class="${statusConfig.icon}"></i>
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-date">${dateStr} às ${timeStr}</div>
                        <h6 class="timeline-title">${statusConfig.text}</h6>
                        ${message ? `<p class="timeline-desc mt-1">${message}</p>` : ''}
                    </div>
                `;
                    this.dom.timelineList.appendChild(item);
                });
            }
        };

        TrackingManager.init();
    });
</script>
</body>
</html>