<?php if (!defined('STORE_ROOT')) { http_response_code(403); exit; } ?>
<div class="page-track">
<div class="page-banner sf-page-banner">
<img src="/uploads/banners/store.png" alt="" class="sf-page-banner-bg">
<div class="sf-page-banner-content">
<div class="page-banner-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
</div>
<div class="page-banner-text">
<h2><?= $L('track_title', 'Track Order') ?></h2>
<p><?= $L('track_subtitle', 'View our fulfillment process, shipping options, and track your order status.') ?></p>
</div>
</div>
</div>
<div class="track-form-section">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:12px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<h3><?= $L('track_form_title', 'Track Your Order') ?></h3>
<p><?= $L('track_form_desc', 'Enter the reference provided at payment confirmation or in your customer portal.') ?></p>
<div class="track-form-row">
<input type="text" id="track-ref" class="form-input" placeholder="<?= $L('track_form_placeholder', 'Track-XXXXXXXXXX') ?>">
<button class="btn btn-primary" data-action="track-order">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<?= $L('track_form_btn', 'Track Order') ?>
</button>
</div>
<div id="track-result"></div>
</div>
<div class="track-card">
<div class="track-grid">
<div class="track-grid-col">
<div class="track-section-title">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
<?= $L('track_fulfillment_title', 'Fulfillment Process') ?>
</div>
<div class="track-steps">
<div class="track-step">
<div class="track-step-num">1</div>
<div class="track-step-text">
<h4><?= $L('track_step1_title', 'Order Placed') ?></h4>
<p><?= $L('track_step1_desc', 'Your order enters our queue immediately upon payment confirmation.') ?></p>
</div>
<div class="track-step-line"></div>
</div>
<div class="track-step">
<div class="track-step-num">2</div>
<div class="track-step-text">
<h4><?= $L('track_step2_title', 'Packaging') ?></h4>
<p><?= $L('track_step2_desc', 'Items are carefully prepared and quality checked.') ?></p>
</div>
<div class="track-step-line"></div>
</div>
<div class="track-step">
<div class="track-step-num">3</div>
<div class="track-step-text">
<h4><?= $L('track_step3_title', 'Dispatched') ?></h4>
<p><?= $L('track_step3_desc', 'Your package enters the delivery network.') ?></p>
</div>
<div class="track-step-line"></div>
</div>
<div class="track-step">
<div class="track-step-num">4</div>
<div class="track-step-text">
<h4><?= $L('track_step4_title', 'Delivered') ?></h4>
<p><?= $L('track_step4_desc', 'Package arrives at your door.') ?></p>
</div>
</div>
</div>
<div class="track-timeline-note">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<span><?= $L('track_timeline_note', 'Typical processing: Same day to 1 business day from payment confirmation.') ?></span>
</div>
</div>
<div class="track-grid-col">
<div class="track-section-title">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
<?= $L('track_shipping_title', 'Shipping Options') ?>
</div>
<div class="ship-option">
<div class="ship-option-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
</div>
<div class="ship-option-info">
<h4><?= $L('track_standard_title', 'Standard Shipping') ?></h4>
<p><?= $L('track_standard_desc', '3-7 business days. No external tracking.') ?></p>
</div>
<div class="ship-price free"><?= $L('track_standard_price', 'FREE') ?></div>
</div>
<div class="ship-option ship-option-express">
<div class="ship-option-icon ship-icon-express">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</div>
<div class="ship-option-info">
<h4><?= $L('track_express_title', 'Express Shipping') ?></h4>
<p><?= $L('track_express_desc', '1-3 business days. Priority handling.') ?></p>
</div>
<div class="ship-price"><?= $L('track_express_price', '$20.00') ?></div>
</div>
<div class="track-credit-note">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span><?= $L('track_credit_note', 'After your first successful fulfillment, leave an honest review to receive $5.00 off your next order. Credits stack with each completed review.') ?></span>
</div>
</div>
</div>
</div>
</div>
<script src="/assets/js/track-events.js"></script>