RTSDA-Website/astro-church-website/src/pages/index.astro

---
import MainLayout from '../layouts/MainLayout.astro';
import { SERVICE_TIMES } from '../lib/constants.js';
import { 
  getChurchName, 
  getMissionStatement, 
  fetchFeaturedEventsJson,
  fetchSermonsJson,
  fetchRandomBibleVerseJson,
  fetchBibleVerseJson,
  getStreamLiveStatus 
} from '../lib/bindings.js';

let churchName = 'Welcome to Our Church';
let missionStatement = 'Proclaiming the Three Angels\' Message with love and truth';
let featuredEvents = [];
let latestSermons = [];
let dailyVerse = null;
let isLiveStreamActive = false;
let threeAngelsVerses = {
  first: null,
  second: null, 
  third: null
};

try {
  churchName = getChurchName();
  missionStatement = getMissionStatement();
  
  // Get featured events
  const eventsJson = fetchFeaturedEventsJson();
  const parsedEvents = JSON.parse(eventsJson);
  featuredEvents = (Array.isArray(parsedEvents) ? parsedEvents : (parsedEvents.items || [])).slice(0, 3);
  
  // Get latest sermons
  const sermonsJson = fetchSermonsJson();
  const parsedSermons = JSON.parse(sermonsJson);
  latestSermons = (Array.isArray(parsedSermons) ? parsedSermons : (parsedSermons.items || [])).slice(0, 3);
  
  // Get daily verse
  const verseJson = fetchRandomBibleVerseJson();
  dailyVerse = JSON.parse(verseJson);
  
  // Check live stream status
  isLiveStreamActive = getStreamLiveStatus();
  
  // Get Three Angels verses
  const firstAngelJson = fetchBibleVerseJson('Revelation 14:7');
  threeAngelsVerses.first = JSON.parse(firstAngelJson)[0];
  
  const secondAngelJson = fetchBibleVerseJson('Revelation 14:8');
  threeAngelsVerses.second = JSON.parse(secondAngelJson)[0];
  
  const thirdAngelJson = fetchBibleVerseJson('Revelation 14:9-10');
  threeAngelsVerses.third = JSON.parse(thirdAngelJson)[0];
} catch (e) {
  console.error('Failed to load home page data:', e);
  featuredEvents = [];
  latestSermons = [];
  dailyVerse = null;
}
---

<MainLayout title={churchName} description={missionStatement}>
  
  <!-- Hero Section with Three Angels' Message -->
  <section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-heavenly-gradient">
    <!-- Animated Background Elements -->
    <div class="absolute inset-0">
      <div class="absolute top-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-xl animate-float"></div>
      <div class="absolute top-40 right-20 w-24 h-24 bg-gold-400/20 rounded-full blur-lg animate-float" style="animation-delay: 1s;"></div>
      <div class="absolute bottom-32 left-1/4 w-40 h-40 bg-primary-300/10 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
    </div>
    
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white dark:text-white">
      <div class="mb-8" data-animate>
        <div class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-sm rounded-full px-6 py-3 mb-6">
          <i data-lucide="sparkles" class="w-5 h-5 text-gold-400"></i>
          <span class="text-sm font-medium">Seventh-day Adventist Church</span>
        </div>
        
        <h1 class="text-5xl lg:text-7xl font-bold mb-6 leading-tight">
          <span class="block text-white">{churchName}</span>
        </h1>
        
        <p class="text-xl lg:text-2xl text-blue-100 dark:text-blue-100 text-white mb-8 max-w-3xl mx-auto leading-relaxed">
          {missionStatement}
        </p>
        
        <!-- Three Angels Highlight -->
        <div class="flex justify-center items-center space-x-4 mb-12">
          <div class="flex items-center space-x-2 bg-white/15 backdrop-blur-sm rounded-xl px-4 py-2">
            <span class="w-6 h-6 bg-gold-500 rounded-full flex items-center justify-center text-xs font-bold text-black">1</span>
            <span class="w-6 h-6 bg-gold-500 rounded-full flex items-center justify-center text-xs font-bold text-black">2</span>
            <span class="w-6 h-6 bg-gold-500 rounded-full flex items-center justify-center text-xs font-bold text-black">3</span>
            <span class="text-sm font-medium ml-2">Three Angels' Message</span>
          </div>
        </div>
      </div>
      
      <!-- CTA Buttons -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12" data-animate>
        <a href="/live" class="inline-flex items-center space-x-2 bg-sacred-gradient text-white px-8 py-4 rounded-2xl font-semibold shadow-2xl hover:shadow-divine transition-all duration-300 hover:scale-105">
          <i data-lucide="video" class="w-5 h-5"></i>
          <span>Watch Live</span>
        </a>
        <a href="/events" class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-sm text-white px-8 py-4 rounded-2xl font-semibold border border-white/30 hover:bg-white/30 transition-all duration-300">
          <i data-lucide="calendar" class="w-5 h-5"></i>
          <span>View Events</span>
        </a>
      </div>
      
      <!-- Service Times -->
      <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-8 text-white dark:text-blue-100" data-animate>
        <div class="flex items-center space-x-2">
          <i data-lucide="sun" class="w-5 h-5 text-gold-400"></i>
          <span>Sabbath School: {SERVICE_TIMES.SABBATH_SCHOOL}</span>
        </div>
        <div class="flex items-center space-x-2">
          <i data-lucide="church" class="w-5 h-5 text-gold-400"></i>
          <span>Divine Service: {SERVICE_TIMES.DIVINE_SERVICE}</span>
        </div>
      </div>
    </div>
    
    <!-- Live Status Banner -->
    <div id="live-status-banner" class="absolute top-8 right-8 z-20" style={isLiveStreamActive ? '' : 'display: none;'}>
      <div class="bg-red-500 text-white px-4 py-2 rounded-full flex items-center space-x-2 shadow-lg animate-pulse">
        <div class="w-3 h-3 bg-white rounded-full"></div>
        <span class="font-semibold text-sm">LIVE NOW</span>
      </div>
    </div>
  </section>

  <!-- Three Angels' Message Section -->
  <section class="py-24 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16" data-animate>
        <h2 class="text-4xl lg:text-5xl font-bold text-divine-gradient mb-6">The Three Angels' Message</h2>
        <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
          From Revelation 14, these three angels proclaim God's final message to the world before Jesus returns.
        </p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8 lg:gap-12">
        <!-- First Angel -->
        <div class="group bg-gradient-to-br from-primary-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8 hover:shadow-large transition-all duration-500 hover:-translate-y-2" data-animate>
          <div class="w-20 h-20 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
            <span class="text-3xl font-bold text-white">1</span>
          </div>
          <h3 class="text-2xl font-bold text-center mb-4 text-primary-700 dark:text-primary-300">Fear God & Give Glory</h3>
          <p class="text-gray-600 dark:text-gray-300 text-center leading-relaxed">
            {threeAngelsVerses.first ? `"${threeAngelsVerses.first.text}"` : '"Fear God and give glory to Him, for the hour of His judgment has come; and worship Him who made heaven and earth, the sea and springs of water."'}
          </p>
          <p class="text-sm text-primary-600 dark:text-primary-400 text-center mt-4 font-medium">{threeAngelsVerses.first?.reference || 'Revelation 14:7'}</p>
        </div>

        <!-- Second Angel -->
        <div class="group bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8 hover:shadow-large transition-all duration-500 hover:-translate-y-2" data-animate>
          <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
            <span class="text-3xl font-bold text-white">2</span>
          </div>
          <h3 class="text-2xl font-bold text-center mb-4 text-purple-700 dark:text-purple-300">Babylon is Fallen</h3>
          <p class="text-gray-600 dark:text-gray-300 text-center leading-relaxed">
            {threeAngelsVerses.second ? `"${threeAngelsVerses.second.text}"` : '"Babylon is fallen, is fallen, that great city, because she has made all nations drink of the wine of the wrath of her fornication."'}
          </p>
          <p class="text-sm text-purple-600 dark:text-purple-400 text-center mt-4 font-medium">{threeAngelsVerses.second?.reference || 'Revelation 14:8'}</p>
        </div>

        <!-- Third Angel -->
        <div class="group bg-gradient-to-br from-amber-50 to-orange-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8 hover:shadow-large transition-all duration-500 hover:-translate-y-2" data-animate>
          <div class="w-20 h-20 bg-gradient-to-br from-amber-500 to-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
            <span class="text-3xl font-bold text-white">3</span>
          </div>
          <h3 class="text-2xl font-bold text-center mb-4 text-amber-700 dark:text-amber-300">Avoid the Mark</h3>
          <p class="text-gray-600 dark:text-gray-300 text-center leading-relaxed">
            {threeAngelsVerses.third ? `"${threeAngelsVerses.third.text}"` : '"If anyone worships the beast and his image, and receives his mark on his forehead or on his hand, he himself shall also drink of the wine of the wrath of God."'}
          </p>
          <p class="text-sm text-amber-600 dark:text-amber-400 text-center mt-4 font-medium">{threeAngelsVerses.third?.reference || 'Revelation 14:9-10'}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Daily Verse Section -->
  {dailyVerse && (
    <section class="py-16 bg-gradient-to-r from-primary-600 via-purple-600 to-primary-700 text-white relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-50"></div>
      
      <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-animate>
        <div class="flex items-center justify-center space-x-3 mb-6">
          <div class="w-12 h-12 bg-gold-500 rounded-full flex items-center justify-center">
            <i data-lucide="book-open" class="w-6 h-6 text-black"></i>
          </div>
          <h2 class="text-2xl lg:text-3xl font-bold">Today's Scripture</h2>
        </div>
        
        <blockquote class="text-xl lg:text-2xl font-medium italic leading-relaxed mb-6">
          "{dailyVerse.text}"
        </blockquote>
        
        <p class="text-gold-300 font-semibold">— {dailyVerse.reference}</p>
      </div>
    </section>
  )}

  <!-- Featured Events Section -->
  {featuredEvents.length > 0 && (
    <section class="py-24 bg-gray-50 dark:bg-gray-800">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16" data-animate>
          <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">Upcoming Events</h2>
          <p class="text-xl text-gray-600 dark:text-gray-300">Join us for fellowship, worship, and spiritual growth</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {featuredEvents.map(event => (
            <div class="bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-medium hover:shadow-large transition-all duration-300 hover:-translate-y-1 group" data-animate>
              {event.image && (
                <div class="aspect-video overflow-hidden">
                  <img src={event.image} alt={event.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
              )}
              <div class="p-6">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{event.title}</h3>
                <div class="flex items-center space-x-2 text-primary-600 dark:text-primary-400 mb-3">
                  <i data-lucide="calendar" class="w-4 h-4"></i>
                  <span class="text-sm font-medium">{event.formatted_date}</span>
                </div>
                {event.description && (
                  <p class="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">{event.description}</p>
                )}
                <a href={`/events/${event.id}`} class="inline-flex items-center space-x-2 text-primary-600 dark:text-primary-400 font-medium hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
                  <span>Learn More</span>
                  <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
              </div>
            </div>
          ))}
        </div>
        
        <div class="text-center mt-12" data-animate>
          <a href="/events" class="inline-flex items-center space-x-2 bg-primary-600 text-white px-8 py-4 rounded-2xl font-semibold hover:bg-primary-700 transition-colors shadow-lg hover:shadow-xl">
            <span>View All Events</span>
            <i data-lucide="arrow-right" class="w-5 h-5"></i>
          </a>
        </div>
      </div>
    </section>
  )}

  <!-- Latest Sermons Section -->
  {latestSermons.length > 0 && (
    <section class="py-24 bg-white dark:bg-gray-900">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16" data-animate>
          <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">Recent Sermons</h2>
          <p class="text-xl text-gray-600 dark:text-gray-300">Be inspired by God's Word through our recent messages</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {latestSermons.map(sermon => (
            <div class="bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-6 hover:shadow-large transition-all duration-300 hover:-translate-y-1 group" data-animate>
              <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                <i data-lucide="play" class="w-8 h-8 text-white"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{sermon.title}</h3>
              <div class="space-y-2 mb-4">
                <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
                  <i data-lucide="user" class="w-4 h-4"></i>
                  <span class="text-sm">{sermon.speaker}</span>
                </div>
                <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
                  <i data-lucide="calendar" class="w-4 h-4"></i>
                  <span class="text-sm">{sermon.date || 'Recent'}</span>
                </div>
              </div>
              {sermon.description && (
                <p class="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed text-sm">{sermon.description}</p>
              )}
              <a href={sermon.videoUrl || `/sermons/${sermon.id}`} target={sermon.videoUrl ? "_blank" : "_self"} class="inline-flex items-center space-x-2 bg-primary-600 text-white px-4 py-2 rounded-xl font-medium hover:bg-primary-700 transition-colors">
                <i data-lucide="play" class="w-4 h-4"></i>
                <span>{sermon.videoUrl ? 'Watch Now' : 'View Details'}</span>
              </a>
            </div>
          ))}
        </div>
        
        <div class="text-center mt-12" data-animate>
          <a href="/sermons" class="inline-flex items-center space-x-2 border-2 border-primary-600 text-primary-600 dark:text-primary-400 px-8 py-4 rounded-2xl font-semibold hover:bg-primary-600 hover:text-white dark:hover:text-white transition-colors">
            <span>View All Sermons</span>
            <i data-lucide="arrow-right" class="w-5 h-5"></i>
          </a>
        </div>
      </div>
    </section>
  )}

  <!-- Mobile App Download Section -->
  <section class="py-24 bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16" data-animate>
        <h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">Faith in Your Pocket</h2>
        <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
          Access sermons, events, and stay connected with our church family through our mobile app designed for spiritual growth.
        </p>
      </div>

      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <!-- App Features -->
        <div class="space-y-8" data-animate>
          <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg">
            <div class="flex items-center space-x-4 mb-4">
              <div class="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
                <i data-lucide="video" class="w-6 h-6 text-white"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-900 dark:text-white">Live Streaming</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">Watch our Sabbath services and special events live from anywhere</p>
          </div>

          <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg">
            <div class="flex items-center space-x-4 mb-4">
              <div class="w-12 h-12 bg-gradient-to-br from-gold-500 to-amber-500 rounded-xl flex items-center justify-center">
                <i data-lucide="book-open" class="w-6 h-6 text-black"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-900 dark:text-white">Sermons & Studies</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">Access our complete library of sermons and Bible study materials</p>
          </div>

          <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg">
            <div class="flex items-center space-x-4 mb-4">
              <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
                <i data-lucide="calendar" class="w-6 h-6 text-white"></i>
              </div>
              <h3 class="text-xl font-bold text-gray-900 dark:text-white">Events & Bulletins</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">Stay updated with church events and read the latest bulletins</p>
          </div>
        </div>

        <!-- Download Buttons -->
        <div class="text-center lg:text-left" data-animate>
          <div class="space-y-4 max-w-sm mx-auto lg:mx-0">
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Download Our Mobile App</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-8">
              Stay connected with sermons, events, and church activities wherever you go. 
              Our app makes it easy to access spiritual content and stay engaged with our community.
            </p>
            
            <div class="flex flex-wrap gap-4 justify-center lg:justify-start items-center">
              <!-- iOS App Store -->
              <a href="https://apps.apple.com/us/app/rtsda/id6738595657" target="_blank" rel="noopener" 
                 class="block transition-transform duration-300 hover:scale-105">
                <img src="/images/app-store-badge.svg" alt="Download on the App Store" class="h-16">
              </a>
              
              <!-- Android APK Download -->
              <button onclick="downloadApk()" 
                      class="flex items-center gap-4 bg-primary-600 hover:bg-primary-700 text-white p-4 rounded-2xl transition-all duration-300 hover:scale-105 hover:shadow-xl">
                <svg viewBox="0 0 24 24" class="h-10 w-10 fill-gold-400">
                  <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.463 11.463 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52zM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"/>
                </svg>
                <div class="text-left">
                  <div class="text-sm opacity-80">DOWNLOAD APK</div>
                  <div class="text-lg font-semibold">Android</div>
                </div>
              </button>
            </div>

            <div class="mt-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
              <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-300">
                <i data-lucide="info" class="w-4 h-4 text-primary-500"></i>
                <span>Available on both iOS and Android platforms. Download today to access sermons, events, and stay connected with our church community.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action Section -->
  <section class="py-24 bg-heavenly-gradient text-white relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-50"></div>
    
    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-animate>
      <h2 class="text-4xl lg:text-5xl font-bold mb-6">Visit Us This Sabbath</h2>
      <p class="text-xl text-white dark:text-blue-100 mb-8 leading-relaxed">
        Experience the joy of Sabbath worship and discover the peace that comes from fellowship with God and His people
      </p>
      
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/contact" class="inline-flex items-center space-x-2 bg-gold-500 text-black px-8 py-4 rounded-2xl font-semibold hover:bg-gold-400 transition-colors shadow-lg hover:shadow-xl">
          <i data-lucide="map-pin" class="w-5 h-5"></i>
          <span>Get Directions</span>
        </a>
        <a href="/about" class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-sm text-white px-8 py-4 rounded-2xl font-semibold border border-white/30 hover:bg-white/30 transition-colors">
          <i data-lucide="info" class="w-5 h-5"></i>
          <span>Learn More</span>
        </a>
      </div>
    </div>
  </section>
</MainLayout>

<script src="/live-status-updater.js" is:inline></script>
<script>
  // Initialize home page live banner updates
  document.addEventListener('DOMContentLoaded', () => {
    window.liveStatusUpdater.initHomePage();
  });

  // Function to download Android APK - make it globally available
  window.downloadApk = function() {
    window.location.href = 'https://api.rockvilletollandsda.church/uploads/rtsda_android/current';
  };
</script>