{{--
    resources/views/tools/butterfly-scanner.blade.php

    THIS REVISION:
    - Colour scheme reverted to TradTrik's orange/navy brand (matches
      welcome.blade.php) — green is used ONLY for "up"/profit numbers and
      red ONLY for "down"/loss numbers, same convention as the rest of
      the site. Nothing else is green anymore (headings, buttons, step
      numbers, payoff chart line — all orange now).
    - Every icon / feature row that was a plain decorative <div> is now
      a real <a href="..."> with data-requires-auth="1", so it's
      clickable and goes through the same login-gate as the rest of the
      site. See the route/location table in the chat reply for where
      each of these pages should live.
    - Added a big, clearly-labeled "Understanding the Payoff" diagram
      (beginner-friendly, plain-English explanation under it).
    - Added a practical "How To Actually Trade This" step-by-step
      roadmap — real trading steps, not just "how to use the scanner".
--}}

@extends('layouts.app')

@section('content')

{{-- ============ TOOL TOP: no banner, straight into the product ============ --}}
<section class="tt-tool-top" id="ttToolTop">
    <div class="container tt-tool-top-grid">

        {{-- LEFT: title, description, quick icons, what-is card --}}
        <div class="tt-tool-left">
            <span class="tt-badge">
                <span class="tt-badge-dot"></span> Options analysis tool
            </span>

            <h1 class="tt-tool-title">
                Butterfly<br><span class="tt-accent">Spread Scanner</span>
            </h1>

            <p class="tt-tool-tagline">Scan. Compare. Analyze. Trade Smarter.</p>
            <p class="tt-tool-desc">
                Find high probability butterfly spread setups across multiple strikes
                &amp; expiries in real-time.
            </p>

            {{-- Each of these now links somewhere real — see route table --}}
            <div class="tt-quick-icons">
                <a href="{{ url('/tools/live-market-data') }}" class="tt-quick-icon" data-requires-auth="1">
                    <span>📡</span><p>Live Market Data</p>
                </a>
                <a href="{{ url('/tools/ratio-scanner') }}" class="tt-quick-icon" data-requires-auth="1">
                    <span>🔀</span><p>Multiple Ratios</p>
                </a>
                <a href="{{ url('/tools/oc-heatmap') }}" class="tt-quick-icon" data-requires-auth="1">
                    <span>🗺️</span><p>Real-time Heatmap</p>
                </a>
                <a href="{{ url('/tools/greeks-analyzer') }}" class="tt-quick-icon" data-requires-auth="1">
                    <span>Σ</span><p>Greeks &amp; IV Analysis</p>
                </a>
                <a href="{{ url('/tools/payoff-calculator') }}" class="tt-quick-icon" data-requires-auth="1">
                    <span>📈</span><p>Payoff Visualization</p>
                </a>
                <a href="{{ url('/alerts') }}" class="tt-quick-icon" data-requires-auth="1">
                    <span>🔔</span><p>Alerts &amp; Monitoring</p>
                </a>
            </div>

            <div class="tt-whatis-card">
                <h3>What is a Butterfly Spread?</h3>
                <p>A butterfly spread is a defined-risk options strategy built using
                3 different strikes. It is built using 1:2:1 or other ratios.</p>

                <div class="tt-whatis-legs">
                    <div class="tt-whatis-leg">
                        <span class="tt-leg-dot tt-leg-buy"></span>
                        <span class="tt-leg-label">BUY</span>
                        <span class="tt-leg-sub">1 Lot · Lower Strike</span>
                    </div>
                    <div class="tt-whatis-leg">
                        <span class="tt-leg-dot tt-leg-sell"></span>
                        <span class="tt-leg-label">SELL</span>
                        <span class="tt-leg-sub">2 Lots · Middle Strike</span>
                    </div>
                    <div class="tt-whatis-leg">
                        <span class="tt-leg-dot tt-leg-buy"></span>
                        <span class="tt-leg-label">BUY</span>
                        <span class="tt-leg-sub">1 Lot · Higher Strike</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- MIDDLE: the actual scanner UI mockup --}}
        <div class="tt-tool-mid">
            <div class="tt-scanner-mock">

                <div class="tt-scanner-titlebar">
                    <span class="tt-dot tt-dot-red"></span>
                    <span class="tt-dot tt-dot-yellow"></span>
                    <span class="tt-dot tt-dot-green"></span>
                </div>

                <div class="tt-scanner-controls">
                    <select class="tt-scanner-select" data-requires-auth="1">
                        <option>NIFTY</option>
                        <option>BANKNIFTY</option>
                        <option>SENSEX</option>
                    </select>
                    <span class="tt-scanner-price">24,208.50 <span class="tt-up">+54.30 (0.23%)</span></span>
                    <select class="tt-scanner-select" data-requires-auth="1">
                        <option>Expiry: 29 Aug 2024</option>
                    </select>
                    <button type="button" class="tt-scan-btn" data-requires-auth="1">SCAN</button>
                </div>

                <div class="tt-scanner-filters">
                    <label>Strategy
                        <select data-requires-auth="1"><option>Call Butterfly</option></select>
                    </label>
                    <label>Ratio
                        <select data-requires-auth="1"><option>1:2:1</option></select>
                    </label>
                    <label>Range
                        <select data-requires-auth="1"><option>ATM ± 10</option></select>
                    </label>
                    <button type="button" class="tt-icon-btn" data-requires-auth="1" title="Settings">⚙️</button>
                </div>

                <div class="tt-scanner-table-head">Butterfly Scanner (1:2:1 Call)</div>

                <div class="tt-table-wrap">
                    <table class="tt-scanner-table">
                        <thead>
                            <tr>
                                <th>Lower</th><th>Middle</th><th>Higher</th>
                                <th>Net Debit (₹)</th><th>Net Credit (₹)</th><th>POP (%)</th>
                                <th>Max Profit (₹)</th><th>Max Loss (₹)</th><th>Risk/Reward</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="tt-heat-5">
                                <td>24,000</td><td>24,100</td><td>24,200</td>
                                <td>32.45</td><td>12.15</td><td>68</td>
                                <td>167.55</td><td>32.45</td><td>1:5.16</td>
                            </tr>
                            <tr class="tt-heat-4">
                                <td>24,050</td><td>24,150</td><td>24,250</td>
                                <td>29.30</td><td>14.90</td><td>66</td>
                                <td>170.70</td><td>29.30</td><td>1:5.82</td>
                            </tr>
                            <tr class="tt-heat-4">
                                <td>24,100</td><td>24,200</td><td>24,300</td>
                                <td>26.10</td><td>17.90</td><td>64</td>
                                <td>173.90</td><td>26.10</td><td>1:6.66</td>
                            </tr>
                            <tr class="tt-row-selected" data-requires-auth="1" role="button" tabindex="0">
                                <td>24,150</td><td>24,250</td><td>24,350</td>
                                <td>23.75</td><td>20.25</td><td>63</td>
                                <td>176.25</td><td>23.75</td><td>1:7.42</td>
                            </tr>
                            <tr class="tt-heat-3">
                                <td>24,200</td><td>24,300</td><td>24,400</td>
                                <td>25.40</td><td>18.60</td><td>61</td>
                                <td>174.60</td><td>25.40</td><td>1:6.87</td>
                            </tr>
                            <tr class="tt-heat-2">
                                <td>24,250</td><td>24,350</td><td>24,450</td>
                                <td>28.60</td><td>15.40</td><td>59</td>
                                <td>171.40</td><td>28.60</td><td>1:5.99</td>
                            </tr>
                            <tr class="tt-heat-1">
                                <td>24,300</td><td>24,400</td><td>24,500</td>
                                <td>31.80</td><td>12.20</td><td>59</td>
                                <td>168.20</td><td>31.80</td><td>1:5.28</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="tt-selected-panel">
                    <div class="tt-selected-head">SELECTED BUTTERFLY — 24,150 CE / 24,250 CE / 24,350 CE</div>

                    <div class="tt-selected-legs">
                        <div class="tt-selected-leg">
                            <span class="tt-leg-tag tt-leg-tag-buy">BUY</span> 1 Lot 24,150 CE
                            <span class="tt-leg-price">₹78.40</span>
                        </div>
                        <div class="tt-selected-leg">
                            <span class="tt-leg-tag tt-leg-tag-sell">SELL</span> 2 Lots 24,250 CE
                            <span class="tt-leg-price">₹110.95</span>
                        </div>
                        <div class="tt-selected-leg">
                            <span class="tt-leg-tag tt-leg-tag-buy">BUY</span> 1 Lot 24,350 CE
                            <span class="tt-leg-price">₹65.90</span>
                        </div>
                    </div>

                    <div class="tt-selected-stats">
                        <span>Net Debit <b>₹23.75</b></span>
                        <span>Lot Size <b>75</b></span>
                    </div>
                </div>

                <div class="tt-payoff-panel">
                    <div class="tt-payoff-panel-head">
                        <span>PAYOFF CHART (At Expiry)</span>
                        <a href="{{ url('/tools/butterfly-scanner/open') }}#payoff" class="tt-view-payoff-btn" data-requires-auth="1">VIEW PAYOFF</a>
                    </div>

                    <svg viewBox="0 0 400 130" preserveAspectRatio="none" width="100%" height="120">
                        <defs>
                            <linearGradient id="ttMiniPayoffFill" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stop-color="#ff7a00" stop-opacity="0.35"/>
                                <stop offset="100%" stop-color="#ff7a00" stop-opacity="0"/>
                            </linearGradient>
                        </defs>
                        <line x1="0" y1="95" x2="400" y2="95" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
                        <line x1="200" y1="15" x2="200" y2="115" stroke="rgba(255,255,255,0.3)" stroke-dasharray="3 3"/>
                        <polygon points="0,105 90,110 200,20 310,110 400,105 400,120 0,120" fill="url(#ttMiniPayoffFill)"/>
                        <polyline points="0,105 90,110 200,20 310,110 400,105" fill="none" stroke="#ff9d40" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>

                    <div class="tt-payoff-legend">
                        <span><i class="tt-dot-orange"></i>Max Profit <b class="tt-up">₹176.25</b></span>
                        <span><i class="tt-dot-red"></i>Max Loss <b class="tt-down">₹23.75</b></span>
                        <span>Breakeven 1 <b>24,173</b></span>
                        <span>Breakeven 2 <b>24,327</b></span>
                    </div>
                </div>

            </div>
        </div>

        {{-- RIGHT: powerful features list — each row is now a real link --}}
        <div class="tt-tool-right">
            <h3 class="tt-features-title">Powerful Features</h3>

            <a href="{{ url('/tools/butterfly-scanner/open') }}" class="tt-feature-row" data-requires-auth="1">
                <span class="tt-feature-icon">🔎</span>
                <div>
                    <h4>Live Butterfly Scanning</h4>
                    <p>Scan thousands of butterfly combinations in real-time across multiple strikes.</p>
                </div>
            </a>
            <a href="{{ url('/tools/oc-heatmap') }}" class="tt-feature-row" data-requires-auth="1">
                <span class="tt-feature-icon">🗺️</span>
                <div>
                    <h4>Heatmap View</h4>
                    <p>Quickly identify low cost &amp; high probability setups with color heatmap.</p>
                </div>
            </a>
            <a href="{{ url('/tools/ratio-scanner') }}" class="tt-feature-row" data-requires-auth="1">
                <span class="tt-feature-icon">🔀</span>
                <div>
                    <h4>Multiple Ratios</h4>
                    <p>Scan 1:2:1, 1:3:2, 1:4:3 and more ratio-based butterflies.</p>
                </div>
            </a>
            <a href="{{ url('/tools/greeks-analyzer') }}" class="tt-feature-row" data-requires-auth="1">
                <span class="tt-feature-icon">Σ</span>
                <div>
                    <h4>Greeks &amp; IV Data</h4>
                    <p>Get full Greeks (Delta, Theta, Vega, Gamma) and IV insights for every strike.</p>
                </div>
            </a>
            <a href="{{ url('/tools/payoff-calculator') }}" class="tt-feature-row" data-requires-auth="1">
                <span class="tt-feature-icon">📈</span>
                <div>
                    <h4>Payoff Visualization</h4>
                    <p>Understand risk, reward and breakeven points with advanced payoff charts.</p>
                </div>
            </a>
            <a href="{{ url('/alerts') }}" class="tt-feature-row" data-requires-auth="1">
                <span class="tt-feature-icon">🔔</span>
                <div>
                    <h4>Alerts &amp; Monitoring</h4>
                    <p>Set price alerts &amp; monitor selected butterfly spreads in real-time.</p>
                </div>
            </a>
        </div>

    </div>
</section>

{{-- ============ UNDERSTANDING THE PAYOFF (big, beginner-friendly, labeled) ============ --}}
<section class="tt-payoff-explainer" id="payoff">
    <div class="container">
        <div class="tt-section-head">
            <span class="tt-eyebrow">Beginner friendly</span>
            <h2>Understanding the payoff</h2>
            <p class="tt-section-sub">The example below is the 24,150 / 24,250 / 24,350 Call Butterfly from the scanner above — read left to right.</p>
        </div>

        <div class="tt-payoff-explainer-grid">
            <div class="tt-big-payoff-chart">
                <svg viewBox="0 0 640 300" preserveAspectRatio="none" width="100%" height="300">
                    <defs>
                        <linearGradient id="ttBigPayoffFill" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%" stop-color="#ff7a00" stop-opacity="0.3"/>
                            <stop offset="100%" stop-color="#ff7a00" stop-opacity="0"/>
                        </linearGradient>
                    </defs>

                    {{-- zero line --}}
                    <line x1="0" y1="210" x2="640" y2="210" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>

                    {{-- breakeven guides --}}
                    <line x1="180" y1="40" x2="180" y2="260" stroke="rgba(52,209,122,0.35)" stroke-width="1.5" stroke-dasharray="4 4"/>
                    <line x1="460" y1="40" x2="460" y2="260" stroke="rgba(52,209,122,0.35)" stroke-width="1.5" stroke-dasharray="4 4"/>
                    {{-- center strike (max profit) guide --}}
                    <line x1="320" y1="40" x2="320" y2="260" stroke="rgba(255,255,255,0.25)" stroke-width="1.5" stroke-dasharray="3 3"/>

                    <polygon points="40,238 180,238 320,55 460,238 600,238 600,260 40,260" fill="url(#ttBigPayoffFill)"/>
                    <polyline points="40,238 180,238 320,55 460,238 600,238" fill="none" stroke="#ff7a00" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>

                    <circle cx="320" cy="55" r="6" fill="#ff9d40"/>
                    <circle cx="180" cy="238" r="5" fill="#34d17a"/>
                    <circle cx="460" cy="238" r="5" fill="#34d17a"/>

                    {{-- labels --}}
                    <text x="320" y="38" text-anchor="middle" fill="#ff9d40" font-size="13" font-weight="700">Max Profit ₹176.25</text>
                    <text x="180" y="278" text-anchor="middle" fill="#34d17a" font-size="12" font-weight="700">Breakeven 1: 24,173</text>
                    <text x="460" y="278" text-anchor="middle" fill="#34d17a" font-size="12" font-weight="700">Breakeven 2: 24,327</text>
                    <text x="40" y="252" text-anchor="start" fill="#ff6b6b" font-size="12" font-weight="700">Max Loss ₹23.75</text>
                    <text x="600" y="252" text-anchor="end" fill="#ff6b6b" font-size="12" font-weight="700">Max Loss ₹23.75</text>
                </svg>
            </div>

            <div class="tt-payoff-explanation">
                <div class="tt-explain-point">
                    <span class="tt-explain-dot" style="background:#ff9d40;"></span>
                    <div><b>Max Profit — ₹176.25</b><p>The most you can make, only if NIFTY closes exactly at 24,250 (the middle strike) on expiry day.</p></div>
                </div>
                <div class="tt-explain-point">
                    <span class="tt-explain-dot" style="background:#34d17a;"></span>
                    <div><b>Breakeven points — 24,173 &amp; 24,327</b><p>Between these two prices, you're in profit. Outside this range, you start losing money.</p></div>
                </div>
                <div class="tt-explain-point">
                    <span class="tt-explain-dot" style="background:#ff6b6b;"></span>
                    <div><b>Max Loss — ₹23.75</b><p>The most you can lose — capped, no matter how far the price moves away in either direction. This is what makes it a "defined-risk" trade.</p></div>
                </div>
                <div class="tt-explain-point">
                    <span class="tt-explain-dot" style="background:#9aa5b8;"></span>
                    <div><b>Net Debit — ₹23.75</b><p>What you pay upfront to enter this trade. This is also your maximum possible loss.</p></div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ============ PRACTICAL ROADMAP: how to actually trade this ============ --}}
<section class="tt-roadmap">
    <div class="container">
        <div class="tt-section-head">
            <span class="tt-eyebrow">Practical roadmap</span>
            <h2>How to actually trade a butterfly spread</h2>
            <p class="tt-section-sub">Real steps — from picking your view to exiting the trade — not just how to use the scanner.</p>
        </div>

        <div class="tt-roadmap-list">
            <div class="tt-roadmap-step">
                <span class="tt-roadmap-num">1</span>
                <div>
                    <h4>Form a view: is the market range-bound?</h4>
                    <p>Butterflies work best when you expect the underlying to stay near a specific price by expiry — not trend strongly in either direction.</p>
                </div>
            </div>
            <div class="tt-roadmap-step">
                <span class="tt-roadmap-num">2</span>
                <div>
                    <h4>Pick the underlying, expiry &amp; center strike</h4>
                    <p>Choose NIFTY/BANKNIFTY/SENSEX etc., an expiry date, and the strike you expect price to land near — this becomes your middle strike.</p>
                </div>
            </div>
            <div class="tt-roadmap-step">
                <span class="tt-roadmap-num">3</span>
                <div>
                    <h4>Set your wing width &amp; ratio</h4>
                    <p>Decide how far apart your lower and upper strikes are from the middle (e.g. ±100 points), and pick a ratio — 1:2:1 is the most common.</p>
                </div>
            </div>
            <div class="tt-roadmap-step">
                <span class="tt-roadmap-num">4</span>
                <div>
                    <h4>Check the net debit &amp; margin required</h4>
                    <p>Use the scanner to confirm what you'll pay to enter, your max profit/loss, and the margin your broker will block.</p>
                </div>
            </div>
            <div class="tt-roadmap-step">
                <span class="tt-roadmap-num">5</span>
                <div>
                    <h4>Place all 3 legs with your broker</h4>
                    <p>Buy 1 lot lower strike, Sell 2 lots middle strike, Buy 1 lot upper strike — same expiry, same option type (all calls or all puts). Most brokers let you place this as a single multi-leg order.</p>
                </div>
            </div>
            <div class="tt-roadmap-step">
                <span class="tt-roadmap-num">6</span>
                <div>
                    <h4>Monitor price vs. your breakeven range</h4>
                    <p>Track how close the underlying stays to your center strike. Set an alert at both breakeven points so you're notified if the trade starts moving against you.</p>
                </div>
            </div>
            <div class="tt-roadmap-step">
                <span class="tt-roadmap-num">7</span>
                <div>
                    <h4>Exit or let it expire</h4>
                    <p>You can close the position early if you've captured most of the profit or if price is running away from your range — or hold to expiry if price is still near the center strike.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ============ HEATMAP EXAMPLE + HOW IT WORKS + EXAMPLE SETUP ============ --}}
<section class="tt-tool-bottom">
    <div class="container tt-tool-bottom-grid">

        {{-- Heatmap example --}}
        <div class="tt-card-block">
            <h3>Butterfly Heatmap Example</h3>

            <div class="tt-heatmap-example">
                <div class="tt-heatmap-corner"></div>
                <div class="tt-heatmap-colhead">-10</div>
                <div class="tt-heatmap-colhead">-6</div>
                <div class="tt-heatmap-colhead">-2</div>
                <div class="tt-heatmap-colhead">ATM</div>
                <div class="tt-heatmap-colhead">+2</div>
                <div class="tt-heatmap-colhead">+6</div>
                <div class="tt-heatmap-colhead">+10</div>

                @php
                    $rows = ['-10', '-5', 'ATM', '+5', '+10'];
                    $grid = [
                        [1,2,3,4,3,2,1],
                        [2,3,4,5,4,3,2],
                        [3,4,5,5,5,4,3],
                        [2,3,4,5,4,3,2],
                        [1,2,3,4,3,2,1],
                    ];
                @endphp

                @foreach ($rows as $i => $rowLabel)
                    <div class="tt-heatmap-rowhead">{{ $rowLabel }}</div>
                    @foreach ($grid[$i] as $cell)
                        <div class="tt-heat-cell tt-heat-{{ $cell }}"></div>
                    @endforeach
                @endforeach
            </div>

            <div class="tt-heatmap-legend">
                <span>High Cost</span>
                <span class="tt-heatmap-legend-bar"></span>
                <span>Low Cost</span>
            </div>
        </div>

        {{-- How it works + benefits --}}
        <div class="tt-card-block">
            <h3>How The Scanner Works</h3>

            <div class="tt-howitworks-steps">
                <div class="tt-hiw-step">
                    <span class="tt-hiw-num">1</span>
                    <p>Select Market &amp; Expiry</p>
                </div>
                <span class="tt-hiw-arrow">&rarr;</span>
                <div class="tt-hiw-step">
                    <span class="tt-hiw-num">2</span>
                    <p>Choose Strategy &amp; Ratio</p>
                </div>
                <span class="tt-hiw-arrow">&rarr;</span>
                <div class="tt-hiw-step">
                    <span class="tt-hiw-num">3</span>
                    <p>Set Strike Range</p>
                </div>
                <span class="tt-hiw-arrow">&rarr;</span>
                <div class="tt-hiw-step">
                    <span class="tt-hiw-num">4</span>
                    <p>Scan &amp; Analyze</p>
                </div>
                <span class="tt-hiw-arrow">&rarr;</span>
                <div class="tt-hiw-step">
                    <span class="tt-hiw-num">5</span>
                    <p>Compare, Mark &amp; Monitor</p>
                </div>
            </div>

            <div class="tt-benefits-grid">
                <div class="tt-benefit">
                    <span>⏱️</span>
                    <h5>Save Time</h5>
                    <p>No manual calculation across strikes</p>
                </div>
                <div class="tt-benefit">
                    <span>📊</span>
                    <h5>Better Decisions</h5>
                    <p>Compare multiple setups in seconds</p>
                </div>
                <div class="tt-benefit">
                    <span>🛡️</span>
                    <h5>Defined Risk</h5>
                    <p>Know your max profit, max loss &amp; breakevens</p>
                </div>
                <div class="tt-benefit">
                    <span>🎯</span>
                    <h5>Trade Smarter</h5>
                    <p>Data driven analysis for better strategies</p>
                </div>
            </div>
        </div>

        {{-- Example setup --}}
        <div class="tt-card-block">
            <h3>Example Butterfly Setup</h3>
            <p class="tt-example-sub">NIFTY 24,150 / 24,250 / 24,350 CE (1:2:1)</p>

            <svg viewBox="0 0 300 90" preserveAspectRatio="none" width="100%" height="80">
                <defs>
                    <linearGradient id="ttExamplePayoffFill" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#ff7a00" stop-opacity="0.3"/>
                        <stop offset="100%" stop-color="#ff7a00" stop-opacity="0"/>
                    </linearGradient>
                </defs>
                <polygon points="0,72 70,76 150,15 230,76 300,72 300,90 0,90" fill="url(#ttExamplePayoffFill)"/>
                <polyline points="0,72 70,76 150,15 230,76 300,72" fill="none" stroke="#ff7a00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>

            <div class="tt-example-stats">
                <div><span>Max Profit</span><b class="tt-up">₹176.25</b></div>
                <div><span>Max Loss</span><b class="tt-down">₹23.75</b></div>
                <div><span>Breakeven 1</span><b>24,173</b></div>
                <div><span>Breakeven 2</span><b>24,327</b></div>
                <div><span>Net Debit</span><b>₹23.75</b></div>
                <div><span>POP</span><b>63%</b></div>
                <div><span>Risk/Reward</span><b>1:7.42</b></div>
                <div><span>Margin Req.</span><b>As per broker</b></div>
            </div>
        </div>

    </div>
</section>

{{-- ============ SUPPORTED MARKETS ============ --}}
<section class="tt-tool-markets">
    <div class="container tt-markets-row">
        <span class="tt-markets-label">Supported Markets</span>
        <span class="tt-market-pill">📈 NIFTY</span>
        <span class="tt-market-pill">🏦 BANKNIFTY</span>
        <span class="tt-market-pill">📉 SENSEX</span>
        <span class="tt-market-pill">💠 FINNIFTY</span>
        <span class="tt-market-pill">📐 MIDCPNIFTY</span>
        <span class="tt-market-pill">🏛️ BANKEX</span>
        <span class="tt-market-pill">🟡 MCX — Gold, Silver, Crude Oil, Natural Gas &amp; more</span>
    </div>
</section>

{{-- ============ FINAL CTA — single login-gated "Try It Free Once" button ============ --}}
<section class="tt-tool-cta">
    <div class="container tt-tool-cta-inner">
        <a href="{{ url('/tools/butterfly-scanner/open') }}" class="tt-try-free-btn" data-requires-auth="1">
            Try It Free Once <span>&rarr;</span>
        </a>
        <p>Find the best butterfly spread setups and elevate your trading.</p>
    </div>
</section>

@endsection

@push('styles')
<style>
    .tt-tool-top .container,
    .tt-tool-bottom .container,
    .tt-tool-markets .container,
    .tt-tool-cta .container,
    .tt-payoff-explainer .container,
    .tt-roadmap .container {
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .tt-badge {
        display: inline-flex; align-items: center; gap: 8px;
        background: rgba(255, 122, 0, 0.1); border: 1px solid rgba(255, 122, 0, 0.3); color: #ff9d40;
        font-size: 11.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px; margin-bottom: 16px;
    }
    .tt-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff7a00; display: inline-block; }

    /* ================= TOP SECTION (no hero banner, straight in) ================= */
    .tt-tool-top { background: #0d1b2e; padding: 34px 0 30px; border-bottom: 1px solid rgba(255,255,255,0.06); }

    .tt-tool-top-grid {
        display: grid;
        grid-template-columns: 0.85fr 1.35fr 0.8fr;
        gap: 22px;
        align-items: start;
    }

    .tt-tool-title {
        font-size: 30px; font-weight: 900; line-height: 1.15; color: #ffffff;
        text-transform: uppercase; margin: 0 0 10px; letter-spacing: 0.3px;
    }
    .tt-tool-title .tt-accent { color: #ff9d40; }

    .tt-tool-tagline { font-size: 14.5px; font-weight: 700; color: #ff9d40; margin: 0 0 10px; }
    .tt-tool-desc { font-size: 13.5px; color: #9aa5b8; line-height: 1.55; margin: 0 0 20px; }

    .tt-quick-icons {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; margin-bottom: 20px;
    }
    .tt-quick-icon {
        display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
        text-decoration: none; cursor: pointer; padding: 4px; border-radius: 10px; transition: background 0.2s ease;
    }
    .tt-quick-icon:hover { background: rgba(255, 122, 0, 0.06); }
    .tt-quick-icon span {
        width: 40px; height: 40px; border-radius: 50%; background: #101f38; border: 1px solid rgba(255,255,255,0.08);
        display: flex; align-items: center; justify-content: center; font-size: 16px; color: #ff9d40;
        transition: border-color 0.2s ease;
    }
    .tt-quick-icon:hover span { border-color: rgba(255, 122, 0, 0.5); }
    .tt-quick-icon p { margin: 0; font-size: 10.5px; color: #9aa5b8; font-weight: 600; line-height: 1.3; }

    .tt-whatis-card {
        background: #101f38; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 18px 18px 16px;
    }
    .tt-whatis-card h3 { font-size: 14px; color: #ffffff; margin: 0 0 8px; }
    .tt-whatis-card > p { font-size: 12.5px; color: #9aa5b8; line-height: 1.55; margin: 0 0 14px; }

    .tt-whatis-legs { display: flex; justify-content: space-between; gap: 8px; }
    .tt-whatis-leg { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
    .tt-leg-dot { width: 10px; height: 10px; border-radius: 50%; }
    .tt-leg-buy { background: #34d17a; }
    .tt-leg-sell { background: #ff6b6b; }
    .tt-leg-label { font-size: 11px; font-weight: 800; color: #e8ecf3; }
    .tt-leg-sub { font-size: 9.5px; color: #6b7690; text-align: center; }

    /* ================= SCANNER MOCK ================= */
    .tt-scanner-mock {
        background: #0a1425; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
        padding: 0 0 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); overflow: hidden;
    }

    .tt-scanner-titlebar { display: flex; gap: 6px; padding: 12px 16px; background: #101f38; }
    .tt-dot { width: 9px; height: 9px; border-radius: 50%; }
    .tt-dot-red { background: #ff6b6b; }
    .tt-dot-yellow { background: #ffd166; }
    .tt-dot-green { background: #34d17a; }

    .tt-scanner-controls {
        display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; flex-wrap: wrap;
    }
    .tt-scanner-select {
        background: #101f38; border: 1px solid rgba(255,255,255,0.1); color: #e8ecf3;
        font-size: 12px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
    }
    .tt-scanner-price { font-size: 13px; font-weight: 700; color: #e8ecf3; }
    .tt-scan-btn {
        margin-left: auto; background: #ff7a00; color: #ffffff; font-weight: 800; font-size: 12.5px;
        border: none; padding: 8px 20px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease;
    }
    .tt-scan-btn:hover { background: #ff9d40; transform: translateY(-1px); }

    .tt-scanner-filters {
        display: flex; align-items: flex-end; gap: 14px; padding: 0 16px 14px; flex-wrap: wrap;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .tt-scanner-filters label {
        display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: #6b7690; font-weight: 600;
    }
    .tt-scanner-filters select {
        background: #101f38; border: 1px solid rgba(255,255,255,0.1); color: #e8ecf3;
        font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
    }
    .tt-icon-btn {
        background: #101f38; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
        width: 30px; height: 30px; cursor: pointer; font-size: 13px;
    }

    .tt-scanner-table-head {
        padding: 12px 16px 8px; font-size: 12px; font-weight: 700; color: #ff9d40; text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .tt-table-wrap { overflow-x: auto; padding: 0 16px; }
    .tt-scanner-table { width: 100%; border-collapse: collapse; font-size: 11.5px; white-space: nowrap; }
    .tt-scanner-table th {
        text-align: left; font-size: 9.5px; text-transform: uppercase; color: #6b7690; padding: 6px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .tt-scanner-table td { padding: 8px; color: #e8ecf3; border-bottom: 1px solid rgba(255,255,255,0.04); }

    /* heat scale: 5 = cheapest/best (green) down to 1 = priciest (orange) —
       same palette family as the rest of the site's heatmaps */
    .tt-scanner-table tr.tt-heat-5 td { background: rgba(52, 209, 122, 0.18); }
    .tt-scanner-table tr.tt-heat-4 td { background: rgba(52, 209, 122, 0.09); }
    .tt-scanner-table tr.tt-heat-3 td { background: rgba(255, 255, 255, 0.03); }
    .tt-scanner-table tr.tt-heat-2 td { background: rgba(255, 122, 0, 0.08); }
    .tt-scanner-table tr.tt-heat-1 td { background: rgba(255, 122, 0, 0.16); }

    .tt-scanner-table tr.tt-row-selected { cursor: pointer; }
    .tt-scanner-table tr.tt-row-selected td {
        background: rgba(255, 122, 0, 0.26) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 122, 0, 0.6);
        font-weight: 700;
    }

    .tt-selected-panel {
        margin: 14px 16px 0; background: #101f38; border: 1px solid rgba(255,255,255,0.07);
        border-radius: 12px; padding: 14px 16px;
    }
    .tt-selected-head { font-size: 11px; font-weight: 700; color: #ff9d40; margin-bottom: 10px; letter-spacing: 0.3px; }
    .tt-selected-legs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
    .tt-selected-leg {
        display: flex; align-items: center; gap: 8px; font-size: 12px; color: #e8ecf3;
    }
    .tt-leg-price { margin-left: auto; color: #9aa5b8; font-size: 11.5px; }
    .tt-leg-tag {
        font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.3px;
    }
    .tt-leg-tag-buy { background: rgba(52, 209, 122, 0.16); color: #34d17a; }
    .tt-leg-tag-sell { background: rgba(255, 107, 107, 0.16); color: #ff6b6b; }
    .tt-selected-stats { display: flex; gap: 18px; font-size: 12px; color: #9aa5b8; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; }
    .tt-selected-stats b { color: #e8ecf3; }

    .tt-payoff-panel { margin: 14px 16px 0; background: #101f38; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 14px 16px; }
    .tt-payoff-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .tt-payoff-panel-head span { font-size: 11px; font-weight: 700; color: #ff9d40; letter-spacing: 0.3px; }
    .tt-view-payoff-btn {
        background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #e8ecf3;
        font-size: 10.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; cursor: pointer;
        transition: all 0.2s ease; text-decoration: none;
    }
    .tt-view-payoff-btn:hover { border-color: #ff7a00; color: #ff9d40; }

    .tt-payoff-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 10.5px; color: #9aa5b8; }
    .tt-payoff-legend b { color: #e8ecf3; }
    .tt-dot-orange, .tt-dot-red { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
    .tt-dot-orange { background: #ff7a00; }
    .tt-dot-red { background: #ff6b6b; }
    .tt-up { color: #34d17a; }
    .tt-down { color: #ff6b6b; }

    /* ================= RIGHT: FEATURES ================= */
    .tt-features-title { font-size: 16px; font-weight: 800; color: #ff9d40; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.3px; }
    .tt-feature-row {
        display: flex; gap: 12px; margin-bottom: 14px; text-decoration: none; padding: 6px; margin-left: -6px;
        border-radius: 10px; transition: background 0.2s ease;
    }
    .tt-feature-row:hover { background: rgba(255, 122, 0, 0.06); }
    .tt-feature-icon {
        width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: #101f38;
        border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
        font-size: 15px; color: #ff9d40;
    }
    .tt-feature-row h4 { margin: 0 0 3px; font-size: 13px; color: #ffffff; }
    .tt-feature-row p { margin: 0; font-size: 11.5px; color: #9aa5b8; line-height: 1.5; }

    /* ================= PAYOFF EXPLAINER (big, labeled) ================= */
    .tt-payoff-explainer { background: #0a1425; padding: 44px 0; border-top: 1px solid rgba(255,255,255,0.05); }
    .tt-section-head { text-align: center; max-width: 620px; margin: 0 auto 30px; }
    .tt-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ff9d40; margin-bottom: 8px; }
    .tt-section-head h2 { font-size: 26px; font-weight: 700; color: #ffffff; margin: 0 0 8px; }
    .tt-section-sub { font-size: 13px; color: #9aa5b8; margin: 0; }

    .tt-payoff-explainer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; }
    .tt-big-payoff-chart { background: #101f38; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 10px; }

    .tt-payoff-explanation { display: flex; flex-direction: column; gap: 18px; }
    .tt-explain-point { display: flex; gap: 12px; align-items: flex-start; }
    .tt-explain-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
    .tt-explain-point b { font-size: 14px; color: #ffffff; }
    .tt-explain-point p { margin: 4px 0 0; font-size: 12.5px; color: #9aa5b8; line-height: 1.55; }

    /* ================= PRACTICAL ROADMAP ================= */
    .tt-roadmap { background: #0d1b2e; padding: 44px 0; border-top: 1px solid rgba(255,255,255,0.05); }
    .tt-roadmap-list { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin: 0 auto; }
    .tt-roadmap-step {
        display: flex; gap: 16px; background: #101f38; border: 1px solid rgba(255,255,255,0.07);
        border-radius: 14px; padding: 16px 18px; transition: border-color 0.2s ease;
    }
    .tt-roadmap-step:hover { border-color: rgba(255,122,0,0.3); }
    .tt-roadmap-num {
        width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,122,0,0.14);
        color: #ff9d40; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
    }
    .tt-roadmap-step h4 { margin: 0 0 4px; font-size: 14.5px; color: #ffffff; }
    .tt-roadmap-step p { margin: 0; font-size: 12.5px; color: #9aa5b8; line-height: 1.55; }

    /* ================= BOTTOM 3-COLUMN ROW ================= */
    .tt-tool-bottom { background: #0a1425; padding: 34px 0; border-top: 1px solid rgba(255,255,255,0.05); }
    .tt-tool-bottom-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 20px; align-items: stretch; }

    .tt-card-block {
        background: #101f38; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 20px 20px 18px;
    }
    .tt-card-block h3 { font-size: 14.5px; font-weight: 800; color: #ff9d40; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.3px; }

    /* heatmap example grid */
    .tt-heatmap-example {
        display: grid; grid-template-columns: 34px repeat(7, 1fr); gap: 4px; align-items: center; margin-bottom: 10px;
    }
    .tt-heatmap-corner { }
    .tt-heatmap-colhead, .tt-heatmap-rowhead { font-size: 9px; color: #6b7690; text-align: center; }
    .tt-heat-cell { height: 20px; border-radius: 4px; }
    .tt-heat-1 { background: rgba(255, 122, 0, 0.85); }
    .tt-heat-2 { background: rgba(255, 122, 0, 0.5); }
    .tt-heat-3 { background: rgba(255, 255, 255, 0.12); }
    .tt-heat-4 { background: rgba(52, 209, 122, 0.5); }
    .tt-heat-5 { background: rgba(52, 209, 122, 0.85); }

    .tt-heatmap-legend { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #9aa5b8; }
    .tt-heatmap-legend-bar {
        flex: 1; height: 8px; border-radius: 4px;
        background: linear-gradient(90deg, #ff7a00, rgba(255,255,255,0.12), #34d17a);
    }

    /* how it works */
    .tt-howitworks-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
    .tt-hiw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; text-align: center; }
    .tt-hiw-num {
        width: 30px; height: 30px; border-radius: 50%; background: rgba(255,122,0,0.14); color: #ff9d40;
        display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
    }
    .tt-hiw-step p { margin: 0; font-size: 10px; color: #9aa5b8; font-weight: 600; line-height: 1.3; }
    .tt-hiw-arrow { color: #3a4966; font-size: 14px; }

    .tt-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tt-benefit { background: #0a1425; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px; }
    .tt-benefit span { font-size: 16px; }
    .tt-benefit h5 { margin: 6px 0 3px; font-size: 12px; color: #ffffff; }
    .tt-benefit p { margin: 0; font-size: 10.5px; color: #9aa5b8; line-height: 1.4; }

    /* example setup */
    .tt-example-sub { font-size: 11.5px; color: #9aa5b8; margin: -8px 0 14px; }
    .tt-example-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin-top: 14px; }
    .tt-example-stats div { display: flex; flex-direction: column; gap: 2px; }
    .tt-example-stats span { font-size: 10px; color: #6b7690; }
    .tt-example-stats b { font-size: 13px; color: #e8ecf3; }

    /* ================= SUPPORTED MARKETS ================= */
    .tt-tool-markets { background: #0d1b2e; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.05); }
    .tt-markets-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; }
    .tt-markets-label { font-size: 11px; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 6px; }
    .tt-market-pill {
        background: rgba(255,122,0,0.08); border: 1px solid rgba(255,122,0,0.25); color: #ff9d40;
        font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
    }

    /* ================= FINAL CTA ================= */
    .tt-tool-cta { background: #0a1425; padding: 40px 0 56px; text-align: center; }
    .tt-try-free-btn {
        display: inline-flex; align-items: center; gap: 8px; background: #ff7a00; color: #ffffff;
        font-weight: 700; font-size: 16px; padding: 15px 34px; border-radius: 30px; text-decoration: none;
        box-shadow: 0 8px 24px rgba(255, 122, 0, 0.35); transition: all 0.2s ease;
    }
    .tt-try-free-btn:hover { background: #ff9d40; transform: translateY(-2px); color: #0d1b2e; }
    .tt-tool-cta p { margin: 14px 0 0; font-size: 13px; color: #9aa5b8; }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1200px) {
        .tt-tool-top-grid { grid-template-columns: 1fr 1fr; }
        .tt-tool-right { grid-column: 1 / -1; }
    }

    @media (max-width: 900px) {
        .tt-tool-top-grid { grid-template-columns: 1fr; }
        .tt-tool-bottom-grid { grid-template-columns: 1fr; }
        .tt-payoff-explainer-grid { grid-template-columns: 1fr; }
        .tt-heatmap-example { grid-template-columns: 28px repeat(7, 1fr); }
    }

    @media (max-width: 576px) {
        .tt-tool-title { font-size: 24px; }
        .tt-quick-icons { grid-template-columns: repeat(2, 1fr); }
        .tt-scanner-controls, .tt-scanner-filters { gap: 8px; }
        .tt-scan-btn { margin-left: 0; }
    }
</style>
@endpush

@push('scripts')
<script>
    window.ttAuthed = @json(auth()->check());
    window.ttLoginUrl = "{{ url('/login') }}";
</script>
<script>
(function () {
    /* Login gate — same mechanic used across the rest of the site.
       Any element (link, button, table row) marked data-requires-auth="1"
       sends a logged-out visitor to /login?redirect=<intended-page>. */
    document.querySelectorAll('[data-requires-auth="1"]').forEach(function (el) {
        el.addEventListener('click', function (e) {
            if (window.ttAuthed) return; // already logged in — let it behave normally

            e.preventDefault();
            const target = el.getAttribute('href') || window.location.pathname;
            window.location.href = window.ttLoginUrl + '?redirect=' + encodeURIComponent(target);
        });
    });
})();
</script>
@endpush