@extends('layout.master')
@section('content')

<style>
    .hero-section {
        text-align: center;
        padding: 100px 20px;
        background: radial-gradient(circle at 10% 20%, rgba(224, 86, 253, 0.07) 0%, rgba(79, 70, 229, 0.05) 50%, rgba(255, 255, 255, 1) 100%);
        border-radius: 32px;
        margin-bottom: 50px;
        border: 1px solid rgba(224, 86, 253, 0.12);
        position: relative;
        overflow: hidden;
    }
    .blob-1 {
        position: absolute;
        width: 350px;
        height: 350px;
        background: rgba(224, 86, 253, 0.14);
        border-radius: 50%;
        top: -120px;
        left: -120px;
        filter: blur(90px);
        z-index: 0;
        pointer-events: none;
    }
    .blob-2 {
        position: absolute;
        width: 350px;
        height: 350px;
        background: rgba(79, 70, 229, 0.12);
        border-radius: 50%;
        bottom: -120px;
        right: -120px;
        filter: blur(90px);
        z-index: 0;
        pointer-events: none;
    }
    .badge-ver {
        display: inline-block;
        background: linear-gradient(135deg, rgba(224, 86, 253, 0.15), rgba(79, 70, 229, 0.15));
        color: #be2edd;
        padding: 6px 18px;
        border-radius: 30px;
        font-weight: 800;
        font-size: 11.5px;
        text-transform: uppercase;
        margin-bottom: 25px;
        letter-spacing: 1px;
        border: 1px solid rgba(224, 86, 253, 0.3);
        position: relative;
        z-index: 1;
    }
    .hero-title {
        font-size: 52px;
        font-weight: 900;
        color: #0f172a;
        line-height: 1.15;
        margin-bottom: 20px;
        letter-spacing: -1.5px;
        position: relative;
        z-index: 1;
    }
    .hero-subtitle {
        font-size: 19px;
        color: #475569;
        line-height: 1.65;
        max-width: 720px;
        margin: 0 auto 40px auto;
        position: relative;
        z-index: 1;
    }
    .hero-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
        position: relative;
        z-index: 1;
    }
    .btn-premium {
        padding: 14px 40px;
        border-radius: 30px;
        font-weight: 700;
        font-size: 15.5px;
        text-decoration: none;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-primary {
        background: linear-gradient(135deg, #be2edd, #e056fd);
        color: #fff;
        border: none;
        box-shadow: 0 10px 25px rgba(224, 86, 253, 0.3);
    }
    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(224, 86, 253, 0.45);
    }
    .btn-outline {
        border: 1.5px solid #cbd5e1;
        color: #334155;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    }
    .btn-outline:hover {
        background: #f8fafc;
        border-color: #94a3b8;
        transform: translateY(-2px);
    }
    .features-section {
        margin-bottom: 70px;
    }
    .features-header {
        text-align: center;
        margin-bottom: 50px;
    }
    .features-title {
        font-size: 34px;
        font-weight: 900;
        color: #0f172a;
        margin-bottom: 12px;
        letter-spacing: -0.5px;
    }
    .features-subtitle {
        font-size: 16px;
        color: #64748b;
        max-width: 620px;
        margin: 0 auto;
    }
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 25px;
    }
    .feature-card {
        background: #fff;
        padding: 32px;
        border-radius: 24px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }
    .feature-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px var(--hover-shadow);
        border-color: var(--hover-border);
    }
    .feat-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 22px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .feature-card:hover .feat-icon {
        transform: scale(1.15) rotate(8deg);
        box-shadow: 0 8px 20px var(--hover-shadow);
    }
    .why-section {
        background: linear-gradient(135deg, rgba(224, 86, 253, 0.03) 0%, rgba(79, 70, 229, 0.03) 100%);
        padding: 60px 40px;
        border-radius: 30px;
        border: 1px solid rgba(224, 86, 253, 0.08);
    }
    .why-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 620px;
        margin: 0 auto;
    }
    .why-item {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    .why-bullet {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        flex-shrink: 0;
        font-size: 16px;
    }
    @keyframes blink {
        50% { opacity: 0; }
    }
    @media (max-width: 768px) {

        .hero-section {
            padding: 50px 16px;
            margin-bottom: 30px;
        }
        .hero-title {
            font-size: 32px;
            letter-spacing: -0.8px;
            line-height: 1.2;
        }
        .hero-subtitle {
            font-size: 15px;
            margin-bottom: 30px;
        }
        .hero-actions {
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }
        .hero-actions .btn-premium {
            width: 100%;
            max-width: 280px;
            justify-content: center;
            padding: 12px 24px;
            font-size: 14.5px;
        }
        .features-header {
            margin-bottom: 30px;
        }
        .features-title {
            font-size: 26px;
        }
        .features-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .feature-card {
            padding: 24px;
        }
        .why-section {
            padding: 40px 16px;
        }
        .why-bullet {
            width: 38px;
            height: 38px;
            font-size: 14px;
        }
        .why-item {
            gap: 12px;
        }
    }
</style>


<!-- Hero Section -->
<div class="hero-section">
    <div class="blob-1"></div>
    <div class="blob-2"></div>
    <span class="badge-ver">{{ app_version }}</span>

    <h1 class="hero-title">
        {{ "স্বাগতম PyFlow ফ্রেমওয়ার্কে" if current_lang == 'bn' else "Welcome to PyFlow Framework" }}
    </h1>
    <p class="hero-subtitle">
        {{ __('welcome_subtitle') }}
    </p>
    <div class="hero-actions">
        <a href="/login" class="btn-premium btn-primary">
            {{ __('get_started') }} <i class="fas fa-arrow-right"></i>
        </a>
        <a href="/docs" class="btn-premium btn-outline">
            {{ __('docs') }}
        </a>
    </div>
</div>

<!-- Interactive Features Live Playground (New in v3.0) -->
<div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(224, 86, 253, 0.15); border-radius: 32px; padding: 40px; margin-bottom: 70px; box-shadow: 0 20px 50px rgba(79, 70, 229, 0.05); position: relative; overflow: hidden;">
    <div style="position: absolute; width: 250px; height: 250px; background: rgba(79, 70, 229, 0.05); border-radius: 50%; top: -80px; right: -80px; filter: blur(70px); pointer-events: none;"></div>
    
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 20px;">
        <div style="text-align: left;">
            <span class="badge-ver" style="background: rgba(224, 86, 253, 0.12); color: #be2edd; border: 1px solid rgba(224, 86, 253, 0.25); margin-bottom: 8px;">LIVE DEMO</span>
            <h2 style="font-size: 26px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.5px;">
                {{ "ইন্টারেক্টিভ ফিচার প্লেগ্রাউন্ড" if current_lang == 'bn' else "Interactive Features Playground" }}
            </h2>
            <p style="font-size: 14px; color: #64748b; margin: 4px 0 0 0;">
                {{ "ডাটাবেস কানেকশন এবং ডেসিমেক মানি-টু-ওয়ার্ডস ক্যালকুলেটরের লাইভ এপিআই টেস্ট।" if current_lang == 'bn' else "Live API test of the database pool and decimal money-to-words calculator." }}
            </p>
        </div>
        
        <!-- Live Database Health Indicator -->
        <div id="db-health-card" style="background: #0f172a; padding: 12px 24px; border-radius: 20px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 8px 20px rgba(0,0,0,0.15);">
            <div style="position: relative; width: 10px; height: 10px;">
                <span style="position: absolute; width: 10px; height: 10px; background: #22c55e; border-radius: 50%;"></span>
                <span style="position: absolute; width: 10px; height: 10px; background: #22c55e; border-radius: 50%; animate: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75;" class="pulse-indicator"></span>
            </div>
            <div style="text-align: left;">
                <div style="font-size: 10px; color: #94a3b8; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px;">Database Status</div>
                <div id="db-status-text" style="font-size: 13.5px; font-weight: 700; color: #38bdf8; font-family: monospace;">Connecting...</div>
            </div>
        </div>
    </div>

    <!-- Live Money to Words Form Layout -->
    <div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start;">
        <!-- Form Fields -->
        <div style="flex: 1.2; min-width: 320px; text-align: left;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                <div>
                    <label style="font-size: 13px; font-weight: 700; color: #475569; display: block; margin-bottom: 6px;">{{ "আর্থিক পরিমাণ (Amount)" if current_lang == 'bn' else "Amount" }}</label>
                    <input type="text" id="live-amount" value="125000.75" style="width: 100%; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #cbd5e1; outline: none; transition: border-color 0.2s; font-weight: 600; font-size: 15px;" placeholder="125000.75" oninput="runLiveConverter()">
                </div>
                <div>
                    <label style="font-size: 13px; font-weight: 700; color: #475569; display: block; margin-bottom: 6px;">{{ "মুদ্রা (Currency)" if current_lang == 'bn' else "Currency" }}</label>
                    <select id="live-currency" style="width: 100%; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #cbd5e1; outline: none; background: #fff; font-weight: 600; font-size: 15px; cursor: pointer;" onchange="runLiveConverter()">
                        <option value="BDT">BDT (৳)</option>
                        <option value="USD">USD ($)</option>
                        <option value="EUR">EUR (€)</option>
                        <option value="INR">INR (₹)</option>
                    </select>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                <div>
                    <label style="font-size: 13px; font-weight: 700; color: #475569; display: block; margin-bottom: 6px;">{{ "অনুবাদ ভাষা (Language)" if current_lang == 'bn' else "Translate Language" }}</label>
                    <select id="live-lang" style="width: 100%; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #cbd5e1; outline: none; background: #fff; font-weight: 600; font-size: 15px; cursor: pointer;" onchange="toggleStyleField(); runLiveConverter()">
                        <option value="bn">{{ "বাংলা (Bangla)" if current_lang == 'bn' else "Bangla" }}</option>
                        <option value="en">{{ "ইংরেজি (English)" if current_lang == 'bn' else "English" }}</option>
                    </select>
                </div>
                <div id="english-style-container" style="display: none;">
                    <label style="font-size: 13px; font-weight: 700; color: #475569; display: block; margin-bottom: 6px;">{{ "ইংরেজি ফরম্যাট (English Style)" if current_lang == 'bn' else "English Format Style" }}</label>
                    <select id="live-style" style="width: 100%; padding: 12px 16px; border-radius: 12px; border: 1.5px solid #cbd5e1; outline: none; background: #fff; font-weight: 600; font-size: 15px; cursor: pointer;" onchange="runLiveConverter()">
                        <option value="indian">{{ "ভারতীয়/দেশীয় (Lakh/Crore)" if current_lang == 'bn' else "South Asian (Lakh/Crore)" }}</option>
                        <option value="international">{{ "আন্তর্জাতিক (Million/Billion)" if current_lang == 'bn' else "International (Million/Billion)" }}</option>
                    </select>
                </div>
            </div>
            
            <div style="display: flex; gap: 10px;">
                <button onclick="runLiveConverter()" class="btn-premium btn-primary" style="padding: 10px 24px; font-size: 13.5px; border-radius: 12px; border: none; cursor: pointer;">
                    <i class="fas fa-arrows-rotate"></i> {{ "অনুবাদ করুন" if current_lang == 'bn' else "Convert Now" }}
                </button>
                <button onclick="runTransactionRollbackTest()" class="btn-premium btn-outline" style="padding: 10px 24px; font-size: 13.5px; border-radius: 12px; border: 1.5px solid #cbd5e1; cursor: pointer;">
                    <i class="fas fa-shield-halved"></i> {{ "ট্রানজেকশন টেস্ট" if current_lang == 'bn' else "Test Transaction" }}
                </button>
            </div>
        </div>

        <!-- Live Conversion Output Panel (Glassmorphism design) -->
        <div style="flex: 1; min-width: 300px; background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), rgba(224, 86, 253, 0.03)); border: 1px solid rgba(224, 86, 253, 0.12); border-radius: 20px; padding: 24px; text-align: left; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between;">
            <div>
                <h4 style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #be2edd; font-weight: 800; margin: 0 0 15px 0;">Live Conversion Output</h4>
                <div style="margin-bottom: 20px;">
                    <div style="font-size: 12px; color: #64748b; font-weight: 700; margin-bottom: 4px;">Formatted Amount</div>
                    <div id="out-formatted" style="font-size: 28px; font-weight: 900; color: #0f172a; font-family: system-ui, -apple-system; word-break: break-all;">৳ 0.00</div>
                </div>
                <div>
                    <div style="font-size: 12px; color: #64748b; font-weight: 700; margin-bottom: 4px;">Amount in Words (কথায় রূপান্তর)</div>
                    <div id="out-words" style="font-size: 15.5px; font-weight: 700; color: #334155; line-height: 1.6; background: #fff; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.04); min-height: 70px;">...</div>
                </div>
            </div>
            
            <div id="out-status-bar" style="margin-top: 15px; font-size: 11px; color: #94a3b8; font-family: monospace; border-top: 1px solid rgba(0,0,0,0.03); padding-top: 12px; display: flex; justify-content: space-between;">
                <span>Sub-units: <strong id="out-subunits" style="color: #64748b;">0</strong></span>
                <span>API latency: <strong id="out-latency" style="color: #64748b;">0ms</strong></span>
            </div>
        </div>
    </div>
    
    <!-- Modal popup for live Transaction rollback testing -->
    <div id="tx-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); z-index: 9999; align-items: center; justify-content: center;">
        <div style="background: #fff; padding: 30px; border-radius: 24px; max-width: 480px; width: 90%; text-align: center; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 20px 40px rgba(0,0,0,0.15);">
            <div style="width: 50px; height: 50px; background: rgba(79, 70, 229, 0.08); color: #4f46e5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 15px auto;">
                <i class="fas fa-shield-halved"></i>
            </div>
            <h3 style="font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 8px;">Atomic Transaction Test</h3>
            <p style="font-size: 13.5px; color: #64748b; line-height: 1.5; margin-bottom: 20px;">
                এই উইজেটটি ব্যাকএন্ডের <code>@atomic</code> ডেটাবেস ট্রানজেকশনকে লাইভ টেস্ট করে। 
                আপনি ট্রানজেকশন সফল করতে চান নাকি ইচ্ছাকৃতভাবে এরর ঘটিয়ে রোলব্যাক পরীক্ষা করতে চান?
            </p>
            <div style="background: #f8fafc; border-radius: 12px; padding: 12px; margin-bottom: 20px; font-size: 13px; text-align: left; font-family: monospace;">
                <div style="margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                    <input type="checkbox" id="tx-should-fail" style="cursor: pointer;">
                    <label for="tx-should-fail" style="font-weight: 700; color: #334155; cursor: pointer;">ইচ্ছাকৃত Error তৈরি করুন (Rollback Test)</label>
                </div>
            </div>
            <div style="display: flex; gap: 10px; justify-content: center;">
                <button onclick="executeTransactionTestAPI()" class="btn-premium btn-primary" style="padding: 10px 20px; font-size: 13px; border-radius: 10px; border: none; cursor: pointer;">Execute Tx</button>
                <button onclick="closeTxModal()" class="btn-premium btn-outline" style="padding: 10px 20px; font-size: 13px; border-radius: 10px; border: 1.5px solid #cbd5e1; cursor: pointer;">Close</button>
            </div>
            <div id="tx-result-box" style="margin-top: 15px; display: none; padding: 12px; border-radius: 12px; font-size: 12.5px; text-align: left; line-height: 1.5;"></div>
        </div>
    </div>
</div>

<!-- Features Section -->
<div class="features-section">
    <div class="features-header">
        <h2 class="features-title">{{ __('features_title') }}</h2>
        <p class="features-subtitle">{{ __('features_subtitle') }}</p>
    </div>

    <div class="features-grid">
        <!-- Feature 1: Routing -->
        <div class="feature-card" style="--hover-border: rgba(224, 86, 253, 0.4); --hover-shadow: rgba(224, 86, 253, 0.15);">
            <div class="feat-icon" style="background: rgba(224, 86, 253, 0.08); color: #be2edd;"><i class="fas fa-route"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('routing_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('routing_desc') }}</p>
        </div>

        <!-- Feature 2: DI Resolves -->
        <div class="feature-card" style="--hover-border: rgba(13, 110, 253, 0.4); --hover-shadow: rgba(13, 110, 253, 0.15);">
            <div class="feat-icon" style="background: rgba(13, 110, 253, 0.08); color: #0d6efd;"><i class="fas fa-cubes"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('di_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('di_desc') }}</p>
        </div>

        <!-- Feature 3: Active Record ORM -->
        <div class="feature-card" style="--hover-border: rgba(25, 135, 84, 0.4); --hover-shadow: rgba(25, 135, 84, 0.15);">
            <div class="feat-icon" style="background: rgba(25, 135, 84, 0.08); color: #198754;"><i class="fas fa-database"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('orm_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('orm_desc') }}</p>
        </div>

        <!-- Feature 4: Query Builder -->
        <div class="feature-card" style="--hover-border: rgba(13, 202, 240, 0.4); --hover-shadow: rgba(13, 202, 240, 0.15);">
            <div class="feat-icon" style="background: rgba(13, 202, 240, 0.08); color: #0dcaf0;"><i class="fas fa-filter"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('qb_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('qb_desc') }}</p>
        </div>

        <!-- Feature 5: Validator -->
        <div class="feature-card" style="--hover-border: rgba(255, 193, 7, 0.5); --hover-shadow: rgba(255, 193, 7, 0.15);">
            <div class="feat-icon" style="background: rgba(255, 193, 7, 0.08); color: #ffc107;"><i class="fas fa-check-double"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('validator_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('validator_desc') }}</p>
        </div>

        <!-- Feature 6: Transactions -->
        <div class="feature-card" style="--hover-border: rgba(224, 86, 253, 0.4); --hover-shadow: rgba(224, 86, 253, 0.15);">
            <div class="feat-icon" style="background: rgba(224, 86, 253, 0.08); color: #be2edd;"><i class="fas fa-shield-halved"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "অ্যাটমিক ট্রানজেকশন ম্যানেজার" if current_lang == 'bn' else "Atomic Transactions Manager" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "context manager ও @atomic ডেকোরেটর দিয়ে ট্রানজেকশন নিরাপদ করা, SAVEPOINT দিয়ে আংশিক রোলব্যাক এবং on_commit হুক।" if current_lang == 'bn' else "Ensure strict data integrity using transactional context blocks, @atomic decorators, savepoints, and commit hooks." }}
            </p>
        </div>

        <!-- Feature 6.5: Multi-driver Pool -->
        <div class="feature-card" style="--hover-border: rgba(13, 110, 253, 0.4); --hover-shadow: rgba(13, 110, 253, 0.15);">
            <div class="feat-icon" style="background: rgba(13, 110, 253, 0.08); color: #0d6efd;"><i class="fas fa-network-wired"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "মাল্টি-ড্রাইভার কানেকশন পুল" if current_lang == 'bn' else "Multi-Driver Connection Pool" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "SQLite-এর পাশাপাশি প্রোডাকশন-রেডি MySQL এবং PostgreSQL ডাটাবেজ থ্রেড-সেফ কানেকশন পুলিং ও অটো-রিকানেক্ট সাপোর্ট।" if current_lang == 'bn' else "Seamlessly switch between SQLite, MySQL, and PostgreSQL with robust thread-safe connection pooling." }}
            </p>
        </div>

        <!-- Feature 6.6: Decimal Math & Money -->
        <div class="feature-card" style="--hover-border: rgba(25, 135, 84, 0.4); --hover-shadow: rgba(25, 135, 84, 0.15);">
            <div class="feat-icon" style="background: rgba(25, 135, 84, 0.08); color: #198754;"><i class="fas fa-coins"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "নির্ভুল আর্থিক ক্যালকুলেশন" if current_lang == 'bn' else "Precision Financial Math" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "Money ক্লাসের মাধ্যমে ফ্লোটিং পয়েন্টমুক্ত নিখুঁত হিসাবকাল এবং বাংলা ও ইংরেজি ভাষায় সংখ্যা থেকে কথায় রূপান্তর।" if current_lang == 'bn' else "Floating-point free money calculations with automated Bangla & English number-to-words conversion." }}
            </p>
        </div>

        <!-- Feature 7: FastAPI Bridge -->
        <div class="feature-card" style="--hover-border: rgba(220, 53, 69, 0.4); --hover-shadow: rgba(220, 53, 69, 0.15);">
            <div class="feat-icon" style="background: rgba(220, 53, 69, 0.08); color: #dc3545;"><i class="fas fa-bolt"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('fastapi_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('fastapi_desc') }}</p>
        </div>

        <!-- Feature 8: API Keys -->
        <div class="feature-card" style="--hover-border: rgba(16, 185, 129, 0.4); --hover-shadow: rgba(16, 185, 129, 0.15);">
            <div class="feat-icon" style="background: rgba(16, 185, 129, 0.08); color: #10b981;"><i class="fas fa-key"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('api_keys_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('api_keys_desc') }}</p>
        </div>

        <!-- Feature 9: Audit Logs -->
        <div class="feature-card" style="--hover-border: rgba(99, 102, 241, 0.4); --hover-shadow: rgba(99, 102, 241, 0.15);">
            <div class="feat-icon" style="background: rgba(99, 102, 241, 0.08); color: #6366f1;"><i class="fas fa-history"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('logs_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('logs_desc') }}</p>
        </div>

        <!-- Feature 10: Security Shield -->
        <div class="feature-card" style="--hover-border: rgba(244, 63, 94, 0.4); --hover-shadow: rgba(244, 63, 94, 0.15);">
            <div class="feat-icon" style="background: rgba(244, 63, 94, 0.08); color: #f43f5e;"><i class="fas fa-user-shield"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('security_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('security_desc') }}</p>
        </div>

        <!-- Feature 11: Debug Bar -->
        <div class="feature-card" style="--hover-border: rgba(79, 70, 229, 0.4); --hover-shadow: rgba(79, 70, 229, 0.15);">
            <div class="feat-icon" style="background: rgba(79, 70, 229, 0.08); color: #4f46e5;"><i class="fas fa-chart-simple"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('debug_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('debug_desc') }}</p>
        </div>

        <!-- Feature 12: Rate Limiting -->
        <div class="feature-card" style="--hover-border: rgba(239, 68, 68, 0.4); --hover-shadow: rgba(239, 68, 68, 0.15);">
            <div class="feat-icon" style="background: rgba(239, 68, 68, 0.08); color: #ef4444;"><i class="fas fa-clock-rotate-left"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">{{ __('rate_limit_title') }}</h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">{{ __('rate_limit_desc') }}</p>
        </div>

        <!-- Feature 13: Queue & Background Jobs -->
        <div class="feature-card" style="--hover-border: rgba(224, 86, 253, 0.4); --hover-shadow: rgba(224, 86, 253, 0.15);">
            <div class="feat-icon" style="background: rgba(224, 86, 253, 0.08); color: #be2edd;"><i class="fas fa-tasks"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "ব্যাকগ্রাউন্ড কিউ ও জবস" if current_lang == 'bn' else "Queue & Background Jobs" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "ভারী বা দীর্ঘস্থায়ী প্রসেস ব্যাকগ্রাউন্ডে চালানোর জন্য ডাটাবেস-ব্যাকড কিউ এবং থ্রেডেড ওয়ার্কার।" if current_lang == 'bn' else "Reliable database-backed queueing system with concurrent workers for background tasks." }}
            </p>
        </div>

        <!-- Feature 14: Task Scheduler -->
        <div class="feature-card" style="--hover-border: rgba(13, 110, 253, 0.4); --hover-shadow: rgba(13, 110, 253, 0.15);">
            <div class="feat-icon" style="background: rgba(13, 110, 253, 0.08); color: #0d6efd;"><i class="fas fa-clock"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "টাস্ক সিডিউলার" if current_lang == 'bn' else "Task Scheduler" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "নির্ধারিত সময় অন্তর অন্তর (যেমন প্রতি মিনিটে বা প্রতিদিন) ব্যাকগ্রাউন্ড টাস্ক রান করানোর জন্য শিডিউলার ইঞ্জিন।" if current_lang == 'bn' else "Run recurring cron tasks at specific time intervals or times of day." }}
            </p>
        </div>

        <!-- Feature 15: Database Seeders -->
        <div class="feature-card" style="--hover-border: rgba(25, 135, 84, 0.4); --hover-shadow: rgba(25, 135, 84, 0.15);">
            <div class="feat-icon" style="background: rgba(25, 135, 84, 0.08); color: #198754;"><i class="fas fa-seedling"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "ডাটাবেস সিডার ও ফ্যাক্টরি" if current_lang == 'bn' else "Database Seeders & Factories" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "সহজে ডাটাবেস টেস্ট করতে ডাইনামিক সিডার ও মডেল ফ্যাক্টরি দিয়ে ডামি ডেটা তৈরি করার ফ্রেমওয়ার্ক।" if current_lang == 'bn' else "Scaffold dummy database data dynamically for testing using seeders and factories." }}
            </p>
        </div>

        <!-- Feature 16: Advanced Logging -->
        <div class="feature-card" style="--hover-border: rgba(13, 202, 240, 0.4); --hover-shadow: rgba(13, 202, 240, 0.15);">
            <div class="feat-icon" style="background: rgba(13, 202, 240, 0.08); color: #0dcaf0;"><i class="fas fa-file-invoice"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "উন্নত লগিং লাইব্রেরি" if current_lang == 'bn' else "Advanced Logging Library" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "আইপি, সেশন আইডি এবং ইউজার এজেন্ট সহ সব স্ট্যান্ডার্ড লেভেলে লগ তৈরি করে যা ফুটবার ডিবাগ বারেও দেখা যায়।" if current_lang == 'bn' else "Adapted PHP logger tracking request IPs, sessions, and warnings into storage/logs and debug bar." }}
            </p>
        </div>

        <!-- Feature 17: WebSockets -->
        <div class="feature-card" style="--hover-border: rgba(255, 193, 7, 0.5); --hover-shadow: rgba(255, 193, 7, 0.15);">
            <div class="feat-icon" style="background: rgba(255, 193, 7, 0.08); color: #ffc107;"><i class="fas fa-comments"></i></div>
            <h4 style="font-weight: 700; margin-bottom: 10px; color: #1e293b;">
                {{ "রিয়েল-টাইম ওয়েবসকেট" if current_lang == 'bn' else "Real-Time WebSockets" }}
            </h4>
            <p style="font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;">
                {{ "ASGI ব্রিজের সাহায্যে সরাসরি ফাস্ট-এপিআই-এর সাথে রিয়েল-টাইম বাই-ডিরেকショナル ওয়েবসকেট গেটওয়ে সংযোগ।" if current_lang == 'bn' else "Full WebSocket support routed via ASGI bridge directly to FastAPI endpoints." }}
            </p>
        </div>
    </div>
</div>

<!-- CLI Section -->
<div class="cli-section" style="margin-top: 60px; margin-bottom: 70px; padding: 40px; background: #1e272e; border-radius: 30px; color: #f1f2f6; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 20px 45px rgba(0,0,0,0.15); position: relative; overflow: hidden;">
    <div style="position: absolute; width: 350px; height: 350px; background: rgba(224, 86, 253, 0.04); border-radius: 50%; top: -120px; left: -120px; filter: blur(90px); z-index: 0; pointer-events: none;"></div>
    <div style="display: flex; flex-direction: row; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 1;">
        <div style="flex: 1; min-width: 300px; text-align: left;">
            <span class="badge-ver" style="background: rgba(224, 86, 253, 0.2); color: #e056fd; border: 1px solid rgba(224, 86, 253, 0.4); margin-bottom: 15px;">CLI TOOL</span>
            <h2 style="font-size: 32px; font-weight: 800; color: #ffffff; margin-bottom: 15px; letter-spacing: -0.5px;">
                {{ "ইন্টারেক্টিভ সিএলআই অ্যাসিস্ট্যান্ট" if current_lang == 'bn' else "Interactive CLI Assistant" }}
            </h2>
            <p style="color: #cbd5e1; font-size: 15px; line-height: 1.6; margin-bottom: 25px;">
                {{ "Laravel Artisan-এর মতো PyFlow-তে রয়েছে অত্যন্ত শক্তিশালী টার্মিনাল ড্যাশবোর্ড। যা দিয়ে এক ক্লিকে ওআরএম মডেল, কন্ট্রোলার জেনারেট করা, রাউট লিস্ট দেখা, ডাটাবেস মাইগ্রেশন চালানো এবং সিস্টেমের স্বাস্থ্য পরীক্ষা করা যায়।" if current_lang == 'bn' else "Manage your framework effortlessly using a built-in terminal menu assistant. Generate ORM models, scaffold controllers, run database migrations, view registered routes, and perform system health diagnostics with a single command." }}
            </p>
            <a href="/docs" class="btn-premium btn-primary" style="padding: 10px 25px; font-size: 14px; text-decoration: none;">
                {{ "সিএলআই ডকুমেন্টেশন" if current_lang == 'bn' else "Explore CLI Docs" }}
            </a>
        </div>
        <div style="flex: 1.2; min-width: 320px; background: #0f172a; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); padding: 20px; font-family: monospace; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); color: #38bdf8; text-align: left;">
            <div style="display: flex; gap: 6px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px;">
                <span style="width: 10px; height: 10px; background: #ef4444; border-radius: 50%;"></span>
                <span style="width: 10px; height: 10px; background: #eab308; border-radius: 50%;"></span>
                <span style="width: 10px; height: 10px; background: #22c55e; border-radius: 50%;"></span>
                <span style="margin-left: auto; color: #64748b; font-size: 11px;">cli.py - interactive menu</span>
            </div>
            <div style="color: #94a3b8;">$ python cli.py</div>
            <div style="color: #22c55e; font-weight: bold; margin-top: 8px;">╔════════════════════════════════════════════╗</div>
            <div style="color: #22c55e; font-weight: bold;">║       ⚡ PYFLOW CORE CLI ASSISTANT ⚡       ║</div>
            <div style="color: #22c55e; font-weight: bold;">║       Framework Development Kit            ║</div>
            <div style="color: #22c55e; font-weight: bold;">╚════════════════════════════════════════════╝</div>
            <div style="color: #e2e8f0; margin-top: 10px; font-weight: bold;">=== MAIN MENU ===</div>
            <div style="color: #38bdf8; margin-left: 10px;">1. View Registered Routes</div>
            <div style="color: #f8fafc; margin-left: 10px;">2. View Database Tables</div>
            <div style="color: #fbbf24; margin-left: 10px;">3. Database Summary Report</div>
            <div style="color: #4ade80; margin-left: 10px;">4. Generate Model File</div>
            <div style="color: #4ade80; margin-left: 10px;">5. Generate Controller File</div>
            <div style="color: #f8fafc; margin-left: 10px; font-weight: bold;">6. System Health Check</div>
            <div style="color: #f87171; margin-left: 10px;">7. Clear Logs & Temp Sessions</div>
            <div style="color: #c084fc; margin-left: 10px;">8. Run Database Migrations</div>
            <div style="color: #38bdf8; margin-left: 10px;">9. Run Database Seeders</div>
            <div style="color: #c084fc; margin-left: 10px;">10. Run Queue Worker</div>
            <div style="color: #38bdf8; margin-left: 10px;">11. Run Task Scheduler</div>
            <div style="color: #f87171; margin-left: 10px;">0. Exit</div>
            <div style="color: #fbbf24; margin-top: 12px;">Select option: <span style="animation: blink 1s step-end infinite; color: #ffffff;">_</span></div>
        </div>
    </div>
</div>

<!-- Why Section -->
<div class="why-section">
    <h2 style="font-weight: 800; text-align: center; margin-bottom: 40px; color: #1e272e;">{{ __('why_pyflow') }}</h2>
    <div class="why-grid">
        <div class="why-item">
            <div class="why-bullet" style="color: #be2edd; background: rgba(224, 86, 253, 0.08);"><i class="fas fa-rocket"></i></div>
            <div>
                <h4 style="font-weight: 700; margin-bottom: 4px; color: #1e293b;">{{ __('why_desc_1_title') }}</h4>
                <p style="font-size: 14px; color: #64748b; margin: 0; line-height: 1.5;">{{ __('why_desc_1_body') }}</p>
            </div>
        </div>
        <div class="why-item">
            <div class="why-bullet" style="color: #0d6efd; background: rgba(13, 110, 253, 0.08);"><i class="fas fa-server"></i></div>
            <div>
                <h4 style="font-weight: 700; margin-bottom: 4px; color: #1e293b;">{{ __('why_desc_2_title') }}</h4>
                <p style="font-size: 14px; color: #64748b; margin: 0; line-height: 1.5;">{{ __('why_desc_2_body') }}</p>
            </div>
        </div>
        <div class="why-item">
            <div class="why-bullet" style="color: #198754; background: rgba(25, 135, 84, 0.08);"><i class="fas fa-language"></i></div>
            <div>
                <h4 style="font-weight: 700; margin-bottom: 4px; color: #1e293b;">{{ __('why_desc_3_title') }}</h4>
                <p style="font-size: 14px; color: #64748b; margin: 0; line-height: 1.5;">{{ __('why_desc_3_body') }}</p>
            </div>
        </div>
    </div>
</div>

<footer style="text-align: center; padding: 40px 20px; color: #a4b0be; font-size: 13px; margin-top: 50px; border-top: 1px solid #f1f2f6;">
    <p style="margin-bottom: 6px;">{{ __('footer_text') }}</p>
    <p>&copy; {{ date('Y') if hasattr(date, 'Y') else '2026' }} PyFlow Framework. All rights reserved.</p>
<script>
    // 1. Fetch DB Status on page load
    document.addEventListener("DOMContentLoaded", function() {
        fetch("/api/features/db-status")
            .then(res => res.json())
            .then(data => {
                const statusText = document.getElementById("db-status-text");
                if (data.status === "online") {
                    const db = data.database;
                    statusText.innerText = `${db.driver.toUpperCase()} (${db.driver === 'sqlite' ? 'local' : 'pool'})`;
                    statusText.style.color = "#4ade80"; // Light green
                }
            })
            .catch(err => {
                document.getElementById("db-status-text").innerText = "OFFLINE";
                document.getElementById("db-status-text").style.color = "#f87171";
            });

        // Run live converter once initially
        runLiveConverter();
    });

    // 2. Hide or Show English Format Style based on Language selection
    function toggleStyleField() {
        const lang = document.getElementById("live-lang").value;
        const styleContainer = document.getElementById("english-style-container");
        if (lang === "en") {
            styleContainer.style.display = "block";
        } else {
            styleContainer.style.display = "none";
        }
    }

    // 3. Live Money to Words Converter API runner
    function runLiveConverter() {
        const amount = document.getElementById("live-amount").value;
        const currency = document.getElementById("live-currency").value;
        const lang = document.getElementById("live-lang").value;
        const style = document.getElementById("live-style") ? document.getElementById("live-style").value : "indian";

        if (!amount || isNaN(amount)) {
            document.getElementById("out-words").innerText = "দয়া করে সঠিক সংখ্যা ইনপুট দিন...";
            return;
        }

        const startTime = performance.now();

        fetch("/api/features/money-convert", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ amount, currency, lang, style })
        })
        .then(res => {
            if (!res.ok) throw new Error("API calculation error");
            return res.json();
        })
        .then(data => {
            const endTime = performance.now();
            const latency = Math.round(endTime - startTime);

            document.getElementById("out-formatted").innerText = data.formatted;
            document.getElementById("out-words").innerText = data.words;
            document.getElementById("out-subunits").innerText = data.paisa;
            document.getElementById("out-latency").innerText = `${latency}ms`;
        })
        .catch(err => {
            document.getElementById("out-words").innerText = "অনুবাদে সমস্যা হয়েছে। আবার চেষ্টা করুন।";
        });
    }

    // 4. Transaction Modal handlers
    function runTransactionRollbackTest() {
        document.getElementById("tx-modal").style.display = "flex";
        document.getElementById("tx-result-box").style.display = "none";
    }

    function closeTxModal() {
        document.getElementById("tx-modal").style.display = "none";
    }

    function executeTransactionTestAPI() {
        const shouldFail = document.getElementById("tx-should-fail").checked;
        const resultBox = document.getElementById("tx-result-box");
        
        resultBox.style.display = "block";
        resultBox.innerText = "Executing Transaction API...";
        resultBox.style.background = "#f1f2f6";
        resultBox.style.color = "#334155";

        fetch("/api/features/transaction-test", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                name: "TxUser",
                email: "txuser@example.com",
                should_fail: shouldFail
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === "success") {
                resultBox.style.background = "rgba(34, 197, 94, 0.08)";
                resultBox.style.color = "#166534";
                resultBox.innerHTML = `
                    <strong>✅ Success! Commit Hooks Fired</strong><br>
                    - Status: ${data.message}<br>
                    - Generated ID: ${data.user_id}<br>
                    - Hook response: ${data.on_commit_hooks.join(", ")}
                `;
            } else {
                resultBox.style.background = "rgba(239, 68, 68, 0.08)";
                resultBox.style.color = "#991b1b";
                resultBox.innerHTML = `
                    <strong>❌ Rolled Back! (আংশিক ডাটা সেভ হয়নি)</strong><br>
                    - Message: ${data.message}<br>
                    - User exists in DB? <strong>${data.exists_in_database ? 'Yes (FAILED)' : 'No (SUCCESSFUL ROLLBACK)'}</strong>
                `;
            }
        })
        .catch(err => {
            resultBox.innerText = "Error executing transaction test";
            resultBox.style.background = "rgba(239, 68, 68, 0.08)";
            resultBox.style.color = "#991b1b";
        });
    }
</script>

</footer>

@endsection