<div style="max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; font-family: system-ui, sans-serif;">
  <h2>Couples Feng Shui – Kua Number Tester</h2>

  <!-- Person A -->
  <h3>Person A</h3>
  <label>Birth year (YYYY):
    <input id="yearA" type="number" min="1900" max="2099" placeholder="1975">
  </label>
  <br><br>
  <label>Gender:
    <select id="genderA">
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
  </label>

  <hr>

  <!-- Person B -->
  <h3>Person B</h3>
  <label>Birth year (YYYY):
    <input id="yearB" type="number" min="1900" max="2099" placeholder="1978">
  </label>
  <br><br>
  <label>Gender:
    <select id="genderB">
      <option value="female">Female</option>
      <option value="male">Male</option>
    </select>
  </label>

  <hr>

  <button onclick="calculateCoupleKua()" style="padding: 8px 16px; cursor: pointer;">
    Calculate Kua Numbers
  </button>

  <div id="results" style="margin-top: 20px;"></div>
</div>

<script>
  // Helper: reduce a number to a single digit by summing its digits
  function toSingleDigit(num) {
    while (num > 9) {
      let sum = 0;
      for (const digit of String(num)) {
        sum += parseInt(digit, 10);
      }
      num = sum;
    }
    return num;
  }

  // Core Kua calculation
  function calculateKua(year, gender) {
    const y = parseInt(year, 10);
    if (isNaN(y) || y < 1900 || y > 2099) {
      return null; // invalid year
    }

    // Step 1: Kua factor = single digit of last two digits
    const lastTwo = y % 100;              // e.g. 1975 -> 75
    const factor = toSingleDigit(lastTwo); // e.g. 7 + 5 = 12 -> 1 + 2 = 3

    let kua;

    if (gender === "male") {
      if (y < 2000) {
        // Male, born BEFORE 2000: 10 - factor
        kua = 10 - factor;
      } else {
        // Male, born 2000 or later: 9 - factor
        kua = 9 - factor;
      }
      if (kua === 5) kua = 2; // special rule for 5
    } else {
      // Female
      if (y < 2000) {
        // Female, born BEFORE 2000: factor + 5
        kua = factor + 5;
      } else {
        // Female, born 2000 or later: factor + 6
        kua = factor + 6;
      }
      kua = toSingleDigit(kua); // if it's 2 digits, reduce again
      if (kua === 5) kua = 8;   // special rule for 5
    }

    return kua;
  }

  // Simple mapping from Kua to element (you can expand this later)
  function kuaToElement(kua) {
    switch (kua) {
      case 1: return "Water";
      case 2: return "Earth";
      case 3: return "Wood";
      case 4: return "Wood";
      case 5: return "Earth";
      case 6: return "Metal";
      case 7: return "Metal";
      case 8: return "Earth";
      case 9: return "Fire";
      default: return "Unknown";
    }
  }

  function calculateCoupleKua() {
    const yearA = document.getElementById("yearA").value;
    const genderA = document.getElementById("genderA").value;
    const yearB = document.getElementById("yearB").value;
    const genderB = document.getElementById("genderB").value;

    const kuaA = calculateKua(yearA, genderA);
    const kuaB = calculateKua(yearB, genderB);

    const resultsDiv = document.getElementById("results");

    if (kuaA === null || kuaB === null) {
      resultsDiv.innerHTML = "<p>Please enter valid years between 1900 and 2099.</p>";
      return;
    }

    const elemA = kuaToElement(kuaA);
    const elemB = kuaToElement(kuaB);

    resultsDiv.innerHTML = `
      <h3>Results</h3>
      <p><strong>Person A:</strong> Kua ${kuaA} (${elemA})</p>
      <p><strong>Person B:</strong> Kua ${kuaB} (${elemB})</p>
      <p>You can now use these Kua numbers to look up best directions, color palettes, and Feng Shui tips for your couple app idea.</p>
    `;
  }
</script>