@extends('layouts.public')

@section('meta_title', 'Hakkımızda - ' . config('app.name'))
@section('meta_description', 'Askeri platform hakkında bilgi edinin. Misyonumuz, vizyonumuz ve bize ulaşma yolları.')
@section('page_type', 'about')

@section('content')
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:40px 48px;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,0.05);">
    <h1 style="font-size:30px;font-weight:800;color:#111827;margin-bottom:24px;">📋 Hakkımızda</h1>

    <div style="font-size:15px;line-height:1.9;color:#374151;">
        @if($page && $page->is_published)
            <div style="margin-bottom:32px;">
                {!! $page->content !!}
            </div>
        @else
            <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:20px 24px;margin-bottom:32px;">
                <p style="color:#1d4ed8;font-weight:600;margin:0;">Hakkımızda sayfası henüz hazırlanmamıştır. Admin panelinden içerik ekleyebilirsiniz.</p>
            </div>

            <p>Bu platform, Türkiye'deki askeri kariyer süreçlerine hazırlanan adaylara kapsamlı kaynaklar, sınav notları, mülakat soruları ve topluluk desteği sağlamak amacıyla kurulmuştur.</p>
            <p>KPSS, TSK, Jandarma ve Emniyet sınavlarına hazırlıktan pratik hesaplama araçlarına kadar her şeyi tek bir çatı altında sunuyoruz.</p>
        @endif

        @if($contactEmail || $contactPhone || $contactAddress)
        <div style="margin-top:40px;padding-top:28px;border-top:1px solid #e5e7eb;">
            <h2 style="font-size:20px;font-weight:700;color:#111827;margin-bottom:20px;">📬 Bize Ulaşın</h2>
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;">
                @if($contactEmail)
                <div style="display:flex;gap:14px;align-items:flex-start;">
                    <span style="font-size:26px;flex-shrink:0;">📧</span>
                    <div>
                        <div style="font-weight:600;color:#111827;margin-bottom:4px;">E-posta</div>
                        <a href="mailto:{{ $contactEmail }}" style="color:#2563eb;text-decoration:none;font-size:14px;">{{ $contactEmail }}</a>
                    </div>
                </div>
                @endif
                @if($contactPhone)
                <div style="display:flex;gap:14px;align-items:flex-start;">
                    <span style="font-size:26px;flex-shrink:0;">📞</span>
                    <div>
                        <div style="font-weight:600;color:#111827;margin-bottom:4px;">Telefon</div>
                        <a href="tel:{{ $contactPhone }}" style="color:#2563eb;text-decoration:none;font-size:14px;">{{ $contactPhone }}</a>
                    </div>
                </div>
                @endif
                @if($contactAddress)
                <div style="display:flex;gap:14px;align-items:flex-start;">
                    <span style="font-size:26px;flex-shrink:0;">📍</span>
                    <div>
                        <div style="font-weight:600;color:#111827;margin-bottom:4px;">Adres</div>
                        <p style="margin:0;color:#6b7280;font-size:14px;">{{ $contactAddress }}</p>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        @if($contactFacebook || $contactTwitter || $contactInstagram || $contactYoutube || $contactLinkedin)
        <div style="margin-top:36px;padding-top:28px;border-top:1px solid #e5e7eb;">
            <h2 style="font-size:20px;font-weight:700;color:#111827;margin-bottom:16px;">🌐 Sosyal Medya</h2>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                @if($contactFacebook)
                <a href="{{ $contactFacebook }}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#eff6ff;color:#2563eb;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;transition:all 0.2s;">
                    f &nbsp;Facebook
                </a>
                @endif
                @if($contactTwitter)
                <a href="{{ $contactTwitter }}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#eff6ff;color:#2563eb;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;">
                    𝕏 &nbsp;Twitter / X
                </a>
                @endif
                @if($contactInstagram)
                <a href="{{ $contactInstagram }}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#fdf2f8;color:#9d174d;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;">
                    📷 &nbsp;Instagram
                </a>
                @endif
                @if($contactYoutube)
                <a href="{{ $contactYoutube }}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#fef2f2;color:#dc2626;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;">
                    ▶️ &nbsp;YouTube
                </a>
                @endif
                @if($contactLinkedin)
                <a href="{{ $contactLinkedin }}" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#eff6ff;color:#1d4ed8;border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;">
                    in &nbsp;LinkedIn
                </a>
                @endif
            </div>
        </div>
        @endif
    </div>
</div>
@endsection
