function display_dynamic_state_cards() {
    $terms = get_terms(array(
        'taxonomy' => 'categoryvortex',
        'hide_empty' => false,
    ));

    $output = '';

    $base_url = 'https://recordhealth.org/wp-content/uploads/2024/07/mychart-login-';

    if (!empty($terms) && !is_wp_error($terms)) {
        foreach ($terms as $term) {
            $slug = $term->slug;
            $name = $term->name;
            $url = get_term_link($term);

            $image_url = $base_url . $slug . '-www-mychart-com-login-' . $slug . '.png';

            $response = wp_remote_head($image_url);

            if (is_wp_error($response)) {
                continue; 
            }

            $status_code = wp_remote_retrieve_response_code($response);
            if ($status_code != 200) {
                continue; // Skip if the response status is not 200 OK
            }

$output .= '
    <div class="state-card-vortex" style="display: flex; align-items: center; border-bottom: 1px solid #ccc; padding: 16px 0; position: relative; text-decoration: none; color: white; width: 100%; max-width: 480px; height: 88.8px; box-sizing: border-box;">
        <div class="image-container-vortex" style="flex-shrink: 0; margin-right: 16px;">
            <img src="' . esc_url($image_url) . '" alt="MyChart Login Page ' . esc_attr($name) . '" style="width: 48px; height: 48px;">
        </div>
        <div class="text-container-vortex" style="flex-grow: 1;">
            <h5 style="margin: 0; color: white;">' . esc_html($name) . ' – MyChart</h5>
        </div>
        <div class="icon-container-vortex" style="margin-left: auto; flex-shrink: 0;">
            <a href="' . esc_url($url) . '" style="color: white; text-decoration: none;">
                <svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="width: 28px; height: 28px;">
                    <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"></path>
                </svg>
            </a>
        </div>
        <a href="' . esc_url($url) . '" class="overlay-link" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;"></a>
    </div>
    <style>
        @media (max-width: 767px) {
            .state-card-vortex {
                max-width: 319px;
                height: 80px;
            }
            .text-container-vortex h5 {
                font-size: 18px;
            }
        }
        @media (min-width: 768px) {
            .state-card-vortex {
                max-width: 480px;
                height: 88.8px;
            }
            .text-container-vortex h5 {
                font-size: 18px;
            }
        }

        .state-card-vortex:hover .text-container-vortex h5,
        .state-card-vortex:hover .icon-container-vortex a svg {
            color: #ffa500;
        }

        .icon-container-vortex a svg {
            transition: fill 0.3s ease;
        }

        .state-card-vortex:hover .icon-container-vortex a svg {
            fill: #ffa500;
        }
    </style>';


        }
    } else {
        $output = '<p>No states found.</p>';
    }
    set_transient('state_vortex_cards', $output, HOUR_IN_SECONDS);

    return $output;
}

add_shortcode('state_vortex_display', 'display_dynamic_state_cards');
