{% extends "layout.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="centered-header" data-aos="fade-up" data-aos-duration="800" style="margin-top: 60px;">
  <h1 class="gradient-text">Welcome to Your Dashboard</h1>
  <p style="font-size: 18px; margin-top: 10px;">Choose a section from the sidebar to get started.</p>
  <p style="color: #888; font-size: 14px; margin-top: 8px;">CRM • Sales & Revenue • Campaign • Pricing • Occupancy</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 dashboard is still under development. Features and visuals may change.
  </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') }}" alt="Logo" width="140" 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 effect */
  .parallax-container:hover .parallax-image {
    transform: translateY(-30px) translateX(-50%); /* move image on hover */
  }
</style>

<script>
  // Optional: Parallax effect on scroll
  window.addEventListener('scroll', function() {
    const parallax = document.querySelector('.parallax-image');
    let offset = window.pageYOffset * 0.5; // Adjust speed of parallax movement
    parallax.style.transform = `translateY(${offset}px) translateX(-50%)`;
  });
</script>
{% endblock %}