@extends('layouts.storefront')

@section('title', 'İletişim - ' . setting('general.site_name', config('app.name')))
@section('meta_description', 'Bizimle iletişime geçin. Firma iletişim bilgileri ve iletişim formu.')

@section('content')

<div class="sf-container">
    {{-- Breadcrumb --}}
    <x-storefront.breadcrumb :items="['Ana Sayfa' => route('home'), 'İletişim' => '']" />

    <header class="sf-contact-header">
        <h1 class="sf-contact-title">Bizimle İletişime Geçin</h1>
        <p class="sf-contact-subtitle">Sorularınız, önerileriniz veya iş birlikleriniz için formu doldurarak bize ulaşabilirsiniz.</p>
    </header>

    <div class="sf-contact-grid">
        {{-- Sol Kolon: Firma Bilgileri --}}
        <div class="sf-contact-info-wrapper">
            <div class="sf-contact-info-card">
                <h2 class="sf-contact-info-title">Firma Bilgileri</h2>
                
                <div class="sf-contact-info-list">
                    @if(!empty($companyDetails['name']))
                        <div class="sf-contact-info-item">
                            <div class="sf-contact-info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                </svg>
                            </div>
                            <div class="sf-contact-info-content">
                                <span class="sf-contact-info-label">Şirket Ünvanı</span>
                                <span class="sf-contact-info-value">{{ $companyDetails['name'] }}</span>
                            </div>
                        </div>
                    @endif

                    @if(!empty($companyDetails['address']))
                        <div class="sf-contact-info-item">
                            <div class="sf-contact-info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </div>
                            <div class="sf-contact-info-content">
                                <span class="sf-contact-info-label">Adres</span>
                                <span class="sf-contact-info-value">
                                    {{ $companyDetails['address'] }}
                                    @if(!empty($companyDetails['district']) || !empty($companyDetails['city']))
                                        <br><strong>{{ $companyDetails['district'] ? $companyDetails['district'] . ' / ' : '' }}{{ $companyDetails['city'] }}</strong>
                                    @endif
                                </span>
                            </div>
                        </div>
                    @endif

                    @if(!empty($companyDetails['phone']))
                        <div class="sf-contact-info-item">
                            <div class="sf-contact-info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.988-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                            </div>
                            <div class="sf-contact-info-content">
                                <span class="sf-contact-info-label">Telefon</span>
                                <a href="tel:{{ preg_replace('/[^0-9+]/', '', $companyDetails['phone']) }}" class="sf-contact-info-link">{{ $companyDetails['phone'] }}</a>
                            </div>
                        </div>
                    @endif

                    @if(!empty($companyDetails['email']))
                        <div class="sf-contact-info-item">
                            <div class="sf-contact-info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div class="sf-contact-info-content">
                                <span class="sf-contact-info-label">E-posta</span>
                                <a href="mailto:{{ $companyDetails['email'] }}" class="sf-contact-info-link">{{ $companyDetails['email'] }}</a>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- Sosyal Medya Bağlantıları --}}
                @if(setting('social.instagram') || setting('social.facebook') || setting('social.twitter') || setting('social.youtube') || setting('social.linkedin') || setting('social.whatsapp'))
                    <div class="sf-contact-socials-box">
                        <div class="sf-contact-socials-title">Sosyal Medyada Biz</div>
                        <div class="sf-contact-socials-list">
                            @if(setting('social.facebook'))
                                <a href="{{ setting('social.facebook') }}" target="_blank" class="sf-contact-social-btn" aria-label="Facebook">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M9 8H7v3h2v9h4v-9h3.6l.4-3H13V6c0-.5.5-1 1-1h3V1H13c-3 0-5 2-5 5v2z"/></svg>
                                </a>
                            @endif
                            @if(setting('social.instagram'))
                                <a href="{{ setting('social.instagram') }}" target="_blank" class="sf-contact-social-btn" aria-label="Instagram">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                                </a>
                            @endif
                            @if(setting('social.twitter'))
                                <a href="{{ setting('social.twitter') }}" target="_blank" class="sf-contact-social-btn" aria-label="X / Twitter">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                                </a>
                            @endif
                            @if(setting('social.linkedin'))
                                <a href="{{ setting('social.linkedin') }}" target="_blank" class="sf-contact-social-btn" aria-label="LinkedIn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
                                </a>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Sağ Kolon: İletişim Formu --}}
        <div class="sf-contact-form-wrapper">
            <div class="sf-contact-form-card">
                <h2 class="sf-contact-form-title">İletişim Formu</h2>
                <livewire:storefront.contact.contact-form />
            </div>
        </div>
    </div>

    @if(!empty($companyDetails['google_maps']))
        <div class="sf-contact-map-wrapper">
            <div class="sf-contact-map-card">
                {!! $companyDetails['google_maps'] !!}
            </div>
        </div>
    @endif
</div>

@endsection