<?php
$title    = 'Contactos';
$email    = setting('contact_email');
$phone    = setting('contact_phone');
$whatsapp = setting('contact_whatsapp');
$note     = setting('contact_note');
?>
<div style="min-height:70vh;display:flex;align-items:center;justify-content:center;padding:40px 16px;">
  <div style="width:100%;max-width:480px;">

    <h1 class="serif" style="font-size:2rem;font-weight:300;letter-spacing:-.01em;margin-bottom:8px;">Contactos</h1>
    <p style="font-size:14px;color:var(--text-2);margin-bottom:32px;">Tens alguma dúvida? Entra em contacto connosco.</p>

    <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:32px;">

      <?php if($email): ?>
      <a href="mailto:<?= h($email) ?>"
         style="display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border);
                border-radius:var(--radius-lg);padding:18px 20px;transition:border-color .2s;"
         onmouseover="this.style.borderColor='var(--text)'" onmouseout="this.style.borderColor='var(--border)'">
        <div style="width:40px;height:40px;background:var(--sel-light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">✉️</div>
        <div>
          <div style="font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);margin-bottom:2px;">Email</div>
          <div style="font-size:15px;font-weight:500;color:var(--text);"><?= h($email) ?></div>
        </div>
      </a>
      <?php endif; ?>

      <?php if($phone): ?>
      <a href="tel:<?= h(preg_replace('/\s/','',$phone)) ?>"
         style="display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border);
                border-radius:var(--radius-lg);padding:18px 20px;transition:border-color .2s;"
         onmouseover="this.style.borderColor='var(--text)'" onmouseout="this.style.borderColor='var(--border)'">
        <div style="width:40px;height:40px;background:var(--sel-light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">📞</div>
        <div>
          <div style="font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);margin-bottom:2px;">Telemóvel</div>
          <div style="font-size:15px;font-weight:500;color:var(--text);"><?= h($phone) ?></div>
        </div>
      </a>
      <?php endif; ?>

      <?php if($whatsapp): ?>
      <a href="https://wa.me/<?= h($whatsapp) ?>" target="_blank"
         style="display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border);
                border-radius:var(--radius-lg);padding:18px 20px;transition:border-color .2s;"
         onmouseover="this.style.borderColor='#25D366'" onmouseout="this.style.borderColor='var(--border)'">
        <div style="width:40px;height:40px;background:#f0fdf4;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">💬</div>
        <div>
          <div style="font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);margin-bottom:2px;">WhatsApp</div>
          <div style="font-size:15px;font-weight:500;color:var(--text);"><?= h($phone ?: '+'.$whatsapp) ?></div>
          <div style="font-size:12px;color:var(--text-3);margin-top:1px;">Clica para abrir conversa →</div>
        </div>
      </a>
      <?php endif; ?>

      <?php if(!$email && !$phone && !$whatsapp): ?>
      <div style="text-align:center;padding:40px;color:var(--text-3);font-size:13px;">
        Os contactos ainda não estão configurados.<br>
        <a href="<?= base_url('admin/definicoes') ?>" style="color:var(--text-2);text-decoration:underline;">Configurar no admin</a>
      </div>
      <?php endif; ?>

    </div>

    <?php if($note): ?>
    <div style="background:var(--sel-light);border-radius:var(--radius-lg);padding:14px 18px;">
      <p style="font-size:13px;color:var(--text-2);line-height:1.6;"><?= h($note) ?></p>
    </div>
    <?php endif; ?>

  </div>
</div>
