<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <%- include('partials/landing-head', { pageTitle: 'اتصل بنا', description: 'تواصل مع فريق Artal CRM للاستفسارات والدعم' }) %>
  <style>
    .contact-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; }
    @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

    .form-card { background: white; padding: 32px 28px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); }
    .form-card h2 { font-size: 20px; margin-bottom: 6px; color: #0f1a30; }
    .form-card .subtitle { color: #64748b; font-size: 14px; margin-bottom: 22px; }

    .field { margin-bottom: 16px; }
    .field label { display: block; font-size: 14px; font-weight: 500; color: #334155; margin-bottom: 6px; }
    .field input, .field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 14px; font-family: inherit; background: #fafbfc; transition: all 0.15s; }
    .field input:focus, .field textarea:focus { outline: none; border-color: #4f6bed; background: white; box-shadow: 0 0 0 3px rgba(79,107,237,0.1); }
    .field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media (max-width: 480px) { .row { grid-template-columns: 1fr; } }

    .send-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, #4f6bed, #1a3c6e); color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
    .send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,107,237,0.3); }
    .send-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

    .contact-info { display: flex; flex-direction: column; gap: 14px; }
    .info-card { background: white; padding: 22px 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 1px 4px rgba(0,0,0,0.03); display: flex; gap: 14px; align-items: flex-start; transition: all 0.2s; text-decoration: none; color: inherit; }
    .info-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.07); }
    .info-card .icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .info-card .icon .material-symbols-rounded { color: white; font-size: 22px; }
    .info-card h3 { font-size: 14px; color: #64748b; margin: 0 0 4px; font-weight: 500; }
    .info-card .value { font-size: 15px; color: #0f1a30; font-weight: 600; word-break: break-all; }
    .info-card .value.ltr { direction: ltr; text-align: left; }

    .alert { padding: 14px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
    .alert.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
    .alert.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
  </style>
</head>
<body>
  <%- include('partials/landing-nav') %>

  <main class="container">
    <div class="page-header">
      <h1>اتصل بنا</h1>
      <p>نحن هنا للإجابة عن استفساراتك ومساعدتك. اختر القناة الأنسب لك.</p>
    </div>

    <div class="contact-grid">
      <!-- Form -->
      <div class="form-card">
        <h2>أرسل لنا رسالة</h2>
        <p class="subtitle">نرد عادة خلال 24 ساعة</p>

        <% if (success) { %>
          <div class="alert success">
            <span class="material-symbols-rounded">check_circle</span>
            تم إرسال رسالتك بنجاح. سنتواصل معك قريباً.
          </div>
        <% } %>
        <% if (error) { %>
          <div class="alert error">
            <span class="material-symbols-rounded">error</span>
            <%= error %>
          </div>
        <% } %>

        <form method="post" action="/contact" id="contactForm">
          <div class="row">
            <div class="field">
              <label>الاسم *</label>
              <input type="text" name="name" required value="<%= values.name || '' %>">
            </div>
            <div class="field">
              <label>البريد الإلكتروني *</label>
              <input type="email" name="email" required value="<%= values.email || '' %>">
            </div>
          </div>
          <div class="field">
            <label>الموضوع *</label>
            <input type="text" name="subject" required value="<%= values.subject || '' %>" placeholder="ما الذي تريد التواصل بخصوصه؟">
          </div>
          <div class="field">
            <label>الرسالة *</label>
            <textarea name="message" required placeholder="اكتب رسالتك بالتفصيل..."><%= values.message || '' %></textarea>
          </div>
          <button class="send-btn" type="submit" id="sendBtn">
            <span class="material-symbols-rounded">send</span>
            إرسال الرسالة
          </button>
        </form>
      </div>

      <!-- Contact Info -->
      <div class="contact-info">
        <a href="https://wa.me/<%= whatsapp.replace(/[^0-9]/g, '') %>" target="_blank" rel="noopener" class="info-card">
          <div class="icon" style="background:linear-gradient(135deg,#25d366,#128c7e)">
            <span class="material-symbols-rounded">chat</span>
          </div>
          <div>
            <h3>واتساب</h3>
            <div class="value ltr"><%= whatsapp %></div>
          </div>
        </a>

        <a href="mailto:<%= supportEmail %>" class="info-card">
          <div class="icon" style="background:linear-gradient(135deg,#4f6bed,#1a3c6e)">
            <span class="material-symbols-rounded">mail</span>
          </div>
          <div>
            <h3>البريد الإلكتروني</h3>
            <div class="value ltr"><%= supportEmail %></div>
          </div>
        </a>

        <div class="info-card" style="cursor:default" onclick="return false">
          <div class="icon" style="background:linear-gradient(135deg,#f59e0b,#d97706)">
            <span class="material-symbols-rounded">schedule</span>
          </div>
          <div>
            <h3>وقت الرد</h3>
            <div class="value">خلال 24 ساعة عمل</div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <%- include('partials/landing-footer') %>

  <script>
    document.getElementById('contactForm').addEventListener('submit', function() {
      const btn = document.getElementById('sendBtn');
      btn.disabled = true;
      btn.innerHTML = '<span class="material-symbols-rounded">hourglass_top</span> جاري الإرسال...';
    });
  </script>
</body>
</html>
