@extends('layouts.app')

@section('title', $category['label'] . ' – Pazarlama Destek')

@section('content')
    <div class="container-fluid pd-portal-page" data-force-full-nav>

        <div class="pd-hero pd-hero--sm">
            <div class="pd-hero-bg"></div>
            <div class="pd-hero-content">
                <nav class="pd-breadcrumb">
                    <a href="{{ route('admin.marketing.hub') }}">Pazarlama</a>
                    <span>/</span>
                    <a href="{{ route('admin.marketing.destek') }}">Pazarlama Destek</a>
                    <span>/</span>
                    <span>{{ $category['label'] }}</span>
                </nav>
                <h1 class="pd-hero-title">{{ $category['label'] }}</h1>
                <p class="pd-hero-sub">{{ $category['description'] }}</p>
            </div>
        </div>

        <div class="pd-section">
            <div class="pd-section-header">
                <i class="bi bi-send me-2"></i>Talep türü seçin
            </div>

            <div class="pd-category-list">
                @foreach ($category['types'] as $type)
                    <a href="{{ route('admin.marketing.destek.create', ['category' => $category['key'], 'type' => $type]) }}"
                        class="pd-category-card">
                        <div class="pd-cat-icon pd-cat-icon--type">
                            <i class="bi bi-file-earmark-text"></i>
                        </div>
                        <div class="pd-cat-body">
                            <div class="pd-cat-title">[{{ $category['label'] }}] {{ $type }}</div>
                        </div>
                        <div class="pd-cat-arrow"><i class="bi bi-chevron-right"></i></div>
                    </a>
                @endforeach
            </div>

            <div class="mt-3">
                <a href="{{ route('admin.marketing.destek') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Geri
                </a>
            </div>
        </div>

    </div>
@endsection

@push('styles')
    <style>
        :root {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
        }

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

        .pd-portal-page .btn-outline-secondary {
            color: var(--pd-green);
            border-color: #c8ddd4;
            background: #fff;
        }

        .pd-portal-page .btn-outline-secondary:hover,
        .pd-portal-page .btn-outline-secondary:focus {
            color: var(--pd-green-dark, #0f4536);
            border-color: #afcfc1;
            background: var(--pd-green-light);
        }

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

        .pd-hero--sm {
            padding: 1.75rem 2rem 2.25rem;
        }

        .pd-hero-bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, .07) 0%, transparent 55%);
            pointer-events: none;
        }

        .pd-hero-content {
            position: relative;
        }

        .pd-breadcrumb {
            font-size: .8rem;
            color: rgba(255, 255, 255, .6);
            margin-bottom: .6rem;
        }

        .pd-breadcrumb a {
            color: rgba(255, 255, 255, .75);
            text-decoration: none;
        }

        .pd-breadcrumb a:hover {
            color: #fff;
        }

        .pd-breadcrumb span {
            margin: 0 .4rem;
        }

        .pd-hero-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: .35rem;
        }

        .pd-hero-sub {
            font-size: .88rem;
            color: rgba(255, 255, 255, .7);
            margin: 0;
        }

        .pd-section {
            padding: 0 1.5rem;
        }

        .pd-section-header {
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .pd-category-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }

        .pd-category-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: #fff;
            padding: 1.1rem 1.25rem;
            text-decoration: none;
            color: inherit;
            border-bottom: 1px solid #f1f5f9;
            transition: background .15s ease, padding-left .15s ease;
        }

        .pd-category-card:last-child {
            border-bottom: none;
        }

        .pd-category-card:hover {
            background: var(--pd-green-light);
            padding-left: 1.5rem;
            color: inherit;
            text-decoration: none;
        }

        .pd-category-card:hover .pd-cat-title {
            color: var(--pd-green);
        }

        .pd-category-card:hover .pd-cat-arrow {
            color: var(--pd-green);
        }

        .pd-cat-icon {
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            border-radius: .75rem;
            background: var(--pd-green-light);
            color: var(--pd-green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .pd-cat-icon--type {
            font-size: 1rem;
        }

        .pd-cat-body {
            flex: 1 1 auto;
            min-width: 0;
        }

        .pd-cat-title {
            font-weight: 600;
            color: #0f172a;
            font-size: .92rem;
        }

        .pd-cat-arrow {
            flex: 0 0 auto;
            color: #94a3b8;
            font-size: .85rem;
        }
    </style>
@endpush