{{-- resources/views/customer/agency/sections/contact.blade.php --}}
<section class="contact-section" style="background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);">
    <div class="container">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;">
            <div>
                @if($section->subtitle)
                    <p style="color: var(--accent); font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->title)
                    <h2 style="font-size: 2.75rem; font-weight: 800; color: #111827; margin-bottom: 1.5rem; line-height: 1.2;">
                        {{ $section->title }}
                    </h2>
                @endif

                @if($section->content)
                    <p style="font-size: 1.125rem; color: #6B7280; line-height: 1.8; margin-bottom: 3rem;">
                        {{ $section->content }}
                    </p>
                @endif

                <div style="display: flex; flex-direction: column; gap: 2rem;">
                    @if($agency->contact_phone)
                        <div style="display: flex; align-items: center; gap: 1.5rem;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                <i class="fas fa-phone" style="color: white; font-size: 1.5rem;"></i>
                            </div>
                            <div>
                                <h4 style="font-weight: 600; color: #111827; margin-bottom: 0.25rem;">Telefon</h4>
                                <a href="tel:{{ $agency->contact_phone }}" style="color: var(--primary); font-size: 1.125rem; text-decoration: none; font-weight: 600;">
                                    {{ $agency->contact_phone }}
                                </a>
                            </div>
                        </div>
                    @endif

                    @if($agency->contact_email)
                        <div style="display: flex; align-items: center; gap: 1.5rem;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, var(--secondary), var(--accent)); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                <i class="fas fa-envelope" style="color: white; font-size: 1.5rem;"></i>
                            </div>
                            <div>
                                <h4 style="font-weight: 600; color: #111827; margin-bottom: 0.25rem;">E-posta</h4>
                                <a href="mailto:{{ $agency->contact_email }}" style="color: var(--primary); font-size: 1.125rem; text-decoration: none; font-weight: 600;">
                                    {{ $agency->contact_email }}
                                </a>
                            </div>
                        </div>
                    @endif

                    @if($agency->contact_address)
                        <div style="display: flex; align-items: center; gap: 1.5rem;">
                            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, var(--accent), var(--primary)); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                <i class="fas fa-map-marker-alt" style="color: white; font-size: 1.5rem;"></i>
                            </div>
                            <div>
                                <h4 style="font-weight: 600; color: #111827; margin-bottom: 0.25rem;">Adres</h4>
                                <p style="color: #6B7280; font-size: 1rem; line-height: 1.6;">
                                    {{ $agency->contact_address }}
                                </p>
                            </div>
                        </div>
                    @endif
                </div>

                @if($agency->facebook_url || $agency->instagram_url || $agency->twitter_url)
                    <div style="display: flex; gap: 1rem; margin-top: 3rem;">
                        @if($agency->facebook_url)
                            <a href="{{ $agency->facebook_url }}" target="_blank" style="width: 48px; height: 48px; background: #1877F2; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s;">
                                <i class="fab fa-facebook-f" style="color: white; font-size: 1.25rem;"></i>
                            </a>
                        @endif
                        @if($agency->instagram_url)
                            <a href="{{ $agency->instagram_url }}" target="_blank" style="width: 48px; height: 48px; background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s;">
                                <i class="fab fa-instagram" style="color: white; font-size: 1.25rem;"></i>
                            </a>
                        @endif
                        @if($agency->twitter_url)
                            <a href="{{ $agency->twitter_url }}" target="_blank" style="width: 48px; height: 48px; background: #1DA1F2; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s;">
                                <i class="fab fa-twitter" style="color: white; font-size: 1.25rem;"></i>
                            </a>
                        @endif
                    </div>
                @endif
            </div>

            <div style="background: white; padding: 3rem; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.1);">
                <form action="{{ route('customer.contact.submit') }}" method="POST">
                    @csrf
                    <div style="margin-bottom: 1.5rem;">
                        <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">Ad Soyad</label>
                        <input type="text" name="name" required style="width: 100%; padding: 1rem; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 1rem; transition: border-color 0.2s;">
                    </div>

                    <div style="margin-bottom: 1.5rem;">
                        <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">E-posta</label>
                        <input type="email" name="email" required style="width: 100%; padding: 1rem; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 1rem; transition: border-color 0.2s;">
                    </div>

                    <div style="margin-bottom: 1.5rem;">
                        <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">Telefon</label>
                        <input type="tel" name="phone" style="width: 100%; padding: 1rem; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 1rem; transition: border-color 0.2s;">
                    </div>

                    <div style="margin-bottom: 1.5rem;">
                        <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">Mesajınız</label>
                        <textarea name="message" rows="5" required style="width: 100%; padding: 1rem; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 1rem; resize: vertical; transition: border-color 0.2s;"></textarea>
                    </div>

                    <button type="submit" style="width: 100%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 1.25rem; border: none; border-radius: 12px; font-weight: 700; font-size: 1.125rem; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                        Mesaj Gönder
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<style>
    .contact-section input:focus,
    .contact-section textarea:focus {
        outline: none;
        border-color: var(--primary);
    }

    .contact-section button:hover {
        transform: translateY(-2px);
    }

    .contact-section a:hover {
        transform: scale(1.1);
    }

    @media (max-width: 992px) {
        .contact-section > .container > div {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
    }
</style>