Optimized, data-driven localized contact info injector (v2.0) with session caching and parity.

localized-contact-v2.js

/**
 * Localized Contact Injector v2.0
 * Rationale: Data-driven architecture with session-caching for performance 
 * and async/await for cleaner error handling. Maintains 100% visual parity.
 */
document.addEventListener("DOMContentLoaded", async () => {
    const element = document.getElementById("location-info");
    if (!element) return;

    // 1. CONFIGURATION (Exact SVG paths preserved for visual parity)
    const LOCATIONS = {
        AT: {
            email: "[email protected]",
            phone: "+43 660 5452526",
            rawPhone: "+436605452526",
            hours: "(Mo-Fr, 9-18 Uhr)",
            flag: `<svg width="24" height="16" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="27.5" height="19.5" rx="1.75" fill="white" stroke="#F5F5F5" stroke-width="0.5"/><mask id="mask_at" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="20"><path d="M28 20H0V0H28V20Z" fill="white"/><path d="M28 20H0V0H28V20Z" stroke="white"/></mask><g mask="url(#mask_at)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.66667H28V0H0V6.66667Z" fill="#D80128"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20H28V13.3333H0V20Z" fill="#D80128"/></g></svg>`
        },
        CH: {
            email: "[email protected]",
            phone: "+41 78 445 3536",
            rawPhone: "+41784453536",
            hours: "(Mo-Fr, 9-18 Uhr)",
            flag: `<svg width="24" height="16" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="20" rx="2" fill="white"/><mask id="mask_ch" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="20"><rect width="28" height="20" rx="2" fill="white"/></mask><g mask="url(#mask_ch)"><rect width="28" height="20" fill="#FF0000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 12H8.33333C8.14924 12 8 11.8508 8 11.6667V8.33333C8 8.14924 8.14924 8 8.33333 8H12V4.33333C12 4.14924 12.1492 4 12.3333 4H15.6667C15.8508 4 16 4.14924 16 4.33333V8H19.6667C19.8508 8 20 8.14924 20 8.33333V11.6667C20 11.8508 19.8508 12 19.6667 12H16V15.6667C16 15.8508 15.8508 16 15.6667 16H12.3333C12.1492 16 12 15.8508 12 15.6667V12Z" fill="white"/></g></svg>`
        },
        DE: {
            email: "[email protected]",
            phone: "+49 176 89031447",
            rawPhone: "+4917689031447",
            hours: "(Mo-Fr, 9-18 Uhr)",
            flag: `<svg width="24" height="16" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="20" rx="2" fill="white"/><mask id="mask_de" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="20"><rect width="28" height="20" rx="2" fill="white"/></mask><g mask="url(#mask_de)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.66667H28V0H0V6.66667Z" fill="#262626"/><g filter="url(#filter0_de)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.3333H28V6.66666H0V13.3333Z" fill="#F01515"/></g><g filter="url(#filter1_de)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20H28V13.3333H0V20Z" fill="#FFD521"/></g></g><defs><filter id="filter0_de" x="0" y="6.66666" width="28" height="6.66666" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_142_178"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_142_178" result="shape"/></filter><filter id="filter1_de" x="0" y="13.3333" width="28" height="6.66666" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_142_178"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_142_178" result="shape"/></filter></defs></svg>`
        }
    };

    // 2. GEOLOCATION ENGINE (With Session Persistence)
    async function getCountryCode() {
        const cached = sessionStorage.getItem("wowflow_visitor_country");
        if (cached) return cached;

        try {
            const cf = await fetch("/cdn-cgi/trace").then(r => r.text());
            const code = cf.match(/loc=(.+)/)?.[1];
            if (code) {
                sessionStorage.setItem("wowflow_visitor_country", code);
                return code;
            }
        } catch (e) {}

        try {
            const ipapi = await fetch("https://ipapi.co/json/").then(r => r.json());
            if (ipapi.country_code) {
                sessionStorage.setItem("wowflow_visitor_country", ipapi.country_code);
                return ipapi.country_code;
            }
        } catch (e) {}

        return "DE"; // Default
    }

    // 3. RENDER ENGINE
    const code = await getCountryCode();
    const data = LOCATIONS[code] || LOCATIONS.DE;

    // Guard against multiple runs
    if (element.querySelector('.location-email')) return;

    const html = `
        <a href="mailto:${data.email}" class="location-email">
            <span class="location-email__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13" fill="none"><path d="M1.58947 12.75C1.16849 12.75 0.812174 12.6042 0.520508 12.3125C0.228841 12.0208 0.0830078 11.6645 0.0830078 11.2435V1.75646C0.0830078 1.33549 0.228841 0.979167 0.520508 0.6875C0.812174 0.395833 1.16849 0.25 1.58947 0.25H14.4099C14.8309 0.25 15.1872 0.395833 15.4788 0.6875C15.7705 0.979167 15.9163 1.33549 15.9163 1.75646V11.2435C15.9163 11.6645 15.7705 12.0208 15.4788 12.3125C15.1872 12.6042 14.8309 12.75 14.4099 12.75H1.58947ZM7.99967 6.96479L1.33301 2.70187V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H14.4099C14.4847 11.5 14.5462 11.476 14.5943 11.4279C14.6423 11.3799 14.6663 11.3184 14.6663 11.2435V2.70187L7.99967 6.96479ZM7.99967 5.66667L14.5382 1.5H1.46113L7.99967 5.66667ZM1.33301 2.70187V1.5V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H1.33301V2.70187Z" fill="#271B50"></path></svg>						
            </span>
            <span class="location-email__text">${data.email}</span>
        </a>
        <div class="location-contact">
            <div class="location-contact__flag" aria-hidden="true">
               ${data.flag}
            </div>
            <div class="location-contact__info">
                <div class="location-contact__phone">
                    <a href="tel:${data.rawPhone}">${data.phone}</a>
                </div>
                <div class="location-contact__hours">
                    ${data.hours}
                </div>
            </div>
        </div>`;

    element.insertAdjacentHTML("afterbegin", html);
});