@extends('layouts.admin.app')

@section('content')
<div class="container-fluid py-4">

    <div class="mb-4">
        <h4 class="fw-bold text-info">
            <i class="fas fa-sliders-h me-2"></i> Configurações do Sistema
        </h4>
        <p class="text mb-0">
            Gerencie os conteúdos institucionais e visuais da plataforma
        </p>
    </div>

    <div class="row g-4">

        {{-- Categorias --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('dashboard.admin.configuracoes.categorias.index') }}" class="text-decoration-none">
                <div class="card h-100 shadow-lg border-0 config-card">
                    <div class="card-body text-center">
                        <div class="icon-box bg-info text-dark mb-3">
                            <i class="fas fa-tags"></i>
                        </div>
                        <h6 class="fw-bold text-light">Categorias</h6>
                        <p class="text-secondary small">
                            Organize os produtos por categorias
                        </p>
                    </div>
                </div>
            </a>
        </div>

        {{-- Banners --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('dashboard.admin.configuracoes.banner.index') }}" class="text-decoration-none">
                <div class="card h-100 shadow-lg border-0 config-card">
                    <div class="card-body text-center">
                        <div class="icon-box bg-primary text-light mb-3">
                            <i class="fas fa-images"></i>
                        </div>
                        <h6 class="fw-bold text-light">Banners</h6>
                        <p class="text-secondary small">
                            Destaques visuais da página inicial
                        </p>
                    </div>
                </div>
            </a>
        </div>

        {{-- Publicidade --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('dashboard.admin.configuracoes.pub.index') }}" class="text-decoration-none">
                <div class="card h-100 shadow-lg border-0 config-card">
                    <div class="card-body text-center">
                        <div class="icon-box bg-warning text-dark mb-3">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <h6 class="fw-bold text-light">Publicidade</h6>
                        <p class="text-secondary small">
                            Gerencie campanhas e promoções
                        </p>
                    </div>
                </div>
            </a>
        </div>

        {{-- Marcas --}}
        <div class="col-xl-3 col-md-6">
            <a href="{{ route('dashboard.admin.configuracoes.marcas.index') }}" class="text-decoration-none">
                <div class="card h-100 shadow-lg border-0 config-card">
                    <div class="card-body text-center">
                        <div class="icon-box bg-warning text-dark mb-3">
                            <i class="fas fa-brands"></i>
                        </div>
                        <h6 class="fw-bold text-light">Marcas</h6>
                        <p class="text-secondary small">
                            Gerencie Marcas
                        </p>
                    </div>
                </div>
            </a>
        </div>

    </div>

</div>

{{-- Estilos específicos --}}
<style>
.config-card {
    background: linear-gradient(145deg, #020617, #020617);
    transition: all .35s ease;
    cursor: pointer;
}

.config-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(14,165,233,.25);
    border: 1px solid #0ea5e9;
}

.icon-box {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto;
}
</style>
@endsection