@extends('layouts.website')

@section('content')
    <style>
        .not-found-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #001A24 0%, #0a1e2d 100%);
            position: relative;
            overflow: hidden;
        }

        .not-found-page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('{{ asset("assets/images/404.webp") }}') center/cover;
            opacity: 1;
            z-index: 0;
        }

        .not-found-content {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: 2rem;
            max-width: 800px;
            width: 100%;
        }

        .error-code {
            font-size: 48px;
            font-weight: 800;

        }

        .error-title {
            font-size: 36px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 1rem;
        }

        .error-description {
            font-size: 20px;
            color: #fff;
            margin: 20px 0 44px 0;
            line-height: 1.6;
        }

        .error-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .error-btn {
            padding: 12px 30px;
            border-radius: 25px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }

        .error-btn-primary {
            background: #FE9F37;
            color: #001A24;
        }

        .error-btn-primary:hover {
            background: #e88a2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(254, 159, 55, 0.4);
            color: #001A24;
        }

        .error-btn-secondary {
            background: transparent;
            color: #fff;
            border: 2px solid #FE9F37;
        }

        .error-btn-secondary:hover {
            background: #FE9F37;
            color: #001A24;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .error-code {
                font-size: 28px;
            }

            .error-title {
                font-size: 28px;
            }

            .error-description {
                font-size: 16px;
            }

            .error-actions {
                flex-direction: column;
                align-items: center;
            }

            .error-btn {
                width: 100%;
                max-width: 280px;
            }
        }
    </style>

    <main>
        <div class="not-found-page">
            <div class="not-found-content">

                <h1 class="bs-heading typWhite error-code">Oops! Looks like <span>You Are Lost?</span></h1>
                <p class="error-description ">
                    Try to Reload the Page or go back to the homepage.
                </p>
                <div class="error-actions">
                    <a href="{{ route('home') }}" class="bs-btn typ-fill error-btn" data-page-source="home">Go to
                        Homepage</a>
                </div>
            </div>
        </div>


    </main>

    <!-- <main>
        <style>
            .popup-overlay-thanyou {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.75);
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 20px;
                z-index: 10000;
            }

            .popup-box {
                width: 655px;
                height: 419px;
                max-width: 100%;
                max-height: 100%;
                background: url('{{ asset("assets/images/popup-img.webp") }}') center/cover;
                background-size: cover;
                padding: 40px;
                color: white;
                position: relative;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

            .close-btn {
                position: absolute;
                top: 25px;
                right: 25px;
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                font-size: 11px;
                letter-spacing: 1px;
            }

            .close-btn img {
                width: 20px;
                height: 20px;
            }

            .title {
                font-weight: 800;
                font-size: 22px;
                margin-top: 24px;
                text-align: center;
            }

            .subtitle {
                text-align: center;
                font-size: 15px;
                color: #fff;
                margin-top: 12px;
                line-height: 1.5;
                font-weight: 400;
                margin: 24px 0 48px 0;
            }

            /* Buttons */
            .btn-outline-custom {
                border: 2px solid #fff;
                border-radius: 50px;
                padding: 10px 25px;
                color: #fff;
                transition: 0.3s;
                font-size: 15px;
            }

            .btn-outline-custom:hover {
                background: #fff;
                color: #000;
            }

            .btn-filled-custom {
                background: #FE9F37;
                border-radius: 50px;
                padding: 10px 25px;
                color: #001A24;
                transition: 0.3s;
                border: none;
                font-weight: 500;
            }

            .btn-filled-custom:hover {
                opacity: 0.85;
                background: #fff;
                color: #000;
            }

            @media (max-width: 768px) {
                .popup-box {
                    height: auto;
                    padding-bottom: 40px;
                    background-size: contain;
                }
            }
        </style>

        <div class="popup-overlay-thanyou" id="popup-thankyou">

            <div class="popup-box">
                <p class="close-btn" onclick="closePopup()">
                    <img src="assets/images/close1.svg">
                    CLOSE
                </p>
                <div class="text-center">
                    <img src="assets/images/check1.svg" width="60" height="60">
                </div>
                <h1 class="title">Thank You! We’ve Got Your Request.</h1>
                <p class="subtitle">
                    Your quote request has been successfully submitted.<br>
                    Our team will review the details and connect with you shortly.
                </p>
                <div class="d-flex justify-content-center gap-3 mt-4 flex-wrap">
                    <a href="#" class="btn-outline-custom">● <span class="ms-1">Back to Home</span></a>
                    <a href="#" class="btn-filled-custom">● <span class="ms-1">Explore More Services</span></a>
                </div>
            </div>
        </div>
        <script>
            function closePopup() {
                document.getElementById("popup-thankyou").style.display = "none";
            }
        </script>
    </main> -->

    @include('website.partials.include_js')
@endsection