<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PixelSage – Real-Time Image Processing</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
  <nav class="navbar">
    <div class="container navbar-inner">
      <a href="{{ url_for('index') }}" class="logo">Pixel<span>Sage</span></a>
      <ul class="nav-links">
        <li><a href="#features">Features</a></li>
        {% if current_user.is_authenticated %}
          <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
          <li><a href="{{ url_for('logout') }}">Logout</a></li>
        {% else %}
          <li><a href="{{ url_for('login') }}">Login</a></li>
          <li><a href="{{ url_for('register') }}" class="btn btn-primary" style="padding:0.5rem 1rem;">Sign Up</a></li>
        {% endif %}
      </ul>
    </div>
  </nav>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <div class="flash-container">
        {% for category, message in messages %}
          <div class="flash flash-{{ category }}">{{ message }}</div>
        {% endfor %}
      </div>
    {% endif %}
  {% endwith %}

  <section class="hero container">
    <h1>PixelSage</h1>
    <p>Professional real-time image processing powered by OpenCV. Upload, transform, preview instantly, and download — all in under two seconds.</p>
    <div class="hero-actions">
      {% if current_user.is_authenticated %}
        <a href="{{ url_for('dashboard') }}" class="btn btn-primary">Open Dashboard</a>
      {% else %}
        <a href="{{ url_for('register') }}" class="btn btn-primary">Get Started Free</a>
        <a href="{{ url_for('login') }}" class="btn btn-secondary">Sign In</a>
      {% endif %}
    </div>

    <div class="demo-gallery">
      <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop" alt="Mountain landscape demo">
      <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=300&fit=crop" alt="Portrait demo">
      <img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=400&h=300&fit=crop" alt="Ocean demo">
    </div>
  </section>

  <section id="features" class="features container">
    <h2 class="section-title font-display">Powerful Operations</h2>
    <div class="feature-grid">
      <div class="feature-card glass">
        <div class="feature-icon">⚡</div>
        <h3>Sobel Edge Detection</h3>
        <p>Highlight edges and contours with gradient-based Sobel filters for crisp structural analysis.</p>
      </div>
      <div class="feature-card glass">
        <div class="feature-icon">🔄</div>
        <h3>Affine Transforms</h3>
        <p>Rotate, scale, and translate images with precise affine matrix transformations.</p>
      </div>
      <div class="feature-card glass">
        <div class="feature-icon">🌫️</div>
        <h3>Gaussian Blur</h3>
        <p>Apply smooth Gaussian blur with adjustable kernel size for soft, professional effects.</p>
      </div>
      <div class="feature-card glass">
        <div class="feature-icon">✨</div>
        <h3>Image Sharpening</h3>
        <p>Enhance detail using a custom convolution kernel for crisp, vivid output.</p>
      </div>
      <div class="feature-card glass">
        <div class="feature-icon">🎨</div>
        <h3>Grayscale &amp; Histogram EQ</h3>
        <p>Convert to monochrome or boost contrast with adaptive histogram equalization.</p>
      </div>
      <div class="feature-card glass">
        <div class="feature-icon">📊</div>
        <h3>Operation History</h3>
        <p>Track your last 10 operations with timestamps and processing metrics per account.</p>
      </div>
    </div>
  </section>

  <footer class="footer">
    <p>&copy; 2026 PixelSage · Flask · OpenCV · Tailwind</p>
  </footer>

  <script>
    setTimeout(() => {
      document.querySelectorAll('.flash').forEach(el => {
        el.style.opacity = '0';
        el.style.transition = 'opacity 0.4s';
        setTimeout(() => el.remove(), 400);
      });
    }, 4500);
  </script>
</body>
</html>
