<?php include 'header.php'; ?>

<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">
                    <?= __('welcome_title') ?? 'Welcome to Excellent Blog' ?>
                </h1>
                <p class="lead mb-4">
                    <?= __('welcome_subtitle') ?? 'AI-Powered International Blog Platform with Multi-language Support' ?>
                </p>
                <div class="d-flex gap-3 flex-wrap">
                    <a href="/?route=external" class="btn btn-light btn-lg">
                        <i class="fas fa-globe me-2"></i><?= __('external_blog') ?>
                    </a>
                    <a href="/?route=internal" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-lock me-2"></i><?= __('internal_blog') ?>
                    </a>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="hero-animation">
                    <i class="fas fa-robot fa-10x text-white opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-5 fw-bold mb-4"><?= __('key_features') ?? 'Key Features' ?></h2>
                <p class="lead text-muted">
                    <?= __('features_description') ?? 'Powerful AI-driven features for modern blogging' ?>
                </p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 text-center border-0">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-robot fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title"><?= __('ai_writing') ?></h5>
                        <p class="card-text text-muted">
                            <?= __('ai_writing_desc') ?? 'Generate high-quality articles automatically using advanced AI technology' ?>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card h-100 text-center border-0">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-language fa-3x text-success"></i>
                        </div>
                        <h5 class="card-title"><?= __('multilingual') ?? 'Multi-language' ?></h5>
                        <p class="card-text text-muted">
                            <?= __('multilingual_desc') ?? 'Support for 6 languages including Chinese, English, Japanese, Vietnamese and Malay' ?>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card h-100 text-center border-0">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-comments fa-3x text-info"></i>
                        </div>
                        <h5 class="card-title"><?= __('ai_chat') ?? 'AI Chat' ?></h5>
                        <p class="card-text text-muted">
                            <?= __('ai_chat_desc') ?? 'Intelligent chat assistant for instant help and content suggestions' ?>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card h-100 text-center border-0">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-globe fa-3x text-warning"></i>
                        </div>
                        <h5 class="card-title"><?= __('global_publishing') ?? 'Global Publishing' ?></h5>
                        <p class="card-text text-muted">
                            <?= __('global_publishing_desc') ?? 'Automatically publish to international platforms across America, Europe and Asia' ?>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card h-100 text-center border-0">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-spider fa-3x text-danger"></i>
                        </div>
                        <h5 class="card-title"><?= __('auto_crawling') ?? 'Auto Crawling' ?></h5>
                        <p class="card-text text-muted">
                            <?= __('auto_crawling_desc') ?? 'Automatically discover and curate relevant content from trusted sources' ?>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card h-100 text-center border-0">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-shield-alt fa-3x text-secondary"></i>
                        </div>
                        <h5 class="card-title"><?= __('dual_mode') ?? 'Dual Mode' ?></h5>
                        <p class="card-text text-muted">
                            <?= __('dual_mode_desc') ?? 'Separate internal and external blogs for different audiences and purposes' ?>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Latest Articles Section -->
<section class="py-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-8">
                <h2 class="display-6 fw-bold"><?= __('latest_articles') ?></h2>
                <p class="lead text-muted">
                    <?= __('latest_articles_desc') ?? 'Discover our most recent content across all categories' ?>
                </p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="/?route=external" class="btn btn-primary btn-lg">
                    <i class="fas fa-eye me-2"></i><?= __('view_all_articles') ?? 'View All Articles' ?>
                </a>
            </div>
        </div>

        <?php if (!empty($externalArticles)): ?>
            <div class="row g-4">
                <?php foreach (array_slice($externalArticles, 0, 6) as $article): ?>
                    <div class="col-lg-4 col-md-6">
                        <article class="card h-100">
                            <?php if ($article['featured_image']): ?>
                                <img src="<?= htmlspecialchars($article['featured_image']) ?>"
                                     class="card-img-top"
                                     alt="<?= htmlspecialchars($article['title']) ?>">
                            <?php else: ?>
                                <div class="card-img-top gradient-bg d-flex align-items-center justify-content-center"
                                     style="height: 200px;">
                                    <i class="fas fa-newspaper fa-3x text-white opacity-75"></i>
                                </div>
                            <?php endif; ?>

                            <div class="card-body d-flex flex-column">
                                <div class="mb-2">
                                    <span class="badge badge-external"><?= __('external_blog') ?></span>
                                    <?php if ($article['is_ai_generated']): ?>
                                        <span class="badge bg-info">
                                            <i class="fas fa-robot"></i> AI
                                        </span>
                                    <?php endif; ?>
                                </div>

                                <h5 class="card-title">
                                    <a href="/?route=article&slug=<?= htmlspecialchars($article['slug']) ?>"
                                       class="text-decoration-none text-dark">
                                        <?= htmlspecialchars($article['title']) ?>
                                    </a>
                                </h5>

                                <p class="card-text text-muted flex-grow-1">
                                    <?= htmlspecialchars(substr($article['excerpt'] ?: strip_tags($article['content']), 0, 120)) ?>...
                                </p>

                                <div class="card-footer bg-transparent border-0 px-0 pt-3">
                                    <div class="row align-items-center text-muted small">
                                        <div class="col">
                                            <i class="fas fa-user me-1"></i>
                                            <?= htmlspecialchars($article['author_name'] ?: 'AI') ?>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-eye me-1"></i>
                                            <?= number_format($article['views']) ?>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <small class="text-muted">
                                            <i class="fas fa-calendar me-1"></i>
                                            <?= format_date($article['published_at'], 'M d, Y') ?>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="text-center py-5">
                <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                <h4 class="text-muted"><?= __('no_articles_yet') ?? 'No articles available yet' ?></h4>
                <p class="text-muted"><?= __('check_back_later') ?? 'Please check back later for new content' ?></p>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- Internal Blog Preview (if available) -->
<?php if (!empty($internalArticles)): ?>
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row mb-4">
                <div class="col-lg-8">
                    <h2 class="display-6 fw-bold"><?= __('internal_insights') ?? 'Internal Insights' ?></h2>
                    <p class="lead text-muted">
                        <?= __('internal_insights_desc') ?? 'Knowledge sharing and strategic insights for our team' ?>
                    </p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="/?route=internal" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-lock me-2"></i><?= __('view_internal_blog') ?? 'View Internal Blog' ?>
                    </a>
                </div>
            </div>

            <div class="row g-4">
                <?php foreach (array_slice($internalArticles, 0, 3) as $article): ?>
                    <div class="col-lg-4">
                        <article class="card h-100">
                            <div class="card-body">
                                <div class="mb-2">
                                    <span class="badge badge-internal"><?= __('internal_blog') ?></span>
                                    <?php if ($article['is_ai_generated']): ?>
                                        <span class="badge bg-info">
                                            <i class="fas fa-robot"></i> AI
                                        </span>
                                    <?php endif; ?>
                                </div>

                                <h5 class="card-title">
                                    <a href="/?route=article&slug=<?= htmlspecialchars($article['slug']) ?>"
                                       class="text-decoration-none text-dark">
                                        <?= htmlspecialchars($article['title']) ?>
                                    </a>
                                </h5>

                                <p class="card-text text-muted">
                                    <?= htmlspecialchars(substr($article['excerpt'] ?: strip_tags($article['content']), 0, 100)) ?>...
                                </p>

                                <div class="mt-auto">
                                    <small class="text-muted">
                                        <i class="fas fa-calendar me-1"></i>
                                        <?= format_date($article['published_at'], 'M d, Y') ?>
                                    </small>
                                </div>
                            </div>
                        </article>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

<!-- Categories Section -->
<?php if (!empty($categories)): ?>
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-6 fw-bold"><?= __('explore_categories') ?? 'Explore Categories' ?></h2>
                <p class="lead text-muted">
                    <?= __('categories_desc') ?? 'Browse articles by topic and interest' ?>
                </p>
            </div>

            <div class="row g-3">
                <?php foreach ($categories as $cat): ?>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="/?route=category&id=<?= $cat['id'] ?>"
                           class="card border-0 text-decoration-none h-100 category-card">
                            <div class="card-body text-center py-4"
                                 style="background: linear-gradient(135deg, <?= htmlspecialchars($cat['color']) ?>22, <?= htmlspecialchars($cat['color']) ?>11);">
                                <div class="category-icon mb-3"
                                     style="color: <?= htmlspecialchars($cat['color']) ?>;">
                                    <i class="fas fa-tag fa-2x"></i>
                                </div>
                                <h6 class="card-title mb-2 text-dark">
                                    <?= htmlspecialchars($cat['name']) ?>
                                </h6>
                                <?php if ($cat['description']): ?>
                                    <small class="text-muted">
                                        <?= htmlspecialchars($cat['description']) ?>
                                    </small>
                                <?php endif; ?>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

<!-- Call to Action Section -->
<section class="py-5 gradient-bg text-white">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h2 class="display-5 fw-bold mb-4">
                    <?= __('cta_title') ?? 'Ready to Start Your AI-Powered Blog Journey?' ?>
                </h2>
                <p class="lead mb-4">
                    <?= __('cta_description') ?? 'Join thousands of content creators using our platform to reach global audiences' ?>
                </p>
                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    <a href="/admin/" class="btn btn-light btn-lg">
                        <i class="fas fa-rocket me-2"></i><?= __('get_started') ?? 'Get Started' ?>
                    </a>
                    <a href="/?route=documentation" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-book me-2"></i><?= __('learn_more') ?? 'Learn More' ?>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.category-card {
    transition: all 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hero-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.feature-icon {
    transition: transform 0.3s ease;
}

.card:hover .feature-icon {
    transform: scale(1.1);
}
</style>

<?php include 'footer.php'; ?>