<?php if (!empty($sliders)): ?>
<section class="hero-slider">
    <div class="slider-track">
        <?php foreach ($sliders as $slide): ?>
        <div class="slide">
            <img src="<?= htmlspecialchars($slide['image_url']) ?>" alt="<?= htmlspecialchars($slide['title']) ?>">
            <div class="slide-overlay">
                <div class="slide-content">
                    <span class="slide-badge"><i class="fas fa-dna"></i> Alpha Genomics</span>
                    <h2><?= htmlspecialchars($slide['title']) ?></h2>
                    <p><?= htmlspecialchars($slide['subtitle']) ?></p>
                    <div class="slide-buttons">
                        <a href="/about" class="btn btn-primary">Learn More <i class="fas fa-arrow-right"></i></a>
                        <a href="/contact" class="btn btn-outline">Contact Us <i class="fas fa-envelope"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <div class="slider-layer-shape"></div>
    <button class="slider-btn prev"><i class="fas fa-chevron-left"></i></button>
    <button class="slider-btn next"><i class="fas fa-chevron-right"></i></button>
    <div class="slider-dots">
        <?php foreach ($sliders as $i => $slide): ?>
        <button class="slider-dot <?= $i === 0 ? 'active' : '' ?>"></button>
        <?php endforeach; ?>
    </div>
</section>
<?php endif; ?>

<section class="welcome-section">
    <div class="container">
        <div class="section-title fade-in-up">
            <h2>Welcome to <?= htmlspecialchars($settings['site_name'] ?? 'Alpha Genomics') ?></h2>
            <p>Pioneering genomic research and molecular diagnostics for a healthier future</p>
        </div>
        <div class="welcome-grid">
            <div class="welcome-content fade-in-left">
                <span class="subtitle">Who We Are</span>
                <h3><?= htmlspecialchars($settings['about_title'] ?? 'About Us') ?></h3>
                <p><?= htmlspecialchars($settings['about_text'] ?? '') ?></p>
                <a href="/about" class="btn btn-primary">Learn More <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="welcome-image fade-in-right">
                <img src="https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?w=600&h=400&fit=crop" alt="Laboratory">
            </div>
        </div>
    </div>
</section>

<section class="stats-section fade-in-up">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-item">
                <div class="stat-number" data-target="500">0</div>
                <div class="stat-label">Projects Completed</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" data-target="50">0</div>
                <div class="stat-label">Expert Scientists</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" data-target="15">0</div>
                <div class="stat-label">Years Experience</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" data-target="100">0</div>
                <div class="stat-label">Global Partners</div>
            </div>
        </div>
    </div>
</section>

<?php if (!empty($sections)): ?>
<section class="sections-area">
    <div class="container">
        <div class="section-title fade-in-up">
            <h2>Our Sections</h2>
            <p>Explore our diverse range of services and research areas</p>
        </div>
        <div class="sections-grid">
            <?php foreach ($sections as $sec): ?>
            <div class="section-card fade-in-up">
                <div class="section-card-image">
                    <img src="<?= htmlspecialchars($sec['image_url']) ?>" alt="<?= htmlspecialchars($sec['title']) ?>">
                </div>
                <div class="section-card-body">
                    <h3><?= htmlspecialchars($sec['title']) ?></h3>
                    <p><?= htmlspecialchars(substr($sec['description'], 0, 120)) ?>...</p>
                    <a href="/section/<?= htmlspecialchars($sec['slug']) ?>" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($announcements)): ?>
<section class="announcements-section">
    <div class="container">
        <div class="section-title fade-in-up">
            <h2>Announcements</h2>
            <p>Latest updates and educational content from our team</p>
        </div>
        <div class="announcements-grid">
            <?php foreach ($announcements as $ann): ?>
            <div class="announcement-card fade-in-up">
                <div class="video-wrapper">
                    <iframe src="<?= htmlspecialchars(getYoutubeEmbedUrl($ann['youtube_url'])) ?>" allowfullscreen loading="lazy"></iframe>
                </div>
                <div class="announcement-card-body">
                    <h4><?= htmlspecialchars($ann['title']) ?></h4>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($resources)): ?>
<section class="resources-section">
    <div class="container">
        <div class="section-title fade-in-up">
            <h2>Resources</h2>
            <p>Access our forms, courseware, and publications</p>
        </div>
        <div class="resources-grid">
            <?php foreach ($resources as $res): ?>
            <a href="<?= htmlspecialchars($res['link_url']) ?>" class="resource-card fade-in-up">
                <img src="<?= htmlspecialchars($res['image_url']) ?>" alt="<?= htmlspecialchars($res['title']) ?>">
                <div class="resource-card-overlay">
                    <h3><?= htmlspecialchars($res['title']) ?></h3>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($facilities)): ?>
<section class="facilities-section fade-in-up">
    <div class="container">
        <div class="section-title">
            <h2>Our Facilities</h2>
            <p>State-of-the-art laboratory equipment and instruments</p>
        </div>
        <div class="facilities-carousel">
            <div class="facilities-track">
                <?php foreach ($facilities as $fac): ?>
                <div class="facility-item">
                    <img src="<?= htmlspecialchars($fac['image_url']) ?>" alt="<?= htmlspecialchars($fac['title'] ?? 'Equipment') ?>" title="<?= htmlspecialchars($fac['title'] ?? '') ?>">
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="carousel-controls">
            <button class="carousel-btn facilities-prev"><i class="fas fa-chevron-left"></i></button>
            <button class="carousel-btn facilities-next"><i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</section>
<?php endif; ?>
