@extends('layouts.app')

@section('title', 'Pazarlama')

@section('content')
    <div class="container-fluid mkt-hub-page">
        <div class="mkt-hub-hero">
            <div class="mkt-hub-hero-bg"></div>
            <div class="mkt-hub-hero-content">
                <div class="mkt-hub-eyebrow">
                    <i class="bi bi-megaphone-fill me-2"></i>Pazarlama Modülü
                </div>
                <h1 class="mkt-hub-title">Pazarlama İş Merkezi</h1>
                <p class="mkt-hub-subtitle">Tüm pazarlama süreçlerinizi tek çatı altında yönetin.</p>
            </div>
        </div>

        <div class="mkt-hub-grid">
            <a href="{{ route('admin.marketing.destek') }}" class="mkt-hub-card">
                <div class="mkt-hub-card-icon">
                    <i class="bi bi-headset"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Pazarlama Destek</h3>
                    <p class="mkt-hub-card-desc">Service management space</p>
                </div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>

            <a href="{{ route('admin.marketing.destek.queue', ['scope' => 'mine']) }}" class="mkt-hub-card">
                <div class="mkt-hub-card-icon">
                    <i class="bi bi-person-workspace"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Bana Atananlar</h3>
                    <p class="mkt-hub-card-desc">Sadece bana atanmış Pazarlama Destek işleri</p>
                </div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>

            <a href="{{ route('admin.marketing.worklist') }}" class="mkt-hub-card">
                <div class="mkt-hub-card-icon">
                    <i class="bi bi-cloud-upload-fill"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Pazarlama Worklist</h3>
                    <p class="mkt-hub-card-desc">Business space</p>
                </div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>

            <a href="{{ route('admin.marketing.kreatif') }}" class="mkt-hub-card">
                <div class="mkt-hub-card-icon">
                    <i class="bi bi-palette-fill"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Kreatif Süreçler Worklisti</h3>
                    <p class="mkt-hub-card-desc">Business space</p>
                </div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>

            <a href="{{ route('admin.marketing.marka-tescil') }}" class="mkt-hub-card">
                <div class="mkt-hub-card-icon">
                    <i class="bi bi-award-fill"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Marka Tescil Worklist</h3>
                    <p class="mkt-hub-card-desc">Company-managed business</p>
                </div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>

            <a href="{{ route('admin.marketing.musteri-sikayetleri') }}" class="mkt-hub-card">
                <div class="mkt-hub-card-icon">
                    <i class="bi bi-telephone-fill"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Müşteri Şikayetleri Worklist</h3>
                    <p class="mkt-hub-card-desc">Business space</p>
                </div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>

            <a href="{{ route('admin.marketing.franchise') }}" class="mkt-hub-card">
                <div class="mkt-hub-card-icon">
                    <i class="bi bi-diagram-3-fill"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Franchise Worklist</h3>
                    <p class="mkt-hub-card-desc">Business space</p>
                </div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>

            <a href="{{ route('admin.marketing.talepler') }}" class="mkt-hub-card mkt-hub-card--test">
                <div class="mkt-hub-card-icon mkt-hub-card-icon--muted">
                    <i class="bi bi-kanban-fill"></i>
                </div>
                <div class="mkt-hub-card-body">
                    <h3 class="mkt-hub-card-title">Talepler</h3>
                    <p class="mkt-hub-card-desc">Kanban Board - Departman içi talep ve worklist alanı</p>
                </div>
                <div class="mkt-hub-card-badge">Talepler</div>
                <div class="mkt-hub-card-arrow">
                    <i class="bi bi-arrow-right"></i>
                </div>
                <div class="mkt-hub-card-shine"></div>
            </a>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        :root {
            --mkt-green: #145a46;
            --mkt-green-dark: #0f4536;
            --mkt-green-light: #e6f2ed;
            --mkt-green-mid: #b9d9cc;
            --mkt-green-alpha: rgba(20, 90, 70, 0.12);
        }

        .mkt-hub-page {
            min-height: 100vh;
            background: #f4f7fc;
            padding-bottom: 3rem;
        }

        .mkt-hub-hero {
            position: relative;
            overflow: hidden;
            border-radius: 0 0 2rem 2rem;
            margin-bottom: 2.5rem;
            padding: 3rem 2rem 3.5rem;
            background: linear-gradient(135deg, #0d3b2d 0%, #145a46 60%, #1a7a5e 100%);
        }

        .mkt-hub-hero-bg {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
                radial-gradient(ellipse at 10% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }

        .mkt-hub-hero-content {
            position: relative;
            max-width: 680px;
        }

        .mkt-hub-eyebrow {
            font-size: 0.78rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.65);
            margin-bottom: 0.75rem;
            font-weight: 600;
        }

        .mkt-hub-title {
            font-size: 2rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 0.5rem;
            line-height: 1.2;
        }

        .mkt-hub-subtitle {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
        }

        .mkt-hub-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.25rem;
            padding: 0 0.5rem;
        }

        .mkt-hub-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 1.25rem;
            padding: 1.4rem 1.5rem;
            text-decoration: none;
            color: inherit;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .mkt-hub-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(20, 90, 70, 0.14);
            border-color: var(--mkt-green);
            color: inherit;
            text-decoration: none;
        }

        .mkt-hub-card:hover .mkt-hub-card-arrow {
            opacity: 1;
            transform: translateX(0);
        }

        .mkt-hub-card:hover .mkt-hub-card-shine {
            opacity: 1;
        }

        .mkt-hub-card:hover .mkt-hub-card-icon {
            transform: scale(1.08);
            background: var(--mkt-green);
            color: #fff;
        }

        .mkt-hub-card-icon {
            flex: 0 0 56px;
            width: 56px;
            height: 56px;
            border-radius: 1rem;
            background: var(--mkt-green-light);
            color: var(--mkt-green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }

        .mkt-hub-card-icon--muted {
            background: #f1f5f9;
            color: #64748b;
        }

        .mkt-hub-card--test:hover .mkt-hub-card-icon {
            background: #64748b;
            color: #fff;
        }

        .mkt-hub-card-body {
            flex: 1 1 auto;
            min-width: 0;
        }

        .mkt-hub-card-title {
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 0.25rem;
            line-height: 1.3;
        }

        .mkt-hub-card-desc {
            font-size: 0.82rem;
            color: #64748b;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mkt-hub-card-arrow {
            flex: 0 0 auto;
            color: var(--mkt-green);
            font-size: 1.1rem;
            opacity: 0;
            transform: translateX(-6px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .mkt-hub-card--test .mkt-hub-card-arrow {
            color: #64748b;
        }

        .mkt-hub-card-badge {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            padding: 0.15rem 0.5rem;
            border-radius: 0.4rem;
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }

        .mkt-hub-card-shine {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--mkt-green), transparent);
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .mkt-hub-card--test .mkt-hub-card-shine {
            background: linear-gradient(90deg, transparent, #64748b, transparent);
        }

        .mkt-hub-card--test {
            opacity: 0.85;
        }

        .mkt-hub-card--test:hover {
            opacity: 1;
        }

        @media (max-width: 576px) {
            .mkt-hub-hero {
                padding: 2rem 1rem 2.5rem;
            }

            .mkt-hub-title {
                font-size: 1.5rem;
            }

            .mkt-hub-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush