---
import { CONTACT_CONSTANTS } from '@constants/constants.ts';

interface Props {
    variant?: 'full' | 'card' | 'simple';
    title?: string;
    subtitle?: string;
    address?: string;
    mapUrl?: string;
    showRouteButton?: boolean;
    lazyLoad?: boolean;
}

const {
    variant = 'full',
    title = "Наш офис",
    subtitle = "г. Сургут, пр. Комсомольский, 19",
    address = CONTACT_CONSTANTS.address,
    mapUrl = "https://yandex.ru/maps/-/CDu~yK-j",
    showRouteButton = true,
    lazyLoad = true
} = Astro.props;

const defaultMapUrl = "https://yandex.ru/map-widget/v1/?um=constructor%3Acdxezk6x&source=constructor";
const currentMapUrl = variant === 'card' ? defaultMapUrl : mapUrl;
---

{variant === 'full' ? (
    <div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl mb-12">
        <section id="map-section" class="relative w-full h-[500px] overflow-hidden rounded-3xl shadow-2xl">
            <div class="absolute inset-0 bg-gray-200">
                <iframe
                        data-src={currentMapUrl}
                        class="map-iframe w-full h-full border-0 grayscale contrast-125 opacity-0 transition-opacity duration-700"
                        allowfullscreen
                        loading={lazyLoad ? "lazy" : "eager"}
                        title="Карта проезда"
                ></iframe>
            </div>

            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                <div class="bg-white/95 backdrop-blur-xl p-8 md:p-10 rounded-2xl shadow-2xl max-w-sm text-center pointer-events-auto border border-white/50 mx-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </div>

                    <h3 class="text-gray-900 font-bold text-lg uppercase tracking-wider mb-3">
                        {title}
                    </h3>

                    <p class="text-gray-600 mb-6 leading-relaxed">
                        {address}
                    </p>

                    {showRouteButton && (
                        <a
                                href={currentMapUrl}
                                target="_blank"
                                rel="noopener noreferrer"
                                class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white text-sm font-bold uppercase tracking-wider rounded-xl hover:bg-[var(--color-gold)] transition-colors shadow-lg hover:shadow-xl"
                        >
                            Открыть в картах
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                            </svg>
                        </a>
                    )}
                </div>
            </div>
        </section>
    </div>
) : variant === 'card' ? (
    <div class="relative bg-white/80 backdrop-blur-xl border border-white/50 rounded-3xl overflow-hidden shadow-2xl shadow-gray-900/5 hover:shadow-2xl hover:shadow-[var(--color-blue-primary)]/10 transition-all duration-500 group">
        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-gray-100/80 pointer-events-none z-10"></div>

        <div class="relative z-20 p-8 pb-0 flex flex-col items-center text-center md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 mb-2 flex items-center gap-3 justify-center md:justify-start">
                    <span class="w-2 h-6 sm:h-8 bg-gradient-to-b from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full hidden md:block"></span>
                    {title}
                </h2>
                <p class="text-gray-600 text-base sm:text-lg flex items-center gap-2 justify-center md:justify-start">
                    <svg class="w-4 sm:w-5 h-4 sm:h-5 text-[var(--color-gold)] hidden md:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                    </svg>
                    {subtitle}
                </p>
            </div>

            {showRouteButton && (
                <a href={currentMapUrl} target="_blank" class="inline-flex items-center justify-center gap-2 px-4 sm:px-6 py-2 sm:py-3 bg-[var(--color-gold)]/10 hover:bg-[var(--color-gold)]/20 text-[var(--color-gold)] font-semibold rounded-xl transition-all duration-300 border border-[var(--color-gold)]/20 hover:border-[var(--color-gold)]/40 self-center md:self-auto">
                    <span class="text-sm sm:text-base">Маршрут</span>
                    <svg class="w-4 sm:w-5 h-4 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 20L20 4" opacity="0.2" stroke-width="1" />
                    </svg>
                </a>
            )}
        </div>

        <div class="relative h-[450px] mt-8 bg-gray-100 overflow-hidden">
            <iframe
                    src={currentMapUrl}
                    width="100%"
                    height="100%"
                    frameborder="0"
                    class="filter grayscale-[30%] contrast-125 group-hover:grayscale-0 transition-all duration-700"
                    loading={lazyLoad ? "lazy" : "eager"}
                    title="Офис на карте Сургута"
            ></iframe>

            <div class="absolute inset-0 flex items-center justify-center bg-gray-900/0 group-hover:bg-gray-900/0 transition-all duration-500 pointer-events-none">
                <span class="px-4 sm:px-6 py-2 sm:py-3 bg-white/95 backdrop-blur-sm text-gray-900 rounded-full text-xs sm:text-sm font-bold border border-gray-200 shadow-xl transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 pointer-events-auto cursor-pointer hover:bg-[var(--color-gold)] hover:text-white hover:border-[var(--color-gold)]">
                    Наведите для взаимодействия
                </span>
            </div>
        </div>
    </div>
) : (
    <div class="relative h-[400px] bg-gray-100 overflow-hidden rounded-xl">
        <iframe
                src={currentMapUrl}
                width="100%"
                height="100%"
                frameborder="0"
                loading={lazyLoad ? "lazy" : "eager"}
                title="Карта"
        ></iframe>
    </div>
)}

{lazyLoad && variant === 'full' && (
    <script>
        const mapSection = document.getElementById('map-section');
        const iframe = mapSection?.querySelector('.map-iframe');

        if (mapSection && iframe) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const frame = entry.target.querySelector('iframe');
                        if (frame && frame.dataset.src) {
                            frame.src = frame.dataset.src;
                            frame.onload = () => {
                                frame.classList.remove('opacity-0');
                                frame.classList.add('opacity-100');
                            };
                            observer.unobserve(entry.target);
                        }
                    }
                });
            }, { rootMargin: '200px', threshold: 0.1 });

            observer.observe(mapSection);
        }
    </script>
)}