<?php
// Set timezone to Indonesia Western Time (WIB) - UTC+7
date_default_timezone_set('Asia/Jakarta');

require_once __DIR__ . '/admin/functions.php';
require_once __DIR__ . '/includes/viewer-stats.php';

// Set page variables for header
$pageTitle = 'Darurat Mafia Tanah - Portal Berita Investigasi';
$pageDescription = 'Portal berita investigasi yang berfokus pada pengungkapan kasus mafia tanah dan perjuangan keadilan agraria di Indonesia.';
$showAdminLink = false; // Hide admin link on public pages

// Configuration for homepage limits
$HOMEPAGE_CONFIG = [
    'featured_limit' => 1,      // 1 artikel utama
    'latest_limit' => 4,        // 4 berita terbaru
    'popular_limit' => 5,       // 5 berita populer di sidebar
    'hero_articles' => 6        // Total artikel untuk pool selection
];

// Get articles for homepage with limits
$allPublishedArticles = getPublishedArticles(); // All published articles
$featuredArticles = getPublishedArticles(true); // Only featured articles
$featuredArticles = array_slice($featuredArticles, 0, $HOMEPAGE_CONFIG['featured_limit']);

// Get latest articles (excluding already featured ones if any)
$latestArticles = array_slice($allPublishedArticles, 0, $HOMEPAGE_CONFIG['hero_articles']);

// Include header
include 'includes/header.php';
?>

        <style>
/* =================================
   HERO SECTION STYLES
   ================================= */
            .hero-banner {
                position: relative;
                min-height: 60vh;
                display: flex;
                align-items: center;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
                overflow: hidden;
            }

            .hero-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.9) 0%, rgba(52, 73, 94, 0.85) 100%);
            }

            .hero-content {
                position: relative;
                z-index: 2;
                text-align: center;
                color: white;
                padding: 2rem 0;
                animation: fadeInUp 1s ease-out;
            }

            .hero-title {
                font-family: 'Oswald', sans-serif;
                font-size: 3rem;
                font-weight: 700;
                margin-bottom: 1rem;
                line-height: 1.2;
                text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            }

            .hero-subtitle {
                font-size: 1.3rem;
                margin-bottom: 2.5rem;
                line-height: 1.5;
                text-shadow: 0 2px 10px rgba(0,0,0,0.5);
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
                opacity: 0.95;
            }

            .hero-actions {
                display: flex;
                gap: 1rem;
                justify-content: center;
                flex-wrap: wrap;
            }

            .hero-btn {
                display: inline-flex;
                align-items: center;
                padding: 1rem 2rem;
    border-radius: 8px;
                text-decoration: none;
                font-weight: 600;
                font-size: 1.1rem;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }

            .hero-btn.primary {
    background: #c0392b;
                color: white;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.3);
            }

            .hero-btn.primary:hover {
    background: #a93226;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.4);
            }

            .hero-btn.secondary {
    background: rgba(255,255,255,0.15);
                color: white;
                border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
            }

            .hero-btn.secondary:hover {
    background: rgba(255,255,255,0.25);
                border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
}



/* =================================
   MAIN CONTENT LAYOUT
   ================================= */
.main-content {
    padding: 3rem 0;
    background: #f8f9fa;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* =================================
   FEATURED ARTICLE SECTION
   ================================= */
.featured-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.section-header {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    color: white;
    padding: 1rem 2rem;
    margin: 0;
                font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-article {
    padding: 0;
}

.featured-article img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.featured-content {
    padding: 2rem;
}

.article-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

.category-badge {
    background: #c0392b;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.article-date {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.featured-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.featured-title a {
    color: inherit;
    text-decoration: none;
}

.featured-title a:hover {
    color: #c0392b;
}

.featured-excerpt {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1.5rem;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #c0392b;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.read-more:hover {
    background: #a93226;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.3);
            }

/* =================================
   LATEST NEWS SECTION
   ================================= */
.latest-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 2rem;
}

.news-item {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
}

.news-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.news-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    color: #2c3e50;
}

.news-title a {
    color: inherit;
    text-decoration: none;
}

.news-title a:hover {
    color: #c0392b;
}

.news-excerpt {
    color: #666;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.news-meta {
    margin-bottom: 1rem;
}

.news-meta .category-badge {
    background: #34495e;
    font-size: 0.7rem;
}

/* =================================
   SIDEBAR STYLES
   ================================= */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.sidebar-header {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    color: white;
    padding: 1rem 1.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-content {
    padding: 1.5rem;
}

.popular-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popular-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.popular-item:last-child {
    border-bottom: none;
}

.popular-number {
    background: #c0392b;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.popular-title {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
}

.popular-title a {
    color: #2c3e50;
    text-decoration: none;
}

.popular-title a:hover {
    color: #c0392b;
}




.cta-section {
    text-align: center;
}

.cta-description {
    color: #666;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.cta-button {
    display: inline-block;
    background: #27ae60;
    color: white;
    padding: 1rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: #219a52;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.view-all-section {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 2rem;
}

.view-all-btn {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 1rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

/* =================================
   RESPONSIVE DESIGN
   ================================= */
@media (max-width: 1024px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
}

            @media (max-width: 768px) {
                .hero-banner {
                    min-height: 50vh;
                    background-attachment: scroll;
                }

                .hero-title {
                    font-size: 2.2rem;
                }

                .hero-subtitle {
                    font-size: 1.1rem;
                    margin-bottom: 2rem;
                }

                .hero-actions {
                    flex-direction: column;
                    align-items: center;
                }

                .hero-btn {
                    width: 100%;
                    max-width: 300px;
        justify-content: center;
    }
    
    .main-content {
        padding: 2rem 0;
    }
    
    .featured-content {
        padding: 1.5rem;
    }
    
    .featured-title {
        font-size: 1.5rem;
    }
    
    .news-grid {
        padding: 1.5rem;
    }
    
    /* Ensure main content (articles) appears first on mobile */
    .main-column {
        order: 1;
    }
    
    /* Sidebar appears after main content on mobile */
    .sidebar {
        order: 2;
        margin-top: 1rem;
    }
    

}

            @media (max-width: 480px) {
                .hero-title {
                    font-size: 1.8rem;
                }

                .hero-subtitle {
                    font-size: 1rem;
                }

                .hero-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    
    .featured-title {
        font-size: 1.3rem;
    }
    
    .section-header,
    .sidebar-header {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    

}

/* =================================
   LAZY LOADING STYLES
   ================================= */
.lazy-image {
    transition: opacity 0.3s ease;
}

.lazy-image[data-loaded="false"] {
    opacity: 0.7;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.lazy-image[data-loaded="true"] {
    opacity: 1;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* =================================
   ANIMATIONS
   ================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

            /* Reduced motion support */
            @media (prefers-reduced-motion: reduce) {
                .hero-content {
                    animation: none;
                }
                
    .hero-banner {
        background-attachment: scroll;
    }
    
    .news-item,
    .hero-btn,
    .read-more,
    .cta-button {
                    transition: none;
                }
                
    .news-item:hover {
        transform: none;
                }
            }
        </style>

<main>
    <!-- Hero Section -->
    <section class="hero-banner" style="background-image: url('/images/hero-bg.jpeg');">
        <div class="hero-overlay"></div>
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Portal Berita Investigasi Mafia Tanah</h1>
                <p class="hero-subtitle">Menyuarakan kebenaran, membongkar kejahatan, dan memperjuangkan keadilan untuk rakyat Indonesia.</p>
                <div class="hero-actions">
                    <a href="/berita-terbaru" class="hero-btn primary">
                        Baca Berita Terbaru
                    </a>
                    <a href="/laporan" class="hero-btn secondary">
                        Laporkan Kasus
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <section class="main-content">
        <div class="content-wrapper">
            <!-- Left Column: Featured & Latest News -->
            <div class="main-column">
                <!-- Featured Article -->
                    <?php if (!empty($featuredArticles)): ?>
                        <?php $mainArticle = $featuredArticles[0]; ?>
                    <article class="featured-section">
                        <h2 class="section-header">Berita Utama</h2>
                        <div class="featured-article">
                            <?php if (!empty($mainArticle['image'])): ?>
                                <img src="/articles/<?php echo htmlspecialchars($mainArticle['image']); ?>" 
                                     alt="<?php echo htmlspecialchars($mainArticle['title']); ?>"
                                     loading="lazy"
                                     decoding="async"
                                     class="lazy-image">
                            <?php else: ?>
                                <img src="https://via.placeholder.com/800x300/c0392b/ffffff?text=Berita+Utama" 
                                     alt="<?php echo htmlspecialchars($mainArticle['title']); ?>"
                                     loading="lazy"
                                     decoding="async"
                                     class="lazy-image">
                            <?php endif; ?>
                            
                            <div class="featured-content">
                            <div class="article-meta">
                                    <span class="category-badge">Investigasi</span>
                                    <span class="article-date"><?php echo date('d F Y', strtotime($mainArticle['date'])); ?></span>
                            </div>
                                
                                <h3 class="featured-title">
                                    <a href="/artikel/<?php echo urlencode($mainArticle['slug']); ?>">
                                        <?php echo htmlspecialchars($mainArticle['title']); ?>
                                    </a>
                                </h3>
                                
                                <p class="featured-excerpt"><?php 
                                $excerpt = strip_tags($mainArticle['content']);
                                echo strlen($excerpt) > 200 ? substr($excerpt, 0, 200) . '...' : $excerpt;
                            ?></p>
                                
                                <a href="/artikel/<?php echo urlencode($mainArticle['slug']); ?>" class="read-more">
                                    Baca Selengkapnya
                                </a>
                            </div>
                            </div>
                        </article>
                    <?php endif; ?>

                <!-- Latest News -->
                <section class="latest-section">
                    <h2 class="section-header">Berita Terbaru</h2>

                        <?php if (!empty($latestArticles)): ?>
                        <div class="news-grid">
                            <?php 
                            // Skip first article if it's featured, show next 4
                            $displayArticles = (!empty($featuredArticles)) ? 
                                array_slice($latestArticles, 1, $HOMEPAGE_CONFIG['latest_limit']) : 
                                array_slice($latestArticles, 0, $HOMEPAGE_CONFIG['latest_limit']);
                            
                            foreach ($displayArticles as $article): 
                            ?>
                                <article class="news-item">
                                    <?php if (!empty($article['image'])): ?>
                                        <img src="/articles/<?php echo htmlspecialchars($article['image']); ?>" 
                                             alt="<?php echo htmlspecialchars($article['title']); ?>"
                                             loading="lazy"
                                             decoding="async"
                                             class="lazy-image">
                                    <?php else: ?>
                                        <img src="https://via.placeholder.com/400x180/34495e/ffffff?text=Berita" 
                                             alt="<?php echo htmlspecialchars($article['title']); ?>"
                                             loading="lazy"
                                             decoding="async"
                                             class="lazy-image">
                                    <?php endif; ?>
                                    
                                    <div class="news-content">
                                        <div class="news-meta">
                                            <span class="category-badge">Berita</span>
                                            <span class="article-date"><?php echo date('d M Y', strtotime($article['date'])); ?></span>
                                        </div>
                                        
                                        <h3 class="news-title">
                                            <a href="/artikel/<?php echo urlencode($article['slug']); ?>">
                                                <?php echo htmlspecialchars($article['title']); ?>
                                            </a>
                                        </h3>
                                        
                                        <p class="news-excerpt"><?php 
                                            $excerpt = strip_tags($article['content']);
                                            echo strlen($excerpt) > 120 ? substr($excerpt, 0, 120) . '...' : $excerpt;
                                        ?></p>
                                        
                                        <a href="/artikel/<?php echo urlencode($article['slug']); ?>" class="read-more">
                                            Baca Selengkapnya
                                        </a>
                                    </div>
                                </article>
                            <?php endforeach; ?>
                        </div>
                        <?php else: ?>
                        <div style="padding: 2rem; text-align: center; color: #666;">
                            <p>Belum ada berita terbaru tersedia.</p>
                        </div>
                        <?php endif; ?>
                </section>

                <!-- View All Button -->
                <div class="view-all-section">
                    <h3>Ingin membaca lebih banyak berita?</h3>
                    <a href="/berita-terbaru" class="view-all-btn">
                        Lihat Semua Berita
                    </a>
                </div>
            </div>

            <!-- Right Column: Sidebar -->
                <aside class="sidebar">
                <!-- Popular News -->
                <section class="sidebar-section">
                    <h3 class="sidebar-header">Berita Populer</h3>
                    <div class="sidebar-content">
                        <?php if (!empty($latestArticles)): ?>
                            <ul class="popular-list">
                            <?php 
                                $popularArticles = array_slice($latestArticles, 0, $HOMEPAGE_CONFIG['popular_limit']);
                            $counter = 1;
                            foreach ($popularArticles as $article): 
                            ?>
                                    <li class="popular-item">
                                        <span class="popular-number"><?php echo $counter; ?></span>
                                        <div class="popular-title">
                                            <a href="/artikel/<?php echo urlencode($article['slug']); ?>">
                                                <?php echo htmlspecialchars($article['title']); ?>
                                            </a>
                                        </div>
                                </li>
                            <?php 
                            $counter++;
                            endforeach; 
                            ?>
                        </ul>
                        <?php else: ?>
                            <p>Belum ada berita populer.</p>
                        <?php endif; ?>
                    </div>
                    </section>

                <!-- Professional Statistics Widget -->
                <?php echo ViewerStats::render(); ?>


                <!-- Report CTA -->
                <section class="sidebar-section cta-section">
                    <h3 class="sidebar-header">Laporkan Kasus</h3>
                    <div class="sidebar-content">
                        <p class="cta-description">
                            Punya informasi tentang kasus mafia tanah? Laporkan kepada kami secara anonim dan aman!
                        </p>
                        <a href="/laporan" class="cta-button">
                            Laporkan Sekarang
                        </a>
                    </div>
                    </section>
                </aside>
        </div>
    </section>
    </main>

                        <?php
// Include footer
include 'includes/footer.php';
?> 