---
import ContactForm from './ContactForm.astro';
import ContactHeader from './ContactHeader.astro';
import ContactInfo from './ContactInfo.astro';
import ContactMap from './ContactMap.astro';


interface SiteSettings {
    address: string;
    contact_email?: string;
    contact_phone?: string;
    [key: string]: any;
}

interface Props {
    siteSettings: SiteSettings;
    page: any;
}

const { siteSettings, page } = Astro.props;

const locals = Astro.locals as any;
const isAuthenticated = locals.user ? true : false;
---

<section class="relative bg-gray-50 py-12 sm:py-16 overflow-hidden">
    <!-- Декоративные фоновые элементы -->
    <div class="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2">
        <div class="w-[40rem] h-[40rem] bg-amber-400/10 rounded-full blur-3xl" />
    </div>
    <div class="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2">
        <div class="w-[40rem] h-[40rem] bg-amber-400/15 rounded-full blur-3xl" />
    </div>

    <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
        <ContactHeader page={page} />

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-16 gap-y-12 mt-16 opacity-0 animate-fadeInUp delay-200">
            <div class="flex flex-col justify-center">
                <ContactInfo siteSettings={siteSettings} />
            </div>

            <div>
                <ContactForm isAuthenticated={isAuthenticated} />
            </div>
        </div>

        <div class="mt-20 lg:mt-24 opacity-0 animate-fadeInUp delay-400">
            <ContactMap siteSettings={siteSettings} />
        </div>
    </div>
</section>

<style>
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeInUp { animation: fadeInUp 0.7s ease-out forwards; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-400 { animation-delay: 0.4s; }
</style>