<?php
$page_title = 'Contact Us';
$meta_description = 'Get in touch with CVN Managed Services. Call, email, or send us a message. We\'re here to help with all your managed IT needs in London, Ontario.';
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../includes/header.php';
?>

<section class="page-hero" style="position:relative;overflow:hidden;min-height:320px;">
  <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1400&q=80&fit=crop" 
       alt="Contact CVN Managed Services" 
       style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;"
       loading="eager">
  <div style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,20,70,0.88),rgba(0,70,168,0.75));"></div>
  <div class="container" style="position:relative;z-index:1;">
    <div class="section-label">Get In Touch</div>
    <h1>Contact Us</h1>
    <p>Have a question? Want to get a quote? We'd love to hear from you. Reach out any time!</p>
  </div>
</section>

<section class="content-section">
  <div class="container">
    <div class="contact-grid">

      <!-- Info -->
      <div>
        <div class="contact-info-card">
          <h3>Contact Information</h3>
          <ul class="contact-info-list">
            <li>
              <span class="ci-icon">📞</span>
              <div>
                <strong>Phone (Toll-Free)</strong>
                <a href="tel:+18446211549"><?= SITE_PHONE ?></a>
              </div>
            </li>
            <li>
              <span class="ci-icon">📞</span>
              <div>
                <strong>Phone (Local)</strong>
                <a href="tel:+12266416838"><?= SITE_PHONE_ALT ?></a>
              </div>
            </li>
            <li>
              <span class="ci-icon">✉️</span>
              <div>
                <strong>Email</strong>
                <a href="mailto:<?= SITE_EMAIL ?>"><?= SITE_EMAIL ?></a>
              </div>
            </li>
            <li>
              <span class="ci-icon">📍</span>
              <div>
                <strong>Address</strong>
                <span><?= SITE_ADDRESS ?></span>
              </div>
            </li>
            <li>
              <span class="ci-icon">🕐</span>
              <div>
                <strong>Business Hours</strong>
                <span>Monday–Friday: 9:00 AM – 6:00 PM EST</span>
              </div>
            </li>
          </ul>
        </div>

        <div class="contact-info-card mt-3" style="margin-top:20px;">
          <h3>Quick Links</h3>
          <div style="display:flex;flex-direction:column;gap:10px;margin-top:12px;">
            <a href="<?= HELPDESK_URL ?>" target="_blank" rel="noopener" class="btn btn-outline" style="width:100%;justify-content:center;">🎫 Submit a Support Ticket</a>
            <a href="<?= REMOTE_SUPPORT ?>" target="_blank" rel="noopener" class="btn btn-outline" style="width:100%;justify-content:center;">🖱️ Start Remote Session</a>
            <a href="<?= PASSWORD_VAULT ?>" target="_blank" rel="noopener" class="btn btn-outline" style="width:100%;justify-content:center;">🔐 Access Password Vault</a>
          </div>
        </div>
      </div>

      <!-- Form -->
      <div class="contact-form-card">
        <h3 style="margin-bottom:24px;">Send Us a Message</h3>
        <form id="contact-form" novalidate data-action="/api/contact.php">
          <div class="form-row">
            <div class="form-group">
              <label for="first_name">First Name *</label>
              <input type="text" id="first_name" name="first_name" required placeholder="John" autocomplete="given-name">
            </div>
            <div class="form-group">
              <label for="last_name">Last Name *</label>
              <input type="text" id="last_name" name="last_name" required placeholder="Smith" autocomplete="family-name">
            </div>
          </div>
          <div class="form-group">
            <label for="email">Email Address *</label>
            <input type="email" id="email" name="email" required placeholder="john@company.com" autocomplete="email">
          </div>
          <div class="form-group">
            <label for="phone">Phone Number</label>
            <input type="tel" id="phone" name="phone" placeholder="+1 (226) 555-0100" autocomplete="tel">
          </div>
          <div class="form-group">
            <label for="company">Company Name</label>
            <input type="text" id="company" name="company" placeholder="Your Business Name" autocomplete="organization">
          </div>
          <div class="form-group">
            <label for="service">Service Interest</label>
            <select id="service" name="service">
              <option value="">Select a service...</option>
              <option value="Managed IT Services">Managed IT Services</option>
              <option value="Network Improvements">Network Improvements</option>
              <option value="SEO & Marketing">SEO &amp; Marketing</option>
              <option value="Website Design">Website Design</option>
              <option value="Dedicated Server Hosting">Dedicated Server Hosting</option>
              <option value="Web Hosting">Web Hosting</option>
              <option value="Domain Management">Domain Management</option>
              <option value="VOIP Phone Systems">VOIP Phone Systems</option>
              <option value="General Inquiry">General Inquiry</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div class="form-group">
            <label for="message">Message *</label>
            <textarea id="message" name="message" required placeholder="Tell us about your IT needs, your company size, and any specific challenges you're facing..."></textarea>
          </div>
          <button type="submit" class="btn btn-primary btn-lg" style="width:100%;justify-content:center;">
            ✉️ Send Message
          </button>
          <div id="form-success" class="form-success">
            ✅ Thank you! Your message has been sent. We'll get back to you within 1 business day.
          </div>
          <div id="form-error" class="form-error">
            ❌ An error occurred. Please try again or call us at <?= SITE_PHONE ?>.
          </div>
        </form>
      </div>

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

<section style="background:var(--surface);padding:40px 0;">
  <div class="container">
    <div class="map-wrapper">
      <iframe title="CVN Managed Services Map" src="<?= MAPS_EMBED_URL ?>" frameborder="0" allowfullscreen="" loading="lazy"></iframe>
    </div>
  </div>
</section>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
