@extends('layouts.app')

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

@section('content')
<div class="social-networks-page">
    <header class="setting-header">
        <h1>Social Networks</h1>
        <p class="setting-subtitle">Manage integrations with social networks. Choose a section below to configure Instagram, WhatsApp, or Google.</p>
    </header>

    <div class="social-networks-grid">
        <a href="{{ route('social-networks.instagram') }}" class="social-networks-card">
            <span class="social-networks-card-icon" aria-hidden="true">📷</span>
            <h2 class="social-networks-card-title">Instagram</h2>
            <p class="social-networks-card-desc">Connect and manage your Instagram integration settings.</p>
        </a>
        <a href="{{ route('social-networks.instagram-bot') }}" class="social-networks-card">
            <span class="social-networks-card-icon" aria-hidden="true">✉️</span>
            <h2 class="social-networks-card-title">Instagram Bot</h2>
            <p class="social-networks-card-desc">Connect Instagram Messaging API for DMs. Set webhook and verify token in your Meta app.</p>
        </a>
        <a href="{{ route('social-networks.whatsapp') }}" class="social-networks-card">
            <span class="social-networks-card-icon" aria-hidden="true">💬</span>
            <h2 class="social-networks-card-title">WhatsApp</h2>
            <p class="social-networks-card-desc">Connect WhatsApp Cloud API for messaging and catalog.</p>
        </a>
        <a href="{{ route('social-networks.google') }}" class="social-networks-card">
            <span class="social-networks-card-icon" aria-hidden="true">🔗</span>
            <h2 class="social-networks-card-title">Google</h2>
            <p class="social-networks-card-desc">Connect and manage your Google integration settings.</p>
        </a>
        <a href="{{ route('social-networks.products.index') }}" class="social-networks-card">
            <span class="social-networks-card-icon" aria-hidden="true">📦</span>
            <h2 class="social-networks-card-title">Products</h2>
            <p class="social-networks-card-desc">Manage products not on the website: custom pieces, watches, grillz.</p>
        </a>
        <a href="{{ route('social.stories.page') }}" class="social-networks-card">
            <span class="social-networks-card-icon" aria-hidden="true">🕒</span>
            <h2 class="social-networks-card-title">Automatic Story Scheduler</h2>
            <p class="social-networks-card-desc">Automate daily Instagram and Facebook Stories.</p>
        </a>
    </div>
</div>

@push('styles')
<style>
.social-networks-page { max-width: 800px; }
.social-networks-page .setting-header { margin-bottom: 1.5rem; }
.social-networks-page .setting-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.social-networks-page .setting-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.social-networks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.social-networks-card { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.social-networks-card:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12); }
.social-networks-card-icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.social-networks-card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.social-networks-card-desc { font-size: 0.85rem; color: #6b7280; line-height: 1.45; margin: 0; }
</style>
@endpush
@endsection