{{-- ===== Wave divider (sits above footer, blends into it) ===== --}}
<div class="tt-wave-wrap">
    <svg class="tt-wave-svg" viewBox="0 0 1440 130" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="ttWaveLine" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
                <stop offset="45%" stop-color="#ff9d40"/>
                <stop offset="60%" stop-color="#ff7a00"/>
                <stop offset="100%" stop-color="#0d1b2e" stop-opacity="0"/>
            </linearGradient>
        </defs>
        <path class="tt-wave-fill" d="M0,55 C 260,120 620,10 980,55 C 1180,80 1320,45 1440,20 L1440,130 L0,130 Z" fill="#0d1b2e"/>
        <path class="tt-wave-line" d="M0,55 C 260,120 620,10 980,55 C 1180,80 1320,45 1440,20"
              fill="none" stroke="url(#ttWaveLine)" stroke-width="3.5" stroke-linecap="round"/>
    </svg>
</div>

{{-- ===== Footer ===== --}}
<footer class="tt-footer" id="ttFooter">
    <div class="tt-footer-glow" id="ttGlow"></div>

    <div class="container-fluid tt-footer-inner">

        <div class="tt-footer-row">
            <div class="tt-brand-block">
                <h3 class="tt-brand-name">TradTrik</h3>
                <p class="tt-brand-tagline">Smarter options trading, backed by data.</p>
            </div>

            <nav class="tt-footer-links">
                <a href="{{ url('/strategies') }}">Right Time to Trade</a>
                <a href="{{ url('/tools') }}">Know Your Data</a>
                <a href="{{ url('/gex-dashboards') }}">Live GEX Pulse</a>
                <a href="{{ url('/compare') }}">Past Market Trends</a>
                <a href="{{ url('/plans') }}">Pricing</a>
                <a href="{{ url('/contact') }}">Talk to Us</a>
            </nav>
        </div>

        <hr class="tt-divider">

        <div class="tt-footer-bottom">
            <p class="tt-copyright">&copy; {{ date('Y') }} TradTrik. All rights reserved.</p>
            <p class="tt-disclaimer">Data is indicative, may be delayed &amp; not investment advice. Not affiliated with NSE, BSE, or SEBI.</p>
        </div>

    </div>
</footer>

{{-- ===== Floating chat widget (custom icon, NOT the WhatsApp logo) ===== --}}
<div class="tt-chat-widget" id="ttChatWidget">

    <div class="tt-chat-panel" id="ttChatPanel">
        <div class="tt-chat-header">
            <span class="tt-chat-dot"></span>
            <div>
                <p class="tt-chat-title">Chat with TradTrik</p>
                <p class="tt-chat-sub">Usually replies within minutes</p>
            </div>
        </div>

        <div class="tt-chat-chips">
            <button type="button" class="tt-chip" data-msg="Hi, I want to know my previous trade data and history.">Know Previous Trade Data</button>
            <button type="button" class="tt-chip" data-msg="Hi, I have a general query about TradTrik.">General Query</button>
            <button type="button" class="tt-chip" data-msg="Hi, I want to know more about your trading strategies.">Strategies Info</button>
            <button type="button" class="tt-chip" data-msg="Hi, I want to know about pricing plans.">Pricing &amp; Plans</button>
        </div>

        <div class="tt-chat-input-row">
            <textarea id="ttChatText" class="tt-chat-textarea" rows="2" placeholder="Type your message..."></textarea>
            <button type="button" id="ttChatSend" class="tt-chat-send" aria-label="Send">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 12L21 3L14 21L11 13L3 12Z" fill="currentColor"/>
                </svg>
            </button>
        </div>
    </div>

    <button type="button" class="tt-chat-toggle" id="ttChatToggle" aria-label="Open chat">
        <svg class="tt-chat-icon" width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 5.5C4 4.67 4.67 4 5.5 4H18.5C19.33 4 20 4.67 20 5.5V14.5C20 15.33 19.33 16 18.5 16H8.5L4.5 19.5C4.24 19.72 3.85 19.55 3.85 19.2V16H5.5C4.67 16 4 15.33 4 14.5V5.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
            <circle cx="8.5" cy="10" r="1" fill="currentColor"/>
            <circle cx="12" cy="10" r="1" fill="currentColor"/>
            <circle cx="15.5" cy="10" r="1" fill="currentColor"/>
        </svg>
        <svg class="tt-chat-icon tt-chat-icon-close" width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
    </button>
</div>

<style>
    /* ---------- Wave divider ---------- */
    .tt-wave-wrap {
        width: 100%;
        line-height: 0;
        /* was #ffffff — that created a jarring white bar between the
           navy page body and the navy footer on every page. Now it
           matches the page background so the wave blends in instead
           of looking like a broken/empty gap. */
        background: #0a1425;
    }

    .tt-wave-svg {
        display: block;
        width: 100%;
        height: 90px;
    }

    /* ---------- Footer ---------- */
    .tt-footer {
        position: relative;
        background-color: #0d1b2e;
        color: #e8ecf3;
        overflow: hidden;
        width: 100%;
        margin-top: -1px;
    }

    .tt-footer-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(255, 122, 0, 0.16) 0%, rgba(255, 122, 0, 0.06) 45%, transparent 70%);
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.3s ease;
        will-change: transform;
        z-index: 0;
    }

    .tt-footer:hover .tt-footer-glow {
        opacity: 1;
    }

    .tt-footer-inner {
        position: relative;
        z-index: 1;
        padding: 40px 40px 22px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .tt-footer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 22px;
    }

    .tt-brand-block {
        flex: 0 0 auto;
    }

    .tt-brand-name {
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 4px;
        letter-spacing: -0.3px;
    }

    .tt-brand-tagline {
        color: #9aa5b8;
        font-size: 12.5px;
        margin: 0;
    }

    .tt-footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 18px 26px;
        flex: 1;
        justify-content: center;
    }

    .tt-footer-links a {
        color: #cbd3e1;
        text-decoration: none;
        font-size: 13.5px;
        transition: color 0.2s ease;
        white-space: nowrap;
    }

    .tt-footer-links a:hover {
        color: #ff9d40;
    }

    .tt-divider {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin: 0 0 16px;
    }

    .tt-footer-bottom {
        text-align: center;
    }

    .tt-copyright {
        font-size: 12px;
        color: #9aa5b8;
        margin-bottom: 4px;
        font-weight: 400;
    }

    .tt-disclaimer {
        font-size: 11px;
        color: #6b7690;
        max-width: 560px;
        margin: 0 auto;
    }

    @media (max-width: 768px) {
        .tt-footer-row {
            flex-direction: column;
            text-align: center;
        }

        .tt-footer-links {
            justify-content: center;
        }

        .tt-footer-inner {
            padding: 32px 20px 18px;
        }
    }

    /* ---------- Floating chat widget ---------- */
    .tt-chat-widget {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 14px;
    }

    .tt-chat-toggle {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #12294a, #0d1b2e);
        color: #ff9d40;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(13, 27, 46, 0.45), 0 0 0 1px rgba(255, 122, 0, 0.25) inset;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
    }

    .tt-chat-toggle:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 12px 28px rgba(255, 122, 0, 0.3);
    }

    .tt-chat-icon-close {
        display: none;
        position: absolute;
    }

    .tt-chat-widget.open .tt-chat-icon:not(.tt-chat-icon-close) {
        display: none;
    }

    .tt-chat-widget.open .tt-chat-icon-close {
        display: block;
    }

    .tt-chat-panel {
        width: 300px;
        max-width: calc(100vw - 44px);
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(13, 27, 46, 0.3);
        overflow: hidden;
        transform: translateY(12px) scale(0.96);
        opacity: 0;
        pointer-events: none;
        transition: all 0.22s ease;
        border: 1px solid rgba(13, 27, 46, 0.08);
    }

    .tt-chat-widget.open .tt-chat-panel {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .tt-chat-header {
        background: #0d1b2e;
        padding: 16px 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tt-chat-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #34d17a;
        flex: 0 0 auto;
        box-shadow: 0 0 0 3px rgba(52, 209, 122, 0.2);
    }

    .tt-chat-title {
        margin: 0;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
    }

    .tt-chat-sub {
        margin: 2px 0 0;
        color: #9aa5b8;
        font-size: 11.5px;
    }

    .tt-chat-chips {
        padding: 14px 14px 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tt-chip {
        border: 1px solid #e3e7ee;
        background: #f4f6fa;
        color: #0d1b2e;
        font-size: 12px;
        padding: 7px 11px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
    }

    .tt-chip:hover {
        background: #0d1b2e;
        color: #ff9d40;
        border-color: #0d1b2e;
    }

    .tt-chat-input-row {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 10px 14px 16px;
    }

    .tt-chat-textarea {
        flex: 1;
        resize: none;
        border: 1px solid #e3e7ee;
        border-radius: 10px;
        padding: 9px 11px;
        font-size: 13px;
        font-family: inherit;
        color: #0d1b2e;
        outline: none;
        transition: border-color 0.2s ease;
    }

    .tt-chat-textarea:focus {
        border-color: #ff7a00;
    }

    .tt-chat-send {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: none;
        background: #0d1b2e;
        color: #ff9d40;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
        transition: background 0.2s ease;
    }

    .tt-chat-send:hover {
        background: #ff7a00;
        color: #ffffff;
    }

    @media (max-width: 480px) {
        .tt-chat-widget {
            right: 14px;
            bottom: 14px;
        }
    }
</style>

<script>
(function () {
    const footer = document.getElementById('ttFooter');
    const glow = document.getElementById('ttGlow');
    if (footer && glow) {
        footer.addEventListener('mousemove', function (e) {
            const rect = footer.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            glow.style.transform = 'translate(' + (x - 160) + 'px, ' + (y - 160) + 'px)';
        });
    }

    const WA_NUMBER = '919608328632'; // India country code + number

    const widget = document.getElementById('ttChatWidget');
    const toggle = document.getElementById('ttChatToggle');
    const textarea = document.getElementById('ttChatText');
    const sendBtn = document.getElementById('ttChatSend');
    const chips = document.querySelectorAll('.tt-chip');

    if (!widget || !toggle) return;

    toggle.addEventListener('click', function () {
        widget.classList.toggle('open');
    });

    chips.forEach(function (chip) {
        chip.addEventListener('click', function () {
            textarea.value = chip.getAttribute('data-msg');
            textarea.focus();
        });
    });

    sendBtn.addEventListener('click', function () {
        const msg = textarea.value.trim() || 'Hi, I would like to know more about TradTrik.';
        const url = 'https://wa.me/' + WA_NUMBER + '?text=' + encodeURIComponent(msg);
        window.open(url, '_blank');
    });
})();
</script>