<!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>
    
    <!-- Payment Type Selection -->
    <div class="payment-type-tabs">
      <button type="button" id="one-time-tab" class="tab-button active">One-time</button>
      <button type="button" id="recurring-tab" class="tab-button">Monthly</button>
    </div>
    
    <!-- One-time Donation Form -->
    <form id="donation-form" class="payment-form active">
      <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>
    
    <!-- Subscription Form -->
    <form id="subscription-form" class="payment-form">
      <label>Choose Your Support Level</label>
      
      <!-- Subscription Tier Buttons -->
      <div class="tier-buttons">
        <div class="tier-button" data-tier="bronze">
          <div class="tier-icon">🥉</div>
          <div class="tier-name">Bronze</div>
          <div class="tier-price">£2<span class="tier-period">/month</span></div>
          <div class="tier-description">Essential support that makes a difference</div>
        </div>
        
        <div class="tier-button" data-tier="silver">
          <div class="tier-icon">🥈</div>
          <div class="tier-name">Silver</div>
          <div class="tier-price">£5<span class="tier-period">/month</span></div>
          <div class="tier-description">Enhanced support with greater impact</div>
        </div>
        
        <div class="tier-button" data-tier="gold">
          <div class="tier-icon">🥇</div>
          <div class="tier-name">Gold</div>
          <div class="tier-price">£10<span class="tier-period">/month</span></div>
          <div class="tier-description">Premium support for maximum impact</div>
        </div>
        
        <div class="tier-button" data-tier="diamond">
          <div class="tier-icon">💎</div>
          <div class="tier-name">Diamond</div>
          <div class="tier-price">£25<span class="tier-period">/month</span></div>
          <div class="tier-description">Ultimate support for our biggest champions</div>
        </div>
      </div>
      
      <!-- Hidden input to store selected tier -->
      <input type="hidden" id="subscription-tier" required>
      
      <label for="subscriber-email">Email Address *</label>
      <input type="email" id="subscriber-email" placeholder="your@email.com" required>
      
      <label for="subscriber-name">Your Name (optional)</label>
      <input type="text" id="subscriber-name" placeholder="Enter your name" maxlength="30">
      
      <label for="subscription-card-element">Card Details</label>
      <div id="subscription-card-element"></div>
      
      <button type="submit" id="subscription-submit-button">Start Monthly Support</button>
      <div id="subscription-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>
  <script src="{{ url_for('static', filename='js/subscriptions.js') }}"></script>
</body>
</html>
