<div class="calculator-container">
    <h1>Meet Person Interactively</h1>

    <div class="input-group">
      <label for="ageInput">Enter Person's Age:</label>
      <input type="number" id="ageInput" placeholder="e.g., 28">
    </div>

    <button id="greetButton">Greet Person!</button>

    <div id="results-container" class="results hidden">
      <p id="person-output"></p> <\!-- Output will go here -->
    </div>

    <div id="error-message" class="error hidden">
      <p>Please enter a valid age (a positive number).</p>
    </div>
  </div>

body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.calculator-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 400px;
}

h1 {
  color: #333;
  margin-bottom: 25px;
}

.input-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: bold;
}

input[type="number"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

button {
  background-color: #5cb85c;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #4cae4c;
}

.results, .error {
  margin-top: 25px;
  padding: 15px;
  border-radius: 5px;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
}

.results p, .error p { /* Target paragraphs inside results and error */
  margin: 0;
  color: #495057;
  font-size: 16px;
  white-space: pre-line; /*  Important to respect line breaks in greeting */
}

.results.hidden, .error.hidden {
  display: none;
}

.completed { /* Keep .completed class in CSS if you plan to reuse it */
  text-decoration: line-through;
  color: gray;
}

const Person = {
  //  --- Properties (Data) ---
  name: "Spruce",
  country: "Nigeria",
  profession: "Engineer",
  age: 0, // Age will be set dynamically

  //  --- Methods (Actions related to Person data) ---
  isValidAge: function () {
    return typeof this.age === "number" && this.age > 0;
  },

  getBirthYear: function () {
    if (!this.isValidAge()) {
      return "Invalid age!";
    }
    return new Date().getFullYear() - this.age;
  },

  getZodiacSign: function () {
    if (!this.isValidAge()) {
      return "Oops, can't get zodiac for an invalid age!";
    }

    const birthYear = this.getBirthYear();
    const zodiacSigns = [
      "Capricorn", "Aquarius", "Pisces", "Aries", "Taurus", "Gemini",
      "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius"
    ];
    return zodiacSigns[birthYear % 12];
  },

  greet: function () {
    return (
      `Hello, I'm ${this.name}. I'm ${
        this.age
      } years old, born in ${this.getBirthYear()}, \n` +
      `working as a ${this.profession} from ${
        this.country
      }.  My zodiac sign is ${this.getZodiacSign()}.`
    );
  },
};

document.addEventListener('DOMContentLoaded', () => {
  const greetButton = document.getElementById('greetButton');
  const ageInput = document.getElementById('ageInput');
  const personOutput = document.getElementById('person-output'); // Get output paragraph
  const resultsContainer = document.getElementById('results-container');
  const errorMessage = document.getElementById('error-message');

  greetButton.addEventListener('click', () => {
    const ageInputValue = parseInt(ageInput.value);

    if (isNaN(ageInputValue) || ageInputValue <= 0) {
      errorMessage.classList.remove('hidden');
      resultsContainer.classList.add('hidden');
      return;
    }

    errorMessage.classList.add('hidden'); // Hide error message if valid input

    Person.age = ageInputValue; // Dynamically set Person's age from input
    const greetingMessage = Person.greet(); // Now call greet to get message with updated age

    personOutput.textContent = greetingMessage; // Set textContent of paragraph element
    resultsContainer.classList.remove('hidden'); // Show results
  });
});