:root{
    --navy:#0b2545;
    --navy-dark:#081c36;
    --maroon:#8a1c2b;
    --maroon-dark:#6e1522;
    --gold:#c89b3c;
    --bg:#f4f2ee;
    --card:#ffffff;
    --line:#dcd7cd;
    --text:#1f2733;
    --muted:#5c6470;
    --error:#b3261e;
    --success:#1e7a4c;
    --radius:6px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Noto Sans Devanagari','Noto Sans',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
  }

  /* ===== Header ===== */
  header.site-header{
    background:linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%);
    color:#fff;
    border-bottom:4px solid var(--gold);
  }
  .header-inner{
    max-width:880px;
    margin:0 auto;
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:16px;
  }
  .emblem{
    width:54px;height:54px;border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    border:2px solid var(--gold);
  }
  .emblem svg{width:32px;height:32px;}
  .header-text h1{
    margin:0;
    font-size:20px;
    font-weight:700;
    letter-spacing:.2px;
  }
  .header-text p{
    margin:2px 0 0;
    font-size:13px;
    color:#cfd9e8;
    font-weight:400;
  }
  .header-strip{
    background:var(--maroon);
    color:#fff;
    text-align:center;
    font-size:13px;
    padding:6px 12px;
    letter-spacing:.3px;
  }

  /* ===== Layout ===== */
  main{
    max-width:880px;
    margin:0 auto;
    padding:28px 20px 60px;
  }
  .intro-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 22px;
    margin-bottom:22px;
    border-left:4px solid var(--navy);
  }
  .intro-card p{margin:0;color:var(--muted);font-size:14.5px;}
  .intro-card strong{color:var(--text);}

  .ref-banner{
    display:none;
    background:#eef6f0;
    border:1px solid #bfe3cb;
    color:var(--success);
    border-radius:var(--radius);
    padding:14px 18px;
    margin-bottom:20px;
    font-size:14.5px;
  }

  form{background:transparent;}

  fieldset{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:0;
    margin:0 0 22px;
  }
  legend{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15.5px;
    font-weight:700;
    color:#fff;
    background:var(--navy);
    padding:12px 18px;
    border-radius:var(--radius) var(--radius) 0 0;
  }
  legend .num{
    background:var(--gold);
    color:var(--navy-dark);
    width:24px;height:24px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;
    flex-shrink:0;
  }
  .legend-sub{
    font-weight:400;
    font-size:12px;
    color:#cfd9e8;
    margin-left:auto;
  }

  .fields-grid{
    padding:20px 22px 8px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 18px;
  }
  .field{display:flex;flex-direction:column;margin-bottom:12px;}
  .field.full{grid-column:1 / -1;}

  label{
    font-size:13.5px;
    font-weight:600;
    margin-bottom:6px;
    color:var(--text);
  }
  label .opt{
    font-weight:400;
    color:var(--muted);
    font-size:12px;
  }
  label .req{color:var(--maroon);margin-left:2px;}

  input[type=text],
  input[type=tel],
  input[type=email],
  input[type=date],
  input[type=time],
  select,
  textarea{
    border:1px solid #c7c2b8;
    border-radius:4px;
    padding:10px 12px;
    font-size:14.5px;
    font-family:inherit;
    color:var(--text);
    background:#fff;
    width:100%;
  }
  input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(11,37,69,.12);
  }
  textarea{resize:vertical;min-height:90px;}

  .help-text{font-size:12px;color:var(--muted);margin-top:4px;}
  .error-text{font-size:12px;color:var(--error);margin-top:4px;display:none;}
  .field.invalid input,
  .field.invalid select,
  .field.invalid textarea{border-color:var(--error);}
  .field.invalid .error-text{display:block;}

  /* OTP row */
  .otp-row{display:flex;gap:10px;align-items:flex-end;}
  .otp-row .field{flex:1;margin-bottom:0;}
  .btn-secondary{
    background:#fff;
    border:1.5px solid var(--navy);
    color:var(--navy);
    font-weight:600;
    font-size:13.5px;
    padding:10px 16px;
    border-radius:4px;
    cursor:pointer;
    white-space:nowrap;
    transition:background .15s;
  }
  .btn-secondary:hover{background:#eef2f7;}
  .btn-secondary:disabled{opacity:.55;cursor:not-allowed;}

  .otp-box{
    display:none;
    margin-top:14px;
    padding:14px 16px;
    background:#fbf8f0;
    border:1px dashed var(--gold);
    border-radius:4px;
  }
  .otp-box.show{display:block;}
  .otp-input-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
  .otp-input-row .field{max-width:160px;margin-bottom:0;}
  .otp-status{font-size:12.5px;margin-top:8px;}
  .otp-status.success{color:var(--success);font-weight:600;}
  .otp-status.error{color:var(--error);font-weight:600;}
  .verified-badge{
    display:none;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    color:var(--success);
    font-weight:600;
    margin-top:6px;
  }
  .verified-badge.show{display:flex;}

  /* Radio / toggle groups */
  .toggle-group{display:flex;gap:10px;flex-wrap:wrap;}
  .toggle-option{
    border:1px solid #c7c2b8;
    border-radius:4px;
    padding:9px 14px;
    font-size:13.5px;
    cursor:pointer;
    background:#fff;
    user-select:none;
  }
  .toggle-option input{display:none;}
  .toggle-option.active{
    border-color:var(--navy);
    background:var(--navy);
    color:#fff;
    font-weight:600;
  }

  .conditional-block{display:none;}
  .conditional-block.show{display:block;}

  /* File upload */
  .upload-box{
    border:1.5px dashed #c7c2b8;
    border-radius:4px;
    padding:18px;
    text-align:center;
    cursor:pointer;
    background:#fafaf8;
    font-size:13.5px;
    color:var(--muted);
  }
  .upload-box:hover{border-color:var(--navy);}
  .upload-box input{display:none;}
  .file-name{margin-top:8px;font-size:13px;color:var(--text);font-weight:600;display:none;}

  .section-footer{
    padding:6px 22px 18px;
    font-size:12px;
    color:var(--muted);
  }

  /* Submit */
  .submit-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 22px;
    flex-wrap:wrap;
  }
  .submit-bar p{margin:0;font-size:12.5px;color:var(--muted);max-width:420px;}
  .btn-primary{
    background:var(--maroon);
    color:#fff;
    font-weight:700;
    font-size:15px;
    padding:13px 32px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    transition:background .15s;
  }
  .btn-primary:hover{background:var(--maroon-dark);}
  .btn-primary:disabled{background:#b9a9ac;cursor:not-allowed;}

  /* Success screen */
  .success-screen{
    display:none;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:48px 30px;
    text-align:center;
  }
  .success-screen.show{display:block;}
  .success-icon{
    width:64px;height:64px;border-radius:50%;
    background:#eef6f0;border:2px solid var(--success);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
  }
  .success-screen h2{margin:0 0 10px;color:var(--success);font-size:20px;}
  .success-screen .ref-no{
    display:inline-block;
    background:var(--navy);
    color:#fff;
    font-weight:700;
    font-size:16px;
    padding:8px 18px;
    border-radius:4px;
    margin:10px 0 16px;
    letter-spacing:.5px;
  }
  .success-screen p{color:var(--muted);font-size:14px;max-width:480px;margin:0 auto;}

  footer.site-footer{
    text-align:center;
    font-size:12px;
    color:var(--muted);
    padding:20px;
  }

  @media (max-width:640px){
    .fields-grid{grid-template-columns:1fr;padding:18px 16px 4px;}
    .header-inner{padding:14px 16px;}
    .header-text h1{font-size:17px;}
    legend{padding:11px 14px;font-size:14.5px;}
    .submit-bar{flex-direction:column;align-items:stretch;text-align:center;}
    .btn-primary{width:100%;}
  }

  /* Accessibility: visible focus */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .toggle-option:focus-within{
    outline:3px solid var(--gold);
    outline-offset:1px;
  }
</style>
        and move the <style> block to /wwwroot/css/grievance.css and the
        <script> block to /wwwroot/js/grievance.js.
      - Update the three TODO sections with real fetch() calls to your API
        controllers (e.g. Controllers/OtpController.cs, Controllers/GrievanceController.cs).

   =========================================================================== */

  const form = document.getElementById('grievanceForm');
  const mobileInput = document.getElementById('mobile');
  const sendOtpBtn = document.getElementById('sendOtpBtn');
  const otpBox = document.getElementById('otpBox');
  const otpInput = document.getElementById('otpInput');
  const verifyOtpBtn = document.getElementById('verifyOtpBtn');
  const resendOtpBtn = document.getElementById('resendOtpBtn');
  const resendTimerEl = document.getElementById('resendTimer');
  const otpStatus = document.getElementById('otpStatus');
  const verifiedBadge = document.getElementById('verifiedBadge');
  const mobileError = document.getElementById('mobileError');

  let mobileVerified = false;
  let resendInterval = null;

  // ---- Toggle group for "Accused known?" ----
  const accusedKnownGroup = document.getElementById('accusedKnownGroup');
  const accusedDetailsBlock = document.getElementById('accusedDetailsBlock');
  accusedKnownGroup.querySelectorAll('.toggle-option').forEach(opt => {
    opt.addEventListener('click', () => {
      accusedKnownGroup.querySelectorAll('.toggle-option').forEach(o => o.classList.remove('active'));
      opt.classList.add('active');
      opt.querySelector('input').checked = true;
      accusedDetailsBlock.classList.add('show');
      accusedDetailsBlock.style.display = 'grid';
    });
  });

  // ---- File upload display ----
  const evidenceUpload = document.getElementById('evidenceUpload');
  const fileNameEl = document.getElementById('fileName');
  evidenceUpload.addEventListener('change', () => {
    if (evidenceUpload.files.length > 0) {
      fileNameEl.textContent = '📄 ' + evidenceUpload.files[0].name;
      fileNameEl.style.display = 'block';
    } else {
      fileNameEl.style.display = 'none';
    }
  });

  // ---- Mobile number: digits only ----
  mobileInput.addEventListener('input', () => {
    mobileInput.value = mobileInput.value.replace(/\D/g, '').slice(0, 10);
    // If mobile changes after verification, reset verified state
    if (mobileVerified) {
      mobileVerified = false;
      verifiedBadge.classList.remove('show');
      otpBox.classList.remove('show');
    }
  });

  // ===========================================================================
  // TODO: REPLACE WITH REAL SEND OTP API CALL
  // ===========================================================================
  function mockSendOtp(mobileNumber) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ success: true, message: 'OTP sent' });
      }, 500);
    });
    /* REAL VERSION EXAMPLE:
    return fetch('/api/otp/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ mobileNumber })
    }).then(res => res.json());
    */
  }

  sendOtpBtn.addEventListener('click', async () => {
    const mobile = mobileInput.value.trim();
    if (mobile.length !== 10) {
      mobileError.style.display = 'block';
      mobileInput.closest('.field').classList.add('invalid');
      return;
    }
    mobileError.style.display = 'none';
    mobileInput.closest('.field').classList.remove('invalid');

    sendOtpBtn.disabled = true;
    sendOtpBtn.textContent = 'पाठवत आहे...';

    const res = await mockSendOtp(mobile);

    sendOtpBtn.disabled = false;
    sendOtpBtn.textContent = 'OTP पुन्हा पाठवा';

    if (res.success) {
      otpBox.classList.add('show');
      otpStatus.textContent = 'OTP पाठवला आहे. (टेस्टसाठी OTP: 12345)';
      otpStatus.className = 'otp-status';
      startResendTimer();
    } else {
      otpStatus.textContent = 'OTP पाठवण्यात अडचण आली. पुन्हा प्रयत्न करा.';
      otpStatus.className = 'otp-status error';
    }
  });

  function startResendTimer() {
    let seconds = 30;
    resendOtpBtn.disabled = true;
    resendTimerEl.textContent = seconds;
    clearInterval(resendInterval);
    resendInterval = setInterval(() => {
      seconds--;
      resendTimerEl.textContent = seconds;
      if (seconds <= 0) {
        clearInterval(resendInterval);
        resendOtpBtn.disabled = false;
        resendOtpBtn.textContent = 'पुन्हा पाठवा';
      }
    }, 1000);
  }

  resendOtpBtn.addEventListener('click', () => {
    sendOtpBtn.click();
  });

  // ===========================================================================
  // TODO: REPLACE WITH REAL VERIFY OTP API CALL
  // ===========================================================================
  function mockVerifyOtp(mobileNumber, otp) {
    return new Promise((resolve) => {
      setTimeout(() => {
        // Hardcoded test OTP = 12345
        if (otp === '12345') {
          resolve({ success: true, message: 'OTP verified' });
        } else {
          resolve({ success: false, message: 'Invalid OTP' });
        }
      }, 400);
    });
    /* REAL VERSION EXAMPLE:
    return fetch('/api/otp/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ mobileNumber, otp })
    }).then(res => res.json());
    */
  }

  verifyOtpBtn.addEventListener('click', async () => {
    const otp = otpInput.value.trim();
    const mobile = mobileInput.value.trim();
    if (!otp) {
      otpStatus.textContent = 'कृपया OTP टाका.';
      otpStatus.className = 'otp-status error';
      return;
    }

    verifyOtpBtn.disabled = true;
    verifyOtpBtn.textContent = 'तपासत आहे...';

    const res = await mockVerifyOtp(mobile, otp);

    verifyOtpBtn.disabled = false;
    verifyOtpBtn.textContent = 'पडताळणी करा';

    if (res.success) {
      mobileVerified = true;
      otpStatus.textContent = 'OTP यशस्वीरित्या पडताळले गेले.';
      otpStatus.className = 'otp-status success';
      verifiedBadge.classList.add('show');
      otpBox.classList.remove('show');
      clearInterval(resendInterval);
    } else {
      otpStatus.textContent = 'चुकीचा OTP. कृपया पुन्हा प्रयत्न करा.';
      otpStatus.className = 'otp-status error';
    }
  });

  // ===========================================================================
  // TODO: REPLACE WITH REAL FORM SUBMIT API CALL
  // ===========================================================================
  function mockSubmitForm(formData) {
    return new Promise((resolve) => {
      setTimeout(() => {
        const refNo = 'PRB/2026/' + String(Math.floor(10000 + Math.random() * 89999));
        resolve({ success: true, referenceNo: refNo });
      }, 700);
    });
    /* REAL VERSION EXAMPLE:
    return fetch('/api/grievance/submit', {
      method: 'POST',
      body: formData // multipart/form-data including file
    }).then(res => res.json());
    */
  }

  // ---- Basic required-field validation ----
  function validateForm() {
    let valid = true;
    const requiredFields = [
      { el: document.getElementById('fullName') },
      { el: mobileInput },
      { el: document.getElementById('address') },
      { el: document.getElementById('complaintType') },
      { el: document.getElementById('policeStation') },
      { el: document.getElementById('incidentDate') },
      { el: document.getElementById('incidentPlace') },
      { el: document.getElementById('description') }
    ];

    requiredFields.forEach(({ el }) => {
      const field = el.closest('.field');
      if (!el.value || (el.id === 'mobile' && el.value.length !== 10)) {
        field.classList.add('invalid');
        valid = false;
      } else {
        field.classList.remove('invalid');
      }
    });

    const emailEl = document.getElementById('email');
    if (emailEl.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailEl.value)) {
      emailEl.closest('.field').classList.add('invalid');
      valid = false;
    }

    if (!mobileVerified) {
      mobileError.textContent = 'कृपया मोबाईल नंबर OTP द्वारे पडताळणी करा.';
      mobileError.style.display = 'block';
      mobileInput.closest('.field').classList.add('invalid');
      valid = false;
    }

    return valid;
  }

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    if (!validateForm()) {
      const firstInvalid = form.querySelector('.invalid');
      if (firstInvalid) firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return;
    }

    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = true;
    submitBtn.textContent = 'सादर करत आहे...';

    const formData = new FormData(form);
    const res = await mockSubmitForm(formData);

    submitBtn.disabled = false;
    submitBtn.textContent = 'तक्रार सादर करा';

    if (res.success) {
      form.style.display = 'none';
      document.getElementById('successScreen').classList.add('show');
      document.getElementById('refNoDisplay').textContent = res.referenceNo;
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  });
</script>

</body>

/* ===== Language Toggle ===== */
.lang-toggle{
  display:flex;gap:6px;margin-left:auto;flex-shrink:0;
}
.lang-btn{
  border:1.5px solid rgba(255,255,255,.4);
  background:transparent;
  color:#cfd9e8;
  padding:6px 13px;
  border-radius:4px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s;
}
.lang-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.lang-btn.active{
  background:#fff;
  color:var(--navy);
  border-color:#fff;
}

/* Success screen show class */
.success-screen.show{display:block;}