{% extends 'home/base.html' %}
{% load static %}
{% block title %}Contact Us – PEZAJOB{% endblock %}
{% block extra_css %}
<style>.contact-layout { display: grid; grid-template-columns: 1fr 480px; gap: 48px; align-items: start; }
    .contact-form-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 40px; }
    .contact-form-card h2 { font-size: 1.5rem; font-family: 'Quicksand', sans-serif; color: var(--primary); margin-bottom: 8px; }
    .contact-form-card p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 28px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 0.83rem; font-weight: 600; color: var(--primary); margin-bottom: 7px; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 16px; font-size: 0.9rem; font-family: inherit; color: var(--text); outline: none; transition: var(--transition); background: var(--white); }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(209,207,10,0.12); }
    .form-group textarea { resize: vertical; min-height: 130px; }
    .contact-info-card { background: var(--primary); border-radius: 20px; padding: 36px; color: var(--white); margin-bottom: 20px; }
    .contact-info-card h3 { font-size: 1.2rem; font-family: 'Quicksand', sans-serif; margin-bottom: 6px; }
    .contact-info-card p { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-bottom: 28px; }
    .contact-detail { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
    .contact-detail-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(209,207,10,0.15); display: flex; align-items: center; justify-content: center; color: var(--secondary); font-size: 1rem; flex-shrink: 0; }
    .contact-detail-text .label { font-size: 0.75rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
    .contact-detail-text .value { font-size: 0.9rem; font-weight: 600; }
    .contact-social { display: flex; gap: 10px; margin-top: 28px; }
    .contact-social a { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: var(--transition); }
    .contact-social a:hover { background: var(--secondary); border-color: var(--secondary); color: var(--primary); }
    .map-placeholder { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--text-muted); }
    .faq-mini { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 32px; }
    .faq-mini h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
    .faq-mi { padding: 14px 0; border-bottom: 1px solid var(--bg); }
    .faq-mi:last-child { border-bottom: none; }
    .faq-mi h4 { font-size: 0.88rem; font-weight: 600; color: var(--primary); margin-bottom: 5px; }
    .faq-mi p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.65; }
    @media(max-width:900px){.contact-layout{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}</style>
{% endblock %}
{% block content %}
<!-- PAGE HEADER -->
<section class="page-header">
  <div class="container">
    <div class="page-header-content">
      <h1>Get In Touch</h1>
      <p>We'd love to hear from you. Our team is here to help.</p>
      <div class="breadcrumb">
        <a href="{% url 'home:index' %}">Home</a>
        <i class="fas fa-chevron-right"></i>
        <span>Contact</span>
      </div>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section class="section" style="background:var(--bg)">
  <div class="container">
    <div class="contact-layout">

      <!-- FORM -->
      <div class="contact-form-card reveal-left">
        <h2>Send Us a Message</h2>
        <p>Fill in the form below and we'll get back to you within 24 hours.</p>
        <form class="validated-form" onsubmit="handleContactForm(event)">
          <div class="form-row">
            <div class="form-group">
              <label>First Name *</label>
              <input type="text" placeholder="Chanda" required />
            </div>
            <div class="form-group">
              <label>Last Name *</label>
              <input type="text" placeholder="Mwila" required />
            </div>
          </div>
          <div class="form-group">
            <label>Email Address *</label>
            <input type="email" placeholder="you@email.zm" required />
          </div>
          <div class="form-group">
            <label>Phone Number</label>
            <input type="tel" placeholder="+260 97 000 0000" />
          </div>
          <div class="form-group">
            <label>I am a *</label>
            <select required>
              <option value="">Select your role</option>
              <option>Job Seeker</option>
              <option>Employer / Company</option>
              <option>Recruiter</option>
              <option>Media / Press</option>
              <option>Other</option>
            </select>
          </div>
          <div class="form-group">
            <label>Subject *</label>
            <select required>
              <option value="">Select a subject</option>
              <option>General Inquiry</option>
              <option>Subscription / Billing</option>
              <option>Technical Support</option>
              <option>Partnership</option>
              <option>Advertise with PEZAJOB</option>
              <option>Report a Problem</option>
              <option>Media Inquiry</option>
            </select>
          </div>
          <div class="form-group">
            <label>Message *</label>
            <textarea placeholder="Tell us how we can help you…" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary" style="width:100%;padding:14px;font-size:0.95rem"><i class="fas fa-paper-plane"></i> Send Message</button>
        </form>
      </div>

      <!-- INFO -->
      <div>
        <div class="contact-info-card reveal-right">
          <h3>Contact Information</h3>
          <p>Reach out to us through any of these channels and we'll respond promptly.</p>
          <div class="contact-detail">
            <div class="contact-detail-icon"><i class="fas fa-map-marker-alt"></i></div>
            <div class="contact-detail-text">
              <div class="label">Office Address</div>
              <div class="value">Plot 1234 Cairo Road<br>Lusaka CBD, Zambia</div>
            </div>
          </div>
          <div class="contact-detail">
            <div class="contact-detail-icon"><i class="fas fa-phone"></i></div>
            <div class="contact-detail-text">
              <div class="label">Phone</div>
              <div class="value">+260 97 000 0000</div>
            </div>
          </div>
          <div class="contact-detail">
            <div class="contact-detail-icon"><i class="fas fa-envelope"></i></div>
            <div class="contact-detail-text">
              <div class="label">Email</div>
              <div class="value">hello@pezajob.zm</div>
            </div>
          </div>
          <div class="contact-detail">
            <div class="contact-detail-icon"><i class="fas fa-clock"></i></div>
            <div class="contact-detail-text">
              <div class="label">Business Hours</div>
              <div class="value">Mon–Fri: 8:00 AM – 5:00 PM<br>Sat: 9:00 AM – 1:00 PM</div>
            </div>
          </div>
          <div class="contact-social">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-whatsapp"></i></a>
          </div>
        </div>

        <div class="map-placeholder reveal">
          <i class="fas fa-map-marked-alt" style="font-size:2rem;color:var(--secondary)"></i>
          <span style="font-size:0.88rem;font-weight:600;color:var(--primary)">PEZAJOB Headquarters</span>
          <span style="font-size:0.78rem">Cairo Road, Lusaka CBD, Zambia</span>
        </div>

        <div class="faq-mini reveal">
          <h3>Common Questions</h3>
          <div class="faq-mi">
            <h4>How do I report a fake job?</h4>
            <p>Use the "Report" button on any job listing, or email us at report@pezajob.zm. We investigate all reports within 48 hours.</p>
          </div>
          <div class="faq-mi">
            <h4>How do I get an invoice for my subscription?</h4>
            <p>Invoices are automatically emailed after each payment. You can also download them from your Subscription dashboard.</p>
          </div>
          <div class="faq-mi">
            <h4>Do you offer bulk hiring solutions?</h4>
            <p>Yes! Contact our Enterprise sales team at enterprise@pezajob.zm for custom solutions tailored to large-scale hiring needs.</p>
          </div>
        </div>
      </div>

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



<button class="scroll-top" id="scrollTop"><i class="fas fa-arrow-up"></i></button>
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/app.js' %}"></script>
<script>
function handleContactForm(e){
  e.preventDefault();
  showToast('Message sent! We\'ll respond within 24 hours.','success');
  e.target.reset();
}
</script>
<script src="{% static 'js/podcast-player.js' %}"></script>
<script src="{% static 'js/spa-nav.js' %}" defer></script>
{% endblock %}