<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %> - Website Hosting Service</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 0;
        }
        .plan-card {
            border: 2px solid #e9ecef;
            border-radius: 15px;
            transition: all 0.3s ease;
            height: 100%;
        }
        .plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .plan-card.free {
            border-color: #28a745;
        }
        .plan-card.paid {
            border-color: #007bff;
        }
        .plan-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 2rem;
            text-align: center;
            border-radius: 13px 13px 0 0;
        }
        .plan-header.free {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        }
        .plan-header.paid {
            background: linear-gradient(135deg, #cce7ff 0%, #b8daff 100%);
        }
        .plan-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }
        .plan-icon.free {
            color: #28a745;
        }
        .plan-icon.paid {
            color: #007bff;
        }
        .plan-price {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .plan-price.free {
            color: #28a745;
        }
        .plan-price.paid {
            color: #007bff;
        }
        .plan-features {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .plan-features li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #e9ecef;
        }
        .plan-features li:last-child {
            border-bottom: none;
        }
        .plan-features i {
            width: 20px;
            margin-right: 10px;
        }
        .lang-switch {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        .btn-back {
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <!-- Language Switcher -->
    <div class="lang-switch">
        <div class="dropdown">
            <button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="fas fa-globe"></i> Language
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="?lang=en">English</a></li>
                <li><a class="dropdown-item" href="?lang=es">Español</a></li>
                <li><a class="dropdown-item" href="?lang=fr">Français</a></li>
                <li><a class="dropdown-item" href="?lang=de">Deutsch</a></li>
                <li><a class="dropdown-item" href="?lang=ru">Русский</a></li>
            </ul>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <h1 class="display-5 fw-bold mb-3">
                        <i class="fas fa-list-alt me-3"></i>
                        Hosting Plans
                    </h1>
                    <p class="lead">
                        Choose the perfect plan for your website hosting needs
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Plans Section -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center mb-4">
                <div class="col-lg-6 text-center">
                    <a href="/" class="btn btn-outline-primary btn-back">
                        <i class="fas fa-arrow-left me-2"></i>Back to Home
                    </a>
                </div>
            </div>

            <div class="row g-4 justify-content-center">
                <!-- Free Plan -->
    <div class="col-lg-5">
        <div class="card plan-card free">
            <div class="plan-header free">
                <i class="fas fa-gift plan-icon free"></i>
                <h3><%= plans.free.name %></h3>
                <div class="plan-price free"><%= plans.free.price %></div>
                <div class="text-muted"><%= plans.free.duration %></div>
            </div>
            <div class="card-body">
                <ul class="plan-features">
                    <li>
                        <i class="fas fa-check text-muted"></i>
                        24-hour hosting duration
                    </li>
                    <li>
                        <i class="fas fa-check text-muted"></i>
                        100MB storage limit
                    </li>
                </ul>
                <div class="text-center mt-4">
                    <a href="/" class="btn btn-success btn-lg">
                        <i class="fas fa-rocket me-2"></i>Get Started Free
                    </a>
                </div>
            </div>
        </div>
    </div>

                <!-- Premium Plan -->
                <div class="col-lg-5">
                    <div class="card plan-card paid">
                        <div class="plan-header paid">
                            <i class="fas fa-crown plan-icon paid"></i>
                            <h3><%= plans.paid.name %></h3>
                            <div class="plan-price paid"><%= plans.paid.price %></div>
                            <div class="text-muted"><%= plans.paid.duration %></div>
                        </div>
                        <div class="card-body">
                            <ul class="plan-features">
                                <li>
                                    <i class="fas fa-check text-success"></i>
                                    Flexible hosting duration
                                </li>
                                <li>
                                    <i class="fas fa-check text-success"></i>
                                    2GB storage limit
                                </li>
                            </ul>
                            <div class="text-center mt-4">
                                <button class="btn btn-primary btn-lg" disabled>
                                    <i class="fas fa-coming-soon me-2"></i>Coming Soon
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Plan Comparison -->
            <div class="row justify-content-center mt-5">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title text-center mb-4">
                                <i class="fas fa-balance-scale me-2"></i>
                                Plan Comparison
                            </h4>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Feature</th>
                                            <th class="text-center">Free</th>
                                            <th class="text-center">Premium</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Duration</td>
                                            <td class="text-center">24 hours</td>
                                            <td class="text-center">Flexible</td>
                                        </tr>
                                        <tr>
                                            <td>Storage</td>
                                            <td class="text-center">100MB</td>
                                            <td class="text-center">2GB</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
