{% extends "layout.html" %}

{% block title %}Occupancy{% endblock %}

{% block content %}
<div class="centered-header" data-aos="fade-up" data-aos-duration="800" style="margin-top: 60px;">
  <h1 class="gradient-text">Occupancy Dashboard</h1>
  <p style="font-size: 18px; margin-top: 10px;">This section is currently <strong>under development</strong>.</p>
  <p style="color: #888; font-size: 14px; margin-top: 8px;">We're working hard to bring you occupancy insights soon.</p>

  <div data-aos="zoom-in" data-aos-duration="1000" style="margin-top: 30px; padding: 15px 25px; border-radius: 12px; background: #fff8e1; border: 1px solid #ffe082; display: inline-block;">
    <strong style="color: #ff9800;">Note:</strong> This section is under development. Features will be added soon.
  </div>

  <div data-aos="fade-up" data-aos-duration="1200" class="parallax-container" style="margin-top: 40px;">
    <img src="{{ url_for('static', filename='images/HoOm Logo Name black.png') }}" width="140" alt="Logo" class="parallax-image">
  </div>
</div>

<style>
  .parallax-container {
    position: relative;
    overflow: hidden;
    height: 200px;
  }

  .parallax-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease-out;
  }

  .parallax-container:hover .parallax-image {
    transform: translateY(-30px) translateX(-50%);
  }
</style>

<script>
  window.addEventListener('scroll', function() {
    const parallax = document.querySelector('.parallax-image');
    if (parallax) {
      let offset = window.pageYOffset * 0.5;
      parallax.style.transform = `translateY(${offset}px) translateX(-50%)`;
    }
  });
</script>
{% endblock %}