```html
<!-- GRANADAEA PROPERTY VALUATION TOOL -->
<section class="gea-valuation-hero">
  <div class="gea-overlay"></div>

  <div class="gea-valuation-box">

    <h1>Free Property Valuation</h1>

    <p class="gea-subtitle">
      Compare your property against current Granada Estate Agency listings.
    </p>

    <form id="valuationForm">

      <div class="gea-grid">

        <div>
          <label>Town / Area</label>
          <input type="text" id="location" required>
        </div>

        <div>
          <label>Property Type</label>
          <select id="propertyType">
            <option>Flat</option>
            <option>House</option>
            <option>Villa</option>
            <option>Country House</option>
            <option>Farmhouse</option>
            <option>Land</option>
          </select>
        </div>

        <div>
          <label>Bedrooms</label>
          <input type="number" id="bedrooms" value="3">
        </div>

        <div>
          <label>Bathrooms</label>
          <input type="number" id="bathrooms" value="2">
        </div>

        <div>
          <label>Built Size (m²)</label>
          <input type="number" id="builtSize" value="120">
        </div>

        <div>
          <label>Condition</label>
          <select id="condition">
            <option>Excellent</option>
            <option selected>Good</option>
            <option>Needs updating</option>
            <option>Renovation project</option>
          </select>
        </div>

      </div>

      <button type="submit" class="gea-btn">
        Get Valuation
      </button>

      <div id="listingStatus">
        Loading GranadaEA listings...
      </div>

    </form>

    <div id="results" style="display:none;">

      <div class="gea-prices">

        <div class="gea-price-box">
          <span>Low Estimate</span>
          <strong id="lowEstimate">€0</strong>
        </div>

        <div class="gea-price-box gea-main-price">
          <span>Suggested Asking Price</span>
          <strong id="midEstimate">€0</strong>
        </div>

        <div class="gea-price-box">
          <span>High Estimate</span>
          <strong id="highEstimate">€0</strong>
        </div>

      </div>

      <div class="gea-evaluation">
        <h3>Brief Evaluation</h3>
        <p id="evaluationText"></p>
      </div>

      <table class="gea-table">

        <thead>
          <tr>
            <th>Ref</th>
            <th>Area</th>
            <th>Type</th>
            <th>Beds</th>
            <th>Size</th>
            <th>Price</th>
            <th>Match</th>
          </tr>
        </thead>

        <tbody id="comparisonRows"></tbody>

      </table>

    </div>

  </div>
</section>

<style>

.gea-valuation-hero{
  position:relative;
  padding:80px 20px;
  background:#f5f5f5;
}

.gea-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#1f4f46 0%,#15342f 100%);
}

.gea-valuation-box{
  position:relative;
  max-width:1200px;
  margin:auto;
  background:#fff;
  border-radius:20px;
  padding:40px;
  z-index:2;
  box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

.gea-valuation-box h1{
  margin-top:0;
  font-size:42px;
  color:#1f4f46;
}

.gea-subtitle{
  color:#666;
  margin-bottom:30px;
}

.gea-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.gea-grid label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
}

.gea-grid input,
.gea-grid select{
  width:100%;
  padding:14px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:16px;
}

.gea-btn{
  margin-top:30px;
  background:#1f4f46;
  color:#fff;
  border:none;
  padding:16px 28px;
  border-radius:50px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.gea-btn:hover{
  background:#163a34;
}

#listingStatus{
  margin-top:15px;
  color:#777;
  font-size:14px;
}

.gea-prices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
}

.gea-price-box{
  background:#f3f7f6;
  padding:25px;
  border-radius:16px;
  text-align:center;
}

.gea-main-price{
  background:#1f4f46;
  color:#fff;
}

.gea-price-box span{
  display:block;
  margin-bottom:10px;
}

.gea-price-box strong{
  font-size:34px;
}

.gea-evaluation{
  margin-top:40px;
  background:#fff9e8;
  padding:25px;
  border-radius:16px;
}

.gea-table{
  width:100%;
  margin-top:35px;
  border-collapse:collapse;
}

.gea-table th{
  background:#1f4f46;
  color:#fff;
  padding:14px;
}

.gea-table td{
  padding:14px;
  border-bottom:1px solid #eee;
}

@media(max-width:768px){

  .gea-grid{
    grid-template-columns:1fr;
  }

  .gea-prices{
    grid-template-columns:1fr;
  }

  .gea-valuation-box{
    padding:25px;
  }

  .gea-valuation-box h1{
    font-size:32px;
  }

}

</style>

<script>

const LISTINGS_API_URL =
'https://www.granadaea.com/api/granadaea-live-listings';

let liveListings = [];

async function loadListings(){

  try{

    const response = await fetch(LISTINGS_API_URL);

    const data = await response.json();

    liveListings = data;

    document.getElementById('listingStatus').innerHTML =
      liveListings.length + ' live listings loaded';

  }catch(error){

    document.getElementById('listingStatus').innerHTML =
      'Listings feed unavailable';

  }

}

function formatCurrency(value){

  return new Intl.NumberFormat('en-GB',{
    style:'currency',
    currency:'EUR',
    maximumFractionDigits:0
  }).format(value);

}

function scoreProperty(user, listing){

  let score = 0;

  if(
    listing.area.toLowerCase()
    .includes(user.location.toLowerCase())
  ){
    score += 40;
  }

  if(listing.type === user.type){
    score += 30;
  }

  score += Math.max(
    0,
    20 - Math.abs(user.beds - listing.beds) * 5
  );

  score += Math.max(
    0,
    10 - Math.abs(user.size - listing.size) / 10
  );

  return Math.min(score,100);

}

document.getElementById('valuationForm')
.addEventListener('submit',function(e){

  e.preventDefault();

  const property = {

    location:
      document.getElementById('location').value,

    type:
      document.getElementById('propertyType').value,

    beds:
      Number(document.getElementById('bedrooms').value),

    size:
      Number(document.getElementById('builtSize').value)

  };

  const ranked = liveListings

    .map(item=>({

      ...item,

      match:scoreProperty(property,item),

      priceM2:item.price / item.size

    }))

    .sort((a,b)=>b.match-a.match)

    .slice(0,6);

  const avgM2 =

    ranked.reduce((sum,item)=>
      sum + item.priceM2,0
    ) / ranked.length;

  const estimate = avgM2 * property.size;

  document.getElementById('lowEstimate')
    .innerHTML = formatCurrency(estimate * 0.92);

  document.getElementById('midEstimate')
    .innerHTML = formatCurrency(estimate);

  document.getElementById('highEstimate')
    .innerHTML = formatCurrency(estimate * 1.08);

  document.getElementById('evaluationText')
    .innerHTML =
      `Based on current GranadaEA listings, your property may achieve around ${formatCurrency(estimate)} depending on condition, location and demand.`;


  document.getElementById('comparisonRows')
    .innerHTML = ranked.map(item=>`

      <tr>

        <td>
          <a href="${item.url}" target="_blank">
            ${item.ref}
          </a>
        </td>

        <td>${item.area}</td>

        <td>${item.type}</td>

        <td>${item.beds}</td>

        <td>${item.size} m²</td>

        <td>${formatCurrency(item.price)}</td>

        <td>${Math.round(item.match)}%</td>

      </tr>

    `).join('');

  document.getElementById('results')
    .style.display = 'block';

});

loadListings();

</script>
```