script.js

const households = [
  {
    name: "The Bunkman-López Collective",
    size: "large",
    feature: "basement",
    people: "7 humans, 1 sourdough starter",
    ask: "Seeking a family with a calm toddler, strong tarp opinions, and no fear of exposed beams.",
    badges: ["Basement negotiable", "Bulk beans", "Early risers"],
    score: 86,
    color: "#8e5840"
  },
  {
    name: "The Porters of Unit 3B",
    size: "medium",
    feature: "quiet",
    people: "4 humans, 2 remote jobs",
    ask: "Can contribute a label maker, quiet despair, and a spreadsheet for rotating shower minutes.",
    badges: ["Low-screaming hours", "Wi-Fi rationing", "Chore literate"],
    score: 78,
    color: "#2f6f73"
  },
  {
    name: "Aunt Deb's Recession Annex",
    size: "small",
    feature: "yard",
    people: "3 humans, 14 tomato ambitions",
    ask: "Looking for housemates who can respect seedlings and pretend the shed is a guest suite.",
    badges: ["Panic yard", "Soup-positive", "Tool drawer"],
    score: 91,
    color: "#b85f40"
  },
  {
    name: "The Kwan-Rivera Lease Survivors",
    size: "medium",
    feature: "basement",
    people: "5 humans, 1 ancient freezer",
    ask: "We bring board games, emotional maturity, and an ability to ignore one concerning wall sound.",
    badges: ["Freezer space", "Basement curious", "Board games"],
    score: 83,
    color: "#556b48"
  },
  {
    name: "The Cul-de-Sac Remnants",
    size: "large",
    feature: "yard",
    people: "8 humans, no remaining illusions",
    ask: "Must enjoy communal casseroles, shared ladders, and the phrase 'temporary austerity nook.'",
    badges: ["Casserole chain", "Ladder owner", "Yard labor"],
    score: 74,
    color: "#d6a94f"
  },
  {
    name: "Mina, Paul, and the Receipts",
    size: "small",
    feature: "quiet",
    people: "2 humans, 1 binder of utility bills",
    ask: "Ideal match has predictable laundry patterns and a child who can sleep through negotiation.",
    badges: ["Budget binder", "Quiet hours", "Laundry treaty"],
    score: 88,
    color: "#813f2a"
  }
];

const matchGrid = document.querySelector("#matchGrid");
const familySize = document.querySelector("#familySize");
const feature = document.querySelector("#feature");
const cozy = document.querySelector("#cozy");
const calcForm = document.querySelector("#calcForm");
const calcResult = document.querySelector("#calcResult");
const applicationForm = document.querySelector("#applicationForm");
const plea = document.querySelector("#plea");

function renderMatches() {
  const sizeValue = familySize.value;
  const featureValue = feature.value;
  const cozyValue = Number(cozy.value);

  const filtered = households.filter((household) => {
    const sizeMatch = sizeValue === "any" || household.size === sizeValue;
    const featureMatch = featureValue === "any" || household.feature === featureValue;
    const cozyMatch = household.score / 10 >= cozyValue - 1;
    return sizeMatch && featureMatch && cozyMatch;
  });

  matchGrid.innerHTML = filtered.length
    ? filtered.map(createCard).join("")
    : `<article class="match-card"><div><h3>No matches found</h3><p>Your standards remain inspiring. Try lowering cozy tolerance before the market does it for you.</p></div></article>`;
}

function createCard(household) {
  const badges = household.badges.map((badge) => `<span class="badge">${badge}</span>`).join("");
  return `
    <article class="match-card">
      <div class="card-top">
        <div class="profile-scene" style="--scene-color: ${household.color}"></div>
        <div>
          <h3>${household.name}</h3>
          <p><strong>${household.people}</strong></p>
          <p>${household.ask}</p>
        </div>
        <div class="badge-row">${badges}</div>
      </div>
      <div>
        <p><strong>${household.score}% hovel harmony</strong></p>
        <div class="meter" aria-label="${household.score}% hovel harmony"><span style="--score: ${household.score}%"></span></div>
      </div>
    </article>
  `;
}

function updateCalculator() {
  const rent = Number(document.querySelector("#rent").value);
  const people = Number(document.querySelector("#people").value);
  const soup = Number(document.querySelector("#soup").value);
  const perPerson = people > 0 ? Math.max(0, Math.round(rent / people)) : 0;
  const ladleIndex = Math.min(99, Math.round((soup / Math.max(1, people)) * 100));
  calcResult.value = `$${perPerson} each. Ladle adequacy ${ladleIndex}%. ${getVerdict(perPerson, ladleIndex)}`;
}

function getVerdict(perPerson, ladleIndex) {
  if (perPerson < 350 && ladleIndex > 30) return "Proceed with cautious optimism.";
  if (perPerson < 550) return "Viable, pending blanket inventory.";
  return "Invite one more family or monetise the porch.";
}

applicationForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(applicationForm);
  const household = data.get("household");
  const emailTo = data.get("emailTo");
  const weather = data.get("weather");
  const adults = data.get("adults");
  const children = data.get("children");
  const animals = data.get("animals");
  const terms = data.get("terms") || "reasonable boundaries and at least one drawer that remains emotionally private";
  const subject = `HovelMatch plea from ${household}`;
  const emailBody = [
    `${household} would like to be considered for dignified hovel adjacency.`,
    "",
    `Current economic weather: ${weather}`,
    `Household makeup: ${adults}, ${children}, ${animals}`,
    `Non-negotiables: ${terms}`,
    "",
    "Compatibility status: earnest, house-trained, and willing to split bulk oats."
  ].join("\n");
  const mailto = `mailto:${encodeURIComponent(emailTo)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(emailBody)}`;

  plea.innerHTML = `
    <h3>${household}</h3>
    <p>We are experiencing a ${weather.toLowerCase()} and seek another household for dignified hovel adjacency.</p>
    <p>Household manifest: ${adults}, ${children}, ${animals}.</p>
    <p>Our terms: ${terms}.</p>
    <p><strong>Compatibility status:</strong> earnest, house-trained, and willing to split bulk oats.</p>
    <a class="button ghost" href="${mailto}">Open email plea</a>
  `;
  window.location.href = mailto;
});

[familySize, feature, cozy].forEach((control) => control.addEventListener("input", renderMatches));
calcForm.addEventListener("input", updateCalculator);

renderMatches();
updateCalculator();