<?php
require_once 'includes/i18n.php';

// Initialize i18n
$i18n = I18n::getInstance();
$current_lang = $i18n->getCurrentLanguage();
$lang_info = $i18n->getLanguageInfo();
?>
<!DOCTYPE html>
<html lang="<?php echo $current_lang; ?>" dir="<?php echo $lang_info['direction']; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo __('site_title'); ?></title>
    <meta name="description" content="<?php echo __('site_description'); ?>">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <style>
        .language-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 8px 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(102, 126, 234, 0.2);
        }
        
        .language-switcher select {
            border: none;
            background: transparent;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            outline: none;
        }
        
        .language-switcher select:focus {
            outline: none;
        }
        
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 100px 0;
            text-align: center;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: bold;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .hero-description {
            font-size: 1.1rem;
            margin-bottom: 40px;
            opacity: 0.8;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn-primary {
            background: white;
            color: #667eea;
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .btn-secondary:hover {
            background: white;
            color: #667eea;
        }
        
        .features-section {
            padding: 80px 0;
            background: #f8f9fa;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 60px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
        
        .feature-card {
            background: white;
            padding: 40px 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
        }
        
        .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 20px;
            color: white;
            font-size: 2rem;
        }
        
        .feature-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }
        
        .feature-description {
            color: #666;
            line-height: 1.6;
        }
        
        .services-section {
            padding: 80px 0;
            background: white;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .service-card:hover {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            transform: translateY(-5px);
        }
        
        .service-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .service-description {
            line-height: 1.6;
        }
        
        .pricing-section {
            padding: 80px 0;
            background: #f8f9fa;
        }
        
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .pricing-card {
            background: white;
            padding: 40px 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: relative;
        }
        
        .pricing-card.featured {
            border: 3px solid #667eea;
            transform: scale(1.05);
        }
        
        .pricing-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .pricing-price {
            font-size: 3rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 30px;
        }
        
        .pricing-features {
            list-style: none;
            padding: 0;
            margin-bottom: 30px;
        }
        
        .pricing-features li {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .contact-section {
            padding: 80px 0;
            background: white;
        }
        
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #333;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #eee;
            border-radius: 10px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .footer {
            background: #333;
            color: white;
            padding: 40px 0;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
            color: #667eea;
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .language-switcher {
                top: 10px;
                right: 10px;
                padding: 6px 12px;
            }
            
            .footer-content {
                flex-direction: column;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- Language Switcher -->
    <div class="language-switcher">
        <select onchange="changeLanguage(this.value)">
            <?php foreach ($i18n->getAvailableLanguages() as $code => $info): ?>
                <option value="<?php echo $code; ?>" <?php echo $code === $current_lang ? 'selected' : ''; ?>>
                    <?php echo $info['native_name']; ?>
                </option>
            <?php endforeach; ?>
        </select>
    </div>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <i class="fas fa-robot"></i>
                <span>SEO AI</span>
            </div>
            <ul class="nav-menu">
                <li><a href="#home"><?php echo __('nav_home'); ?></a></li>
                <li><a href="#features"><?php echo __('nav_features'); ?></a></li>
                <li><a href="#services"><?php echo __('nav_services'); ?></a></li>
                <li><a href="#pricing"><?php echo __('nav_pricing'); ?></a></li>
                <li><a href="#contact"><?php echo __('nav_contact'); ?></a></li>
                <li><a href="admin/login.php" class="btn-login"><?php echo __('nav_login'); ?></a></li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-section">
        <div class="container">
            <h1 class="hero-title"><?php echo __('hero_title'); ?></h1>
            <h2 class="hero-subtitle"><?php echo __('hero_subtitle'); ?></h2>
            <p class="hero-description"><?php echo __('hero_description'); ?></p>
            <div class="hero-buttons">
                <a href="admin/login.php" class="btn btn-primary">
                    <i class="fas fa-rocket"></i>
                    <?php echo __('get_started'); ?>
                </a>
                <a href="#features" class="btn btn-secondary">
                    <i class="fas fa-info-circle"></i>
                    <?php echo __('learn_more'); ?>
                </a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features-section">
        <div class="container">
            <h2 class="section-title"><?php echo __('features_title'); ?></h2>
            <p class="section-subtitle"><?php echo __('features_subtitle'); ?></p>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="feature-title"><?php echo __('feature_ai_analysis'); ?></h3>
                    <p class="feature-description"><?php echo __('feature_ai_analysis_desc'); ?></p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-edit"></i>
                    </div>
                    <h3 class="feature-title"><?php echo __('feature_content_generation'); ?></h3>
                    <p class="feature-description"><?php echo __('feature_content_generation_desc'); ?></p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="feature-title"><?php echo __('feature_competitor_analysis'); ?></h3>
                    <p class="feature-description"><?php echo __('feature_competitor_analysis_desc'); ?></p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h3 class="feature-title"><?php echo __('feature_automation'); ?></h3>
                    <p class="feature-description"><?php echo __('feature_automation_desc'); ?></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services-section">
        <div class="container">
            <h2 class="section-title"><?php echo __('services_title'); ?></h2>
            <p class="section-subtitle"><?php echo __('services_subtitle'); ?></p>
            
            <div class="services-grid">
                <div class="service-card">
                    <h3 class="service-title"><?php echo __('service_seo_audit'); ?></h3>
                    <p class="service-description"><?php echo __('service_seo_audit_desc'); ?></p>
                </div>
                
                <div class="service-card">
                    <h3 class="service-title"><?php echo __('service_keyword_research'); ?></h3>
                    <p class="service-description"><?php echo __('service_keyword_research_desc'); ?></p>
                </div>
                
                <div class="service-card">
                    <h3 class="service-title"><?php echo __('service_content_planning'); ?></h3>
                    <p class="service-description"><?php echo __('service_content_planning_desc'); ?></p>
                </div>
                
                <div class="service-card">
                    <h3 class="service-title"><?php echo __('service_technical_seo'); ?></h3>
                    <p class="service-description"><?php echo __('service_technical_seo_desc'); ?></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="pricing-section">
        <div class="container">
            <h2 class="section-title"><?php echo __('pricing_title'); ?></h2>
            <p class="section-subtitle"><?php echo __('pricing_subtitle'); ?></p>
            
            <div class="pricing-grid">
                <div class="pricing-card">
                    <h3 class="pricing-title"><?php echo __('pricing_basic'); ?></h3>
                    <div class="pricing-price"><?php echo $i18n->formatCurrency(99); ?><span style="font-size: 1rem;">/<?php echo __('pricing_monthly'); ?></span></div>
                    <ul class="pricing-features">
                        <li><?php echo __('pricing_features'); ?> 1</li>
                        <li><?php echo __('pricing_features'); ?> 2</li>
                        <li><?php echo __('pricing_features'); ?> 3</li>
                    </ul>
                    <a href="#contact" class="btn btn-primary"><?php echo __('pricing_contact'); ?></a>
                </div>
                
                <div class="pricing-card featured">
                    <h3 class="pricing-title"><?php echo __('pricing_pro'); ?></h3>
                    <div class="pricing-price"><?php echo $i18n->formatCurrency(299); ?><span style="font-size: 1rem;">/<?php echo __('pricing_monthly'); ?></span></div>
                    <ul class="pricing-features">
                        <li><?php echo __('pricing_features'); ?> 1</li>
                        <li><?php echo __('pricing_features'); ?> 2</li>
                        <li><?php echo __('pricing_features'); ?> 3</li>
                        <li><?php echo __('pricing_features'); ?> 4</li>
                    </ul>
                    <a href="#contact" class="btn btn-primary"><?php echo __('pricing_contact'); ?></a>
                </div>
                
                <div class="pricing-card">
                    <h3 class="pricing-title"><?php echo __('pricing_enterprise'); ?></h3>
                    <div class="pricing-price"><?php echo $i18n->formatCurrency(999); ?><span style="font-size: 1rem;">/<?php echo __('pricing_monthly'); ?></span></div>
                    <ul class="pricing-features">
                        <li><?php echo __('pricing_features'); ?> 1</li>
                        <li><?php echo __('pricing_features'); ?> 2</li>
                        <li><?php echo __('pricing_features'); ?> 3</li>
                        <li><?php echo __('pricing_features'); ?> 4</li>
                        <li><?php echo __('pricing_features'); ?> 5</li>
                    </ul>
                    <a href="#contact" class="btn btn-primary"><?php echo __('pricing_contact'); ?></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <h2 class="section-title"><?php echo __('contact_title'); ?></h2>
            <p class="section-subtitle"><?php echo __('contact_subtitle'); ?></p>
            
            <form class="contact-form">
                <div class="form-group">
                    <label for="name"><?php echo __('contact_name'); ?></label>
                    <input type="text" id="name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label for="email"><?php echo __('contact_email'); ?></label>
                    <input type="email" id="email" name="email" required>
                </div>
                
                <div class="form-group">
                    <label for="message"><?php echo __('contact_message'); ?></label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-paper-plane"></i>
                    <?php echo __('contact_send'); ?>
                </button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-robot"></i>
                    <span>SEO AI</span>
                </div>
                <div class="footer-links">
                    <a href="#privacy"><?php echo __('footer_privacy'); ?></a>
                    <a href="#terms"><?php echo __('footer_terms'); ?></a>
                </div>
            </div>
            <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #555;">
                <p>&copy; <?php echo date('Y'); ?> <?php echo __('footer_copyright'); ?>. <?php echo __('footer_rights'); ?>.</p>
            </div>
        </div>
    </footer>

    <script>
        function changeLanguage(language) {
            // Update URL with language parameter
            const url = new URL(window.location);
            url.searchParams.set("lang", language);
            
            // Redirect to new URL
            window.location.href = url.toString();
        }
        
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Mobile menu toggle
        const hamburger = document.querySelector('.hamburger');
        const navMenu = document.querySelector('.nav-menu');
        
        if (hamburger && navMenu) {
            hamburger.addEventListener('click', function() {
                hamburger.classList.toggle('active');
                navMenu.classList.toggle('active');
            });
        }
    </script>
</body>
</html>
