<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us — TDL.com.my</title>
<meta name="description" content="Contact TDL.com.my — story tips, feedback, advertising and contributor enquiries for Malaysia's travel and lifestyle magazine.">
<link rel="canonical" href="https://www.tdl.com.my/contact-us.html">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="Contact Us — TDL.com.my">
<meta property="og:description" content="Story tips, feedback, advertising and contributor enquiries.">
<meta property="og:url" content="https://www.tdl.com.my/contact-us.html">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Albert+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<?php $root = ''; $active = 'contact-us.html'; include __DIR__ . '/partials/header.php'; ?>

<section class="page-hero with-image">
  <style>.page-hero.with-image::before{background-image:url(images/banner-contact.jpg)}</style>
  <div class="wrap">
    <div class="crumb"><a href="index.html">Home</a> / Contact Us</div>
    <h1>Say <em class="accent">hello</em></h1>
    <p class="lead">Story tips, reader feedback, advertising and contributor enquiries —
    we read everything.</p>
  </div>
</section>

<section class="section tight">
  <div class="wrap split" style="align-items:start">
    <div>
      <span class="eyebrow">Contact</span>
      <h2>Send us a message</h2>
      <p class="lead">Fill in the form and we'll reply by email. Prefer email directly?
      Write to <a href="mailto:info@tdl.com.my">info@tdl.com.my</a>.</p>
    </div>
    <form id="enquiry" class="form-card" action="send.php" method="POST" novalidate>
      <!-- Honeypot: hidden from humans, bots tend to fill it. Keep it empty. -->
      <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

      <div class="field">
        <label for="name">Name *</label>
        <input id="name" name="name" type="text" required autocomplete="name">
      </div>
      <div class="field">
        <label for="phone">Phone</label>
        <input id="phone" name="phone" type="tel" autocomplete="tel">
      </div>
      <div class="field">
        <label for="email">Email *</label>
        <input id="email" name="email" type="email" required autocomplete="email">
      </div>
      <div class="field">
        <label for="topic">What's this about?</label>
        <select id="topic" name="topic">
          <option>General enquiry</option>
          <option>Story tip / feedback</option>
          <option>Advertising</option>
          <option>Careers / contributing</option>
        </select>
      </div>
      <div class="field">
        <label for="message">Message *</label>
        <textarea id="message" name="message" rows="5" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%">Send message</button>
      <div id="form-result" class="form-msg" role="status" aria-live="polite"></div>
      <p style="margin:16px 0 0;font-size:.9rem;color:var(--muted)">Prefer email?
      Write to <a href="mailto:info@tdl.com.my">info@tdl.com.my</a>.</p>
    </form>
  </div>
</section>

<?php include __DIR__ . '/partials/footer.php'; ?>
<script src="js/form.js"></script>
<script>
/* No-JS fallback: send.php redirects to ?sent=1 (or 0). Show a matching message. */
(function(){
  var p = new URLSearchParams(location.search).get('sent');
  if (p === null) return;
  var el = document.getElementById('form-result');
  if (!el) return;
  if (p === '1'){ el.textContent = 'Thank you — your message has been sent.'; el.className = 'form-msg ok'; }
  else { el.textContent = 'Sorry, that didn\u2019t go through. Please email info@tdl.com.my.'; el.className = 'form-msg err'; }
})();
</script>
</body>
</html>
