<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/config.php';

// SEO Meta Data
$page_title = "Thank You - " . get_website_name();
$meta_description = "Thank you for contacting us. We have received your message and will get back to you shortly.";

include BASE_PATH . '/include/header.php';
?>

<style>
    :root {
        --ty-bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        --ty-card-bg: #ffffff;
        --ty-text-muted: #6c757d;
        --ty-card-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        --ty-divider: #dee2e6;
    }

    [data-theme="dark"] {
        --ty-bg-gradient: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
        --ty-card-bg: #1e1e1e;
        --ty-text-muted: #a0a0a0;
        --ty-card-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        --ty-divider: #333333;
    }

    .thank-you-section {
        padding: 100px 0;
        background: var(--ty-bg-gradient);
        min-height: 70vh;
        display: flex;
        align-items: center;
        transition: background 0.3s ease;
    }

    .thank-you-card {
        background: var(--ty-card-bg);
        border-radius: 24px;
        box-shadow: var(--ty-card-shadow);
        padding: 60px 40px;
        transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid var(--ty-divider);
    }

    .thank-you-card:hover {
        transform: translateY(-8px);
    }

    .status-icon-wrapper {
        width: 100px;
        height: 100px;
        background: rgba(<?php
        $rgb = hex2rgb(get_site_color());
        echo "$rgb[0], $rgb[1], $rgb[2], 0.1";
        ?>);
        border-radius: 50%;
        display: flex;
        align-items: center;

        justify-content: center;
        margin: 0 auto 30px;
    }

           
            .
status-icon {
        font-size: 3.5rem;
        color:
            <?php echo get_site_color(); ?>
        ;
    }
    .
ty-title {
        color: <?php echo get_text_color(); ?>;
        margin-bottom: 20px;
    }

    [data-theme="dark"] .ty-title {
        color: #ffffff;
    }
    .ty-text {
        color: var(--ty-text-muted);

        font-size: 1.15rem;
        line-height: 1.6;
    }
    .ty-divider {
        border-top: 2px solid var(--ty-divider);

        width: 60px;
        margin: 30px auto
          ; 

            }
         
        
      .btn-custom {
        background-color: <?php echo get_site_color(); ?>;
        border-color: <?php echo get_site_color(); ?>;
        color: #fff !important;
        padding: 14px 40px;
        border-radius: 50px;
        font-weight: 700;
        text-transform: uppercase;
     
   letter-spacing: 1px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(<?php
        $rgb = hex2rgb(get_site_color());
        echo "$rgb[0], $rgb[1], $rgb[2], 0.3";
        ?>);
       }

    .btn-custom:hover {
        background-color: #333;
        border-color: #333;
        transform: translateY(-2px);
     
   box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }
    [data-theme="dark"] .btn-custom:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #000000 !important;
    }
    .btn-outline-custom {
        border: 2px solid var(--ty-divider);
        color: var(--ty-text-muted);
     
   padding: 14px 40px;
        border-radius: 50px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
    }
    .btn-outline-custom:hover {
        background: var(--ty-divider);
        color: inherit;
    }
</style>

<section class="thank-you-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-9 col-lg-7 text-center">
                <div class="thank-you-card">
                    <div class="status-icon-wrapper">
                        <i class="fas fa-check status-icon"></i>
                    </div>
                    <h1 class="display-4 fw-bold ty-title">Thank You!</h1>
                    <div class="mb-5"></div>
                    <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
                        <a href="/" class="btn btn-custom">Return Home</a>
                        <a href="/our-services" class="btn btn-outline-custom">Our Services</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php include BASE_PATH . '/include/footer.php'; ?>