{% extends 'shop/base.html' %}
{% block title %}Cargo & Shipment Info - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
  <!-- 🌐 Header -->
  <div class="text-center mb-5">
    <h1 class="fw-bold display-5 text-success">Cargo & Shipment</h1>
    <p class="lead">Reliable delivery. Local & International. Powered by Nana Tradings.</p>
  </div>

  <!-- 📦 Overview -->
  <section class="info-card shadow-sm p-4 mb-4 rounded-4">
    <h4 class="section-title"><i class="fas fa-truck-moving me-2 text-orange"></i>What We Offer</h4>
    <p>
      We ensure safe, timely, and trackable delivery of your products—both locally across Afghanistan and internationally through our trusted logistics network.
    </p>
  </section>

  <!-- 🌍 Service Coverage -->
  <section class="info-card shadow-sm p-4 mb-4 rounded-4">
    <h4 class="section-title"><i class="fas fa-globe-asia me-2 text-orange"></i>Service Coverage</h4>
    <p>
      Our cargo services span all major Afghan cities and selected international destinations. Special arrangements can be made for bulk shipments.
    </p>
  </section>

  <!-- 🔄 Shipment Flow -->
  <section class="info-card shadow-sm p-4 mb-4 rounded-4">
    <h4 class="section-title"><i class="fas fa-stream me-2 text-orange"></i>How It Works</h4>
    <ol class="custom-steps">
      <li>Place your order through our website or support team.</li>
      <li>Your package is prepared and secured by our staff.</li>
      <li>We dispatch using fast, reliable courier partners.</li>
      <li>You receive your items within the estimated timeframe.</li>
    </ol>
  </section>

  <!-- 🔍 Tracking -->
  <section class="info-card shadow-sm p-4 mb-4 rounded-4">
    <h4 class="section-title"><i class="fas fa-search-location me-2 text-orange"></i>Shipment Tracking</h4>
    <p>
      All shipments come with a tracking number. You’ll receive updates via email or you can contact us to check the status.
    </p>
  </section>

  <!-- ⏱️ Timeframe -->
  <section class="info-card shadow-sm p-4 mb-4 rounded-4">
    <h4 class="section-title"><i class="fas fa-clock me-2 text-orange"></i>Delivery Timeline</h4>
    <p>
      <strong>Local:</strong> 2–4 business days<br>
      <strong>International:</strong> 7–15 business days
    </p>
  </section>

  <!-- 📞 Help -->
  <section class="info-card shadow-sm p-4 mb-4 rounded-4">
    <h4 class="section-title"><i class="fas fa-headset me-2 text-orange"></i>Need Help?</h4>
    <p>
      For any questions about your shipment or special requests, reach out to our support team:
      <br><strong>Email:</strong> <a href="mailto:info@nanatradings.com">info@nanatradings.com</a>
      <br><strong>Phone:</strong> <a href="tel:+93701900324">+93 701900324</a>
    </p>
  </section>
</div>

<!-- 🎨 Styling -->
<style>
  .info-card {
    background-color: white;
    border-left: 4px solid #148818;
    transition: all 0.3s ease-in-out;
  }

  .section-title {
    color: #148818;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .text-orange {
    color: #ff8c00;
  }

  .custom-steps {
    padding-left: 20px;
    margin-bottom: 0;
  }

  .custom-steps li {
    margin-bottom: 10px;
  }

  /* 🌙 Dark Mode Support */
  .dark-mode .info-card {
    background-color: #2b2b2b;
    border-left-color: #00e676;
    color: #ddd;
  }

  .dark-mode .section-title {
    color: #00e676;
  }

  .dark-mode a {
    color: #ffb74d;
  }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .section-title {
      font-size: 1.25rem;
    }

    .custom-steps li {
      font-size: 0.95rem;
    }
  }
</style>
{% endblock %}