<%- include('../partials/head') %>
<%- include('../partials/offcanvas') %>
<%- include('../partials/header') %>

<main>
   <div class="tp-login-area pt-60 pb-100">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-lg-5 col-md-8">
               <div style="border:1px solid #eee; border-radius:12px; padding:40px;">
                  <h2 style="font-size:24px; margin-bottom:6px; text-align:center;">Create Your Account</h2>
                  <p style="text-align:center; color:#777; font-size:14px; margin-bottom:25px;">Join <%= site.site_name || 'RouteMate' %> to book tours and track your trips.</p>

                  <% if (error) { %>
                     <div class="alert" style="background:#FEE2E2; color:#991B1B; padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:13px;"><%= error %></div>
                  <% } %>

                  <form action="/register" method="POST">
                     <div class="tp-review-input mb-20">
                        <label class="tp-label mb-5" for="name">Name</label>
                        <input class="tp-input" type="text" id="name" name="name" placeholder="Your Name..." required style="width:100%;">
                     </div>
                     <div class="tp-review-input mb-20">
                        <label class="tp-label mb-5" for="email">Your Email</label>
                        <input class="tp-input" type="email" id="email" name="email" placeholder="you@example.com" required style="width:100%;">
                     </div>
                     <div class="tp-review-input mb-20">
                        <label class="tp-label mb-5" for="phone">Phone</label>
                        <input class="tp-input" type="text" id="phone" name="phone" placeholder="+91 98765 43210" style="width:100%;">
                     </div>
                     <div class="tp-review-input mb-20">
                        <label class="tp-label mb-5" for="password">Password</label>
                        <input class="tp-input" type="password" id="password" name="password" placeholder="Min. 6 characters" required minlength="6" style="width:100%;">
                     </div>
                     <div class="tp-review-input d-flex align-items-start mb-20">
                        <input class="tp-checkbox" type="checkbox" id="agree" required>
                        <label class="tp-agree" for="agree">&nbsp;I accept the Terms of Service & Privacy Policy.</label>
                     </div>
                     <button type="submit" class="tp-btn" style="width:100%;">Create Account</button>
                  </form>

                  <p style="text-align:center; margin-top:20px; font-size:13px; color:#777;">
                     Already have an account? <a href="/login" style="color:#DC2626; font-weight:600;">Login</a>
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
</main>

<%- include('../partials/footer') %>
<%- include('../partials/scripts') %>
