{% extends "base.html" %}
{% block content %}
<h1 class="mm-section-title">About</h1>

<div class="row g-4">
  <div class="col-12 col-lg-6">
    <div class="mm-soft-card h-100">
      <h3 class="title">Our Story</h3>
      <p>We hand-pick fresh groceries daily and deliver across Toronto. Fair pricing, fast delivery, and friendly service.</p>
      <ul class="mm-why-list mt-3">
        <li><span class="mm-dot mm-dot--green"></span> Fresh products — picked daily</li>
        <li><span class="mm-dot mm-dot--orange"></span> Fast delivery in the city</li>
        <li><span class="mm-dot mm-dot--yellow"></span> Fair pricing in CAD</li>
      </ul>
    </div>
  </div>
  <div class="col-12 col-lg-6">
  <div class="mm-soft-card h-100">
    <h3 class="title">Where to find us</h3>

    <address class="text-muted small mb-3">
      <strong>{{ SITE_NAME|default:"MapleMart" }} Grocery</strong><br>
      222 thoms crescent, newmarket, on L3Y 1E1<br>
      Canada<br>
      Phone: +1 (647) 455‑1115
    </address>

    <!-- Map -->
    <div id="store-map" class="rounded" style="height:320px;"></div>

    {% comment %}
      Tip: Replace the fake address/phone above with your real info,
      or move them into Site settings if you want it dynamic.
    {% endcomment %}
  </div>
</div>
</div>
{% endblock %}
{% block scripts %}
  <!-- Leaflet (no API key needed) -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""
  />
  <script
    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""
  ></script>

  <script>
    // Toronto – near 123 King St W
    const lat = 43.6487, lng = -79.3837;
    const map = L.map('store-map', { scrollWheelZoom: false }).setView([lat, lng], 15);

    // OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // Marker + popup
    L.marker([lat, lng]).addTo(map)
      .bindPopup(`<b>{{ SITE_NAME|default:"MapleMart" }}</b><br>123 King St W, Toronto`)
      .openPopup();
  </script>
{% endblock %}