---
import ContactCard from './ContactCard.astro';
import type { ContactConfig } from '@/types/contacts.ts';

export interface Props {
    contacts: ContactConfig;
}

const { contacts } = Astro.props;
const { phones, email, address, hours } = contacts;
---

<div class="mb-10">
    <div class="flex items-center gap-4 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 text-center relative">
            Прямые контакты
            <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></span>
        </h2>
        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
    <!-- Телефоны -->
    <ContactCard title="Телефон" icon="phone">
        <div class="space-y-3">
            {phones.map((phone) => (
                    <div class="group/item">
                        <a href={phone.href} class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 hover:text-[var(--color-gold)] transition-colors duration-300 block relative inline-flex items-center gap-2">
                        <span class="relative">
                            {phone.number}
                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-[var(--color-gold)] transition-all duration-300 group-hover/item:w-full"></span>
                        </span>
                        </a>
                        <span class="text-xs sm:text-sm text-gray-500 font-medium mt-1 block">{phone.label}</span>
                    </div>
            ))}
        </div>
    </ContactCard>

    <!-- Email -->
    <ContactCard title="Email" icon="email">
        <a href={`mailto:${email.address}`} class="text-base sm:text-lg md:text-xl font-bold text-gray-900 hover:text-[var(--color-gold)] transition-colors duration-300 break-all relative inline-block group/link">
            {email.address}
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] transition-all duration-300 group-hover/link:w-full"></span>
        </a>
        <p class="text-xs sm:text-sm text-gray-500 mt-3 font-medium bg-gray-50/50 inline-block px-3 py-1 rounded-full">{email.label}</p>
    </ContactCard>

    <!-- Адрес -->
    <ContactCard title="Офис" icon="location">
        <p class="text-lg sm:text-xl md:text-xl font-bold text-gray-900 mb-2">{address.short}</p>
        <p class="text-sm sm:text-base text-gray-600 mb-4 leading-relaxed">{address.full}</p>
        <a href={address.mapLink} target="_blank" rel="noopener noreferrer"
           class="inline-flex items-center gap-2 text-xs sm:text-sm md:text-sm font-bold text-[var(--color-gold)] hover:text-[var(--color-gold-hover)] transition-all duration-300 bg-[var(--color-gold)]/10 hover:bg-[var(--color-gold)]/20 px-3 sm:px-4 py-1.5 sm:py-2 rounded-xl group/link">
            <span>Открыть на картах</span>
            <svg class="w-4 h-4 transform group-hover/link:translate-x-1 group-hover/link:-translate-y-1 transition-transform duration-300" 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"></path>
            </svg>
        </a>
    </ContactCard>

    <!-- Режим работы -->
    <ContactCard title="Режим работы" icon="clock">
        <div class="space-y-3">
            <div class="flex flex-col sm:flex-row justify-between items-center p-3 bg-gray-50/80 rounded-xl border border-gray-100 gap-2">
                <span class="text-sm sm:text-base text-gray-600 font-medium">Пн — Пт</span>
                <span class="text-sm sm:text-base md:text-lg text-gray-900 font-bold">{hours.weekday}</span>
            </div>
            <div class="flex flex-col sm:flex-row justify-between items-center p-3 bg-gray-50/50 rounded-xl border border-gray-100/50 gap-2">
                <span class="text-sm sm:text-base text-gray-500">Сб — Вс</span>
                <span class="text-sm sm:text-base text-gray-500 font-semibold">{hours.weekend}</span>
            </div>
            {hours.note && (
                    <div class="pt-3 mt-3 border-t border-gray-200">
                    <span class="text-xs sm:text-sm font-medium text-[var(--color-gold)] bg-[var(--color-gold)]/10 px-2.5 sm:px-3 py-1 rounded-full inline-flex items-center gap-2">
                        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        {hours.note}
                    </span>
                    </div>
            )}
        </div>
    </ContactCard>
</div>
