@extends('layouts.app')

<style>
    .hero-section {
        position: relative;
        height: 80vh;
        width: 100%;
        overflow: hidden;
    }

    .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('{{ asset('images/campaign/exercise-bg.png') }}');
        background-size: cover;
        background-position: center;
        filter: brightness(0.5);
    }

    .hero-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
        padding: 2rem;
    }

    .hero-text {
        max-width: 800px;
        margin-bottom: 2rem;
    }

    .hero-text h1 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        font-weight: bold;
    }

    .hero-text h3 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        font-weight: 500;
    }

    .hero-text p {
        font-size: 1.2rem;
        opacity: 0.9;
    }

    .play-button {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: transparent;
        border: 3px solid #08BABB;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
        gap: 8px;
        /* Add space between icon and text */
    }

    .play-button:hover {
        background-color: #08BABB;
        transform: scale(1.05);
    }

    .play-button .fa-play {
    font-size: 30px;
    color: #08BABB;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    margin-bottom: 0;
}

.play-button .play-text {
    font-size: 10px;
    color: #071621;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.play-button:hover {
    background-color: #08BABB;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

    .play-button:hover .fa-play,
    .play-button:hover .play-text {
        color: white;
    }

    .video-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
    }

    .video-modal.active {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        position: relative;
        width: 80%;
        max-width: 1200px;
    }

    .close-modal {
        position: absolute;
        top: -40px;
        right: 0;
        color: white;
        font-size: 24px;
        cursor: pointer;
    }
</style>
@section('content')

    <div class="hero-section">
        <div class="hero-background"></div>
        <div class="hero-content">
            <div class="hero-text">
                {{-- <h1>Alcoholic Drinks</h1> --}}
                <h3>Practicing a daily exercise for at least 30 minutes is the key for a healthy lifestyle.
                    It also reduces the risk of developing several diseases.
                </h3>
                <p>Exercising is one of the most important things you can do for yourself.</p>
            </div>
            <button id="playButton" class="play-button">
                <span class="fa fa-play"></span>
                <div class="play-text">Watch Video</div>
            </button>
        </div>
    </div>

    <!-- Video Modal -->
    <div id="videoModal" class="video-modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <video id="modalVideo" width="100%" controls>
                <source src="{{ asset('videos/Dont-Drink-and-Drive-2024.mp4') }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>

    <div class="container landing-section-sus mb-6">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">

                <p class="phoenix-bev-text">
                    IMPORTANCE OF RESPONSIBILITY
                </p>

                <p class="phoenix-bev-text">
                    Promoting a responsible mindset on a regular basis
                    Phoenix Beverages Group has an active role to play in encouraging responsible and moderate consumption
                    as an industry leader.
                    Through our brands, we are committed to make moderate consumption desirable.
                </p>

                <p class="phoenix-bev-text mb-6">
                    Source: Business Magazine
                </p>

                <div class="d-flex justify-content-between align-items-center">
                    <p class="mb-0 fw-bold">Share</p>
                    <div class="footer-socials d-flex">
                        <span class="fa-brands fa-facebook-square mx-1"></span>
                        <span class="fa-brands fa-linkedin mx-1"></span>
                        <span class="fa fa-envelope mx-1" style="cursor: pointer"></span>
                    </div>
                </div>
                <hr>

            </div>
        </div>
    </div>

    <script>
        const playButton = document.getElementById('playButton');
        const videoModal = document.getElementById('videoModal');
        const modalVideo = document.getElementById('modalVideo');
        const closeModal = document.querySelector('.close-modal');

        playButton.addEventListener('click', () => {
            videoModal.classList.add('active');
            modalVideo.play();
        });

        closeModal.addEventListener('click', () => {
            videoModal.classList.remove('active');
            modalVideo.pause();
            modalVideo.currentTime = 0;
        });

        videoModal.addEventListener('click', (e) => {
            if (e.target === videoModal) {
                videoModal.classList.remove('active');
                modalVideo.pause();
                modalVideo.currentTime = 0;
            }
        });
    </script>
@stop