<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tentang OKE Laundry</title>
  @include('partials.favicon')
  @include('partials.brand-fonts')
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    :root{
      --brand-deep:#1f7fb7;--brand-main:#3aa5e6;--brand-accent:#4BB8FA;--brand-soft:#7BCBF6;
      --text:#0F172A;--muted:#5B6B80;--line:#D9E6F2;--bg:#F4F9FE;--card:#FFFFFF;
      --shadow:0 14px 30px rgba(31,127,183,.10);
      font-family:'Plus Jakarta Sans',Inter,Segoe UI,Roboto,system-ui,sans-serif
    }
    *{box-sizing:border-box}
    body{margin:0;background:linear-gradient(180deg,#F4F9FE 0%,#E5F2FB 100%);color:var(--text)}
    .page-wrap{max-width:1100px;margin:0 auto;padding:24px}
    .screen{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
    .strip{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%),linear-gradient(90deg,var(--brand-deep),var(--brand-main),var(--brand-accent));color:#fff;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
    .strip a{color:#fff;text-decoration:none;font-weight:700;opacity:.95;font-size:14px}
    .strip a:hover{text-decoration:underline}
    .hero{padding:40px 28px;text-align:center;background:linear-gradient(180deg,rgba(31,127,183,.96),rgba(58,165,230,.92));color:#fff}
    .hero h1{margin:10px 0 6px;font-size:34px;letter-spacing:-0.02em}
    .hero p{margin:0 auto;max-width:560px;opacity:.95;line-height:1.6;font-size:15px}
    .body{padding:28px}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .info-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px}
    .info-card h3{margin:0 0 14px;font-size:18px;color:var(--brand-deep)}
    .info-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #EEF5FB}
    .info-row:last-child{border-bottom:none}
    .info-row .ic{width:38px;height:38px;flex:none;border-radius:11px;background:#E5F2FB;color:var(--brand-deep);display:flex;align-items:center;justify-content:center}
    .info-row .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .info-row .label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
    .info-row .value{font-weight:600;margin-top:2px;line-height:1.5}
    .info-row a.value{color:var(--brand-deep);text-decoration:none}
    .info-row a.value:hover{text-decoration:underline}
    #aboutMap{height:340px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#E5F2FB}
    .map-note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
    .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:12px;border:none;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
    .btn-primary{background:linear-gradient(135deg,var(--brand-main),var(--brand-accent));color:#fff;box-shadow:0 10px 20px rgba(75,184,250,.28)}
    .btn-wa{background:#25D366;color:#fff}
    .footer-note{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);text-align:center}
    @media (max-width:820px){.grid{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <div class="page-wrap">
    <section class="screen">
      <div class="strip">
        <div>@include('partials.brand-logo', ['size' => 26])</div>
        <a href="/">← Kembali ke Pelacakan</a>
      </div>

      <div class="hero">
        @include('partials.brand-logo', ['size' => 40])
        <h1>{{ $mitra['name'] }}</h1>
        <p>Layanan laundry cuci ekspres dengan antar-jemput. Pantau status pesanan Anda secara real-time melalui nomor resi, kapan saja dan di mana saja.</p>
      </div>

      <div class="body">
        <div class="grid">
          <div class="info-card">
            <h3>Informasi Kontak</h3>
            <div class="info-row">
              <span class="ic"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span>
              <div><div class="label">Alamat</div><div class="value">{{ $mitra['address'] ?: '-' }}</div></div>
            </div>
            <div class="info-row">
              <span class="ic"><svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span>
              <div><div class="label">Telepon / WhatsApp</div>
                @if ($mitra['phone'])
                  <a class="value" href="https://wa.me/{{ preg_replace('/^0/', '62', preg_replace('/[^0-9]/', '', $mitra['phone'])) }}" target="_blank" rel="noopener">{{ $mitra['phone'] }}</a>
                @else
                  <div class="value">-</div>
                @endif
              </div>
            </div>
            <div class="info-row">
              <span class="ic"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
              <div><div class="label">Jam Operasional</div><div class="value">{{ $mitra['hours'] ?: '-' }}</div></div>
            </div>
            <div class="info-row">
              <span class="ic"><svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l3-4 3 3 4-7"/></svg></span>
              <div><div class="label">Ongkir</div><div class="value">Gratis dalam radius {{ rtrim(rtrim(number_format($mitra['free_radius_km'],1,',','.'),'0'),',') }} km, selebihnya Rp {{ number_format($mitra['cost_per_km'],0,',','.') }}/km</div></div>
            </div>
          </div>

          <div class="info-card">
            <h3>Lokasi Kami</h3>
            <div id="aboutMap"></div>
            <div class="map-note">Zona biru menunjukkan radius gratis ongkir dari lokasi {{ $mitra['name'] }}.</div>
          </div>
        </div>

        <div class="cta">
          <a href="/" class="btn btn-primary">Lacak Pesanan</a>
          @if ($mitra['phone'])
            <a href="https://wa.me/{{ preg_replace('/^0/', '62', preg_replace('/[^0-9]/', '', $mitra['phone'])) }}" target="_blank" rel="noopener" class="btn btn-wa">Chat WhatsApp</a>
          @endif
        </div>

        <div class="footer-note">©{{ date('Y') }} {{ $mitra['name'] }} — Sistem Informasi Pelacakan dan Pengelolaan Pesanan Laundry Berbasis Web.</div>
      </div>
    </section>
  </div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    const lat = {{ $mitra['lat'] }}, lng = {{ $mitra['lng'] }}, radiusKm = {{ $mitra['free_radius_km'] }};
    const map = L.map('aboutMap').setView([lat, lng], 14);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OpenStreetMap' }).addTo(map);
    L.circle([lat, lng], { radius: (radiusKm || 2) * 1000, color: '#4BB8FA', fillColor: '#4BB8FA', fillOpacity: 0.12 }).addTo(map);
    L.marker([lat, lng]).addTo(map).bindPopup(@json($mitra['name'])).openPopup();
    setTimeout(() => map.invalidateSize(), 150);
  </script>
</body>
</html>
