@extends('layouts.app')

@section('title', 'Google – Social Networks')

@section('content')
<div class="social-networks-section-page">
    <p class="social-networks-back">
        <a href="{{ route('social-networks.index') }}">← Social Networks</a>
    </p>
    <header class="setting-header">
        <h1>Google</h1>
        <p class="setting-subtitle">Manage your Google integration. Connect your account and configure options here.</p>
    </header>
    <section class="setting-section setting-card">
        <p class="setting-section-desc">Google integration settings will be available here. You can connect your Google account and manage connected services.</p>
    </section>
</div>

@push('styles')
<style>
.social-networks-section-page { max-width: 800px; }
.social-networks-back { margin: 0 0 1rem 0; font-size: 0.9rem; }
.social-networks-back a { color: #2563eb; text-decoration: none; }
.social-networks-back a:hover { text-decoration: underline; }
.social-networks-section-page .setting-header { margin-bottom: 1.5rem; }
.social-networks-section-page .setting-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.social-networks-section-page .setting-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.setting-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
.setting-section-desc { font-size: 0.85rem; color: #6b7280; line-height: 1.45; margin: 0; }
</style>
@endpush
@endsection