<?php 
require_once __DIR__ . '/../layouts/header.php'; 

// 1. Veritabanından İletişim Bilgilerini Hazırla
$address    = $globalSettings->address ?? 'Adres bilgisi bulunamadı.';
$phone      = $globalSettings->phone ?? '';
$email      = $globalSettings->email ?? '';
$facebook   = $globalSettings->facebook ?? '';
$instagram  = $globalSettings->instagram ?? '';
$twitter    = $globalSettings->twitter ?? '';

$cleanPhone = preg_replace('/[^0-9]/', '', $phone);
?>

<style>
    /* PC ve Mobil Genel Ayarlar */
    .contact-hero { height: 40vh; min-height: 350px; }
    @media (min-width: 992px) { .contact-hero { min-height: 500px; } }

    /* İKON VE INPUT ÇAKIŞMA ÇÖZÜMÜ */
    .custom-input-group {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .custom-input-group i {
        position: absolute;
        left: 1.25rem; /* İkonun soldan uzaklığı */
        z-index: 20;
        color: #3b82f6; /* Mavi renk */
        font-size: 1.1rem;
        pointer-events: none; /* İkona tıklanmasın, inputa tıklansın */
    }
    .custom-input-group .form-control {
        padding-left: 3.5rem !important; /* Yazıyı ikonun sağından başlatmak için zorunlu boşluk */
        height: 60px;
        border-radius: 1rem;
        background-color: #f8fafc;
        border: 1px solid #f1f5f9;
        font-weight: 600;
        font-size: 0.9rem;
    }
    .custom-input-group .form-control:focus {
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        border-color: #93c5fd;
    }

    /* Mobilde Harita Yüksekliği */
    .contact-map iframe { height: 350px; }
    @media (min-width: 992px) { .contact-map iframe { height: 550px; } }
</style>

<section class="tw-relative contact-hero d-flex align-items-center justify-content-center tw-mt-[-80px] tw-pt-[80px]">
    <div class="tw-absolute tw-inset-0">
        <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
             class="tw-w-full tw-h-full tw-object-cover" alt="İletişim">
        <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-r tw-from-[#0f172a]/95 tw-to-[#0f172a]/70"></div>
    </div>

    <div class="container tw-relative tw-z-10 text-center text-white tw-px-4">
        <span class="tw-inline-block tw-bg-blue-600/20 tw-border tw-border-blue-400/30 tw-backdrop-blur-md tw-px-4 md:tw-px-5 tw-py-1.5 tw-rounded-full tw-text-[10px] md:tw-text-xs tw-font-black tw-uppercase tw-tracking-widest tw-mb-4">
            BİZ BURADAYIZ
        </span>
        <h1 class="tw-text-3xl md:tw-text-6xl tw-font-black tw-mb-4 tw-tracking-tight tw-drop-shadow-lg">
            Bize Ulaşın
        </h1>
        <p class="tw-text-blue-50 tw-text-sm md:tw-text-xl tw-font-medium tw-max-w-2xl tw-mx-auto tw-mb-6 tw-opacity-90">
            Sorularınız ve danışmanlık talepleriniz için uzman kadromuzla yanınızdayız.
        </p>
        
        <nav class="d-inline-block">
            <ol class="breadcrumb justify-content-center tw-bg-white/10 tw-border tw-border-white/10 tw-px-5 tw-py-2 tw-rounded-xl tw-backdrop-blur-md mb-0 tw-text-xs md:tw-text-sm">
                <li class="breadcrumb-item"><a href="<?php echo BASE_URL; ?>" class="text-white text-decoration-none opacity-75">Anasayfa</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">İletişim</li>
            </ol>
        </nav>
    </div>
</section>

<section class="tw-pb-20 tw-bg-[#f8fafc] tw-relative">
    <div class="container tw-relative tw--mt-16 md:tw--mt-32 tw-z-20 tw-px-4">
        
        <div class="tw-bg-white tw-rounded-[2.5rem] tw-shadow-2xl tw-shadow-slate-200/50 tw-border tw-border-gray-100 tw-overflow-hidden tw-flex tw-flex-col lg:tw-flex-row">
            
            <div class="tw-w-full lg:tw-w-7/12 tw-p-6 md:tw-p-12">
                <h3 class="tw-font-black tw-text-2xl md:tw-text-3xl tw-text-gray-900 tw-mb-2">Mesaj Gönderin</h3>
                <p class="tw-text-gray-500 tw-mb-8 tw-font-medium tw-text-sm md:tw-text-base">Hızlıca formu doldurun, size en kısa sürede dönüş yapalım.</p>

                <?php if (isset($_GET['success'])): ?>
                    <div class="alert alert-success d-flex align-items-center mb-6 tw-rounded-2xl tw-border-0 tw-bg-emerald-50 tw-text-emerald-700 tw-font-bold tw-py-4">
                        <i class="fa-solid fa-circle-check tw-text-2xl tw-mr-3"></i>
                        <div class="tw-text-sm">Mesajınız başarıyla iletildi!</div>
                    </div>
                <?php endif; ?>

                <form action="<?php echo BASE_URL; ?>/message/send" method="POST">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-mb-1.5 tw-tracking-widest tw-px-1">Adınız Soyadınız</label>
                            <div class="custom-input-group">
                                <i class="fa-regular fa-user"></i>
                                <input type="text" name="sender_name" class="form-control" placeholder="Ad Soyad" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-mb-1.5 tw-tracking-widest tw-px-1">Telefon Numaranız</label>
                            <div class="custom-input-group">
                                <i class="fa-solid fa-phone"></i>
                                <input type="tel" name="sender_phone" class="form-control" placeholder="05XX..." required>
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-mb-1.5 tw-tracking-widest tw-px-1">E-Posta Adresiniz</label>
                            <div class="custom-input-group">
                                <i class="fa-regular fa-envelope"></i>
                                <input type="email" name="sender_email" class="form-control" placeholder="ornek@mail.com" required>
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="tw-text-[10px] tw-font-black tw-text-gray-400 tw-uppercase tw-mb-1.5 tw-tracking-widest tw-px-1">Mesajınız</label>
                            <textarea name="message_content" class="form-control tw-bg-gray-50 tw-border-0 tw-p-5 tw-rounded-[1.5rem] tw-text-sm tw-font-medium focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 transition-all shadow-none" rows="5" placeholder="Size nasıl yardımcı olabiliriz?" required style="padding-left: 1.25rem !important;"></textarea>
                        </div>

                        <div class="col-12">
                            <button type="submit" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white w-100 tw-py-4 md:tw-py-5 tw-rounded-2xl tw-font-black tw-text-xs md:tw-text-sm tw-uppercase tw-tracking-widest tw-shadow-xl tw-shadow-blue-500/30 transition-all hover:tw--translate-y-1">
                                MESAJI GÖNDER <i class="fa-regular fa-paper-plane tw-ml-2"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="tw-w-full lg:tw-w-5/12 tw-bg-[#0f172a] tw-text-white tw-relative tw-overflow-hidden d-flex flex-column justify-content-center tw-p-8 md:tw-p-12">
                <div class="tw-absolute tw-top-[-10%] tw-right-[-10%] tw-w-64 tw-h-64 tw-bg-blue-600/20 tw-rounded-full tw-blur-[100px] tw-pointer-events-none"></div>
                <div class="tw-absolute tw-bottom-[-10%] tw-left-[-10%] tw-w-64 tw-h-64 tw-bg-teal-500/10 tw-rounded-full tw-blur-[100px] tw-pointer-events-none"></div>

                <div class="tw-relative tw-z-10">
                    <h3 class="tw-font-black tw-text-2xl tw-mb-10">İletişim Bilgilerimiz</h3>
                    
                    <div class="tw-space-y-8">
                        <div class="d-flex align-items-start">
                            <div class="tw-w-12 tw-h-12 tw-bg-white/5 tw-rounded-xl d-flex align-items-center justify-content-center tw-flex-shrink-0 tw-mr-5 tw-border tw-border-white/5">
                                <i class="fa-solid fa-map-location-dot tw-text-xl tw-text-blue-400"></i>
                            </div>
                            <div>
                                <h6 class="tw-font-black tw-text-[10px] tw-text-blue-500 tw-uppercase tw-tracking-widest tw-mb-1">Adres</h6>
                                <p class="tw-text-gray-300 tw-text-sm tw-leading-relaxed mb-0"><?php echo nl2br(htmlspecialchars($address)); ?></p>
                            </div>
                        </div>

                        <div class="d-flex align-items-center">
                            <div class="tw-w-12 tw-h-12 tw-bg-white/5 tw-rounded-xl d-flex align-items-center justify-content-center tw-flex-shrink-0 tw-mr-5 tw-border tw-border-white/5">
                                <i class="fa-solid fa-phone-volume tw-text-xl tw-text-emerald-400"></i>
                            </div>
                            <div>
                                <h6 class="tw-font-black tw-text-[10px] tw-text-emerald-500 tw-uppercase tw-tracking-widest tw-mb-1">Telefon</h6>
                                <a href="tel:<?php echo $cleanPhone; ?>" class="tw-text-gray-300 tw-text-sm tw-font-bold tw-no-underline hover:tw-text-white transition-all"><?php echo htmlspecialchars($phone); ?></a>
                            </div>
                        </div>

                        <div class="d-flex align-items-center">
                            <div class="tw-w-12 tw-h-12 tw-bg-white/5 tw-rounded-xl d-flex align-items-center justify-content-center tw-flex-shrink-0 tw-mr-5 tw-border tw-border-white/5">
                                <i class="fa-regular fa-envelope-open tw-text-xl tw-text-orange-400"></i>
                            </div>
                            <div>
                                <h6 class="tw-font-black tw-text-[10px] tw-text-orange-500 tw-uppercase tw-tracking-widest tw-mb-1">E-Posta</h6>
                                <a href="mailto:<?php echo htmlspecialchars($email); ?>" class="tw-text-gray-300 tw-text-sm tw-font-bold tw-no-underline hover:tw-text-white transition-all"><?php echo htmlspecialchars($email); ?></a>
                            </div>
                        </div>
                    </div>

                    <div class="tw-mt-12 tw-pt-8 tw-border-t tw-border-white/10">
                        <h6 class="tw-text-[10px] tw-font-black tw-text-gray-500 tw-uppercase tw-tracking-[0.2em] tw-mb-5">SOSYAL MEDYA</h6>
                        <div class="tw-flex tw-gap-3">
                            <?php if(!empty($facebook)): ?><a href="<?php echo $facebook; ?>" target="_blank" class="tw-w-11 tw-h-11 tw-bg-white/5 hover:tw-bg-[#1877F2] tw-rounded-xl d-flex align-items-center justify-content-center tw-text-white tw-transition-all hover:tw--translate-y-1"><i class="fa-brands fa-facebook-f"></i></a><?php endif; ?>
                            <?php if(!empty($instagram)): ?><a href="<?php echo $instagram; ?>" target="_blank" class="tw-w-11 tw-h-11 tw-bg-white/5 hover:tw-bg-gradient-to-tr hover:tw-from-[#f09433] hover:tw-via-[#dc2743] hover:tw-to-[#bc1888] tw-rounded-xl d-flex align-items-center justify-content-center tw-text-white tw-transition-all hover:tw--translate-y-1"><i class="fa-brands fa-instagram"></i></a><?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<section class="contact-map tw-bg-gray-100">
    <iframe 
        src="https://maps.google.com/maps?q=<?php echo urlencode($address); ?>&t=&z=15&ie=UTF8&iwloc=&output=embed" 
        width="100%" height="100%" style="border:0; filter: grayscale(100%) invert(90%) contrast(1.1);" allowfullscreen="" loading="lazy">
    </iframe>
</section>

<?php require_once __DIR__ . '/../layouts/footer.php'; ?>