<?php
/**
 * The front page template file
 *
 * @package DevelopSriLanka
 */

get_header(); ?>

<!-- Hero Section -->
<section class="hero-section">
    <div class="hero-background" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/hero-bg.png');"></div>
    <div class="hero-content">
        <h1>Welcome to Sri Lanka</h1>
        <p>The Pearl of the Indian Ocean</p>
        <div class="hero-buttons">
            <a href="#featured" class="btn btn-primary">Explore Sri Lanka</a>
            <?php
            $submit_page = get_page_by_path('submit-experience');
            $submit_url = $submit_page ? get_permalink($submit_page->ID) : home_url('/submit-experience/');
            ?>
            <a href="<?php echo esc_url($submit_url); ?>" class="btn btn-secondary">Share Your Story</a>
        </div>
    </div>
</section>

<!-- Featured Destinations Section -->
<section id="featured" class="featured-section">
    <div class="container">
        <h2 class="section-title">Featured Destinations</h2>
        <p class="section-subtitle">Explore the most breathtaking places in Sri Lanka</p>
        
        <div class="destinations-grid">
            
            <!-- Sigiriya -->
            <div class="destination-card">
                <img src="<?php echo get_template_directory_uri(); ?>/images/sigiriya.png" alt="Sigiriya" class="destination-image">
                <div class="destination-content">
                    <h3>Sigiriya</h3>
                    <p>Ancient rock fortress and UNESCO World Heritage Site with stunning frescoes and gardens.</p>
                    <a href="https://en.wikipedia.org/wiki/Sigiriya" target="_blank" class="read-more">Discover More →</a>
                </div>
            </div>
            
            <!-- Ella -->
            <div class="destination-card">
                <img src="<?php echo get_template_directory_uri(); ?>/images/ella.png" alt="Ella" class="destination-image">
                <div class="destination-content">
                    <h3>Ella</h3>
                    <p>Picturesque hill country town with spectacular views, tea plantations, and hiking trails.</p>
                    <a href="https://en.wikipedia.org/wiki/Ella,_Sri_Lanka" target="_blank" class="read-more">Discover More →</a>
                </div>
            </div>
            
            <!-- Galle -->
            <div class="destination-card">
                <img src="<?php echo get_template_directory_uri(); ?>/images/galle.png" alt="Galle" class="destination-image">
                <div class="destination-content">
                    <h3>Galle Fort</h3>
                    <p>Historic fortified city with colonial architecture, boutique shops, and coastal charm.</p>
                    <a href="https://en.wikipedia.org/wiki/Galle_Fort" target="_blank" class="read-more">Discover More →</a>
                </div>
            </div>
            
            <!-- Kandy -->
            <div class="destination-card">
                <img src="<?php echo get_template_directory_uri(); ?>/images/kandy.png" alt="Kandy" class="destination-image">
                <div class="destination-content">
                    <h3>Kandy</h3>
                    <p>Cultural capital home to the sacred Temple of the Tooth and traditional Kandyan dance.</p>
                    <a href="https://en.wikipedia.org/wiki/Kandy" target="_blank" class="read-more">Discover More →</a>
                </div>
            </div>
            
            <!-- Yala -->
            <div class="destination-card">
                <img src="<?php echo get_template_directory_uri(); ?>/images/yala.jpg" alt="Yala" class="destination-image">
                <div class="destination-content">
                    <h3>Yala National Park</h3>
                    <p>Wildlife paradise with leopards, elephants, and diverse bird species in natural habitat.</p>
                    <a href="https://en.wikipedia.org/wiki/Yala_National_Park" target="_blank" class="read-more">Discover More →</a>
                </div>
            </div>
            
            <!-- Mirissa -->
            <div class="destination-card">
                <img src="<?php echo get_template_directory_uri(); ?>/images/mirrisa.png" alt="Mirissa" class="destination-image">
                <div class="destination-content">
                    <h3>Mirissa</h3>
                    <p>Beautiful beach town perfect for whale watching, surfing, and tropical relaxation.</p>
                    <a href="https://en.wikipedia.org/wiki/Mirissa" target="_blank" class="read-more">Discover More →</a>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- Why Sri Lanka Section -->
<section class="experience-section">
    <div class="container">
        <div class="experience-intro">
            <h2 class="section-title">Why Sri Lanka is a Better Country</h2>
            <p class="section-subtitle">Read inspiring stories from travelers who fell in love with Sri Lanka</p>
        </div>
        
        <?php
        // Query approved experiences
        $args = array(
            'post_type' => 'experience',
            'posts_per_page' => 3,
            'meta_query' => array(
                array(
                    'key' => '_experience_approved',
                    'value' => '1',
                    'compare' => '='
                )
            )
        );
        
        $experiences = new WP_Query($args);
        
        if ($experiences->have_posts()) :
        ?>
            <div class="experiences-grid">
                <?php while ($experiences->have_posts()) : $experiences->the_post(); ?>
                    
                    <div class="experience-card">
                        <?php if (has_post_thumbnail()) : ?>
                            <img src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'experience-thumb'); ?>" alt="<?php the_title(); ?>" class="experience-thumbnail">
                        <?php endif; ?>
                        
                        <div class="experience-details">
                            <div class="experience-meta">
                                <span><?php echo esc_html(get_post_meta(get_the_ID(), '_contributor_name', true)); ?></span>
                                <span><?php echo esc_html(get_post_meta(get_the_ID(), '_contributor_country', true)); ?></span>
                            </div>
                            
                            <?php
                            $rating = get_post_meta(get_the_ID(), '_experience_rating', true);
                            if ($rating) :
                            ?>
                                <div class="star-rating-display" style="margin: 10px 0;">
                                    <?php
                                    for ($i = 1; $i <= 5; $i++) {
                                        if ($i <= $rating) {
                                            echo '<span class="star">★</span>';
                                        } else {
                                            echo '<span class="star empty">★</span>';
                                        }
                                    }
                                    ?>
                                </div>
                            <?php endif; ?>
                            
                            <h3><?php the_title(); ?></h3>
                            
                            <?php
                            $company = get_post_meta(get_the_ID(), '_contributor_company', true);
                            if ($company) :
                            ?>
                                <div style="color: #666; font-size: 14px; margin-bottom: 10px;">
                                    <strong>Tour Company:</strong> <?php echo esc_html($company); ?>
                                </div>
                            <?php endif; ?>
                            
                            <div class="experience-excerpt">
                                <?php echo wp_trim_words(get_the_excerpt(), 20); ?>
                            </div>
                            
                            <a href="<?php the_permalink(); ?>" class="read-more">Read Full Story →</a>
                        </div>
                    </div>
                    
                <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
            </div>
            
            <div class="text-center mt-20">
                <a href="<?php echo esc_url(get_post_type_archive_link('experience')); ?>" class="btn btn-primary">View All Experiences</a>
            </div>
        <?php endif; ?>
        
        <div class="text-center mt-20">
            <a href="<?php echo esc_url(home_url('/submit-experience')); ?>" class="btn btn-secondary">Share Your Experience</a>
        </div>
    </div>
</section>

<!-- Culture & Heritage Section -->
<section class="featured-section">
    <div class="container">
        <h2 class="section-title">Culture & Heritage</h2>
        <p class="section-subtitle">Immerse yourself in 2,500 years of rich cultural heritage</p>
        
        <div class="destinations-grid">
            <div class="destination-card">
                <div class="destination-content">
                    <h3>🏛️ Ancient Temples</h3>
                    <p>Explore magnificent Buddhist temples and sacred sites dating back millennia.</p>
                </div>
            </div>
            
            <div class="destination-card">
                <div class="destination-content">
                    <h3>🎭 Traditional Dance</h3>
                    <p>Experience vibrant Kandyan and folk dances that tell ancient stories.</p>
                </div>
            </div>
            
            <div class="destination-card">
                <div class="destination-content">
                    <h3>🍛 Culinary Delights</h3>
                    <p>Savor authentic Sri Lankan cuisine with aromatic spices and fresh ingredients.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>