<?php include'header.php'?>

<!-- ===== SYSTEM BREADCRUMB WITH BACKGROUND ===== -->
<nav class="breadcrumb-nav bg-overlay" style="background-image: url('assets/img/breadcrumb.png');">
  <div class="wrap">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item">
        <a href="#">Franchisee Inquiry</a>
      </li>
    </ol>
  </div>
</nav>

<div class="form-wrapper">
  <h2 class="form-title">Please Fill the Below Form.</h2>
  
  <form action="#" method="POST" class="it-information-form">
    <div class="form-grid">
      
      <!-- First Name -->
      <div class="it-information-input-box">
        <label>First Name *</label>
        <input type="text" placeholder="e.g. John" required>
      </div>

      <!-- Last Name -->
      <div class="it-information-input-box">
        <label>Last Name *</label>
        <input type="text" placeholder="e.g. Doe" required>
      </div>

      <!-- Email -->
      <div class="it-information-input-box">
        <label>Email Address *</label>
        <input type="email" placeholder="john.doe@domain.com" required>
      </div>

      <!-- Mobile -->
      <div class="it-information-input-box">
        <label>Mobile Number *</label>
        <input type="tel" placeholder="+91 XXXXX XXXXX" required>
      </div>

      <!-- Franchise Location -->
      <div class="it-information-input-box">
        <label>Target Franchise Location *</label>
        <input type="text" placeholder="City / District" required>
      </div>

      <!-- Pincode -->
      <div class="it-information-input-box">
        <label>Pincode *</label>
        <input type="text" placeholder="6-digit postal code" required>
      </div>

      <!-- Current Business -->
      <div class="it-information-input-box">
        <label>Current Venture/Business</label>
        <input type="text" placeholder="Current occupation or firm type">
      </div>

      <!-- Monthly Yield -->
      <div class="it-information-input-box">
        <label>Approx. Monthly Logistics Business</label>
        <input type="text" placeholder="Estimated turnover scale">
      </div>

      <!-- Experience -->
      <div class="it-information-input-box">
        <label>Years of Courier Experience</label>
        <input type="text" placeholder="e.g. 3 Years (Leave blank if none)">
      </div>

      <!-- Address -->
      <div class="it-information-input-box">
        <label>Corporate / Business Address</label>
        <input type="text" placeholder="Complete structural physical address">
      </div>

      <!-- Details -->
      <div class="it-information-input-box col-full">
        <label>Additional Strategic Fleet or Requirement Notes</label>
        <textarea rows="5" placeholder="Elaborate on operational site footprint or special deployment rules..."></textarea>
      </div>

      <!-- Security/Captcha Row -->
      <div class="it-information-input-box col-full captcha-container">
        <div style="flex-grow: 1; width: 100%;">
          <label>Security Verification</label>
          <div class="captcha-img-wrapper">
            <img src="captcha.jpg" alt="Security Verification Element">
          </div>
        </div>
        <div style="flex-grow: 2; width: 100%;">
          <label>Enter Captcha *</label>
          <input type="text" placeholder="Type letters/numbers exactly" required>
        </div>
      </div>

      <!-- Submission Target -->
      <div class="col-full" style="margin-top: 12px;">
        <button class="it-btn-orange" type="submit">
          Submit Franchise Inquiry
        </button>
      </div>

    </div>
  </form>
</div>


<style>
    /* --- PREMIUM FRANCHISE FORM STYLING --- */
.form-wrapper {
  max-width: 800px;
  margin: 40px auto;
  padding: 48px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}

.form-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
}

/* Custom Grid Implementation if Bootstrap is absent/overridden */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.col-full {
  grid-column: span 2;
}

.it-information-input-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.it-information-input-box label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Fields Override */
.it-information-input-box input,
.it-information-input-box textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: background-color 0.2s, transform 0.2s;
}

.it-information-input-box input:focus,
.it-information-input-box textarea:focus {
  background: #ffffff;
}

.it-information-input-box textarea {
  resize: none;
}

/* Captcha Block Layout */
.captcha-container {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.captcha-img-wrapper {
  border: 2px solid var(--ink);
  height: 51px; /* Matches field layout line-height */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.captcha-img-wrapper img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Submit Action Box */
.it-btn-orange {
  border: 2px solid var(--ink);
  background: var(--amber); /* Seamless drop-in using system variables */
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  padding: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s;
}

.it-btn-orange:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.it-btn-orange:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* Responsive Scaling */
@media (max-width: 768px) {
  .form-wrapper {
    padding: 24px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .col-full {
    grid-column: span 1;
  }
  .captcha-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .captcha-img-wrapper {
    width: 100%;
    max-width: 180px;
  }
}
</style>

<?php include'footer.php'?>