{% 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;
        }
        .how-it-works-kicker {
            letter-spacing: .1em;
            color: var(--brand-teal-dark, #1c5a70);
        }
        .how-step-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(47, 143, 174, .12);
            color: var(--brand-teal-dark, #1c5a70);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
        }
        .how-step-connector {
            position: relative;
        }
        @media (min-width: 768px) {
            .how-step-connector:not(:last-child)::after {
                content: "";
                position: absolute;
                top: 32px;
                left: calc(50% + 44px);
                right: calc(-50% + 44px);
                height: 2px;
                background: rgba(47, 143, 174, .25);
            }
        }
        .world-map-strip {
            background: rgba(47, 143, 174, .06);
            border: 1px solid rgba(47, 143, 174, .2);
            border-radius: .75rem;
        }
    </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;">
                {% if showDevBanner %}
                    <span class="dev-watermark-badge">In Development</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="mb-5">
    <div class="text-center mb-4">
        <span class="text-uppercase small fw-semibold how-it-works-kicker">How it works</span>
        <h2 class="fw-bold">One team &mdash; even if you're not in the same room</h2>
        <p class="col-lg-8 mx-auto text-secondary">
            Every game on EscapePage is built to be played online, together. You don't need to travel,
            book a room, or even hop on a call &mdash; everyone plays from their own screen, and the
            game has a built-in chat to keep your team talking.
        </p>
    </div>
    <div class="row g-4">
        <div class="col-md-3 col-6 how-step-connector">
            <div class="text-center h-100 p-3">
                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-people-fill"></i></div>
                <h3 class="h6 fw-bold">1. Invite your team</h3>
                <p class="small text-secondary mb-0">
                    Get two or three friends to join the same game &mdash; no matter where in the
                    world they are.
                </p>
            </div>
        </div>
        <div class="col-md-3 col-6 how-step-connector">
            <div class="text-center h-100 p-3">
                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-display"></i></div>
                <h3 class="h6 fw-bold">2. Everyone logs in</h3>
                <p class="small text-secondary mb-0">
                    Each player opens the game in their own browser, from wherever they are. No app,
                    no download, no travel.
                </p>
            </div>
        </div>
        <div class="col-md-3 col-6 how-step-connector">
            <div class="text-center h-100 p-3">
                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-chat-dots-fill"></i></div>
                <h3 class="h6 fw-bold">3. Chat in the game</h3>
                <p class="small text-secondary mb-0">
                    Each of you sees different clues. Use the built-in chat to share what you find and
                    connect the dots &mdash; no separate call needed.
                </p>
            </div>
        </div>
        <div class="col-md-3 col-6 how-step-connector">
            <div class="text-center h-100 p-3">
                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-hourglass-split"></i></div>
                <h3 class="h6 fw-bold">4. Beat the clock</h3>
                <p class="small text-secondary mb-0">
                    Work together in real time to crack it before the timer runs out &mdash; you win
                    or lose as one team.
                </p>
            </div>
        </div>
    </div>
    <div class="world-map-strip text-center p-3 p-md-4 mt-4">
        <i class="bi bi-globe-americas me-2" style="color: var(--brand-teal-dark, #1c5a70);"></i>
        <span class="text-secondary">Amsterdam, Auckland, or anywhere in between &mdash; as long as you're online, you can play together.</span>
    </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 %}