<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background-color:#1e293b;position:sticky;top:0;z-index:100;">
  <a href="#" style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#f59e0b;text-decoration:none;">Wanderlust Diaries</a>
  <div style="display:flex;gap:32px;align-items:center;">
    <a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Destinations</a>
    <a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">About</a>
    <a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Contact</a>
  </div>
</nav>

<!-- Contact Header -->
<section style="padding:64px 48px;background-color:#1e293b;text-align:center;">
  <p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">Say Hello</p>
  <h1 style="font-family:'Playfair Display',serif;font-size:48px;font-weight:700;color:#ffffff;margin-bottom:16px;">Get in Touch</h1>
  <p style="font-family:'Inter',sans-serif;font-size:17px;color:#94a3b8;max-width:540px;margin:0 auto;">Have a question, collaboration idea, or just want to share your own travel story? I'd love to hear from you.</p>
</section>

<!-- Contact Two-Column -->
<section style="padding:80px 48px;background-color:#fffbeb;">
  <div style="max-width:1000px;margin:0 auto;display:flex;gap:56px;flex-wrap:wrap;">
    <!-- Left: Contact Info -->
    <div style="flex:1;min-width:280px;">
      <h2 style="font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:#1e293b;margin-bottom:24px;">Contact Info</h2>
      <div style="margin-bottom:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Email</p>
        <p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">maya@wanderlustdiaries.com</p>
      </div>
      <div style="margin-bottom:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Instagram</p>
        <p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">@wanderlustdiaries</p>
      </div>
      <div style="margin-bottom:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Twitter / X</p>
        <p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">@mayatravels</p>
      </div>
      <div style="margin-bottom:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">YouTube</p>
        <p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">Wanderlust Diaries</p>
      </div>
      <div style="padding:24px;background-color:#ffffff;border-radius:10px;border-left:4px solid #f59e0b;margin-top:32px;">
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;"><strong style="color:#1e293b;">Collaborations:</strong> I'm open to working with travel brands, tourism boards, and outdoor companies. Please include your budget range and timeline in your message.</p>
      </div>
    </div>
    <!-- Right: Contact Form -->
    <div style="flex:1;min-width:320px;">
      <form style="padding:36px;background-color:#ffffff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
        <h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:24px;">Send a Message</h3>
        <div style="margin-bottom:20px;">
          <label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Your Name</label>
          <input type="text" placeholder="Full name" style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;box-sizing:border-box;" />
        </div>
        <div style="margin-bottom:20px;">
          <label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Email Address</label>
          <input type="email" placeholder="you@example.com" style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;box-sizing:border-box;" />
        </div>
        <div style="margin-bottom:20px;">
          <label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Subject</label>
          <select style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;background-color:#ffffff;box-sizing:border-box;">
            <option value="">Select a topic</option>
            <option value="collaboration">Collaboration</option>
            <option value="question">Question</option>
            <option value="feedback">Feedback</option>
            <option value="other">Other</option>
          </select>
        </div>
        <div style="margin-bottom:24px;">
          <label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Message</label>
          <textarea rows="5" placeholder="Tell me what's on your mind..." style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;resize:vertical;box-sizing:border-box;"></textarea>
        </div>
        <button type="submit" style="width:100%;padding:14px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;border-radius:6px;cursor:pointer;">Send Message</button>
      </form>
    </div>
  </div>
</section>

<!-- FAQ Section -->
<section style="padding:80px 48px;background-color:#ffffff;">
  <div style="max-width:760px;margin:0 auto;">
    <p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">Common Questions</p>
    <h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:48px;">FAQ</h2>
    <!-- Question 1 -->
    <div style="padding:28px 0;border-bottom:1px solid #e2e8f0;">
      <h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">How do you fund your travels?</h3>
      <p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">I earn through a mix of brand partnerships, affiliate links, freelance writing, and photography licensing. I started while still working part-time and transitioned to full-time blogging after two years.</p>
    </div>
    <!-- Question 2 -->
    <div style="padding:28px 0;border-bottom:1px solid #e2e8f0;">
      <h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">Can I use your photos?</h3>
      <p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">All photos on this blog are my own work and are copyrighted. If you'd like to license a photo for commercial or editorial use, please reach out with details about your project and intended usage.</p>
    </div>
    <!-- Question 3 -->
    <div style="padding:28px 0;">
      <h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">How far in advance should I reach out for collaborations?</h3>
      <p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">Ideally 4-6 weeks before your campaign start date. For destination trips, 2-3 months is best to coordinate schedules and plan content. Reach out early and we can find the right fit together.</p>
    </div>
  </div>
</section>

<!-- Footer -->
<footer style="padding:48px;background-color:#1e293b;text-align:center;">
  <p style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#f59e0b;margin-bottom:8px;">Wanderlust Diaries</p>
  <p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;margin-bottom:24px;">Follow the journey. Fuel the wanderlust.</p>
  <p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;">&copy; 2026 Wanderlust Diaries. All rights reserved.</p>
</footer>
