<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Shipped</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 0; background: #f5f5f5; color: #333; }
.wrapper { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.header { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; padding: 32px 40px; text-align: center; }
.header h1 { margin: 0; font-size: 26px; font-weight: 700; }
.body { padding: 32px 40px; }
.tracking-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 20px; margin: 24px 0; text-align: center; }
.tracking-box .awb { font-size: 20px; font-weight: 700; color: #1d4ed8; letter-spacing: 2px; margin: 8px 0; }
.btn { display: inline-block; background: #2563eb; color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 15px; }
.footer { background: #f9fafb; padding: 20px 40px; text-align: center; font-size: 12px; color: #9ca3af; border-top: 1px solid #f0f0f0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div style="font-size:36px;margin-bottom:8px;">🚚</div>
<h1>Your Order is on the Way!</h1>
<p>Order #{{ $order->order_number }}</p>
</div>
<div class="body">
<p>Hi {{ $order->user?->name ?? $order->guest_email ?? 'Valued Customer' }},</p>
<p>Great news! Your order has been shipped and is on its way to you.</p>
@if($order->awb_number || $order->tracking_number)
<div class="tracking-box">
<p style="margin:0;color:#6b7280;font-size:14px;">Tracking Number</p>
<p class="awb">{{ $order->awb_number ?? $order->tracking_number }}</p>
@if($order->courier_name)<p style="margin:0;font-size:14px;color:#374151;">Courier: <strong>{{ $order->courier_name }}</strong></p>@endif
@if($order->tracking_url)
<a href="{{ $order->tracking_url }}" class="btn" style="margin-top:16px;display:inline-block;">Track Package</a>
@endif
</div>
@endif
<div style="text-align:center;margin:24px 0;">
<a href="{{ route('orders.track', $order->uuid) }}" class="btn">View Order</a>
</div>
<p style="font-size:13px;color:#888;">
If you have any questions about your shipment, please contact us.
</p>
</div>
<div class="footer">
<p>© {{ date('Y') }} {{ config('app.name') }}. All rights reserved.</p>
</div>
</div>
</body>
</html>