<?php get_header(); ?>

<style>
.homepage-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hero-btn-primary {
    background: white;
    color: #667eea;
}

.hero-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.features-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2rem;
}

.latest-posts-section {
    padding: 80px 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.post-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
}

.post-image {
    height: 200px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
}

.post-content {
    padding: 1.5rem;
}

.cta-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.cta-btn {
    display: inline-block;
    padding: 15px 40px;
    background: #667eea;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .features-grid { grid-template-columns: 1fr; }
    .posts-grid { grid-template-columns: 1fr; }
}
</style>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        
        <!-- Hero Section -->
        <section class="homepage-hero">
            <div class="container">
                <h1 class="hero-title">Welcome to Our Dental Practice</h1>
                <p class="hero-subtitle">Providing exceptional dental care with the latest technology and a compassionate approach.</p>
                <div class="hero-buttons">
                    <a href="#appointment" class="hero-btn hero-btn-primary">Book Appointment</a>
                    <a href="#services" class="hero-btn hero-btn-secondary">Our Services</a>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="features-section" id="services">
            <div class="container">
                <div class="section-header">
                    <h2>Why Choose Our Dental Practice?</h2>
                    <p>We combine advanced technology with personalized care.</p>
                </div>
                
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">🦷</div>
                        <h3>Comprehensive Care</h3>
                        <p>From routine cleanings to advanced procedures, we provide complete dental care.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">⚡</div>
                        <h3>Latest Technology</h3>
                        <p>State-of-the-art equipment ensures precise, comfortable, and efficient treatments.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">❤️</div>
                        <h3>Patient-Centered</h3>
                        <p>Your comfort and satisfaction are our top priorities.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Latest Posts Section -->
        <section class="latest-posts-section">
            <div class="container">
                <div class="section-header">
                    <h2>Latest Dental Health Tips & News</h2>
                    <p>Stay informed about dental health and care.</p>
                </div>
                
                <div class="posts-grid">
                    <?php
                    $latest_posts = new WP_Query(array(
                        'post_type' => 'post',
                        'posts_per_page' => 3,
                        'post_status' => 'publish'
                    ));
                    
                    if ($latest_posts->have_posts()) :
                        while ($latest_posts->have_posts()) : $latest_posts->the_post();
                    ?>
                        <article class="post-card">
                            <div class="post-image">
                                <?php if (has_post_thumbnail()) : ?>
                                    <?php the_post_thumbnail('medium'); ?>
                                <?php else : ?>
                                    🦷
                                <?php endif; ?>
                            </div>
                            <div class="post-content">
                                <div class="post-meta">
                                    <?php echo get_the_date(); ?>
                                </div>
                                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                                <p><?php echo wp_trim_words(get_the_excerpt(), 15); ?></p>
                                <a href="<?php the_permalink(); ?>" class="read-more">Read More →</a>
                            </div>
                        </article>
                    <?php
                        endwhile;
                        wp_reset_postdata();
                    endif;
                    ?>
                </div>
            </div>
        </section>

        <!-- Call to Action Section -->
        <section class="cta-section" id="appointment">
            <div class="container">
                <h2>Ready to Transform Your Smile?</h2>
                <p>Schedule your appointment today and take the first step towards a healthier smile.</p>
                <a href="tel:+1234567890" class="cta-btn">Call Now: (123) 456-7890</a>
            </div>
        </section>

    </main>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
});
</script>

<?php get_footer(); ?>