/* Demo page styling */
body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: #f1f5f9;
}
.locker-content h3 {
    margin: 0 0 10px;
    font-size: 22px;
    color: #0f172a;
}
.locker-content p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}
.download-button {
    display: inline-block;
    padding: 12px 22px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background-color: #3e7bd6;
    border-radius: 8px;
}
.download-button:hover {
    background-color: #3069c2;
}

/* The content locker component */
/* Every knob you might want to tweak lives in one place */
.locker {
    --locker-radius: 12px;
    --locker-blur: 8px;
    --locker-speed: .4s;
    --locker-accent: #3e7bd6;
    --locker-overlay: linear-gradient(160deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .96));
    --locker-button: 44px;
    position: relative;
    max-width: 520px;
    border-radius: var(--locker-radius);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(15, 23, 42, .12);
}
/* The content being locked; the blur fades away smoothly on unlock */
.locker-content {
    padding: 30px;
    background-color: #fff;
    transition: filter var(--locker-speed) ease;
}
/* Blur the content and block clicks and text selection while it is locked */
.locker:not(.unlocked) .locker-content {
    filter: blur(var(--locker-blur));
    pointer-events: none;
    user-select: none;
}
/* The dark overlay that sits on top of the locked content */
.locker-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    text-align: center;
    color: #fff;
    background: var(--locker-overlay);
    transition: opacity var(--locker-speed) ease, visibility var(--locker-speed);
}
/* Fade the overlay away once the locker is unlocked */
.locker.unlocked .locker-overlay {
    opacity: 0;
    visibility: hidden;
}
.locker-icon {
    width: 34px;
    height: 34px;
    fill: #94a3b8;
}
.locker-title {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 700;
}
.locker-hint {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #cbd5e1;
}
/* The row of round share buttons; each button reads its own --brand color */
.locker-share {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.locker-share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--locker-button);
    height: var(--locker-button);
    border-radius: 50%;
    background-color: var(--brand);
    transition: transform .15s ease;
}
.locker-share a:hover,
.locker-share a:focus-visible {
    transform: scale(1.12);
}
.locker-share svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}
/* The official brand color for each network */
[data-share=x] { --brand: #000000; }
[data-share=facebook] { --brand: #0866ff; }
[data-share=linkedin] { --brand: #0a66c2; }
[data-share=pinterest] { --brand: #e60023; }
[data-share=reddit] { --brand: #ff4500; }
[data-share=whatsapp] { --brand: #25d366; }
/* The email form used by the email signup variant */
.locker-form {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 340px;
}
.locker-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-size: 14px;
    color: #fff;
    background-color: #1e293b;
    border: 1px solid #475569;
    border-radius: 6px;
}
.locker-form input::placeholder {
    color: #94a3b8;
}
.locker-form button {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background-color: var(--locker-accent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.locker-form button:hover {
    filter: brightness(.9);
}
/* Keep things calm for visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .locker-content, .locker-overlay, .locker-share a {
        transition: none;
    }
}

// The share dialog URL for every supported network; {url} becomes the page's address
const networks = {
    x: 'https://x.com/intent/post?url={url}',
    facebook: 'https://www.facebook.com/sharer/sharer.php?u={url}',
    linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url={url}',
    pinterest: 'https://pinterest.com/pin/create/button/?url={url}',
    reddit: 'https://www.reddit.com/submit?url={url}',
    whatsapp: 'https://wa.me/?text={url}'
};
// Read or save an unlock flag; storage can be blocked in private or embedded pages
const remember = (key, value) => {
    try { return value ? localStorage.setItem(key, value) : localStorage.getItem(key); } catch (e) { return null; }
};
// Reveal the content and remember the unlock so it stays open on return visits
const unlock = locker => {
    locker.classList.add('unlocked');
    locker.querySelector('.locker-content').inert = false;
    remember('locker_' + locker.dataset.locker, 'unlocked');
};
// Set up every locker on the page
document.querySelectorAll('.locker').forEach(locker => {
    // Keep clicks and keyboard focus out of the content while it is locked
    locker.querySelector('.locker-content').inert = true;
    // Unlocked on a previous visit? Reveal it immediately and skip the rest
    if (remember('locker_' + locker.dataset.locker)) return unlock(locker);
    // Unlock by sharing: one click handler per share button
    locker.querySelectorAll('[data-share]').forEach(button => button.addEventListener('click', event => {
        event.preventDefault();
        // Build the share link for the clicked network with this page's URL filled in
        const url = networks[button.dataset.share].replace('{url}', encodeURIComponent(location.href));
        // Open the network's share dialog in a small centered popup window
        const popup = window.open(url, 'share', 'popup,width=600,height=600,left=' + (screen.width - 600) / 2 + ',top=' + (screen.height - 600) / 2);
        // Popup blocked? Fall back to a new tab and unlock after a short delay
        if (!popup) { window.open(url, '_blank'); setTimeout(() => unlock(locker), 5000); return; }
        // Watch the popup; once it closes, the share is done and we can unlock
        const watcher = setInterval(() => {
            if (popup.closed) { clearInterval(watcher); unlock(locker); }
        }, 500);
    }));
    // Unlock by email: used by the email signup variant if the form exists
    const form = locker.querySelector('.locker-form');
    if (form) form.addEventListener('submit', event => {
        event.preventDefault();
        // Send the address to your newsletter system here, then reveal the content
        unlock(locker);
    });
});