{% extends 'base.html.twig' %}

{% block body %}
    <div class="container-fluid p-0">
        <div class="row min-vh-100 d-flex align-items-center justify-content-center">
            <div class="col-12 col-md-8 col-lg-6">
                <div class="card p-4 text-center shadow welcome-card" style="border-radius: 10px; background-color: #ffffff;">
                    <h1 class="mb-1 fw-bold welcome-header">WELCOME!</h1>
                    <h2 class="mb-3 fw-bold text-uppercase text-dark welcome-title" >Capture The Moment.</h2>
                    <p class="mb-4 text-dark welcome-text">
                        Let this be your event companion to capture and share unforgettable photos with everyone here.
                    </p>
                    <p class="mb-4 text-muted terms-text">
                        By joining this event you agree to the <br /><a href="https://grateful.events/terms-of-service/" target="_blank" class="text-primary">Terms of Service</a>
                    </p>
                    <p class="mb-4 text-muted terms-text">
                        Do not upload images that invade privacy or contain illegal or inappropriate content as it may be reviewed and removed at any time.
                    </p>
                    <a href="{{ path('eventTimeline', {'hash': event.hash}) }}" class="btn btn-lg w-100 mt-auto shadow" style="background-color: #50c1ba; color: #ffffff;">JOIN THE EVENT</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    <style>
        .text-dark{
            font-size:2em !important;
        }
        .min-vh-100 {
            min-height: calc(100vh - 60px); /* Adjust for header height (assuming 60px from your base.html.twig) */
        }
        .welcome-card {
            background-color: #ffffff; /* White background for the card */
            border-radius: 10px; /* Rounded corners to match screenshot */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        }
        .text-teal {
            color: #4abeb6; /* Teal for "GRATEFUL EVENTS" */
        }
        .text-muted {
            color: #6c757d; /* Bootstrap muted text color for better aesthetics */
        }
        .text-primary:hover {
            color: #0056b3; /* Darker blue on hover for the link */
        }
        .btn-primary {
            background-color: #007bff; /* Blue button color */
            border-color: #007bff; /* Ensure border matches background */
        }
        .btn-primary:hover {
            background-color: #0056b3; /* Darker blue on hover */
            border-color: #0056b3; /* Ensure border matches background on hover */
        }

        /* Responsive font sizing */
        .welcome-title, .welcome-header, .welcome-text, .terms-text {
            transition: font-size 0.3s ease; /* Smooth transition for font size changes */
        }

        /* Default font sizes (desktop) */
        .welcome-header {
            font-size: 3em !important; /* Responsive font for "GRATEFUL EVENTS" */
        }
        .welcome-title {
            font-size: 1em !important; /* Responsive font for "WELCOME TO" */
        }
        .welcome-text {
            font-size: 1em !important; /* Responsive font for welcome message */
        }
        .terms-text {
            font-size: 1rem; /* Fixed font size for terms, as requested */
        }

        /* Mobile-specific adjustments (max-width: 768px) */
        @media (max-width: 768px) {
            .welcome-card {
                width: 95%; /* Full width on mobile */
                padding: 20px; /* Slightly reduced padding on mobile */
            }
            .btn-lg {
                width: 90%; /* Ensure button fits well on mobile */
            }
            .welcome-title {
                font-size: clamp(1.2rem, 5vw, 1.8rem); /* Smaller on mobile */
            }
            .welcome-header {
                font-size: clamp(1.5rem, 6vw, 2.5rem); /* Smaller on mobile */
            }
            .welcome-text {
                font-size: clamp(0.9rem, 3vw, 1.1rem); /* Smaller on mobile */
            }
            .terms-text {
                font-size: 1rem; /* Maintain fixed font size on mobile */
            }
        }

        /* Ensure card stays centered and doesn’t exceed viewport width */
        .card {
            margin: 0 auto;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // Optional: Add smooth scroll or animation for the "JOIN THE EVENT" button
            $('a.btn-primary').on('click', function(e) {
                e.preventDefault();
                const target = $(this).attr('href');
                $('html, body').animate({
                    scrollTop: $(target).offset().top
                }, 800); // Smooth scroll with 800ms duration
            });

            // Optional: Add fade-in animation for the welcome card
            $('.welcome-card').hide().fadeIn(1000);
        });
    </script>
{% endblock %}