<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Product Page</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            line-height: 1.6;
            color: #333;
        }

        .full-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 2.5rem;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1rem;
            color: #666;
        }

        .product-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 30px;
            width: 100%;
            max-width: 1200px;
        }

        .product {
            background: #fff;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            flex: 1;
            max-width: 300px;
            min-width: 200px;
            display: flex;
            flex-direction: column;
            min-height: 300px;
            text-align: left;
            width: 100%;
        }

        .product:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .product h2 {
            font-size: 1.5rem;
            color: #1a1a1a;
        }

        .product p {
            font-size: 0.65rem;
            color: #797979;
            margin-top: 0;
        }

        .product-btn {
            display: inline-block;
            padding: 12px 25px;
            border: none;
            border-radius: 25px;
            background: #007bff;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.2s ease;
            text-decoration: none;
            align-self: center;
            margin-top: auto;
        }

        .product-btn:hover {
            background: #0056b3;
            transform: scale(1.05);
        }

        .custom-section {
            margin-top: 60px;
            text-align: center;
            width: 100%;
            max-width: 1200px;
            display: none; /* Hidden by default, shown when logged in */
        }

        .custom-section h1 {
            font-size: 2rem;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .custom-section p {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 20px;
        }

        .custom-product {
            background: #fff;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            max-width: 400px; /* Slightly wider for form */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 300px;
        }

        .custom-product form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .custom-product input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .custom-product input:focus {
            border-color: #007bff;
        }

        .error {
            color: #e63946;
            font-size: 0.9rem;
            margin-top: 5px;
            display: none;
        }
        .product-list ul{      
            color: rgb(0, 0, 0);
            font-size: 0.8rem;
            margin-bottom: 20px;
        }
        
        .product-list{
            margin-left: 0px;
        }

        .product-list li{
            list-style: none;
            position: relative;
    display: inline-block;
    cursor: pointer;
        }
        .product-list li .tooltiptext {
        visibility: hidden;
        width: 200px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 5px;

        /* Positioning */
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Position above the text */
        left: 50%;
        transform: translateX(-50%);
        
        /* Fade-in effect */
        opacity: 0;
        transition: opacity 0.3s;
    }

    /* Show tooltip on hover */
    .product-list li:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
        /* Mobile layout */
        @media (max-width: 710px) {
            .product-container {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            .product {
                max-width: 100%;
                min-width: 90%;
                padding: 20px;
                min-height: 280px;
            }

            .product-list ul{
                display: flex;
                flex-direction: column;
            }

            .header h1, .custom-section h1 {
                font-size: 2rem;
            }

            .header p, .custom-section p {
                font-size: 1rem;
            }

            .product h2 {
                font-size: 1.3rem;
            }

            .product-btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }

            .custom-product {
                max-width: 100%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="full-container">
        
        <img class="userAvatarImage_userAvatar__O4D2T" style="display: none;" alt="User Avatar">

        <div class="header">
            <h1>Find the right hiring solution for you</h1>
            <p>Discover tailored job posting options designed to meet your needs. Buy now or register to unlock exclusive benefits.</p>
        </div>

        <div class="product-container">
            <div class="product">
                <h2>Basic</h2>
                <p>Perfect for standard job postings</p>
                <h2>595 Eur</h2>
                <div style="border-top: #5c5c5c42 solid 1px; padding: 3px;"></div>
                <p style="font-weight: bold; color: black;">What’s included:</p>
                <div class="product-list">
                    <ul>
                        <li>
                            ✅ 28-day job ad
                            <span class="tooltiptext">Keep your listing live for maximum exposure</span>
                        </li>
                    </ul>
                </div>
                <a href="#" class="product-btn" data-logged-in-url="https://example.com/buy1" data-logged-out-url="https://example.com/register">Loading...</a>
            </div>
            <div class="product">
                <h2>Premium</h2>
                <p>Ideal for reaching a wider audience with enhanced visibility</p>
                <h2>595 Eur</h2>
                <div style="border-top: #5c5c5c42 solid 1px; padding: 3px;"></div>
                <p style="font-weight: bold; color: black;">What’s included:</p>
                <div class="product-list">
                    <ul>
                        <li>
                            ✅ 28-day job ad
                            <span class="tooltiptext">Keep your listing live for maximum exposure</span>
                        </li>
                        <li>
                            ✅ Featured in our aviation newsletter
                            <span class="tooltiptext">Your job will be highlighted in our next newsletter, sent to XXX engaged subscribers</span>
                        </li>
                        <li>
                            ✅ Social media promotion
                            <span class="tooltiptext">We will share your job post with over 200k followers across our channels</span>
                        </li>
                        <li>
                            ✅ Priority placement
                            <span class="tooltiptext">Your job appears at the top of the search results</span>
                        </li>
                    </ul>
                </div>
               
                <a href="#" class="product-btn" data-logged-in-url="https://example.com/buy2" data-logged-out-url="https://example.com/register">Loading...</a>
            </div>
            <div class="product">
                <h2>Deluxe</h2>
                <p>Designed for employers who want the highest level of exposure and candidate access.</p>
                <h2>595 Eur</h2>
                <div style="border-top: #5c5c5c42 solid 1px; padding: 3px;"></div>
                <p style="font-weight: bold; color: black;">What’s included:</p>
                <div class="product-list">
                    <ul>
                        <li>
                            ✅ 28-day job ad
                            <span class="tooltiptext">Keep your listing live for maximum exposure</span>
                        </li>
                        <li>
                            ✅ Featured in our aviation newsletter
                            <span class="tooltiptext">Your job will be highlighted in our next newsletter, sent to XXX engaged subscribers</span>
                        </li>
                        <li>
                            ✅ Social media promotion
                            <span class="tooltiptext">We will share your job post with over 200k followers across our channels</span>
                        </li>
                        <li>
                            ✅ Priority placement
                            <span class="tooltiptext">Your job appears at the top of the search results</span>
                        </li>
                        <li>
                            ✅ Job ad on our banners in Aviation CV
                            <span class="tooltiptext">Gain extra visibility across our platform</span>
                        </li>
                        <li>
                            ✅ Job ad featured on our and our partners portals.
                            <span class="tooltiptext">Job posting will be featured on AviationCV and AeorTime portals</span>
                        </li>
                    </ul>
                </div>
             
                <a href="#" class="product-btn" data-logged-in-url="https://example.com/buy3" data-logged-out-url="https://example.com/register">Loading...</a>
            </div>
        </div>

        <div class="custom-section">
            <div class="custom-product">
                <h2>Redeem Your Product</h2>
                <p>Enter your product code in order to redeem it.</p>
                <form id="customProductForm">
                    <input type="text" id="customInput" placeholder="Enter your 18-digit code" required>
                    <button type="submit" class="product-btn">Submit</button>
                </form>
                <p id="errorMessage" class="error">Please enter a valid 18-digit product code</p>
            </div>
        </div>
    </div>

    <script>
        // Function to update button states and custom section visibility
        function updatePageState() {
            const userAvatar = document.querySelector('.userAvatarImage_userAvatar__O4D2T');
            const buttons = document.querySelectorAll('.product-btn');
            const customSection = document.querySelector('.custom-section');
            const isLoggedIn = userAvatar && window.getComputedStyle(userAvatar).display !== 'none';

            // Fallback: If avatar element is missing, assume logged out
            if (!userAvatar) {
                console.warn('Avatar element not found. Assuming user is logged out.');
            }

            // Update button states
            buttons.forEach(button => {
                const loggedInUrl = button.getAttribute('data-logged-in-url');
                const loggedOutUrl = button.getAttribute('data-logged-out-url');

                if (isLoggedIn) {
                    button.textContent = 'Buy Now';
                    button.href = loggedInUrl || '#';
                } else {
                    button.textContent = 'Register Now';
                    button.href = loggedOutUrl || '#';
                }
            });

            // Show/hide custom section based on login state
            if (isLoggedIn) {
                customSection.style.display = 'block';
            } else {
                customSection.style.display = 'none';
            }

            // Log for debugging
            console.log('Logged In:', isLoggedIn);
            console.log('Buttons Updated:', buttons.length);
            console.log('Custom Section Visible:', isLoggedIn);
        }

        // Run on page load
        window.addEventListener('load', () => {
            updatePageState();
        });

        // Custom product form submission
        document.getElementById('customProductForm').addEventListener('submit', (event) => {
            event.preventDefault();
            const customString = document.getElementById('customInput').value.trim();
            const errorMessage = document.getElementById('errorMessage');

            if (customString.length !== 18 || !/^[a-zA-Z0-9]+$/.test(customString)) {
                errorMessage.style.display = 'block';
            } else {
                errorMessage.style.display = 'none';
                window.location.href = `https://example.com/${encodeURIComponent(customString)}`;
            }
        });
    </script>
</body>
</html>