<?php
$page      = 'contact';
$pageTitle = 'Contact Us | Do I Have a Recall?';
$pageDesc  = 'Have a question or feedback? Get in touch with the doihavearecall.com team. We typically respond within one business day.';
$pageCss   = ['assets/css/contact.css'];
$pageJs    = ['assets/js/contact.js'];
include 'includes/header.php';
?>

<!-- ============================================================
     HERO
     ============================================================ -->
<section class="contact-hero">
  <div class="container contact-hero__inner">

    <div class="contact-hero__text">
      <span class="section-label reveal">Contact Us</span>
      <h1 class="contact-hero__title reveal reveal-delay-1">
        We'd love to <em>hear from you</em>
      </h1>
      <p class="contact-hero__sub reveal reveal-delay-2">
        Have a question about a recall, feedback on the site, or a dealer inquiry? Send us a message and we'll get back to you within one business day.
      </p>
    </div>

    <div class="contact-hero__graphic reveal reveal-delay-2" aria-hidden="true">
      <svg class="contact-hero__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
        <polyline points="22,6 12,13 2,6"/>
      </svg>
    </div>

  </div>
</section>


<!-- ============================================================
     CONTACT BODY
     ============================================================ -->
<section class="contact-body">
  <div class="container contact-body__inner">

    <!-- ── Contact Form ── -->
    <div class="contact-form-wrap reveal">

      <div class="contact-form-card" id="contact-form-card">

        <!-- Default state -->
        <form class="contact-form" id="contact-form" novalidate>

          <div class="form-row form-row--two">
            <div class="form-field">
              <label class="form-label" for="contact-name">Your Name <span class="form-required" aria-hidden="true">*</span></label>
              <input
                class="form-input"
                type="text"
                id="contact-name"
                name="name"
                placeholder="Jane Smith"
                autocomplete="name"
                required
              >
              <p class="form-error" id="error-name" role="alert" hidden></p>
            </div>

            <div class="form-field">
              <label class="form-label" for="contact-email">Email Address <span class="form-required" aria-hidden="true">*</span></label>
              <input
                class="form-input"
                type="email"
                id="contact-email"
                name="email"
                placeholder="jane@example.com"
                autocomplete="email"
                required
              >
              <p class="form-error" id="error-email" role="alert" hidden></p>
            </div>
          </div>

          <div class="form-field">
            <label class="form-label" for="contact-subject">Subject <span class="form-required" aria-hidden="true">*</span></label>
            <select class="form-input form-select" id="contact-subject" name="subject" required>
              <option value="" disabled selected>Select a topic…</option>
              <option value="recall-question">Question about a recall</option>
              <option value="site-feedback">Site feedback or bug report</option>
              <option value="dealer-inquiry">Dealer listing inquiry</option>
              <option value="data-question">Data accuracy question</option>
              <option value="press">Press or media inquiry</option>
              <option value="other">Other</option>
            </select>
            <p class="form-error" id="error-subject" role="alert" hidden></p>
          </div>

          <div class="form-field">
            <label class="form-label" for="contact-message">Message <span class="form-required" aria-hidden="true">*</span></label>
            <textarea
              class="form-input form-textarea"
              id="contact-message"
              name="message"
              placeholder="Tell us how we can help…"
              rows="6"
              required
            ></textarea>
            <p class="form-error" id="error-message" role="alert" hidden></p>
          </div>

          <button class="btn btn--primary btn--lg contact-form__submit" type="submit" id="contact-submit">
            <span class="contact-form__submit-label">Send Message</span>
            <span class="contact-form__submit-spinner" aria-hidden="true" hidden>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg>
            </span>
          </button>

        </form>

        <!-- Success state (shown via JS) -->
        <div class="contact-success" id="contact-success" hidden>
          <div class="contact-success__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
              <polyline points="22 4 12 14.01 9 11.01"/>
            </svg>
          </div>
          <h2 class="contact-success__title">Message sent!</h2>
          <p class="contact-success__body">Thanks for reaching out. We'll get back to you within one business day.</p>
          <button class="btn btn--secondary contact-success__reset" type="button" id="contact-reset">Send another message</button>
        </div>

      </div>
    </div>

    <!-- ── Side Info ── -->
    <aside class="contact-info reveal reveal-delay-1">

      <div class="contact-info-card">
        <div class="contact-info-card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
          </svg>
        </div>
        <h3 class="contact-info-card__title">Email Us</h3>
        <a class="contact-info-card__value" href="mailto:hello@doihavearecall.com">hello@doihavearecall.com</a>
        <p class="contact-info-card__note">We reply within one business day.</p>
      </div>

      <div class="contact-info-card">
        <div class="contact-info-card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
        </div>
        <h3 class="contact-info-card__title">Recall Questions</h3>
        <p class="contact-info-card__note">You can also verify recall records directly at <a href="https://www.nhtsa.gov/recalls" target="_blank" rel="noopener noreferrer">NHTSA.gov</a> or call their vehicle safety hotline at <a href="tel:18884279463">1-888-327-4236</a>.</p>
      </div>

      <div class="contact-info-card">
        <div class="contact-info-card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
          </svg>
        </div>
        <h3 class="contact-info-card__title">Dealer Inquiries</h3>
        <p class="contact-info-card__note">Interested in listing your dealership? Visit our <a href="/for-dealers.php">For Dealers</a> page or select "Dealer listing inquiry" in the form.</p>
      </div>

    </aside>

  </div>
</section>


<!-- ============================================================
     CTA BANNER
     ============================================================ -->
<section class="cta-banner" aria-labelledby="contact-cta-heading">
  <div class="container cta-banner__inner">
    <h2 class="cta-banner__title reveal" id="contact-cta-heading">
      See if your vehicle has an open recall
    </h2>
    <p class="cta-banner__sub reveal reveal-delay-1">
      Takes less than a minute. Always free.
    </p>
    <a href="/" class="btn btn--light btn--lg reveal reveal-delay-2">
      Check for Recalls Now
    </a>
  </div>
</section>


<?php include 'includes/footer.php'; ?>
