{% extends "base.html" %}
{% block html_attrs %}data-page="landing"{% endblock %}
{% block title %}Welcome to SignalPort - Website for Sale{% endblock %}
{% block page_title %}Welcome to SignalPort - Website for Sale{% endblock %}

{% block content %}
<style>
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background-color: #1A1C22 !important;
        height: 100vh !important;
        overflow: hidden;
    }

    /* 2. Report Bug Button (Moved to Left Side) */
    .top-right-button-container {
        position: fixed !important;
        top: 20px !important;
        left: 20px !important; /* Overrides base.html to put it on left */
        right: auto !important;
        z-index: 500 !important;
    }
    
    /* 3. Slideshow (Background Layer) */
    .slideshow-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 0 !important; /* Pushed to background */
        display: block !important;
        background-color: #1A1C22 !important;
    }

    .slide {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        transition: opacity 0.8s ease !important;
    }
    .slide.active { opacity: 1 !important; }
    .slide img { width: 100%; height: 100%; object-fit: cover !important; }

    /* Navigation */
    .nav-container {
        position: absolute !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        z-index: 10 !important;
    }

    .nav-dot { width: 12px; height: 12px; background-color: #5D8C88; border-radius: 50%; border: 1px solid #4A706D; cursor: pointer; transition: background-color 0.3s ease; }
    .nav-dot.active { background-color: #4A706D; }
    .nav-triangle { width: 12px; height: 12px; background: none; border: none; color: #4A706D; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    
</style>

<div class="slideshow-container">
    <div class="slide active"><img src="{{ url_for('static', filename='images/Slide 1.png') }}" alt="Slide 1"></div>
    <div class="slide"><img src="{{ url_for('static', filename='images/Slide 2.png') }}" alt="Slide 2"></div>
    <div class="slide"><img src="{{ url_for('static', filename='images/Slide 3.png') }}" alt="Slide 3"></div>
    <div class="slide"><img src="{{ url_for('static', filename='images/Slide 4.png') }}" alt="Slide 4"></div>
    <div class="slide"><img src="{{ url_for('static', filename='images/Slide 5.png') }}" alt="Slide 5"></div>
    
    <div class="nav-container">
        <button class="nav-triangle left">◄</button>
        <button class="nav-dot active" data-slide="0"></button>
        <button class="nav-dot" data-slide="1"></button>
        <button class="nav-dot" data-slide="2"></button>
        <button class="nav-dot" data-slide="3"></button>
        <button class="nav-dot" data-slide="4"></button>
        <button class="nav-triangle right">►</button>
    </div>
</div>

<div class="landing-auth-container">
    <button class="auth-button login" onclick="window.location.href='/login'">Log In</button>
    <button class="auth-button signup" onclick="window.location.href='/signup'">Sign Up</button>
    <button class="auth-button guest" onclick="window.location.href='/dashboard'">Guest View</button>
</div>

<script src="{{ url_for('static', filename='js/entry-page.js') }}"></script>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/base.js') }}"></script>
{% endblock %}