<?php
$pageTitle = __('contact');
include 'header.php';
?>

<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="text-center mb-5">
                <h1 class="display-4 fw-bold"><?= __('contact_us') ?? 'Contact Us' ?></h1>
                <p class="lead text-muted">
                    <?= __('contact_description') ?? 'Get in touch with our team for support or inquiries' ?>
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 text-center border-0 shadow">
                        <div class="card-body p-4">
                            <i class="fas fa-comments fa-3x text-primary mb-3"></i>
                            <h5 class="card-title"><?= __('ai_chat_support') ?? 'AI Chat Support' ?></h5>
                            <p class="card-text text-muted">
                                <?= __('instant_help') ?? 'Get instant help with our AI chat assistant' ?>
                            </p>
                            <button class="btn btn-primary" onclick="toggleChat()">
                                <i class="fas fa-comment-dots me-2"></i><?= __('start_chat') ?? 'Start Chat' ?>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card h-100 text-center border-0 shadow">
                        <div class="card-body p-4">
                            <i class="fas fa-book fa-3x text-success mb-3"></i>
                            <h5 class="card-title"><?= __('documentation') ?></h5>
                            <p class="card-text text-muted">
                                <?= __('comprehensive_docs') ?? 'Comprehensive documentation and guides' ?>
                            </p>
                            <a href="/?route=documentation" class="btn btn-success">
                                <i class="fas fa-book-open me-2"></i><?= __('view_docs') ?? 'View Docs' ?>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card h-100 text-center border-0 shadow">
                        <div class="card-body p-4">
                            <i class="fas fa-cog fa-3x text-info mb-3"></i>
                            <h5 class="card-title"><?= __('admin_panel') ?? 'Admin Panel' ?></h5>
                            <p class="card-text text-muted">
                                <?= __('manage_settings') ?? 'Manage your blog settings and content' ?>
                            </p>
                            <a href="/admin/" class="btn btn-info">
                                <i class="fas fa-user-shield me-2"></i><?= __('admin_login') ?? 'Admin Login' ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-lg mt-5">
                <div class="card-body p-5">
                    <h3 class="text-center mb-4"><?= __('system_information') ?? 'System Information' ?></h3>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <h5><i class="fas fa-server me-2 text-primary"></i><?= __('server_details') ?? 'Server Details' ?></h5>
                            <ul class="list-unstyled">
                                <li><strong><?= __('platform') ?? 'Platform' ?>:</strong> Excellent Blog v1.0</li>
                                <li><strong><?= __('technology') ?? 'Technology' ?>:</strong> PHP 8.2 + MySQL 8.0</li>
                                <li><strong><?= __('deployment') ?? 'Deployment' ?>:</strong> Docker Compose</li>
                                <li><strong><?= __('ai_engine') ?? 'AI Engine' ?>:</strong> OpenAI GPT API</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h5><i class="fas fa-globe me-2 text-success"></i><?= __('access_urls') ?? 'Access URLs' ?></h5>
                            <ul class="list-unstyled">
                                <li><strong><?= __('frontend') ?? 'Frontend' ?>:</strong>
                                    <a href="http://192.168.168.241:8480" target="_blank">:8480</a>
                                </li>
                                <li><strong><?= __('admin') ?? 'Admin' ?>:</strong>
                                    <a href="http://192.168.168.241:8480/admin" target="_blank">:8480/admin</a>
                                </li>
                                <li><strong>PhpMyAdmin:</strong>
                                    <a href="http://192.168.168.241:8481" target="_blank">:8481</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-4">
                        <div class="col-md-6">
                            <h5><i class="fas fa-language me-2 text-info"></i><?= __('supported_languages') ?? 'Supported Languages' ?></h5>
                            <div class="row g-2">
                                <?php foreach (SUPPORTED_LANGUAGES as $code => $name): ?>
                                    <div class="col-6">
                                        <span class="badge bg-light text-dark w-100 p-2">
                                            <?= $name ?>
                                        </span>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h5><i class="fas fa-tools me-2 text-warning"></i><?= __('features') ?? 'Key Features' ?></h5>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success me-2"></i>AI Article Generation</li>
                                <li><i class="fas fa-check text-success me-2"></i>Multi-language Support</li>
                                <li><i class="fas fa-check text-success me-2"></i>International Publishing</li>
                                <li><i class="fas fa-check text-success me-2"></i>Smart Chat Assistant</li>
                                <li><i class="fas fa-check text-success me-2"></i>Content Automation</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-5">
                <h4><?= __('need_immediate_help') ?? 'Need Immediate Help?' ?></h4>
                <p class="text-muted">
                    <?= __('chat_available') ?? 'Our AI chat assistant is available 24/7 to help you' ?>
                </p>
                <button class="btn btn-primary btn-lg" onclick="toggleChat()">
                    <i class="fas fa-comments me-2"></i><?= __('chat_now') ?? 'Chat Now' ?>
                </button>
            </div>
        </div>
    </div>
</div>

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