<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once 'db.php';

// ✅ Get the Share Code & Referrer from URL
$share_code = $_GET['code'] ?? null;
$referrer = $_GET['ref'] ?? null;

// ✅ Fetch Lead Capture Page Data
$stmt = $pdo->prepare("SELECT * FROM lead_capture_pages WHERE share_code = ?");
$stmt->execute([$share_code]);
$leadPage = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$leadPage) {
    die("Error: Lead Capture Page Not Found.");
}

// ✅ Fetch Branding Settings (title, subtitle, default video)
$brandingStmt = $pdo->query("SELECT title, subtitle, bridge_video_url FROM branding LIMIT 1");
$brandingData = $brandingStmt->fetch(PDO::FETCH_ASSOC);
$bridgeVideoURL = $brandingData['bridge_video_url'] ?? null;
$bridgeTitle = $brandingData['title'] ?? '';
$bridgeSubtitle = $brandingData['subtitle'] ?? '';

// ✅ Fetch Referring User's Details (and bridge custom settings)
$stmt = $pdo->prepare("SELECT * FROM users WHERE user_id = ?");
$stmt->execute([$referrer]);
$referrerData = $stmt->fetch(PDO::FETCH_ASSOC);

// ✅ Build SaveClub Step 1 Dynamic Link
// ✅ Dynamically find the correct slot_number for SaveClub
$stmt = $pdo->prepare("SELECT slot_number, url_template FROM programs WHERE id = 34 LIMIT 1");
$stmt->execute();
$saveClubProgram = $stmt->fetch(PDO::FETCH_ASSOC);

if ($saveClubProgram && isset($saveClubProgram['slot_number']) && isset($saveClubProgram['url_template'])) {
    $slotNumber = (int)$saveClubProgram['slot_number'];
    $userProgramField = 'program_' . $slotNumber;

    // ✅ Use variable variable to fetch correct field from users table
    $programUsername = $referrerData[$userProgramField] ?? null;

    if (!empty($programUsername)) {
        $saveClubTourLink = str_replace('{{USER_ID}}', urlencode($programUsername), $saveClubProgram['url_template']);
    } else {
        $saveClubTourLink = "#"; // fallback if user hasn't saved their SaveClub ID
    }
} else {
    $saveClubTourLink = "#"; // fallback if program not found
}


// ✅ Set fallback name/email in case not found
$referrerName = "Anonymous User";
$referrerEmail = "anonymous@example.com";

// ✅ If found, override display name and use custom bridge content if enabled
if ($referrerData) {
    $referrerName = htmlspecialchars($referrerData['first_name'] . ' ' . $referrerData['last_name']);
    $referrerEmail = htmlspecialchars($referrerData['email']);

    // ✅ Bridge override: replace admin video with user's custom one if set
    if (!empty($referrerData['has_bridge_customization']) && !empty($referrerData['bridge_video_url'])) {
        $bridgeVideoURL = $referrerData['bridge_video_url'];
    }
}

// ✅ Generate Gravatar Image (Circular with Border)
$gravatarHash = md5(strtolower(trim($referrerEmail)));
$gravatarURL = "https://www.gravatar.com/avatar/$gravatarHash?s=100&d=mp";



// ✅ Retrieve user-selected fonts from the database
$headlineFont = (!isset($leadPage['font_headline']) || trim($leadPage['font_headline']) === '') ? 'Anton' : $leadPage['font_headline'];
$subheadingFont = (!isset($leadPage['font_subheading']) || trim($leadPage['font_subheading']) === '') ? 'Pacifico' : $leadPage['font_subheading'];
?>





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Save Big and Earn Big with SaveClub | Powered by MLM Lead Pro</title>
    
    <?php
// ✅ Generate full dynamic URL with only code and ref
$dir = rtrim(dirname($_SERVER['REQUEST_URI']), '/');
$base_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'] . $dir;

$og_url = $base_url . '/bridge.php?code=' . urlencode($share_code);
if (!empty($referrer)) {
    $og_url .= '&ref=' . urlencode($referrer);
}

// ✅ Clean, shortened Open Graph description
$og_title = "Save Big and Earn Big with SaveClub";
$og_description = "Discover how SaveClub can help you save thousands and create a powerful income stream — powered by the MLM Lead Pro system.";
$og_image = "https://mlmlead.pro/assets/images/facebokthumbnail-preview-open-graph.png";
?>


<!-- ✅ Facebook Open Graph Meta Tags -->
<meta property="og:title" content="<?= $og_title; ?>" />
<meta property="og:description" content="<?= $og_description; ?>" />
<meta property="og:image" content="<?= $og_image; ?>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="<?= $og_url; ?>" />
<meta property="og:type" content="website" />

    
    <!-- ✅ Preload Google Fonts BEFORE CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=<?= urlencode($headlineFont); ?>:wght@400;700&family=<?= urlencode($subheadingFont); ?>:wght@400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>


body {
    background: url('<?= htmlspecialchars('assets/backgrounds/' . $leadPage['background']); ?>') no-repeat center center fixed;
    background-size: cover;
    color: white;
    text-align: center;
    padding: 20px;
    display: flex;
    align-items: flex-start; /* ✅ Aligns container towards the top */
    justify-content: space-between;
    height: 100vh;
    padding-top: 50px; /* ✅ Adds spacing */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}


/* ✅ Beautified Container */
.container {
    flex-grow: 1; /* ✅ Allows content to push footer to bottom */
    max-width: 600px;
    background: rgba(0, 0, 0, 0.65);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    margin: auto; /* ✅ Centers vertically */
    margin-top: 30px; /* Shunts it down below the attention bar */

}

/* ✅ Headline Font (Bold & Eye-Catching) */
h1 {
    font-size: 3rem; /* Slightly larger for more emphasis */
    font-weight: 800; /* Extra bold for stronger impact */
    letter-spacing: 1px; /* Reduce letter spacing slightly */
    font-family: "<?= htmlspecialchars($headlineFont); ?>", sans-serif !important;
    text-transform: uppercase;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); /* Deeper shadow */
    line-height: 1.2; /* Tighten spacing for compactness */
    color: white !important;
    text-align: center !important; /* ✅ Forces center alignment */
}

p {
    font-size: 1.5rem;
    font-weight: 500;
    font-family: "<?= htmlspecialchars($subheadingFont); ?>", cursive !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    font-style: italic; /* Slight italic effect for a softer, inviting tone */
    color: white !important;
    text-align: center !important; /* ✅ Forces center alignment */
    letter-spacing: 0px; /* Slight spacing for elegance */
}
.mini-headline {
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffcc00; /* Gold or accent color */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}



/* ✅ Modern Form Fields */
form input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid <?= htmlspecialchars($leadPage['color_theme']); ?>;
    border-radius: 8px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    outline: none;
    transition: all 0.3s ease-in-out;
}

/* ✅ Placeholder Text */
form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* ✅ Form Fields Focus Effect */
form input:focus {
    background: rgba(255, 255, 255, 0.3);
}

/* ✅ Modern Button */
.btn-primary {
    width: 100%;
    padding: 15px 20px; /* Adjust padding for better spacing */
    flex-direction: column; /* Forces text to stack vertically */
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    background-color: <?= htmlspecialchars($leadPage['color_theme']); ?> !important;
    color: <?= ($leadPage['color_theme'] === 'yellow') ? 'black' : 'white'; ?> !important; /* ✅ Black text if yellow */
    transition: background 0.3s ease-in-out, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

/* ✅ Main text inside the button */
.button-main-text {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

/* ✅ Second line subtext */
.button-subtext {
    font-size: 13px;
    font-weight: normal;
    margin-top: 5px; /* Adds spacing between main text and subtext */
    text-transform: none;
    letter-spacing: normal;
    color: white;
    opacity: 0.9;
}

/* ✅ Lighten Button on Hover */
.btn-primary:hover {
    filter: brightness(1.2); /* ✅ Increases brightness by 20% */
    transform: translateY(-5px);
}

/* ✅ Ensure Bootstrap does not override */
.btn-primary:focus, 
.btn-primary:active {
    box-shadow: none !important;
    background-color: <?= htmlspecialchars($leadPage['color_theme']); ?> !important;
}



/* ✅ FontAwesome Icon Inside Button */
.btn-primary i {
    margin-right: 8px;
}

.video-container {
    position: relative;
    width: 100%; /* Responsive width */
    max-width: 750px; /* Keep within reasonable width */
    margin: 20px auto; /* Adds spacing */
    padding: 10px;
    background: rgba(0, 0, 0, 0.2); /* Light overlay */
    border: 4px solid <?= htmlspecialchars($leadPage['color_theme']); ?>; /* Dynamic border */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* ✅ Fix for maintaining aspect ratio */
.video-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px; /* Matches container rounding */
}

            .footer {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    width: 100%;
    margin-top: auto; /* ✅ Ensures footer stays at the bottom */
        }

/* ✅ Referrer Branding */
.referrer-branding {
    margin-top: 20px;
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ✅ Circular Gravatar */
.referrer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

/* ✅ Referrer Name Styling */
.referrer-name {
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* ✅ Fix Button Subtext Positioning */
.button-subtext {
    display: block; /* Forces it to be on a new line */
    font-size: 13px; /* Adjust size for balance */
    font-weight: normal;
    text-align: center;
    opacity: 0.9;
    margin-top: 5px; /* Adds space from the main button text */
    text-transform: none;
    letter-spacing: normal;
    color: white;
}


.attention-bar {
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #ffc107;
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: top 0.5s ease;
}

.attention-bar.visible {
    top: 0;
}

.attention-bar .close-btn {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
    color: black;
}

@media (max-width: 768px) {
    .container {
        margin-top: 90px !important; /* Adjust for mobile overlap */
    }
}

@keyframes bounceDown {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(5px); }
    40%  { transform: translateY(-3px); }
    60%  { transform: translateY(4px); }
    80%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

.attention-bar.bounce {
    animation: bounceDown 0.6s ease;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 5px #ffc107, 0 0 10px #ffc107, 0 0 15px #ffc107;
    }
    50% {
        box-shadow: 0 0 15px #ffc107, 0 0 25px #ffc107, 0 0 35px #ffc107;
    }
    100% {
        box-shadow: 0 0 5px #ffc107, 0 0 10px #ffc107, 0 0 15px #ffc107;
    }
}
.glow-button {
    animation: glowPulse 2s infinite alternate;
}


    </style>
    
    
</head>
<body style="background: url('/assets/backgrounds/saveclub-background.png') no-repeat center center fixed; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow-x: hidden;">
<?php include 'google-translate-widget-front-end.php'; ?>
<div class="attention-bar" id="emailBar">
    ✨ <strong>You're on the right track!</strong> Start by unlocking your SaveClub Free Tour below! 🚀
    <span class="close-btn" onclick="document.getElementById('emailBar').style.top='-100px'">&times;</span>
</div>




<div class="container">
<?php if (!empty($bridgeSubtitle)): ?>
    <p class="mini-headline">Exclusive Access to SaveClub's Money-Saving Membership</p>
<?php endif; ?>
<?php if (!empty($bridgeTitle)): ?>
    <h1>Unlock Your SaveClub Freedom</h1>
<?php endif; ?>
<p>Discover how SaveClub is helping families save big on everyday essentials — while building a powerful passive income stream!</p>


    <?php if (!empty($bridgeVideoURL)): ?>
<div class="video-container">
    <iframe src="https://www.youtube.com/embed/nuOmkpZyZcc" 
        title="SaveClub Overview Video" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" 
        allowfullscreen>
    </iframe>
</div>
<?php endif; ?>

<div style="background: rgba(255, 255, 255, 0.15); padding: 20px; border-radius: 12px; margin-bottom: 25px;">
    <h4 style="color: #ffcc00; text-transform: uppercase; font-weight: bold;">
        <i class="fas fa-unlock"></i> Step 1: Take Your Free SaveClub Tour
    </h4>
<a href="<?= htmlspecialchars($saveClubTourLink); ?>" target="_blank" class="btn btn-warning w-100 glow-button" style="margin-top: 15px; font-size: 20px; font-weight: bold; padding: 18px;">
    <i class="fas fa-door-open"></i> Unlock Your Free Tour
</a>

</div>



<a href="user-registration.php?code=<?= htmlspecialchars($share_code); ?>&ref=<?= htmlspecialchars($referrer); ?>" 
   class="btn btn-primary">
    <span class="button-main-text">
        <i class="fa fa-arrow-right"></i> 🚀 Step 2: Secure Your System & Save Big
 
    </span>
    <span class="button-subtext">
        Start for Free. No Card Required. Get Access Instantly.

    </span>
</a>




<P>
<p>No cost, no risk – just plug in your business and start generating leads today.</p>


<div class="cta-block" style="text-align: center; margin-bottom: 30px;">
    <?php if (!empty($referrerData['has_bridge_customization']) && !empty($referrerData['bridge_cta_button_link'])): ?>
        <hr style="margin: 30px 0; border: 1.5px solid rgba(255,255,255,0.8);">
        <?php if (!empty($referrerData['bridge_cta_title'])): ?>
            <h4 style="color: #ffcc00;"><?= htmlspecialchars($referrerData['bridge_cta_title']); ?></h4>
        <?php endif; ?>
        <?php if (!empty($referrerData['bridge_cta_description'])): ?>
            <p><?= nl2br(htmlspecialchars($referrerData['bridge_cta_description'])); ?></p>
        <?php endif; ?>
        <a href="<?= htmlspecialchars($referrerData['bridge_cta_button_link']); ?>" target="_blank" class="btn btn-secondary mt-2">
            <?= htmlspecialchars($referrerData['bridge_cta_button_text'] ?? 'Learn More'); ?>
        </a>
    <?php endif; ?>

    <?php if (!empty($referrerData['has_bridge_customization']) && !empty($referrerData['bridge_contact_link'])): ?>
        <div style="margin-top: 12px;">
            <?php
                $contact = $referrerData['bridge_contact_link'];
                $isEmail = filter_var($contact, FILTER_VALIDATE_EMAIL);
                $linkHref = $isEmail ? "mailto:$contact" : $contact;
            ?>
            <a href="<?= htmlspecialchars($linkHref); ?>" target="_blank" style="color: #ffc107;">
                <i class="fas fa-envelope"></i> Contact Me
            </a>
        </div>
    <?php endif; ?>
</div>


<!-- ✅ Referrer Branding Section (Only Shows If User Exists) -->
<?php if ($referrerData): ?>
    <div class="referrer-branding">
        <img src="<?= $gravatarURL; ?>" alt="User Avatar" class="referrer-avatar">
        <p class="referrer-name">Shared by: <strong><?= $referrerName; ?></strong></p>
    </div>
<?php endif; ?>




 </div>
    </div>
    <footer class="footer">
        &copy; <?= str_replace(['https://', 'http://', 'www.'], '', $_SERVER['HTTP_HOST']); ?>, All Rights Reserved.
    </footer>
    
<script>
    window.addEventListener('DOMContentLoaded', () => {
        const bar = document.getElementById('emailBar');

        // Show the bar
        setTimeout(() => {
            bar.classList.add('visible');
        }, 700);

        // First bounce 3s after showing
        setTimeout(() => {
            bar.classList.add('bounce');
            setTimeout(() => bar.classList.remove('bounce'), 600); // clean up
        }, 3700);

        // Repeat bounce every 10 seconds
        const bounceInterval = setInterval(() => {
            if (bar.style.top !== "-100px") {
                bar.classList.add('bounce');
                setTimeout(() => bar.classList.remove('bounce'), 600); // clean up
            } else {
                clearInterval(bounceInterval); // Stop bouncing if closed
            }
        }, 10000);
    });
</script>



</body>
</html>
