{% extends 'layouts/base.twig' %}

{% block title %}Dark Experience - {{ parent() }}{% endblock %}

{% block content %}
<div class="p-5 mb-4 rounded-3 shadow-lg" style="background-color: #1e1e1e; border: 1px solid #333;">
    <div class="container-fluid py-5 text-center">
        <h1 class="display-5 fw-bold text-white">{{ platformName }} Dark Mode</h1>
        <p class="col-md-8 fs-4 mx-auto text-light">Experimente a elegância do modo escuro. Totalmente otimizado para leitura e performance.</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mt-4">
            <a href="{{ url('admin') }}" class="btn btn-outline-light btn-lg px-4 gap-3">Painel de Controle</a>
            <a href="{{ url('admin/themes') }}" class="btn btn-primary btn-lg px-4">Trocar Tema</a>
        </div>
    </div>
</div>

<div class="row align-items-md-stretch">
    <div class="col-md-6 mb-4">
        <div class="h-100 p-5 text-white rounded-3 shadow" style="background-color: #252525; border: 1px solid #444;">
            <h2>Proteção Ocular</h2>
            <p>Design focado na redução da fadiga visual para seus usuários.</p>
            <button class="btn btn-outline-info" type="button">Saiba mais</button>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="h-100 p-5 text-white rounded-3 shadow" style="background-color: #252525; border: 1px solid #444;">
            <h2>Customização Total</h2>
            <p>Edite as variáveis CSS e crie seu próprio estilo escuro único.</p>
            <button class="btn btn-outline-warning" type="button">Ver documentação</button>
        </div>
    </div>
</div>
{% endblock %}