---
interface Props {
    siteSettings: unknown;
}

const { siteSettings } = Astro.props;

const contactDetails = [
    {
        icon: "📞",
        title: 'Telefon',
        value: siteSettings?.contact?.phoneNumber || siteSettings?.contact?.phone,
        href: siteSettings?.contact?.phoneHref || `tel:${siteSettings?.contact?.phoneNumber || siteSettings?.contact?.phone || ''}`,
    },
    {
        icon: "✉️",
        title: 'E-Mail',
        value: siteSettings?.contact?.emailAddress || siteSettings?.contact?.email,
        href: siteSettings?.contact?.emailHref || `mailto:${siteSettings?.contact?.emailAddress || siteSettings?.contact?.email || ''}`,
    },
    {
        icon: "📍",
        title: 'Standort',
        value: siteSettings?.contact?.address || 'Berlin, Deutschland',
        href: siteSettings?.contact?.mapUrl || '#',
    },
    {
        icon: "🕒",
        title: 'Öffnungszeiten',
        value: siteSettings?.contact?.workingHours || '24/7 erreichbar',
        href: '#',
    },
];
---

<div class="space-y-6 opacity-0 animate-staggerFadeIn">
    {contactDetails.map((detail, index) => {
        const Wrapper = detail.href === '#' ? 'div' : 'a';
        return (
                <Wrapper
                        href={detail.href === '#' ? undefined : detail.href}
                        class="contact-item flex items-center p-4 rounded-xl group opacity-0 animate-fadeInUp"
                        style={`animation-delay: ${0.2 + (index * 0.15)}s`}
                >
                    <div class="flex-shrink-0 flex items-center justify-center h-14 w-14 rounded-full bg-amber-100 text-amber-600 mr-5 transition-colors duration-300 group-hover:bg-amber-500 group-hover:text-white text-xl">
                        {detail.icon}
                    </div>
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900">
                            {detail.title}
                        </h2>
                        <p class="text-md text-gray-600 transition-colors duration-300 group-hover:text-amber-600">
                            {detail.value}
                        </p>
                    </div>
                </Wrapper>
        );
    })}
</div>

<style is:global>
    @keyframes staggerFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-staggerFadeIn {
        animation: staggerFadeIn 0.6s ease-out forwards;
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.5s ease-out forwards;
    }

    .contact-item:hover {
        transform: scale(1.02);
        transition: transform 0.2s ease;
    }
</style>
