<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Punarapi India</title>
    <link rel="icon" href="/resource/media/general/Logo_hero_icon.png" type="image/png" sizes="36x36">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/punarapi.css">
    <link rel="stylesheet" href="/css/navbar.css">

    <script src="https://kit.fontawesome.com/841b46b139.js" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

    <link rel="stylesheet" href="/css/contact.css">
    <link rel="stylesheet" href="/css/request.css">
    <link rel="stylesheet" href="/css/contact-page.css">
</head>

<body>
    <%- include('partials/_navbar.ejs'); %>

    <% if(!form) { %>
    <div class="request-result-wrapper">
        <div class="result-title-wrapper">
            <h1 class="result-title">
                <%= result %>
            </h1>
            <p class="result-subtitle">
                <%= resultSubtitle %>
            </p>
            <a class="return-home" href="/"><i class="fa-solid fa-arrow-left"></i> &nbsp;Return Home</a>
        </div>
    </div>
    <% } else { %>
    <section class="contact-request-section" id="contact-section">
        <div class="contact-request-title-wrapper">
            <h1 class="contact-request-title">
                Get In Touch
            </h1>
            <p class="contact-request-subtitle">
                Discover exceptional roofing products to elevate your home design! From cutting-edge roofing tiles to unique solutions, we have what you need to make a difference!
            </p>
        </div>

        <form action="/contact" method="POST" class="contact-form-wrapper" id="contact-form">
            <h2 class="form-section-title">Tell Us About You</h2>
            <div class="form-section">
                <div class="form-item">
                    <label for="firstname">First Name <span class="req-sign">*</span></label>
                    <input type="text" class="form-input" name="firstname" id="firstname" required>
                </div>
                <div class="form-item">
                    <label for="lastname">Last Name <span class="req-sign">*</label>
                    <input type="text" class="form-input" name="lastname" id="lastname" required>
                </div>
                <div class="form-item">
                    <label for="email">Email <span class="req-sign">*</span></label>
                    <input type="text" class="form-input" name="email" id="email" required>
                </div>
                <div class="form-item">
                    <label for="phno">Phone Number <span class="req-sign">*</span></label>
                    <input type="text" class="form-input" name="phno" id="phno" required>
                </div>
                <div class="form-item">
                    <label for="phno">State / International <span class="req-sign">*</span></label>
                    <select class="form-input" name="state" id="state" required>
                        <option value="" disabled selected>Select a State / International</option>
                        <option value="International">International</option>
                        <option value="Andhra Pradesh">Andhra Pradesh</option>
                        <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                        <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                        <option value="Assam">Assam</option>
                        <option value="Bihar">Bihar</option>
                        <option value="Chandigarh">Chandigarh</option>
                        <option value="Chhattisgarh">Chhattisgarh</option>
                        <option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
                        <option value="Daman and Diu">Daman and Diu</option>
                        <option value="Delhi">Delhi</option>
                        <option value="Lakshadweep">Lakshadweep</option>
                        <option value="Puducherry">Puducherry</option>
                        <option value="Goa">Goa</option>
                        <option value="Gujarat">Gujarat</option>
                        <option value="Haryana">Haryana</option>
                        <option value="Himachal Pradesh">Himachal Pradesh</option>
                        <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                        <option value="Jharkhand">Jharkhand</option>
                        <option value="Karnataka">Karnataka</option>
                        <option value="Kerala">Kerala</option>
                        <option value="Madhya Pradesh">Madhya Pradesh</option>
                        <option value="Maharashtra">Maharashtra</option>
                        <option value="Manipur">Manipur</option>
                        <option value="Meghalaya">Meghalaya</option>
                        <option value="Mizoram">Mizoram</option>
                        <option value="Nagaland">Nagaland</option>
                        <option value="Odisha">Odisha</option>
                        <option value="Punjab">Punjab</option>
                        <option value="Rajasthan">Rajasthan</option>
                        <option value="Sikkim">Sikkim</option>
                        <option value="Tamil Nadu">Tamil Nadu</option>
                        <option value="Telangana">Telangana</option>
                        <option value="Tripura">Tripura</option>
                        <option value="Uttar Pradesh">Uttar Pradesh</option>
                        <option value="Uttarakhand">Uttarakhand</option>
                        <option value="West Bengal">West Bengal</option>
                    </select>
                </div>
                <div class="form-item">
                    <label for="country">Country</label>
                    <input type="text" class="form-input" name="country" id="country">
                </div>
            </div>
            <h2 class="form-section-title">How can we help?</h2>
            <div class="form-section">
                <div class="form-item">
                    <label for="company">Company Name</label>
                    <input type="text" class="form-input" name="company" id="company">
                </div>
                <div class="form-item">
                    <label for="position">I am a <span class="req-sign">*</span></label>
                    <select class="form-input" id="position" name="position" required>
                        <option value="" disabled selected>Select an Option</option>
                        <option value="Homeowner">Homeowner</option>
                        <option value="Contractor">Contractor</option>
                        <option value="Builder">Builder</option>
                        <option value="Distributer">Distributer</option>
                        <option value="Architect">Architect</option>
                        <option value="Designer">Designer</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div class="form-item form-item-long">
                    <label for="message">Type your message here <span class="req-sign">*</span></label>
                    <textarea class="form-input textarea-input" name="message" id="message" required></textarea>
                </div>
            </div>
            <button type="submit" class="submit-button" id="submit-request">Submit</button>
        </form>
    </section>
    <% } %>
    <%- include('partials/_footer.ejs'); %>
    <script src="/js/navbar.js" async defer></script>
    <script src="/js/contact.js" async defer></script>
</body>
</html>