<?php

use Lab\Helpers;

require __DIR__ . '/partials/head.php';
$art = Helpers::url('/assets/art');
?>
<main class="attract attract-lang" id="attract">
    <?php if (! empty($config['version'])): ?>
        <p class="version-mark">Έκδοση <?= Helpers::e((string) $config['version']) ?></p>
    <?php endif; ?>
    <div class="filmstrip filmstrip-top" aria-hidden="true"></div>
    <div class="confetti" aria-hidden="true">
        <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
        <i></i><i></i><i></i><i></i><i></i><i></i>
    </div>
    <div class="polaroid-wall" aria-hidden="true">
        <figure class="polaroid rot-l"><img src="<?= Helpers::e($art) ?>/shot-sea.svg" alt=""><figcaption>Καλοκαίρι</figcaption></figure>
        <figure class="polaroid rot-r delay"><img src="<?= Helpers::e($art) ?>/shot-sun.svg" alt=""><figcaption>Ηλιοβασίλεμα</figcaption></figure>
        <figure class="polaroid rot-l2"><img src="<?= Helpers::e($art) ?>/shot-love.svg" alt=""><figcaption>Οικογένεια</figcaption></figure>
        <figure class="polaroid rot-r2 delay2"><img src="<?= Helpers::e($art) ?>/shot-party.svg" alt=""><figcaption>Γιορτή</figcaption></figure>
        <figure class="polaroid rot-l delay3"><img src="<?= Helpers::e($art) ?>/shot-id.svg" alt=""><figcaption>Ταυτότητες</figcaption></figure>
        <figure class="polaroid rot-r"><img src="<?= Helpers::e($art) ?>/shot-sun.svg" alt=""><figcaption>Βόλος</figcaption></figure>
    </div>
    <div class="attract-copy">
        <img src="<?= Helpers::url('/logo.png') ?>" alt="" width="96" height="96">
        <p class="kicker">Πανόραμα · Photo Lab</p>
        <h1>Διάλεξε γλώσσα<br><em>Choose language</em></h1>
        <p class="lede">Άγγιξε τη σημαία σου · Touch your flag</p>
        <div class="flag-grid">
            <a class="flag-tile" href="<?= Helpers::url('/kiosk?lang=el') ?>">
                <span class="flag-face flag-el" aria-hidden="true">
                    <svg viewBox="0 0 27 18" xmlns="http://www.w3.org/2000/svg">
                        <rect width="27" height="18" fill="#0D5EAF"/>
                        <path fill="#fff" d="M0 2h27v2H0zm0 4h27v2H0zm0 4h27v2H0zm0 4h27v2H0z"/>
                        <rect width="10" height="10" fill="#0D5EAF"/>
                        <rect x="4" width="2" height="10" fill="#fff"/>
                        <rect y="4" width="10" height="2" fill="#fff"/>
                    </svg>
                </span>
                <strong>Ελληνικά</strong>
            </a>
            <a class="flag-tile" href="<?= Helpers::url('/kiosk?lang=en') ?>">
                <span class="flag-face flag-en" aria-hidden="true">
                    <svg viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg">
                        <rect width="60" height="30" fill="#012169"/>
                        <path d="M0 0l60 30M60 0L0 30" stroke="#fff" stroke-width="6"/>
                        <path d="M0 0l60 30M60 0L0 30" stroke="#C8102E" stroke-width="4" stroke-dasharray="0 8.5 21.5"/>
                        <path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/>
                        <path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/>
                    </svg>
                </span>
                <strong>English</strong>
            </a>
        </div>
    </div>
    <button class="staff-link" type="button" id="staff-open">Προσωπικό / Staff</button>
    <div class="filmstrip filmstrip-bottom" aria-hidden="true"></div>
</main>
<dialog class="pin-dialog" id="pin-dialog">
    <form method="POST" action="<?= Helpers::url('/studio/login') ?>" class="pin-form">
        <input type="hidden" name="csrf_token" value="<?= Helpers::csrfToken() ?>">
        <h2>Κωδικός προσωπικού</h2>
        <input type="password" name="pin" inputmode="numeric" pattern="[0-9]*" maxlength="8" autofocus required placeholder="PIN">
        <div class="row-actions">
            <button class="btn" type="submit">Είσοδος Studio</button>
            <button class="btn btn-ghost" type="button" id="staff-close">Άκυρο</button>
        </div>
    </form>
</dialog>
<script>
  const dialog = document.getElementById('pin-dialog');
  document.getElementById('staff-open').addEventListener('click', (e) => {
    e.stopPropagation();
    dialog.showModal();
  });
  document.getElementById('staff-close').addEventListener('click', () => dialog.close());
</script>
</body>
</html>
