@extends('layouts.app')

@section('title', 'Ad Manager')

@section('content')
@php
    $metaConnected = $meta->isConnected() && $meta->selectedAdAccountActId() !== '';
@endphp
<div class="ads-hub">
    <header class="ads-hub__header">
        <h1>Ad Manager</h1>
        <p>Facebook &amp; Instagram (Meta) now. Google Ads next. Connection lives in <a href="{{ route('setting.ad-platforms') }}">Setting → Ad platforms</a>.</p>
    </header>

    <div class="ads-hub__grid">
        <a href="{{ route('ads.meta.campaigns') }}" class="ads-hub__card ads-hub__card--meta">
            <span class="ads-hub__mark ads-hub__mark--meta" aria-hidden="true">f</span>
            <h2>Meta</h2>
            <p>Facebook and Instagram campaigns. Pause, stats, and AI on what’s on.</p>
            @if($metaConnected)
                <span class="ads-pill ads-pill--ok">Connected · {{ $meta->ad_account_name ?: 'Ad account' }}</span>
            @else
                <span class="ads-pill ads-pill--warn">Connect in Ad platforms</span>
            @endif
            <span class="ads-hub__cta">Open Campaigns →</span>
        </a>
        <a href="{{ route('ads.google.index') }}" class="ads-hub__card ads-hub__card--google">
            <span class="ads-hub__mark ads-hub__mark--google" aria-hidden="true">G</span>
            <h2>Google Ads</h2>
            <p>Search and YouTube campaigns. Same layout as Meta when it’s ready.</p>
            <span class="ads-pill">Coming soon</span>
            <span class="ads-hub__cta">View placeholder →</span>
        </a>
    </div>
</div>

@push('styles')
<style>
.ads-hub { max-width: 760px; }
.ads-hub__header { margin-bottom: 1.35rem; }
.ads-hub__header h1 { margin: 0 0 0.4rem; font-size: 1.5rem; font-weight: 700; color: #111; }
.ads-hub__header p { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.ads-hub__header a { color: #2563eb; }
.ads-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.ads-hub__card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.25rem;
    text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ads-hub__card:hover { border-color: #93c5fd; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); }
.ads-hub__card--meta { border-top: 3px solid #1877f2; }
.ads-hub__card--google { border-top: 3px solid #e5e7eb; }
.ads-hub__card h2 { margin: 0; font-size: 1.15rem; }
.ads-hub__card p { margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.45; }
.ads-hub__cta { margin-top: 0.35rem; font-size: 0.85rem; font-weight: 600; color: #2563eb; }
.ads-hub__mark {
    width: 2.25rem; height: 2.25rem; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem; color: #fff;
}
.ads-hub__mark--meta { background: #1877f2; }
.ads-hub__mark--google { background: #4285f4; }
.ads-pill {
    display: inline-flex; align-items: center;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
    background: #f1f5f9; color: #64748b;
}
.ads-pill--ok { background: #d1fae5; color: #047857; }
.ads-pill--warn { background: #fef3c7; color: #b45309; }
</style>
@endpush
@endsection