<?php include __DIR__ . '/../layout/header.php'; ?>

<div class="container" style="max-width: 900px;">
    <h2 style="font-size: 24px; font-weight: 700; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-bottom: 30px;">
        <i class="fa fa-envelope"></i> İletişim Bilgilerimiz
    </h2>

    <style>
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start;
        }
        @media (max-width: 768px) {
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }
    </style>
    <div class="contact-grid">
        
        <!-- Left Column: Contact info cards -->
        <div style="display: flex; flex-direction: column; gap: 20px;">
            <div style="background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 25px; box-shadow: var(--shadow-sm); display: flex; gap: 15px; align-items: center;">
                <div style="width: 50px; height: 50px; background-color: rgba(37, 99, 235, 0.1); color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;">
                    <i class="fa fa-map-marker"></i>
                </div>
                <div>
                    <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 5px;">Adres</h3>
                    <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.4;">
                        <?php echo htmlspecialchars(\App\Models\Settings::get('address')); ?>
                    </p>
                </div>
            </div>

            <div style="background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 25px; box-shadow: var(--shadow-sm); display: flex; gap: 15px; align-items: center;">
                <div style="width: 50px; height: 50px; background-color: rgba(16, 185, 129, 0.1); color: var(--color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;">
                    <i class="fa fa-phone"></i>
                </div>
                <div>
                    <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 5px;">Telefon & Gsm</h3>
                    <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.4;">
                        Sabit: <?php echo htmlspecialchars(\App\Models\Settings::get('telephone')); ?><br>
                        Gsm: <?php echo htmlspecialchars(\App\Models\Settings::get('mobile')); ?>
                    </p>
                </div>
            </div>

            <div style="background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 25px; box-shadow: var(--shadow-sm); display: flex; gap: 15px; align-items: center;">
                <div style="width: 50px; height: 50px; background-color: rgba(245, 158, 11, 0.15); color: var(--color-warning); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;">
                    <i class="fa fa-envelope-o"></i>
                </div>
                <div>
                    <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 5px;">E-posta</h3>
                    <p style="color: var(--text-secondary); font-size: 14px; line-height: 1.4;">
                        <?php echo htmlspecialchars(\App\Models\Settings::get('email')); ?>
                    </p>
                </div>
            </div>
        </div>

        <!-- Right Column: Simple message box -->
        <div style="background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 30px; box-shadow: var(--shadow-sm);">
            <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">Bizimle İrtibata Geçin</h3>
            
            <form onsubmit="alert('Mesajınız başarıyla iletildi. En kısa sürede geri dönüş yapılacaktır.'); this.reset(); return false;" style="display: flex; flex-direction: column; gap: 15px;">
                <div style="display: flex; flex-direction: column; gap: 6px;">
                    <label style="font-size: 13px; font-weight: 600;">Adınız Soyadınız</label>
                    <input type="text" required style="padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); outline: none; font-family: var(--font-primary); background-color: var(--bg-primary); color: var(--text-primary);">
                </div>
                
                <div style="display: flex; flex-direction: column; gap: 6px;">
                    <label style="font-size: 13px; font-weight: 600;">E-posta veya Telefon</label>
                    <input type="text" required style="padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); outline: none; font-family: var(--font-primary); background-color: var(--bg-primary); color: var(--text-primary);">
                </div>

                <div style="display: flex; flex-direction: column; gap: 6px;">
                    <label style="font-size: 13px; font-weight: 600;">Mesajınız</label>
                    <textarea rows="4" required style="padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); outline: none; font-family: var(--font-primary); background-color: var(--bg-primary); color: var(--text-primary); resize: none;"></textarea>
                </div>

                <button type="submit" class="btn-primary" style="justify-content: center; padding: 10px; margin-top: 5px;">Gönder</button>
            </form>
        </div>

    </div>
</div>

<?php include __DIR__ . '/../layout/footer.php'; ?>
