---
interface Props {
    siteSettings: {
        address: string;
        [key: string]: any;
    };
}

const { siteSettings } = Astro.props;

// Формируем URL для Google Maps, используя поле address из вашей коллекции
const encodedAddress = encodeURIComponent(siteSettings.address);
const mapUrl = `https://maps.google.com/maps?q=${encodedAddress}&t=&z=14&ie=UTF8&iwloc=&output=embed`;
---

<div class="contact-map-wrapper opacity-0 animate-fadeInUp">
    <div class="relative w-full h-80 md:h-[450px] rounded-2xl overflow-hidden shadow-2xl border-4 border-white">

        <!-- Интерактивная карта Google -->
        <iframe
            class="absolute inset-0 w-full h-full border-0"
            title="Google Map Location"
            src={mapUrl}
            loading="lazy"
            allowfullscreen
            referrerpolicy="no-referrer-when-downgrade"
        ></iframe>

        <!-- Невидимый слой поверх для плавности скролла (опционально) -->
        <div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 rounded-2xl"></div>
    </div>

    <!-- Подпись под картой (опционально) -->
    <p class="mt-4 text-center text-gray-500 font-light italic">
        📍 {siteSettings.address}
    </p>
</div>

<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @media (max-width: 768px) {
        iframe {
            pointer-events: auto;
        }
    }
</style>