<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Donate</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://js.stripe.com/v3/"></script>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
  <script>
    // Immediately set saved theme and positions to prevent visual jumping
    (function() {
      // Set theme immediately before page renders
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme) {
        document.documentElement.setAttribute('data-theme', savedTheme);
      } else {
        // Check system preference if no saved theme
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
      }
      
      // Theme button position
      const themePosition = localStorage.getItem('themeButtonPosition');
      if (themePosition) {
        const pos = JSON.parse(themePosition);
        document.documentElement.style.setProperty('--theme-button-x', pos.x + 'px');
        document.documentElement.style.setProperty('--theme-button-y', pos.y + 'px');
        // Add class when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
          const themeButton = document.getElementById('theme-toggle');
          if (themeButton) themeButton.classList.add('positioned');
        });
      }
      
      // Typewriter position
      const typewriterPosition = localStorage.getItem('typewriterPosition');
      if (typewriterPosition) {
        const pos = JSON.parse(typewriterPosition);
        document.documentElement.style.setProperty('--typewriter-x', pos.x + 'px');
        document.documentElement.style.setProperty('--typewriter-y', pos.y + 'px');
      }
      
      // Logo position
      const logoPosition = localStorage.getItem('logoPosition');
      if (logoPosition) {
        const pos = JSON.parse(logoPosition);
        document.documentElement.style.setProperty('--logo-x', pos.x + 'px');
        document.documentElement.style.setProperty('--logo-y', pos.y + 'px');
      }
    })();
  </script>
</head>
<body>
  <img src="{{ url_for('static', filename='ct.png') }}" alt="Logo" class="logo" />
  <div class="info-box">
    <div class="typewriter-text" id="typewriter-text">Thanks for your support! ❤️</div>
  </div>
  <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙 Dark</button>
  
  <div class="card">
    <h1>Support Us</h1>
    <form id="donation-form">
      <label for="amount">Amount</label>
      <input type="number" id="amount" min="1" step="0.01" placeholder="10.00" required>
      
      <label for="currency">Currency</label>
      <select id="currency">
        <option value="GBP">GBP £</option>
        <option value="EUR">EUR €</option>
        <option value="USD">USD $</option>
      </select>
      
      <label for="supporter-name">Your Name (optional - for supporter wall)</label>
      <input type="text" id="supporter-name" placeholder="Enter your name to appear on the supporter wall" maxlength="30">
      
      <!-- Express Payment Methods (Google Pay, Apple Pay) -->
      <div id="express-checkout-element">
        <!-- Stripe will insert express payment buttons here -->
      </div>
      
      <div class="payment-divider">
        <span>or pay with card</span>
      </div>
      
      <label for="card-element">Card Details</label>
      <div id="card-element"></div>
      
      <button type="submit" id="card-submit-button">Support me</button>
      <div id="result"></div>
    </form>
  </div>

  <!-- Supporter Wall -->
  <div class="supporter-wall" id="supporter-wall">
    <h3>Recent Supporters ❤️</h3>
    <div class="supporters-list" id="supporters-list">
      <div class="supporter-item">Loading supporters...</div>
    </div>
  </div>
  
  <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
  <script src="{{ url_for('static', filename='js/typewriter.js') }}"></script>
  <script src="{{ url_for('static', filename='js/logo.js') }}"></script>
  <script src="{{ url_for('static', filename='js/supporters.js') }}"></script>
  <script src="{{ url_for('static', filename='js/donate.js') }}"></script>
</body>
</html>
