<?php use App\Helpers\Helper; ?>
<section class="page-header">
  <div class="container">
    <h1 class="fw-700 mb-2"><?= Helper::e($content['contact_title'] ?? 'Contact Us') ?></h1>
    <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0"><li class="breadcrumb-item"><a href="<?= APP_URL ?>/">Home</a></li><li class="breadcrumb-item active">Contact</li></ol></nav>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row g-5">

      <!-- Contact Form -->
      <div class="col-lg-7">
        <h3 class="fw-700 mb-1">Send Us a Message</h3>
        <p class="text-muted mb-4"><?= Helper::e($content['contact_subtitle'] ?? 'We respond to all inquiries as soon as possible.') ?></p>

        <form method="POST" action="<?= APP_URL ?>/contact">
          <?= Helper::csrf() ?>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Full Name *</label>
              <input type="text" name="name" class="form-control" required placeholder="John Doe">
            </div>
            <div class="col-md-6">
              <label class="form-label">Phone Number *</label>
              <input type="tel" name="phone" class="form-control" required placeholder="+255 7XX XXX XXX">
            </div>
            <div class="col-12">
              <label class="form-label">Email Address</label>
              <input type="email" name="email" class="form-control" placeholder="john@example.com">
            </div>
            <div class="col-12">
              <label class="form-label">Subject *</label>
              <select name="subject" class="form-select" required>
                <option value="">— Select Subject —</option>
                <option value="Booking Inquiry">Booking Inquiry</option>
                <option value="Rent Information">Rent Information</option>
                <option value="Maintenance Issue">Maintenance Issue</option>
                <option value="Lease Information">Lease Information</option>
                <option value="General Inquiry">General Inquiry</option>
                <option value="Other">Other</option>
              </select>
            </div>
            <div class="col-12">
              <label class="form-label">Message *</label>
              <textarea name="message" class="form-control" rows="5" required placeholder="How can we help you?"></textarea>
            </div>
          </div>
          <button type="submit" class="btn btn-primary px-5 py-2 mt-4 fw-600">
            <i class="bi bi-send me-2"></i>Send Message
          </button>
        </form>
      </div>

      <!-- Contact Info -->
      <div class="col-lg-5">
        <h3 class="fw-700 mb-1">Get In Touch</h3>
        <p class="text-muted mb-4">Visit our office or reach us through any of the channels below.</p>

        <div class="d-flex flex-column gap-3 mb-4">
          <div class="d-flex gap-3 align-items-start">
            <div class="contact-icon-box"><i class="bi bi-geo-alt-fill text-primary fs-5"></i></div>
            <div>
              <div class="fw-700">Office Address</div>
              <div class="text-muted small">Masaki, Dar es Salaam, Tanzania</div>
            </div>
          </div>
          <div class="d-flex gap-3 align-items-start">
            <div class="contact-icon-box"><i class="bi bi-telephone-fill text-primary fs-5"></i></div>
            <div>
              <div class="fw-700">Phone / WhatsApp</div>
              <div class="text-muted small">+255 700 000 000</div>
              <div class="text-muted small">+255 711 000 000</div>
            </div>
          </div>
          <div class="d-flex gap-3 align-items-start">
            <div class="contact-icon-box"><i class="bi bi-envelope-fill text-primary fs-5"></i></div>
            <div>
              <div class="fw-700">Email</div>
              <div class="text-muted small">info@zabiburesidence.co.tz</div>
              <div class="text-muted small">support@zabiburesidence.co.tz</div>
            </div>
          </div>
          <div class="d-flex gap-3 align-items-start">
            <div class="contact-icon-box"><i class="bi bi-clock-fill text-primary fs-5"></i></div>
            <div>
              <div class="fw-700">Office Hours</div>
              <div class="text-muted small">Mon – Fri: 8:00 AM – 6:00 PM</div>
              <div class="text-muted small">Sat: 9:00 AM – 2:00 PM</div>
            </div>
          </div>
        </div>

        <!-- Social Links -->
        <div class="mb-4">
          <div class="fw-700 mb-2">Follow Us</div>
          <div class="d-flex gap-2">
            <a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-facebook me-1"></i>Facebook</a>
            <a href="#" class="btn btn-outline-info btn-sm"><i class="bi bi-twitter-x me-1"></i>Twitter</a>
            <a href="#" class="btn btn-outline-danger btn-sm"><i class="bi bi-instagram me-1"></i>Instagram</a>
          </div>
        </div>

        <!-- Map Placeholder -->
        <div class="rounded-3 overflow-hidden border" style="height:220px;background:#e9ecef;display:flex;align-items:center;justify-content:center">
          <div class="text-center text-muted">
            <i class="bi bi-map fs-1 d-block mb-2"></i>
            <span class="small">Masaki, Dar es Salaam</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
.contact-icon-box { width:40px;height:40px;background:#f0f6ff;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.page-header { background:linear-gradient(135deg,#1a3c5e 0%,#2d6a9f 100%);padding:60px 0;color:#fff; }
.page-header .breadcrumb-item a { color:rgba(255,255,255,0.75); }
.page-header .breadcrumb-item.active { color:#fff; }
.page-header .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,0.5); }
</style>
