<?php
/*
Template Name: RE/MAX Map
*/

get_header();
?>

<div class="relative w-full max-w-4xl mx-auto" id="remax-map-container">
    <img src="<?php echo get_template_directory_uri(); ?>/images/costa-rica-map.png" alt="Costa Rica Map" class="w-full h-auto">
    <div id="remax-balloons"></div>
</div>

<script>
const balloonPositions = [
    { left: "54%", top: "45%", url: "", name: "RE/MAX Costa Rica" },
    { left: "9%", top: "19%", url: "https://propertiescr506.com/", name: "RE/MAX Synergy" },
    { left: "6%", top: "25%", url: "https://www.remax-oceansurf-cr.com/", name: "RE/MAX Ocean Surf and Sun" },
    { left: "10%", top: "33%", url: "https://www.remax-blueocean.com/", name: "RE/MAX Blue Ocean" },
    { left: "25%", top: "44%", url: "https://www.remax-puravida-cr.com/", name: "RE/MAX Pura Vida" },
    { left: "22%", top: "31%", url: "https://www.remax-costa-rica.com/offices/eco-lifestyle/", name: "RE/MAX Eco Lifestyle" },
    { left: "31%", top: "19%", url: "https://www.remax-costa-rica.com/offices/re-max-lake-volcano-properties/", name: "RE/MAX Lake & Volcano Properties" },
    { left: "41%", top: "37%", url: "https://remax-oro.com/", name: "RE/MAX Tierra de Oro" },
    { left: "48%", top: "38%", url: "https://remaxcentralcr.com/", name: "RE/MAX Central" },
    { left: "52%", top: "36%", url: "", name: "RE/MAX Bespoke" },
    { left: "58%", top: "38%", url: "https://remaxsunrise.com/", name: "RE/MAX Sunrise" },
    { left: "40%", top: "45%", url: "https://remax-ocr.com/", name: "RE/MAX Oceanside Realty" },
    { left: "51%", top: "49%", url: "https://remax-bespokeocean.com/", name: "RE/MAX Bespoke Ocean" },
    { left: "58%", top: "54%", url: "https://remax-cds.com/", name: "RE/MAX Costa del Sol" },
    { left: "68%", top: "62%", url: "https://www.we-sell-paradise.com/", name: "RE/MAX We Sell Paradise" },
    { left: "44%", top: "33%", url: "https://atenasbestclimate.com/", name: "RE/MAX Best Climate" },
    { left: "60%", top: "48%", url: "https://www.remax-costa-rica.com/offices/re-max-golden-coast/", name: "RE/MAX Golden Coast" },
    { left: "40%", top: "30%", url: "https://remax-occidente-cr.com/", name: "RE/MAX Occidente" },
    { left: "48%", top: "32%", url: "https://remax-f360.com/", name: "RE/MAX Fortaleza 360" },
    { left: "45%", top: "41%", url: "https://www.remax-costa-rica.com/offices/re-max-coastal-dreams/", name: "RE/MAX Mar de Oro" },
    { left: "78%", top: "74%", url: "https://remaxjungle.com/", name: "RE/MAX Jungle Propieties" },
];

document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('remax-balloons');

    balloonPositions.forEach((position, index) => {
        const balloon = document.createElement('div');
        balloon.className = 'absolute';
        balloon.style.left = position.left;
        balloon.style.top = position.top;

        const link = document.createElement('a');
        link.href = position.url;
        link.className = 'block w-4 h-4 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-300 ease-in-out cursor-pointer';

        const imageContainer = document.createElement('div');
        imageContainer.className = 'relative w-8 h-8 -translate-x-1/4 -translate-y-1/4';

        const image = document.createElement('img');
        image.src = '<?php echo get_template_directory_uri(); ?>/images/remax-balloon.png';
        image.alt = RE/MAX Location ${index + 1};
        image.width = 32;
        image.height = 50;
        image.className = 'w-full h-full drop-shadow-md';

        const glow = document.createElement('div');
        glow.className = 'absolute inset-0 rounded-full transition-opacity duration-300 bg-white/50 blur-lg opacity-0';

        const tooltip = document.createElement('div');
        tooltip.className = 'absolute z-30 px-2 py-1 bg-black bg-opacity-75 text-white text-xs rounded transform translate-y-1/2 whitespace-nowrap opacity-0 transition-opacity duration-300';
        tooltip.textContent = position.name;

        imageContainer.appendChild(image);
        imageContainer.appendChild(glow);
        link.appendChild(imageContainer);
        balloon.appendChild(link);
        balloon.appendChild(tooltip);

        link.addEventListener('mouseenter', () => {
            link.classList.add('scale-150', 'z-20');
            image.classList.add('drop-shadow-2xl');
            glow.classList.add('opacity-100');
            tooltip.classList.add('opacity-100');
        });

        link.addEventListener('mouseleave', () => {
            link.classList.remove('scale-150', 'z-20');
            image.classList.remove('drop-shadow-2xl');
            glow.classList.remove('opacity-100');
            tooltip.classList.remove('opacity-100');
        });

        container.appendChild(balloon);
    });
});
</script>

<style>
#remax-map-container {
    position: relative;
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}
#remax-balloons .absolute {
    position: absolute;
}
#remax-balloons .block {
    display: block;
}
#remax-balloons .w-4 {
    width: 1rem;
}
#remax-balloons .h-4 {
    height: 1rem;
}
#remax-balloons .w-8 {
    width: 2rem;
}
#remax-balloons .h-8 {
    height: 2rem;
}
#remax-balloons .transform {
    transform: translate(-50%, -50%);
}
#remax-balloons .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
#remax-balloons .cursor-pointer {
    cursor: pointer;
}
#remax-balloons .relative {
    position: relative;
}
#remax-balloons .absolute {
    position: absolute;
}
#remax-balloons .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#remax-balloons .rounded-full {
    border-radius: 9999px;
}
#remax-balloons .bg-white\/50 {
    background-color: rgba(255, 255, 255, 0.5);
}
#remax-balloons .blur-lg {
    filter: blur(16px);
}
#remax-balloons .z-30 {
    z-index: 30;
}
#remax-balloons .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
#remax-balloons .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
#remax-balloons .bg-black {
    background-color: rgba(0, 0, 0, 0.75);
}
#remax-balloons .text-white {
    color: white;
}
#remax-balloons .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
#remax-balloons .whitespace-nowrap {
    white-space: nowrap;
}
#remax-balloons .scale-150 {
    transform: scale(1.5) translate(-33%, -33%);
}
#remax-balloons .z-20 {
    z-index: 20;
}
#remax-balloons .drop-shadow-md {
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
#remax-balloons .drop-shadow-2xl {
    filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
}
</style>

<?php get_footer(); ?>