<?php $l = $lang ?? 'fr'; ?>

<section class="page-hero">
  <div class="container">
    <span class="section-label"><?= $t('nav.contact') ?></span>
    <h1 class="page-hero-title"><?= $t('contact.title') ?></h1>
    <p class="page-hero-sub"><?= $t('contact.subtitle') ?></p>
  </div>
</section>

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

    <div class="contact-info" data-scroll-reveal>
      <div class="info-block">
        <div class="info-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        </div>
        <div>
          <h3 class="info-label"><?= $l === 'fr' ? 'Immeuble Tata Park, Lomé' : 'Tata Park Building, Lomé' ?></h3>
          <p><?= $t('contact.address_lome') ?></p>
          <p><a href="tel:+22890044212">+228 90 04 42 12</a></p>
        </div>
      </div>

      <div class="info-block">
        <div class="info-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        </div>
        <div>
          <h3 class="info-label">Dubai, <?= $l === 'fr' ? 'EAU' : 'UAE' ?></h3>
          <p><?= $t('contact.address_dubai') ?></p>
        </div>
      </div>

      <div class="info-block">
        <div class="info-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><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>
          <h3 class="info-label">Email</h3>
          <a href="mailto:quaadraafrica@quaadra.com">quaadraafrica@quaadra.com</a>
        </div>
      </div>

      <div class="info-block">
        <div class="info-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M11.5 0C5.149 0 0 5.149 0 11.5c0 2.043.536 3.954 1.473 5.609L.05 22.5l5.518-1.451A11.462 11.462 0 0011.5 23C17.851 23 23 17.851 23 11.5S17.851 0 11.5 0zm0 21.077a9.559 9.559 0 01-4.888-1.342l-.35-.208-3.274.861.87-3.196-.228-.365a9.542 9.542 0 01-1.476-5.127C2.154 6.264 6.404 2 11.5 2c2.459 0 4.764.958 6.5 2.696A9.15 9.15 0 0120.846 11.5c0 5.096-4.25 9.577-9.346 9.577z"/></svg>
        </div>
        <div>
          <h3 class="info-label">WhatsApp</h3>
          <a href="https://wa.me/22890049901" target="_blank" rel="noopener">+228 90 04 99 01</a>
        </div>
      </div>
    </div>

    <div class="contact-form-wrap">
      <?php if ($success): ?>
      <div class="alert alert-success" role="alert">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        <?= $t('contact.success') ?>
      </div>
      <?php else: ?>

      <form class="contact-form" method="POST" action="" novalidate>
        <?= \App\Core\Security::csrfField() ?>

        <?php if (!empty($errors)): ?>
        <div class="alert alert-error" role="alert">
          <?php foreach ($errors as $err): ?>
          <p><?= htmlspecialchars($err) ?></p>
          <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <div class="form-row">
          <div class="form-group <?= isset($errors['full_name']) ? 'has-error' : '' ?>">
            <label for="full_name"><?= $t('contact.name') ?> *</label>
            <input type="text" id="full_name" name="full_name" required
                   value="<?= htmlspecialchars($old['full_name'] ?? '') ?>"
                   placeholder="<?= $l === 'fr' ? 'Entrer votre Nom et Prénoms' : 'Enter your full name' ?>">
          </div>
          <div class="form-group <?= isset($errors['email']) ? 'has-error' : '' ?>">
            <label for="email"><?= $t('contact.email') ?> *</label>
            <input type="email" id="email" name="email" required
                   value="<?= htmlspecialchars($old['email'] ?? '') ?>"
                   placeholder="<?= $l === 'fr' ? 'Entrer votre adresse e-mail' : 'Enter your email address' ?>">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="phone"><?= $t('contact.phone') ?></label>
            <input type="tel" id="phone" name="phone"
                   value="<?= htmlspecialchars($old['phone'] ?? '') ?>"
                   placeholder="<?= $l === 'fr' ? 'Entrer votre numéro de téléphone' : 'Enter your phone number' ?>">
          </div>
          <div class="form-group">
            <label for="company"><?= $t('contact.company') ?></label>
            <input type="text" id="company" name="company"
                   value="<?= htmlspecialchars($old['company'] ?? '') ?>"
                   placeholder="<?= $l === 'fr' ? 'Entrer le nom de votre entreprise' : 'Enter your company name' ?>">
          </div>
        </div>

        <div class="form-group <?= isset($errors['subject']) ? 'has-error' : '' ?>">
          <label for="subject"><?= $t('contact.subject') ?> *</label>
          <input type="text" id="subject" name="subject" required
                 value="<?= htmlspecialchars($old['subject'] ?? '') ?>"
                 placeholder="<?= $l === 'fr' ? 'Demande de partenariat' : 'Partnership inquiry' ?>">
        </div>

        <div class="form-group <?= isset($errors['message']) ? 'has-error' : '' ?>">
          <label for="message"><?= $t('contact.message') ?> *</label>
          <textarea id="message" name="message" rows="6" required
                    placeholder="<?= $l === 'fr' ? 'Décrivez votre projet ou votre demande…' : 'Describe your project or request…' ?>"><?= htmlspecialchars($old['message'] ?? '') ?></textarea>
        </div>

        <div style="position: absolute; left: -9999px; opacity: 0; pointer-events: none;">
          <label for="website_check">Laissez ce champ vide</label>
          <input type="text" id="website_check" name="website_check" tabindex="-1" autocomplete="off">
        </div>

        <button type="submit" class="btn btn-primary btn-submit">
          <?= $t('contact.send') ?>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
        </button>
      </form>

      <?php endif; ?>
    </div>

  </div>
</section>