{% include 'public_header.html' %}
    <main>
      <div>
        <section class="inner_banner_section about_banner">
          <div>
            <div class="container">
              <div class="inner_banner_main">
                <div class="inner_banner_content_block">
                  <div class="breadcrumb">
                    <a href="https://www.csquadkerala.com/">Home</a><span>&gt;</span><span>Contact Us</span>
                  </div>
                  <div class="inner_banner_head about">
                    <h2>Contact Us: Contact our team for services</h2><p>Have questions, need assistance, or want to book a service? Reach out to us anytime. We're here to help!</p>
                  </div>
                </div>
              </div>
              <div class="about_inner_img">
                <img src="/static/HandySquad - Home_files/32.jpg" />
              </div>
            </div>
          </div>
        </section>
        <section class="contact_Section section_block">
  <div class="container">
    <div class="contact_head section_head">
      <h3>Get in Touch!</h3>
    </div>
    <div class="contact_main">
      <div class="contact_form">
        <div class="form_flex">
          <div class="form_group contact">
            <label class="form_label">Full Name</label>
            <input id="name" class="form_control contact_form" placeholder="Enter full name" type="text" value="" name="name" />
          </div>
        </div>
        <div class="form_flex">
          <div class="form_group contact">
            <label class="form_label">Email Id</label>
            <input id="email" class="form_control contact_form" placeholder="Enter email" type="text" value="" name="email" />
          </div>
          <div class="form_group contact">
            <label class="form_label">Phone Number</label>
            <input id="mobile" class="form_control contact_form" placeholder="Enter phone number" type="text" value="" name="mobile" />
          </div>
        </div>
        <div class="form_group address_form contact">
          <label class="form_label">Message</label>
          <textarea id="message" placeholder="Enter message" class="form_control contact_form" style="height: 112px;"></textarea>
        </div>
        <div class="form_submit_btn">
          <button onclick="sendToWhatsApp()" class="btn btn_primary radius_primary" type="button">Submit</button>
        </div>
      </div>
      <div class="contact_info">
        <div class="info_block">
          <div class="info_items">
            <div class="info_icon blue">
              <span><i class="ri-map-pin-line"></i></span>
            </div>
            <div class="info_details">
              <h6>Thiruvananthpuram</h6>
              <p>10-C Mangadu Line Karamana, Thiruvananthpuram Pin 695002</p>
            </div>
          </div>
          <div class="info_items">
            <div class="info_icon orange">
              <span><i class="ri-mail-line"></i></span>
            </div>
            <div class="info_details">
              <h6>Customer Care</h6>
              <p>customercare@csquad.in</p>
            </div>
          </div>
          <div class="info_items">
            <div class="info_icon purple">
              <span><i class="ri-mail-line"></i></span>
            </div>
            <div class="info_details">
              <h6>Mail Us</h6>
              <p>hello@csquad.in</p>
            </div>
          </div>
          <div class="info_items">
            <div class="info_icon orange">
              <span><i class="ri-phone-line"></i></span>
            </div>
            <div class="info_details">
              <h6>Call Us</h6>
              <p>+91 9846006955</p>
            </div>
          </div>
          <div class="info_items">
            <div class="info_icon green">
              <span><i class="ri-whatsapp-line"></i></span>
            </div>
            <div class="info_details">
              <h6>WhatsApp Us</h6>
              <p>+91 9846906955</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

        <section style="display: block;">
          <div class="contact_foot_banner">
            <div class="container">
              <div class="inner_banner_main">
                <div class="inner_banner_content_block">
                  <div class="contact_foot_content">
                    <h2>Are You Ready To Work With Us Now?</h2><p>Know our services today!</p>
                  </div>
                  <div>
                    <a href="tel:+91 9874561230"><button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary btn btn_secondary radius_secondary header_call css-1dhhdpo" tabindex="0" type="button"><span class="phone_icon"><i class="ri-phone-line"></i></span><span>Call Us</span><span class="MuiTouchRipple-root css-w0pj6f"></span></button></a>
                  </div>
                </div>
              </div>
              <div class="contact_banner_img">
                <img src="/static/HandySquad - Home_files/33.jpg" alt="Banner" style="display: block;" />
              </div>
            </div>
          </div>
        </section>
        <section></section>
      </div>
    </main>
    <script>
  function sendToWhatsApp() {
    // Get form values
    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const phone = document.getElementById("mobile").value.trim();
    const message = document.getElementById("message").value.trim();

    // Validate form fields
    if (!name || !email || !phone || !message) {
      alert("Please fill in all the fields.");
      return;
    }

    // Validate email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      alert("Please enter a valid email address.");
      return;
    }

    // Validate phone number
    const phoneRegex = /^\d{10}$/;
    if (!phoneRegex.test(phone)) {
      alert("Please enter a valid 10-digit phone number.");
      return;
    }

    // Format the message
    const formattedMessage = `*New Message from Contact Form*\n\nName: ${name}\nEmail: ${email}\nPhone: ${phone}\nMessage: ${message}`;

    // WhatsApp API URL
    const whatsappUrl = `https://wa.me/919846906955?text=${encodeURIComponent(formattedMessage)}`;

    // Open WhatsApp with the message
    window.open(whatsappUrl, "_blank");
  }
</script>
    {% include 'public_footer.html' %}