<?php
/**
 * Public — Digital Order View
 * Same design as demo-print.html, mobile-first + responsive desktop.
 */
require_once __DIR__ . '/db.php';

$token = $_GET['token'] ?? '';
if (!$token) {
    http_response_code(400);
    die('Token não informado');
}

$order = getOrderByToken($token);
if (!$order) {
    http_response_code(404);
    die('Ordem não encontrada');
}

$items = getOrderItems((int)$order['id']);
$photos = getOrderPhotos((int)$order['id']);

$parts = array_filter($items, fn($i) => $i['type'] === 'part');
$labors = array_filter($items, fn($i) => $i['type'] === 'labor');

$waNum = $order['whatsapp'] ?: APP_WHATSAPP;
$waMsg = $order['whatsapp_message'] ?: ('Olá! Gostaria de aprovar o orçamento #' . ($order['order_number'] ?: $order['id']) . ' para meu ' . $order['vehicle_name']);
$waUrl = 'https://wa.me/' . $waNum . '?text=' . rawurlencode($waMsg);

date_default_timezone_set('America/Sao_Paulo');
$created = date('d M Y', strtotime($order['created_at']));
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?= htmlspecialchars(APP_NAME) ?> — Orçamento #<?= htmlspecialchars($order['order_number'] ?: $order['id']) ?></title>

    <?php
    // OG tags — preview rico no WhatsApp
    $ogUrl = SITE_URL . '/ordem.php?token=' . rawurlencode($token);
    $ogImage = SITE_URL . '/og-image.php?token=' . rawurlencode($token);
    $ogDesc = 'Orçamento #' . ($order['order_number'] ?: $order['id']) . ' — ' . $order['vehicle_name'] . ' · ' . APP_NAME;
    ?>
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<?= htmlspecialchars($ogUrl) ?>" />
    <meta property="og:title" content="<?= htmlspecialchars(APP_NAME) ?> · Orçamento #<?= htmlspecialchars($order['order_number'] ?: $order['id']) ?>" />
    <meta property="og:description" content="<?= htmlspecialchars($ogDesc) ?>" />
    <meta property="og:image" content="<?= htmlspecialchars($ogImage) ?>" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="<?= htmlspecialchars(APP_NAME) ?>" />
    <meta property="og:locale" content="pt_BR" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="<?= htmlspecialchars(APP_NAME) ?> · Orçamento #<?= htmlspecialchars($order['order_number'] ?: $order['id']) ?>" />
    <meta name="twitter:description" content="<?= htmlspecialchars($ogDesc) ?>" />
    <meta name="twitter:image" content="<?= htmlspecialchars($ogImage) ?>" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
    <style>
        * { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
        body { background: #f3f4f6; }

        /* Responsive container: mobile-first, desktop-friendly */
        .order-container {
            max-width: 100%;
            margin: 0 auto;
            background: #fff;
            min-height: 100vh;
            box-shadow: 0 0 40px -12px rgba(0,0,0,0.15);
        }
        @media (min-width: 480px) {
            .order-container { max-width: 440px; border-radius: 0; }
        }
        @media (min-width: 1024px) {
            body { padding: 2rem 1rem; background: #e5e7eb; }
            .order-container {
                max-width: 800px;
                border-radius: 1.5rem;
                min-height: auto;
                box-shadow: 0 20px 60px -16px rgba(0,0,0,0.2);
            }
        }

        .photo-card {
            aspect-ratio: 4 / 3;
            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .photo-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
        }
        .photo-card img { z-index: 1; }

        .whatsapp-pulse {
            animation: pulse-glow 2s ease-in-out infinite;
        }
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
            50% { box-shadow: 0 0 0 16px rgba(34, 197, 94, 0); }
        }

        @media print {
            body { background: white; padding: 0; }
            .order-container { max-width: 100%; box-shadow: none; border-radius: 0; min-height: auto; }
            .no-print { display: none !important; }
            .print-break { page-break-inside: avoid; }
        }

        tbody tr:nth-child(even) { background: #f8fafc; }
        .badge-glow { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15); }

        /* Desktop table layout */
        @media (min-width: 1024px) {
            .desktop-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
            }
        }
    </style>
</head>
<body class="antialiased">

    <!-- ===== MAIN CONTAINER ===== -->
    <div class="order-container">

        <!-- ===== HEADER ===== -->
        <header class="bg-gradient-to-br from-[#0f172a] to-[#1e293b] text-white px-6 pt-6 pb-8 rounded-b-[2rem] print-break">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-11 h-11 bg-white/10 backdrop-blur rounded-xl flex items-center justify-center ring-1 ring-white/20 p-1.5">
                    <img src="autoflex.webp" alt="<?= htmlspecialchars(APP_NAME) ?>" class="w-full h-full object-contain" />
                </div>
                <div>
                    <h1 class="text-xl font-bold tracking-tight"><?= htmlspecialchars(APP_NAME) ?></h1>
                    <p class="text-xs text-blue-300/80 font-medium -mt-0.5">Orçamento · Proposta Técnica</p>
                </div>
            </div>

            <div class="flex justify-between items-end mt-4">
                <div>
                    <p class="text-[0.65rem] uppercase tracking-widest text-blue-300/60 font-semibold">Orçamento</p>
                    <p class="text-lg font-bold tracking-tight">#<span class="tabular-nums"><?= htmlspecialchars($order['order_number'] ?: $order['id']) ?></span></p>
                </div>
                <div class="text-right">
                    <p class="text-[0.65rem] uppercase tracking-widest text-blue-300/60 font-semibold">Data</p>
                    <p class="text-sm font-medium text-blue-100"><?= htmlspecialchars($created) ?></p>
                </div>
            </div>
        </header>

        <!-- ===== VEÍCULO ===== -->
        <section class="mx-5 -mt-5 relative z-10 print-break">
            <div class="bg-white rounded-2xl shadow-[0_4px_20px_-6px_rgba(0,0,0,0.12)] p-5 border border-gray-100/80">
                <div class="flex items-start gap-4">
                    <div class="w-11 h-11 bg-blue-50 rounded-xl flex items-center justify-center shrink-0">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 17h14M5 17a2 2 0 01-2-2V9a2 2 0 012-2h1l2-3h8l2 3h1a2 2 0 012 2v6a2 2 0 01-2 2M5 17a2 2 0 002 2h10a2 2 0 002-2" />
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-[0.65rem] uppercase tracking-widest text-gray-400 font-semibold">Veículo</p>
                        <h2 class="text-lg font-bold text-gray-900 truncate"><?= htmlspecialchars($order['vehicle_name'] ?: 'Não informado') ?></h2>
                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1.5 text-sm">
                            <?php if ($order['vehicle_model']): ?>
                            <span class="inline-flex items-center gap-1.5 text-gray-500">
                                <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                <?= htmlspecialchars($order['vehicle_model']) ?>
                            </span>
                            <?php endif; ?>
                            <?php if ($order['vehicle_plate']): ?>
                            <span class="inline-flex items-center gap-1.5 text-gray-500">
                                <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                <span class="font-semibold text-gray-800 tracking-wider"><?= htmlspecialchars($order['vehicle_plate']) ?></span>
                            </span>
                            <?php endif; ?>
                            <?php if ($order['vehicle_city']): ?>
                            <span class="inline-flex items-center gap-1.5 text-gray-500">
                                <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                <?= htmlspecialchars($order['vehicle_city']) ?>
                            </span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ===== DIAGNÓSTICO TÉCNICO ===== -->
        <?php if ($order['diagnosis_title'] || $order['diagnosis_desc'] || !empty($photos)): ?>
        <section class="mt-7 px-5 print-break">
            <div class="flex items-center gap-2.5 mb-4">
                <div class="w-1 h-6 bg-blue-600 rounded-full"></div>
                <h2 class="text-base font-bold text-gray-900 tracking-tight">Diagnóstico Técnico</h2>
                <?php if ($order['diagnosis_verified']): ?>
                <span class="ml-auto text-[0.6rem] uppercase tracking-widest bg-amber-50 text-amber-700 font-semibold px-2.5 py-1 rounded-full border border-amber-200/60 badge-glow">Verificado</span>
                <?php endif; ?>
            </div>

            <?php if (!empty($photos)): ?>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                <?php foreach ($photos as $p): ?>
                <div class="photo-card">
                    <img src="uploads/<?= htmlspecialchars($p['filename']) ?>" alt="<?= htmlspecialchars($p['label']) ?>" loading="lazy" />
                    <?php if ($p['label']): ?>
                    <span class="absolute bottom-2 left-2 z-10 bg-black/50 backdrop-blur text-[0.5rem] font-semibold uppercase tracking-wider text-white px-2 py-0.5 rounded-md"><?= htmlspecialchars($p['label']) ?></span>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>

            <?php if ($order['diagnosis_desc']): ?>
            <div class="mt-3.5 bg-gradient-to-br from-blue-50 to-indigo-50/50 border border-blue-100/70 rounded-xl p-4">
                <div class="flex gap-3">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center shrink-0 mt-0.5">
                        <svg class="w-4 h-4 text-blue-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                        </svg>
                    </div>
                    <div>
                        <?php if ($order['diagnosis_title']): ?>
                        <p class="text-sm font-bold text-gray-900"><?= htmlspecialchars($order['diagnosis_title']) ?></p>
                        <?php endif; ?>
                        <p class="text-xs text-gray-600 mt-1 leading-relaxed"><?= nl2br(htmlspecialchars($order['diagnosis_desc'])) ?></p>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- Scroll hint (mobile) -->
            <div class="flex items-center justify-center mt-4 no-print">
                <svg class="w-4 h-4 text-gray-400 animate-bounce" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
            </div>
        </section>
        <?php endif; ?>

        <!-- ===== ORÇAMENTO ===== -->
        <?php if (!empty($parts) || !empty($labors)): ?>
        <section class="mt-6 px-5 print-break">
            <div class="flex items-center gap-2.5 mb-4">
                <div class="w-1 h-6 bg-emerald-600 rounded-full"></div>
                <h2 class="text-base font-bold text-gray-900 tracking-tight">Detalhamento do Orçamento</h2>
            </div>

            <div class="bg-white rounded-2xl border border-gray-200/80 overflow-hidden shadow-[0_2px_12px_-6px_rgba(0,0,0,0.08)]">
                <!-- Table header -->
                <div class="grid grid-cols-[1fr_auto_auto] gap-0 text-[0.6rem] uppercase tracking-widest font-bold text-gray-400 bg-gray-50 border-b border-gray-100">
                    <div class="px-4 py-2.5">Item / Descrição</div>
                    <div class="px-4 py-2.5 text-right">Qtd</div>
                    <div class="px-4 py-2.5 text-right min-w-[90px]">Valor</div>
                </div>

                <?php if (!empty($parts)): ?>
                <!-- Parts header -->
                <div class="px-4 py-2.5 bg-blue-50/60 border-b border-gray-100">
                    <span class="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-widest text-blue-700">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10" />
                        </svg>
                        Peças
                    </span>
                </div>

                <table class="w-full text-sm">
                    <tbody>
                        <?php foreach ($parts as $p): ?>
                        <tr>
                            <td class="px-4 py-3 text-gray-800 font-medium">
                                <?= htmlspecialchars($p['name']) ?>
                                <?php if ($p['code'] || $p['origin']): ?>
                                <span class="block text-[0.6rem] text-gray-400 font-normal mt-0.5">
                                    <?= $p['code'] ? 'Cód. ' . htmlspecialchars($p['code']) : '' ?>
                                    <?= ($p['code'] && $p['origin']) ? ' · ' : '' ?>
                                    <?= $p['origin'] ? 'Origem: ' . htmlspecialchars($p['origin']) : '' ?>
                                </span>
                                <?php endif; ?>
                            </td>
                            <td class="px-4 py-3 text-gray-600 text-right tabular-nums"><?= (float)$p['quantity'] ?></td>
                            <td class="px-4 py-3 text-gray-900 font-semibold text-right tabular-nums">R$ <?= number_format((float)$p['price'], 2, ',', '.') ?></td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <?php endif; ?>

                <?php if (!empty($labors)): ?>
                <!-- Labor header -->
                <div class="px-4 py-2.5 bg-amber-50/60 border-y border-gray-100">
                    <span class="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-widest text-amber-700">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        </svg>
                        Mão de Obra
                    </span>
                </div>

                <table class="w-full text-sm">
                    <tbody>
                        <?php foreach ($labors as $l): ?>
                        <tr>
                            <td class="px-4 py-3 text-gray-800 font-medium">
                                <?= htmlspecialchars($l['name']) ?>
                                <?php if ($l['details']): ?>
                                <span class="block text-[0.6rem] text-gray-400 font-normal mt-0.5"><?= htmlspecialchars($l['details']) ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="px-4 py-3 text-gray-600 text-right tabular-nums">—</td>
                            <td class="px-4 py-3 text-gray-900 font-semibold text-right tabular-nums">R$ <?= number_format((float)$l['price'], 2, ',', '.') ?></td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <?php endif; ?>

                <!-- Total -->
                <div class="border-t-2 border-gray-300 bg-gray-50 px-4 py-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-[0.6rem] uppercase tracking-widest text-gray-500 font-semibold">Valor Total</p>
                            <p class="text-[0.6rem] text-gray-400">Peças + Mão de obra</p>
                        </div>
                        <div class="text-right">
                            <span class="text-2xl font-extrabold text-gray-900 tracking-tight">R$ <?= number_format((float)$order['total'], 2, ',', '.') ?></span>
                            <?php if ($order['payment_info']): ?>
                            <span class="block text-[0.55rem] text-emerald-600 font-semibold mt-0.5"><?= htmlspecialchars($order['payment_info']) ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php if ((float)$order['total'] > 0): ?>
                    <div class="mt-3 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                        <?php $partsPct = (float)$order['total'] > 0 ? round(((float)$order['parts_total'] / (float)$order['total']) * 100) : 0; ?>
                        <div class="h-full bg-gradient-to-r from-blue-500 to-emerald-400 rounded-full" style="width: <?= $partsPct ?>%"></div>
                    </div>
                    <div class="flex justify-between text-[0.5rem] text-gray-400 mt-1">
                        <span>Peças: R$ <?= number_format((float)$order['parts_total'], 2, ',', '.') ?></span>
                        <span>Mão de obra: R$ <?= number_format((float)$order['labor_total'], 2, ',', '.') ?></span>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </section>
        <?php endif; ?>

        <!-- ===== CONDIÇÕES ===== -->
        <section class="mt-6 px-5 print-break">
            <div class="bg-gray-50 rounded-2xl border border-gray-200/70 p-4">
                <h3 class="text-[0.6rem] uppercase tracking-widest font-bold text-gray-400 mb-2.5">Condições da Proposta</h3>
                <ul class="space-y-1.5">
                    <li class="flex items-start gap-2 text-xs text-gray-600">
                        <svg class="w-3.5 h-3.5 text-emerald-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                        Validade da proposta: <strong><?= (int)$order['validity_days'] ?> dias</strong>
                    </li>
                    <li class="flex items-start gap-2 text-xs text-gray-600">
                        <svg class="w-3.5 h-3.5 text-emerald-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                        Garantia dos serviços: <strong><?= (int)$order['warranty_days'] ?> dias</strong>
                    </li>
                    <li class="flex items-start gap-2 text-xs text-gray-600">
                        <svg class="w-3.5 h-3.5 text-emerald-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
                        Peças originais / qualidade certificada
                    </li>
                </ul>
            </div>
        </section>

        <!-- ===== WHATSAPP BOTÃO ===== -->
        <div class="px-5 mt-7 mb-8 no-print">
            <a href="<?= htmlspecialchars($waUrl) ?>" target="_blank" rel="noopener noreferrer" class="whatsapp-pulse group relative flex items-center justify-center gap-3 w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white font-bold text-base py-4 px-6 rounded-2xl transition-all duration-200 active:scale-[0.98]">
                <svg class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                Aprovar Orçamento via WhatsApp
                <svg class="w-5 h-5 shrink-0 transition-transform duration-200 group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                </svg>
            </a>
            <p class="text-[0.55rem] text-gray-400 text-center mt-2.5">Clique no botão acima para aprovar via WhatsApp</p>
        </div>

        <!-- ===== FOOTER ===== -->
        <footer class="pb-6 px-5 print-break">
            <div class="border-t border-gray-100 pt-4 flex flex-wrap items-center justify-between gap-2 text-[0.55rem] text-gray-400">
                <span>© 2026 <?= htmlspecialchars(APP_NAME) ?></span>
                <span class="inline-flex items-center gap-1.5">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
                    <?= htmlspecialchars(APP_ADDRESS) ?>
                </span>
                <span><?= htmlspecialchars(APP_CNPJ) ?></span>
            </div>
        </footer>

    </div>
    <!-- ===== END CONTAINER ===== -->

</body>
</html>
