{% extends 'layout/site.html.twig' %}

{% block title %}AI Virus Deflection | {{ 'site.name'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .breach-hero {
            background: linear-gradient(135deg, #0d1f26 0%, #16323f 100%);
            color: #e6f2f5;
            border-radius: .75rem;
            overflow: hidden;
        }
        .breach-hero img {
            filter: drop-shadow(0 0 25px rgba(47, 143, 174, .55));
        }
        .breach-hero .badge-alert {
            letter-spacing: .08em;
            animation: breach-blink 1.6s infinite;
        }
        @keyframes breach-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: .35; }
        }
        .dev-watermark-wrap {
            position: relative;
            display: inline-block;
        }
        .dev-watermark-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-12deg);
            background: rgba(220, 53, 69, .85);
            color: #fff;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: .35rem 1.25rem;
            border: 2px solid rgba(255, 255, 255, .85);
            border-radius: .25rem;
            font-size: .9rem;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
            pointer-events: none;
        }
    </style>
{% endblock %}

{% block body %}
<div class="breach-hero p-4 p-md-5 mb-5">
    <div class="row align-items-center g-4">
        <div class="col-lg-7">
            <span class="badge bg-danger badge-alert mb-3">&#9888; SYSTEM BREACH DETECTED</span>
            <h1 class="display-6 fw-bold">The mainframe has been compromised.</h1>
            <p class="lead" style="color: #a9c6cf;">
                An AI virus is loose in the network and it's decoding classified files &mdash; hunting for the
                names of every undercover agent in the field. You and two fellow agents have one shot to shut
                it down before the countdown ends.
            </p>
            <div class="d-flex flex-wrap gap-3 mt-4">
                <a href="{{ path('website_intro') }}" class="btn btn-outline-light btn-lg">Read the Briefing</a>
                <a href="{{ path('game_dashboard') }}" class="btn btn-primary btn-lg">{{ 'link.enter_game'|trans }}</a>
            </div>
        </div>
        <div class="col-lg-5 text-center">
            <div class="dev-watermark-wrap">
                <img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
                <span class="dev-watermark-badge">In Development</span>
            </div>
        </div>
    </div>
</div>

<div class="text-center py-4">
    <img src="{{ asset('images/logo.png') }}" alt="{{ 'site.name'|trans }}" height="100" class="mb-3">
    <p class="col-lg-8 mx-auto text-secondary">{{ 'home.description'|trans }}</p>
</div>
{% endblock %}