<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Primary Meta Tags -->
    <title>YouTube Video Analyzer &amp; Timestamp Generator | InstantViews</title>
    <meta name="title" content="YouTube Video Analyzer &amp; Timestamp Generator | InstantViews">
    <meta name="description" content="InstantViews YouTube analyzer - get AI timestamps, SEO insights, hook analysis &amp; click predictions before uploading.">
        <meta name="keywords" content="youtube video analyzer, pre upload seo, youtube timestamps, click potential, hook analysis, video seo, youtube optimization, content analysis">
    
    <!-- Canonical -->
    <link rel="canonical" href="https://instantviews.net/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://instantviews.net/">
    <meta property="og:title" content="YouTube Video Analyzer &amp; Timestamp Generator | InstantViews">
    <meta property="og:description" content="InstantViews YouTube analyzer - get AI timestamps, SEO insights, hook analysis &amp; click predictions before uploading.">
    <meta property="og:image" content="https://instantviews.net/assets/images/og-default.jpg">
    <meta property="og:site_name" content="InstantViews">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://instantviews.net/">
    <meta property="twitter:title" content="YouTube Video Analyzer &amp; Timestamp Generator | InstantViews">
    <meta property="twitter:description" content="InstantViews YouTube analyzer - get AI timestamps, SEO insights, hook analysis &amp; click predictions before uploading.">
    <meta property="twitter:image" content="https://instantviews.net/assets/images/og-default.jpg">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">

    <!-- Theme Color -->
    <meta name="theme-color" content="#FF0000" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#09090B" media="(prefers-color-scheme: dark)">

    <!-- Prevent FOUC - Must be first -->
    <script type="3588e567512663a46ee4eb60-text/javascript">
    (function(){
        const t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');
        document.documentElement.setAttribute('data-theme',t);
    })();
    </script>

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://www.googletagmanager.com">
    <link rel="preconnect" href="https://www.google-analytics.com">

    <!-- Google Analytics 4 (Async - Non-blocking) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WB1JQTY2ZL" type="3588e567512663a46ee4eb60-text/javascript"></script>
    <script type="3588e567512663a46ee4eb60-text/javascript">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-WB1JQTY2ZL', {
        'send_page_view': true,
        'cookie_flags': 'SameSite=None;Secure'
    });
    </script>

    <!-- Fonts: Plus Jakarta Sans + Space Mono (with font-display: swap) -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

    <!-- Critical CSS - Inlined for fastest FCP -->
    <style>
    /**
 * Critical CSS - Inlined in <head>
 * Matches current index.php design exactly
 * Contains: Variables, Base, Nav, Buttons, Hero, Analyzer, Stats
 */

/* ============================================
   DESIGN SYSTEM VARIABLES
   ============================================ */
:root {
    /* Brand Colors */
    --brand-primary: #FF0000;
    --brand-dark: #CC0000;
    --brand-light: #FF4444;

    /* Semantic Colors */
    --success: #10B981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning: #F59E0B;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error: #EF4444;
    --error-bg: rgba(239, 68, 68, 0.1);

    /* Fonts */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Space Mono', 'SF Mono', 'Fira Code', monospace;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
}

/* Light Theme (Default) */
[data-theme="light"], :root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-tertiary: #F1F5F9;
    --bg-elevated: #FFFFFF;
    --bg-hover: #F1F5F9;

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;
    --text-muted: #94A3B8;
    --text-inverse: #FFFFFF;

    --border-light: #E2E8F0;
    --border-default: #CBD5E1;
    --border-strong: #94A3B8;

    --brand-glow: rgba(255, 0, 0, 0.1);
    --brand-bg: rgba(255, 0, 0, 0.05);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.2);

    --nav-bg: rgba(255, 255, 255, 0.95);
    --card-bg: #FFFFFF;
    --input-bg: #F8FAFC;
    --input-focus-bg: #FFFFFF;

    --hero-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    --section-alt-bg: #F8FAFC;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --bg-elevated: #1E293B;
    --bg-hover: #334155;

    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-muted: #64748B;
    --text-inverse: #0F172A;

    --border-light: #334155;
    --border-default: #475569;
    --border-strong: #64748B;

    --brand-glow: rgba(255, 68, 68, 0.15);
    --brand-bg: rgba(255, 68, 68, 0.1);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.6);

    --nav-bg: rgba(15, 23, 42, 0.95);
    --card-bg: #1E293B;
    --input-bg: #334155;
    --input-focus-bg: #1E293B;

    --hero-gradient: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
    --section-alt-bg: #1E293B;
}

/* Legacy variable mapping */
:root, [data-theme="light"], [data-theme="dark"] {
    --red-primary: var(--brand-primary);
    --red-dark: var(--brand-dark);
    --red-light: var(--brand-light);
    --red-glow: var(--brand-glow);
    --red-bg: var(--brand-bg);
    --gray-50: var(--bg-secondary);
    --gray-100: var(--bg-tertiary);
    --gray-200: var(--border-light);
    --gray-300: var(--border-default);
    --gray-400: var(--text-muted);
    --gray-500: var(--text-tertiary);
    --gray-600: var(--text-secondary);
    --gray-700: var(--text-secondary);
    --gray-800: var(--text-primary);
    --gray-900: var(--text-primary);
}

/* ============================================
   BASE STYLES
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ============================================
   THEME TOGGLE
   ============================================ */
.theme-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
    font-size: 18px;
}
.theme-toggle:hover { background: var(--bg-hover); transform: scale(1.05); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-controls-mobile { display: flex; align-items: center; gap: 8px; }
.nav-controls-mobile .theme-toggle { display: flex; }
@media (min-width: 768px) {
    .nav-cta .theme-toggle { display: flex; }
    .nav-controls-mobile { display: none; }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }
.animate-in { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow-md); }
.nav-container { max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-logo, a.nav-logo { font-size: 20px; font-weight: 800; color: var(--text-primary) !important; text-decoration: none !important; }
.nav-logo span { color: var(--brand-primary) !important; }
.nav-links { display: none; align-items: center; gap: 4px; }
.nav-link, .nav .nav-link, a.nav-link {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-secondary) !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
    padding: 10px 20px;
    border-radius: 8px;
    background: transparent;
    position: relative;
}
.nav-link:hover, .nav .nav-link:hover, a.nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-secondary);
}
.nav-link.active, .nav .nav-link.active, a.nav-link.active {
    color: var(--brand-primary) !important;
    font-weight: 600;
}
.nav-cta { display: none; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 10px 20px; font-size: 14px; }
.nav-hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: var(--bg-tertiary); border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-md); transition: var(--transition); gap: 5px; }
.nav-hamburger:hover { background: var(--bg-hover); }
.nav-hamburger span { display: block; width: 22px; height: 3px; background: var(--text-primary); border-radius: 2px; flex-shrink: 0; transition: var(--transition); }
.nav-hamburger.active { background: var(--brand-primary); }
.nav-hamburger.active span { background: var(--text-inverse); }
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-mobile { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--bg-primary); border-bottom: 1px solid var(--border-light); box-shadow: var(--shadow-lg); padding: 8px; flex-direction: column; gap: 4px; z-index: 999; }
.nav-mobile.active { display: flex; animation: slideDown 0.3s ease; }
.nav-mobile a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-md); transition: var(--transition); }
.nav-mobile a:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-mobile a .nav-icon { font-size: 18px; width: 24px; text-align: center; }
.nav-mobile-divider { height: 1px; background: var(--border-light); margin: 8px 0; }
.nav-mobile .nav-mobile-cta { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--bg-secondary); border-radius: var(--radius-lg); margin-top: 4px; }
.nav-mobile .nav-mobile-cta .btn { width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; border-radius: var(--radius-md); }
.nav-mobile .nav-mobile-cta .btn.btn-primary { color: var(--text-inverse) !important; background: var(--brand-primary); }
.nav-mobile .nav-mobile-cta .btn.btn-primary:hover { color: var(--text-inverse) !important; background: var(--brand-dark); }
@media (min-width: 768px) {
    .nav-container { padding: 0 24px; height: 72px; }
    .nav-logo { font-size: 24px; }
    .nav-links { display: flex; }
    .nav-cta { display: flex; }
    .nav-hamburger { display: none; }
    .nav-mobile { display: none !important; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}
.btn-primary { background: var(--brand-primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 10px 30px var(--brand-glow); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-outline { background: transparent; border: 2px solid var(--border-light); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--border-default); background: var(--bg-secondary); }
.btn-dark { background: var(--text-primary); color: var(--bg-primary); }
.btn-dark:hover { opacity: 0.9; }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: var(--radius-lg); }

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    padding: 140px 24px 60px;
    text-align: center;
    background: var(--hero-gradient);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}
.hero-content { max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; padding: 0 24px; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--brand-bg);
    border: 1px solid var(--brand-glow);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 24px;
}
.hero-badge-dot { width: 8px; height: 8px; background: var(--brand-primary); border-radius: 50%; animation: pulse 2s infinite; }
.hero-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.hero-title span { color: var(--brand-primary); }
.hero-subtitle {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--text-secondary);
    max-width: 550px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

/* ============================================
   ANALYZER CARD
   ============================================ */
.analyzer-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-light);
}
.analyzer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.analyzer-icon {
    width: 40px;
    height: 40px;
    background: var(--brand-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.analyzer-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.analyzer-subtitle { font-size: 13px; color: var(--text-tertiary); }
.analyzer-input-wrapper { display: flex; flex-direction: column; gap: 12px; }
.analyzer-input {
    width: 100%;
    padding: 16px 18px;
    font-family: var(--font-sans);
    font-size: 15px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    outline: none;
    transition: var(--transition);
    background: var(--input-bg);
    color: var(--text-primary);
}
.analyzer-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-glow);
    background: var(--input-focus-bg);
}
.analyzer-input::placeholder { color: var(--text-muted); }
.analyzer-btn { width: 100%; padding: 16px 32px; font-size: 15px; border-radius: var(--radius-lg); }
.analyzer-hint { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); margin-top: 12px; }
@media (min-width: 640px) { .analyzer-input-wrapper { flex-direction: row; } .analyzer-btn { width: auto; white-space: nowrap; } }

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar-modern {
    padding: 40px 24px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.stats-container { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 24px; }
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-default);
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.stat-icon.purple { background: rgba(139, 92, 246, 0.15); }
.stat-icon.blue { background: rgba(59, 130, 246, 0.15); }
.stat-icon.green { background: rgba(16, 185, 129, 0.15); }
.stat-card .stat-value {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-card.live .stat-value { display: flex; align-items: center; justify-content: center; gap: 8px; }
.stat-card .live-dot {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--success-bg);
}
@media (max-width: 640px) { .stats-container { grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-card { padding: 16px 12px; gap: 8px; } .stat-icon { width: 36px; height: 36px; font-size: 16px; } .stat-card .stat-value { font-size: 22px; } .stat-card .stat-label { font-size: 10px; } }

/* ============================================
   LOADING STATES
   ============================================ */
.analyzer-loading { display: none; flex-direction: column; align-items: center; gap: 16px; padding: 32px; }
.analyzer-loading.active { display: flex; }
.analyzer-form.loading .analyzer-input-wrapper { display: none; }
.analyzer-form.loading .analyzer-hint { display: none; }
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-light);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.loading-text { font-size: 14px; color: var(--text-secondary); }

/* ============================================
   UTILITIES
   ============================================ */
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Pro Tips Grid - 3 columns desktop, 1 column mobile */
@media (max-width: 768px) {
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}
    </style>

    <!-- Non-critical CSS - All Deferred for Performance -->
    <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="3588e567512663a46ee4eb60-|49"></script><link rel="preload" href="https://instantviews.net/assets/css/main.css?v=1.0.3" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="3588e567512663a46ee4eb60-|49"></script><link rel="preload" href="https://instantviews.net/assets/css/components.css?v=1.0.3" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="3588e567512663a46ee4eb60-|49"></script><link rel="preload" href="https://instantviews.net/assets/css/tools-responsive.css?v=1.0.3" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="https://instantviews.net/assets/css/main.css?v=1.0.3">
        <link rel="stylesheet" href="https://instantviews.net/assets/css/components.css?v=1.0.3">
        <link rel="stylesheet" href="https://instantviews.net/assets/css/tools-responsive.css?v=1.0.3">
    </noscript>

    <!-- Schema.org Structured Data -->
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"InstantViews","url":"https://instantviews.net","logo":"https://instantviews.net/assets/images/logo.svg","description":"Free YouTube tools for creators - analytics, calculators, SEO optimization, and growth tools.","sameAs":["https://twitter.com/instantviews","https://youtube.com/@instantviews"]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"InstantViews","url":"https://instantviews.net","description":"InstantViews YouTube analyzer - get AI timestamps, SEO insights, hook analysis & click predictions before uploading.","potentialAction":{"@type":"SearchAction","target":"https://instantviews.net/search?q={search_term_string}","query-input":"required name=search_term_string"}}</script>

    </head>
<body>
<!-- Mega Menu CSS -->
<style>
/* Mega Menu Styles */
.nav-item {
    position: relative;
}
.nav-item-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}
.nav-item-link:hover,
.nav-item:hover .nav-item-link {
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.nav-item-link .arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.nav-item:hover .arrow {
    transform: rotate(180deg);
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-light);
    padding: 20px;
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1001;
}
.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mega-menu-grid {
    display: grid;
    gap: 4px;
}
.mega-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
}
.mega-menu-item:hover {
    background: var(--bg-secondary);
}
.mega-menu-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.mega-menu-content {
    flex: 1;
}
.mega-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.mega-menu-desc {
    font-size: 12px;
    color: var(--text-tertiary);
}
.mega-menu-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
.mega-menu-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--brand-bg);
    color: var(--brand-primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.mega-menu-footer a:hover {
    background: var(--brand-primary);
    color: white;
}

/* Blog Mega Menu - Multi Column */
.blog-mega-menu {
    min-width: 680px;
    padding: 24px;
}
.blog-mega-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.blog-mega-column {
    min-width: 180px;
}
.blog-mega-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.blog-mega-header .platform-icon {
    font-size: 14px;
}
.blog-mega-item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}
.blog-mega-item:hover {
    background: var(--bg-secondary);
}
.blog-mega-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.blog-mega-item-count {
    font-size: 12px;
    color: var(--text-tertiary);
}
@media (max-width: 768px) {
    .blog-mega-menu {
        min-width: 280px;
    }
    .blog-mega-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Mobile Blog Expandable Section */
.nav-mobile-section {
    display: flex;
    flex-direction: column;
}
.nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}
.nav-mobile-header:hover {
    background: var(--bg-secondary);
}
.nav-mobile-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.nav-mobile-section.active .nav-mobile-arrow {
    transform: rotate(180deg);
}
.nav-mobile-submenu {
    display: none;
    padding: 0 20px 10px 35px;
}
.nav-mobile-section.active .nav-mobile-submenu {
    display: block;
}
.nav-mobile-submenu a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.nav-mobile-submenu a:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.nav-mobile-platform {
    padding: 10px 12px 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nav-mobile-view-all {
    margin-top: 10px;
    padding: 10px 12px !important;
    background: var(--brand-bg) !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    text-align: center;
}
</style>

<!-- Navigation -->
<nav class="nav" id="nav">
    <div class="nav-container">
        <a href="/" class="nav-logo">Instant<span>Views</span></a>

        <!-- Desktop Links -->
        <div class="nav-links">
            <a href="/" class="nav-link active">Home</a>

            <!-- Tools Dropdown -->
            <div class="nav-item">
                <span class="nav-item-link">
                    Tools <span class="arrow">▼</span>
                </span>
                <div class="mega-menu">
                    <div class="mega-menu-grid">
                                                <a href="/youtube-channel-audit" class="mega-menu-item">
                            <div class="mega-menu-icon">📊</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Channel Audit</div>
                                <div class="mega-menu-desc">Analyze your channel performance</div>
                            </div>
                        </a>
                                                <a href="/youtube-subscriber-count" class="mega-menu-item">
                            <div class="mega-menu-icon">👥</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Subscriber Count</div>
                                <div class="mega-menu-desc">Live subscriber counter</div>
                            </div>
                        </a>
                                                <a href="/youtube-money-calculator" class="mega-menu-item">
                            <div class="mega-menu-icon">💰</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Money Calculator</div>
                                <div class="mega-menu-desc">Estimate your earnings</div>
                            </div>
                        </a>
                                                <a href="/youtube-monetization-checker" class="mega-menu-item">
                            <div class="mega-menu-icon">✅</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Monetization Checker</div>
                                <div class="mega-menu-desc">Check monetization status</div>
                            </div>
                        </a>
                                                <a href="/youtube-timestamp-generator" class="mega-menu-item">
                            <div class="mega-menu-icon">⏱️</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Timestamp Generator</div>
                                <div class="mega-menu-desc">Create video chapters</div>
                            </div>
                        </a>
                                                <a href="/tools/revenue-calculator" class="mega-menu-item">
                            <div class="mega-menu-icon">📈</div>
                            <div class="mega-menu-content">
                                <div class="mega-menu-title">Revenue Calculator</div>
                                <div class="mega-menu-desc">Calculate potential revenue</div>
                            </div>
                        </a>
                                            </div>
                    <div class="mega-menu-footer">
                        <a href="/tools">View All Tools →</a>
                    </div>
                </div>
            </div>

            <!-- Blog Dropdown -->
            <div class="nav-item">
                <span class="nav-item-link">
                    Blog <span class="arrow">▼</span>
                </span>
                <div class="mega-menu blog-mega-menu">
                    <div class="blog-mega-columns">
                                                <div class="blog-mega-column">
                            <div class="blog-mega-header">
                                <span class="platform-icon">▶️</span>
                                YouTube                            </div>
                                                        <a href="/blogs/youtube/youtube-video-analyzer" class="blog-mega-item">
                                <div class="blog-mega-item-title">Video Analyzer</div>
                                <div class="blog-mega-item-count">51 guides</div>
                            </a>
                                                        <a href="/blogs/youtube/youtube-growth" class="blog-mega-item">
                                <div class="blog-mega-item-title">Growth Tips</div>
                                <div class="blog-mega-item-count">37 guides</div>
                            </a>
                                                        <a href="/blogs/youtube/youtube-seo" class="blog-mega-item">
                                <div class="blog-mega-item-title">YouTube SEO</div>
                                <div class="blog-mega-item-count">12 guides</div>
                            </a>
                                                        <a href="/blogs/youtube/youtube-shorts" class="blog-mega-item">
                                <div class="blog-mega-item-title">Shorts Strategy</div>
                                <div class="blog-mega-item-count">11 guides</div>
                            </a>
                                                        <a href="/blogs/youtube/youtube-chapters" class="blog-mega-item">
                                <div class="blog-mega-item-title">Chapters Guide</div>
                                <div class="blog-mega-item-count">30 guides</div>
                            </a>
                                                        <a href="/blogs/youtube/youtube-monetization" class="blog-mega-item">
                                <div class="blog-mega-item-title">Monetization</div>
                                <div class="blog-mega-item-count">9 guides</div>
                            </a>
                                                    </div>
                                                <div class="blog-mega-column">
                            <div class="blog-mega-header">
                                <span class="platform-icon">📸</span>
                                Instagram                            </div>
                                                        <a href="/blogs/instagram/instagram-apps" class="blog-mega-item">
                                <div class="blog-mega-item-title">Apps & Tools</div>
                                <div class="blog-mega-item-count">128 guides</div>
                            </a>
                                                        <a href="/blogs/instagram/instagram-captions" class="blog-mega-item">
                                <div class="blog-mega-item-title">Captions</div>
                                <div class="blog-mega-item-count">118 guides</div>
                            </a>
                                                        <a href="/blogs/instagram/instagram-errors-fixes" class="blog-mega-item">
                                <div class="blog-mega-item-title">Error Fixes</div>
                                <div class="blog-mega-item-count">163 guides</div>
                            </a>
                                                        <a href="/blogs/instagram/instagram-tips-tricks" class="blog-mega-item">
                                <div class="blog-mega-item-title">Tips & Tricks</div>
                                <div class="blog-mega-item-count">109 guides</div>
                            </a>
                                                    </div>
                                                <div class="blog-mega-column">
                            <div class="blog-mega-header">
                                <span class="platform-icon">🎵</span>
                                TikTok                            </div>
                                                        <a href="/blogs/tiktok/tiktok-captions" class="blog-mega-item">
                                <div class="blog-mega-item-title">Captions</div>
                                <div class="blog-mega-item-count">2 guides</div>
                            </a>
                                                        <a href="/blogs/tiktok/tiktok-errors-fixes" class="blog-mega-item">
                                <div class="blog-mega-item-title">Error Fixes</div>
                                <div class="blog-mega-item-count">21 guides</div>
                            </a>
                                                        <a href="/blogs/tiktok/tiktok-tips-tricks" class="blog-mega-item">
                                <div class="blog-mega-item-title">Tips & Tricks</div>
                                <div class="blog-mega-item-count">6 guides</div>
                            </a>
                                                    </div>
                                            </div>
                    <div class="mega-menu-footer">
                        <a href="/all-news">View All Articles →</a>
                    </div>
                </div>
            </div>
            <a href="/about" class="nav-link">About</a>
            <a href="/contact" class="nav-link">Contact</a>
        </div>

        <!-- Desktop CTA Buttons -->
        <div class="nav-cta">
            <button class="theme-toggle" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleTheme()" aria-label="Toggle theme" data-cf-modified-3588e567512663a46ee4eb60-="">
                <span class="icon-moon">🌙</span>
                <span class="icon-sun">☀️</span>
            </button>
            <a href="/" class="btn btn-primary">Try Free Tool</a>
        </div>

        <!-- Mobile Theme Toggle + Hamburger -->
        <div class="nav-controls-mobile">
            <button class="theme-toggle" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleTheme()" aria-label="Toggle theme" data-cf-modified-3588e567512663a46ee4eb60-="">
                <span class="icon-moon">🌙</span>
                <span class="icon-sun">☀️</span>
            </button>
            <button class="nav-hamburger" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleMobileMenu()" aria-label="Menu" data-cf-modified-3588e567512663a46ee4eb60-="">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>

    <!-- Mobile Dropdown Menu -->
    <div class="nav-mobile" id="navMobile">
        <a href="/" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMobileMenu()" data-cf-modified-3588e567512663a46ee4eb60-="">
            <span class="nav-icon">🏠</span> Home
        </a>
        <a href="/tools" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMobileMenu()" data-cf-modified-3588e567512663a46ee4eb60-="">
            <span class="nav-icon">🔧</span> Tools
        </a>
        <a href="/all-news" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMobileMenu()" data-cf-modified-3588e567512663a46ee4eb60-="">
            <span class="nav-icon">📝</span> Blog
        </a>
        <a href="/about" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMobileMenu()" data-cf-modified-3588e567512663a46ee4eb60-="">
            <span class="nav-icon">ℹ️</span> About
        </a>
        <a href="/contact" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMobileMenu()" data-cf-modified-3588e567512663a46ee4eb60-="">
            <span class="nav-icon">📧</span> Contact
        </a>

        <div class="nav-mobile-divider"></div>

        <div class="nav-mobile-cta">
            <a href="/" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMobileMenu()" class="btn btn-primary" data-cf-modified-3588e567512663a46ee4eb60-="">Try Free Tool</a>
        </div>
    </div>
</nav>

<style>
/* Timestamp Generator Styles */
.timestamp-output {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}

.timestamp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.timestamp-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.timestamp-actions {
    display: flex;
    gap: 8px;
}

.timestamp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.timestamp-btn-primary {
    background: var(--brand-primary);
    color: white;
}

.timestamp-btn-primary:hover {
    background: var(--brand-secondary);
}

.timestamp-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.timestamp-btn-secondary:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

.timestamp-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timestamp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    transition: all 0.2s;
}

.timestamp-item:hover {
    border-color: var(--brand-primary);
}

.timestamp-time {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-primary);
    background: rgba(239, 68, 68, 0.1);
    padding: 6px 12px;
    border-radius: 6px;
    min-width: 70px;
    text-align: center;
}

.timestamp-label {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
}

.timestamp-edit-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transition: all 0.2s;
}

.timestamp-item:hover .timestamp-edit-btn {
    opacity: 1;
}

.timestamp-edit-btn:hover {
    color: var(--brand-primary);
}

.timestamp-preview {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
    font-family: monospace;
    font-size: 14px;
    white-space: pre-wrap;
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
}

/* Video Info Card */
.video-info-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 16px;
    margin-bottom: 20px;
}

.video-thumbnail {
    width: 160px;
    height: 90px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.video-details {
    flex: 1;
    min-width: 0;
}

.video-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.video-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Manual Input Section */
.manual-input-section {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}

.manual-input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.manual-input-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.add-timestamp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-timestamp-btn:hover {
    background: rgba(34, 197, 94, 0.2);
}

.timestamp-input-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.timestamp-input-time {
    width: 100px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: monospace;
    font-size: 14px;
    text-align: center;
}

.timestamp-input-label {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
}

.timestamp-input-remove {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.timestamp-input-remove:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.2s;
}

.feature-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.feature-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Tips Box */
.tips-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-top: 40px;
}

.tips-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tips-list {
    display: grid;
    gap: 12px;
}

.tip-item {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tip-icon {
    color: #3b82f6;
    font-weight: bold;
}

@media (max-width: 768px) {
    .video-info-card {
        flex-direction: column;
    }
    .video-thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    .timestamp-input-row {
        flex-wrap: wrap;
    }
    .timestamp-input-time {
        width: 100%;
    }
    .timestamp-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .timestamp-actions {
        width: 100%;
    }
    .timestamp-actions .timestamp-btn {
        flex: 1;
        justify-content: center;
    }
}
</style>

<!-- Hero Section -->
<section class="hero" id="generator">
    <div class="hero-content animate-in">
        <div class="hero-badge">
            <span class="hero-badge-dot"></span>
            Pre-Upload Analysis • 99+ Languages • Content-Driven AI
        </div>
        <h1 class="hero-title">YouTube <span>Video</span><br>Analyzer</h1>
        <p class="hero-subtitle">Optimize your videos BEFORE uploading. Get Click Potential %, Emotional Peaks, Hook Score, and YouTube Studio-ready metadata — all from analyzing your actual content.</p>

        <!-- Quick Stats -->
        <div class="hero-stats" style="display: flex; justify-content: center; gap: 32px; margin-bottom: 32px; flex-wrap: wrap;">
            <div style="text-align: center;">
                <div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">99+</div>
                <div style="font-size: 13px; color: var(--text-muted);">Languages</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">~30s</div>
                <div style="font-size: 13px; color: var(--text-muted);">Analysis</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">200+</div>
                <div style="font-size: 13px; color: var(--text-muted);">Data Points</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 28px; font-weight: 800; color: var(--brand-primary);">$2</div>
                <div style="font-size: 13px; color: var(--text-muted);">Per Video</div>
            </div>
        </div>

        <div class="analyzer-card">
            <div class="analyzer-header">
                <div class="analyzer-icon">🎬</div>
                <div>
                    <div class="analyzer-title">Video Analyzer</div>
                    <div class="analyzer-subtitle">Paste YouTube URL or upload video to get complete analysis</div>
                </div>
            </div>
            <div class="analyzer-form" id="analyzerForm">
                <div class="analyzer-input-wrapper">
                    <input type="text" id="videoUrl" class="analyzer-input" placeholder="Paste YouTube video URL..." autocomplete="off">
                    <button class="btn btn-primary analyzer-btn" onclick="if (!window.__cfRLUnblockHandlers) return false; analyzeVideo()" data-cf-modified-3588e567512663a46ee4eb60-="">Analyze Video</button>
                </div>
                <div class="analyzer-hint"><span>💡</span> Works with YouTube URLs, video uploads, or connected channels</div>
                <div class="analyzer-loading" id="analyzerLoading">
                    <div class="spinner"></div>
                    <div class="loading-text">Analyzing video...</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- What You Get Section -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">What You Get</span>
        <h2 class="section-title">Pre-Upload Video Intelligence</h2>
        <p class="section-subtitle">We analyze your actual video CONTENT — not just keywords like VidIQ or TubeBuddy. Know exactly how your video will perform before you post.</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🎯</div>
                <div class="feature-title">Click Potential %</div>
                <div class="feature-desc">Know your video's click-through potential BEFORE uploading. Our AI predicts how likely viewers are to click based on <strong>actual content analysis</strong> — not keyword guessing.</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">📈</div>
                <div class="feature-title">Emotional Peaks</div>
                <div class="feature-desc">See exactly where emotional highs happen in your video. <strong>Timestamp each peak</strong> so you can create better thumbnails, hooks, and clips from the best moments.</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🎣</div>
                <div class="feature-title">Hook Score (0-100)</div>
                <div class="feature-desc">Your first 5 and 30 seconds decide everything. Get a <strong>Hook Score out of 100</strong> with specific tips to make viewers stay past the crucial first moments.</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">📋</div>
                <div class="feature-title">YouTube Studio Ready</div>
                <div class="feature-desc">Get <strong>title, description, tags, and hashtags</strong> — all optimized and formatted for direct copy-paste into YouTube Studio. No more guessing metadata.</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">📊</div>
                <div class="feature-title">Quality Scores (5 Metrics)</div>
                <div class="feature-desc">Instant scores for <strong>Clarity, Engagement, Educational Value, Entertainment, and Production Quality</strong>. Know exactly where your video stands.</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon">✅</div>
                <div class="feature-title">Prioritized Improvements</div>
                <div class="feature-desc">Actionable feedback ranked by <strong>High/Medium/Low impact</strong>. Fix what matters most before uploading, not after you lose views.</div>
            </div>
        </div>
    </div>
</section>

<!-- 99 Languages Section -->
<section class="section section-gray">
    <div class="section-header">
        <span class="section-badge">Multilingual</span>
        <h2 class="section-title">99 Languages + Mixed Mode</h2>
        <p class="section-subtitle">The only timestamp tool that truly understands multilingual content</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div style="background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 16px; padding: 32px; margin-bottom: 24px;">
            <p style="color: var(--text-secondary); line-height: 1.8; margin-bottom: 24px;">Perfect for creators who mix languages in their videos. Our AI understands context across languages and generates accurate chapters regardless of the language spoken.</p>
            <div style="display: grid; gap: 16px;">
                <div style="background: var(--bg-secondary); border-radius: 12px; padding: 16px;">
                    <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 8px;"><span id="localLangLabel">Local Language</span> Output</div>
                    <code style="font-size: 14px; color: var(--brand-primary);" id="localLangExample">0:00 - Introduction | 1:30 - Ingredients Needed</code>
                </div>
                <div style="background: var(--bg-secondary); border-radius: 12px; padding: 16px;">
                    <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 8px;">English Output</div>
                    <code style="font-size: 14px; color: var(--brand-primary);">0:00 - Introduction | 1:30 - Ingredients Needed</code>
                </div>
                <div style="background: var(--bg-secondary); border-radius: 12px; padding: 16px;">
                    <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 8px;">Mixed (Best for SEO)</div>
                    <code style="font-size: 14px; color: var(--brand-primary);" id="mixedLangExample">0:00 - Introduction | Intro</code>
                </div>
            </div>
        </div>
    </div>
</section>

<script type="3588e567512663a46ee4eb60-text/javascript">
// Language examples based on region/state
const langExamples = {
    // Indian States/Regions
    'ta': { name: 'Tamil', local: '0:00 - அறிமுகம் | 1:30 - பொருட்கள் தேவை', mixed: '0:00 - Introduction | அறிமுகம்' },
    'hi': { name: 'Hindi', local: '0:00 - परिचय | 1:30 - सामग्री', mixed: '0:00 - Introduction | परिचय' },
    'te': { name: 'Telugu', local: '0:00 - పరిచయం | 1:30 - పదార్థాలు', mixed: '0:00 - Introduction | పరిచయం' },
    'bn': { name: 'Bengali', local: '0:00 - ভূমিকা | 1:30 - উপকরণ', mixed: '0:00 - Introduction | ভূমিকা' },
    'mr': { name: 'Marathi', local: '0:00 - परिचय | 1:30 - साहित्य', mixed: '0:00 - Introduction | परिचय' },
    'gu': { name: 'Gujarati', local: '0:00 - પરિચય | 1:30 - સામગ્રી', mixed: '0:00 - Introduction | પરિચય' },
    'kn': { name: 'Kannada', local: '0:00 - ಪರಿಚಯ | 1:30 - ಪದಾರ್ಥಗಳು', mixed: '0:00 - Introduction | ಪರಿಚಯ' },
    'ml': { name: 'Malayalam', local: '0:00 - ആമുഖം | 1:30 - ചേരുവകൾ', mixed: '0:00 - Introduction | ആമുഖം' },
    'pa': { name: 'Punjabi', local: '0:00 - ਜਾਣ-ਪਛਾਣ | 1:30 - ਸਮੱਗਰੀ', mixed: '0:00 - Introduction | ਜਾਣ-ਪਛਾਣ' },
    'or': { name: 'Odia', local: '0:00 - ପରିଚୟ | 1:30 - ସାମଗ୍ରୀ', mixed: '0:00 - Introduction | ପରିଚୟ' },
    'as': { name: 'Assamese', local: '0:00 - পৰিচয় | 1:30 - সামগ্ৰী', mixed: '0:00 - Introduction | পৰিচয়' },
    // European
    'es': { name: 'Spanish', local: '0:00 - Introducción | 1:30 - Ingredientes', mixed: '0:00 - Introduction | Introducción' },
    'fr': { name: 'French', local: '0:00 - Introduction | 1:30 - Ingrédients', mixed: '0:00 - Introduction | Intro' },
    'de': { name: 'German', local: '0:00 - Einleitung | 1:30 - Zutaten', mixed: '0:00 - Introduction | Einleitung' },
    'it': { name: 'Italian', local: '0:00 - Introduzione | 1:30 - Ingredienti', mixed: '0:00 - Introduction | Introduzione' },
    'pt': { name: 'Portuguese', local: '0:00 - Introdução | 1:30 - Ingredientes', mixed: '0:00 - Introduction | Introdução' },
    'ru': { name: 'Russian', local: '0:00 - Введение | 1:30 - Ингредиенты', mixed: '0:00 - Introduction | Введение' },
    'pl': { name: 'Polish', local: '0:00 - Wstęp | 1:30 - Składniki', mixed: '0:00 - Introduction | Wstęp' },
    'nl': { name: 'Dutch', local: '0:00 - Introductie | 1:30 - Ingrediënten', mixed: '0:00 - Introduction | Introductie' },
    'tr': { name: 'Turkish', local: '0:00 - Giriş | 1:30 - Malzemeler', mixed: '0:00 - Introduction | Giriş' },
    // East Asian
    'ja': { name: 'Japanese', local: '0:00 - はじめに | 1:30 - 材料', mixed: '0:00 - Introduction | はじめに' },
    'ko': { name: 'Korean', local: '0:00 - 소개 | 1:30 - 재료', mixed: '0:00 - Introduction | 소개' },
    'zh': { name: 'Chinese', local: '0:00 - 介绍 | 1:30 - 食材', mixed: '0:00 - Introduction | 介绍' },
    'th': { name: 'Thai', local: '0:00 - บทนำ | 1:30 - ส่วนผสม', mixed: '0:00 - Introduction | บทนำ' },
    'vi': { name: 'Vietnamese', local: '0:00 - Giới thiệu | 1:30 - Nguyên liệu', mixed: '0:00 - Introduction | Giới thiệu' },
    'id': { name: 'Indonesian', local: '0:00 - Pendahuluan | 1:30 - Bahan', mixed: '0:00 - Introduction | Pendahuluan' },
    // Middle Eastern
    'ar': { name: 'Arabic', local: '0:00 - مقدمة | 1:30 - المكونات', mixed: '0:00 - Introduction | مقدمة' },
    'fa': { name: 'Persian', local: '0:00 - مقدمه | 1:30 - مواد لازم', mixed: '0:00 - Introduction | مقدمه' },
    'he': { name: 'Hebrew', local: '0:00 - הקדמה | 1:30 - מרכיבים', mixed: '0:00 - Introduction | הקדמה' },
    // Default
    'en': { name: 'English', local: '0:00 - Introduction | 1:30 - Ingredients Needed', mixed: '0:00 - Introduction | Intro' }
};

// Map Indian states/regions to languages
const stateToLang = {
    // Tamil Nadu
    'tamil nadu': 'ta', 'tamilnadu': 'ta', 'chennai': 'ta', 'coimbatore': 'ta', 'madurai': 'ta', 'trichy': 'ta', 'salem': 'ta',
    // Andhra Pradesh & Telangana
    'andhra pradesh': 'te', 'telangana': 'te', 'hyderabad': 'te', 'vijayawada': 'te', 'visakhapatnam': 'te',
    // Karnataka
    'karnataka': 'kn', 'bangalore': 'kn', 'bengaluru': 'kn', 'mysore': 'kn', 'mangalore': 'kn',
    // Kerala
    'kerala': 'ml', 'kochi': 'ml', 'cochin': 'ml', 'trivandrum': 'ml', 'thiruvananthapuram': 'ml', 'kozhikode': 'ml',
    // Maharashtra
    'maharashtra': 'mr', 'mumbai': 'mr', 'pune': 'mr', 'nagpur': 'mr',
    // Gujarat
    'gujarat': 'gu', 'ahmedabad': 'gu', 'surat': 'gu', 'vadodara': 'gu',
    // West Bengal
    'west bengal': 'bn', 'kolkata': 'bn', 'calcutta': 'bn',
    // Punjab
    'punjab': 'pa', 'chandigarh': 'pa', 'ludhiana': 'pa', 'amritsar': 'pa',
    // Odisha
    'odisha': 'or', 'orissa': 'or', 'bhubaneswar': 'or',
    // Assam
    'assam': 'as', 'guwahati': 'as',
    // Hindi belt
    'delhi': 'hi', 'new delhi': 'hi', 'uttar pradesh': 'hi', 'madhya pradesh': 'hi', 'rajasthan': 'hi',
    'bihar': 'hi', 'jharkhand': 'hi', 'haryana': 'hi', 'lucknow': 'hi', 'jaipur': 'hi', 'bhopal': 'hi', 'patna': 'hi'
};

// Map countries to languages
const countryToLang = {
    'in': 'hi', // India default to Hindi, will be overridden by state detection
    'us': 'en', 'gb': 'en', 'uk': 'en', 'au': 'en', 'ca': 'en',
    'es': 'es', 'mx': 'es', 'ar': 'es', 'co': 'es', 'pe': 'es', 'cl': 'es',
    'fr': 'fr', 'be': 'fr',
    'de': 'de', 'at': 'de', 'ch': 'de',
    'it': 'it',
    'br': 'pt', 'pt': 'pt',
    'ru': 'ru',
    'jp': 'ja',
    'kr': 'ko',
    'cn': 'zh', 'tw': 'zh', 'hk': 'zh',
    'th': 'th',
    'vn': 'vi',
    'id': 'id',
    'sa': 'ar', 'ae': 'ar', 'eg': 'ar',
    'ir': 'fa',
    'il': 'he',
    'tr': 'tr',
    'pl': 'pl',
    'nl': 'nl'
};

// Update examples based on detected location
function updateLanguageExamples(langCode) {
    const langData = langExamples[langCode] || langExamples['en'];

    const labelEl = document.getElementById('localLangLabel');
    const localEl = document.getElementById('localLangExample');
    const mixedEl = document.getElementById('mixedLangExample');

    if (labelEl) labelEl.textContent = langData.name;
    if (localEl) localEl.textContent = langData.local;
    if (mixedEl) mixedEl.textContent = langData.mixed;
}

// Detect user location using IP geolocation
async function detectUserLocation() {
    try {
        // Try multiple geolocation APIs for reliability
        const response = await fetch('https://ipapi.co/json/', { timeout: 3000 });
        const data = await response.json();

        if (data) {
            // Check if in India and detect state
            if (data.country_code && data.country_code.toLowerCase() === 'in') {
                const region = (data.region || '').toLowerCase();
                const city = (data.city || '').toLowerCase();

                // Check state first, then city
                if (stateToLang[region]) {
                    updateLanguageExamples(stateToLang[region]);
                    return;
                }
                if (stateToLang[city]) {
                    updateLanguageExamples(stateToLang[city]);
                    return;
                }
                // Default to Hindi for other Indian regions
                updateLanguageExamples('hi');
                return;
            }

            // For other countries
            if (data.country_code) {
                const countryLang = countryToLang[data.country_code.toLowerCase()];
                if (countryLang) {
                    updateLanguageExamples(countryLang);
                    return;
                }
            }
        }
    } catch (e) {
        console.log('Geolocation fallback to browser language');
    }

    // Fallback to browser language
    const browserLang = (navigator.language || navigator.userLanguage || 'en').split('-')[0].toLowerCase();
    updateLanguageExamples(langExamples[browserLang] ? browserLang : 'en');
}

// Run on page load
detectUserLocation();
</script>


<!-- Timestamp Format Guide -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Guide</span>
        <h2 class="section-title">YouTube Timestamp Format Rules</h2>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div class="tips-box">
            <div class="tips-title">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                Timestamp Requirements
            </div>
            <div class="tips-list">
                <div class="tip-item">
                    <span class="tip-icon">1.</span>
                    <span>First timestamp MUST be <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">0:00</code> for chapters to work</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">2.</span>
                    <span>Minimum of 3 timestamps required for chapters to appear</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">3.</span>
                    <span>Each chapter must be at least 10 seconds long</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">4.</span>
                    <span>Format: <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">MM:SS</code> or <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">H:MM:SS</code> for videos over 1 hour</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">5.</span>
                    <span>Timestamps must be in ascending order (chronological)</span>
                </div>
                <div class="tip-item">
                    <span class="tip-icon">6.</span>
                    <span>Add timestamps to your video description, not comments</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works -->
<section class="section section-gray" id="how-it-works">
    <div class="section-header">
        <span class="section-badge">How It Works</span>
        <h2 class="section-title">3 Simple Steps</h2>
    </div>
    <div class="steps-container">
        <div class="steps-grid">
            <div class="step-card">
                <div class="step-number">1</div>
                <h3 class="step-title">Enter Video URL</h3>
                <p class="step-desc">Paste your YouTube video URL or create timestamps manually using our editor.</p>
            </div>
            <div class="step-card">
                <div class="step-number">2</div>
                <h3 class="step-title">Generate Timestamps</h3>
                <p class="step-desc">We analyze your video and suggest chapter breaks, or you can customize your own.</p>
            </div>
            <div class="step-card">
                <div class="step-number">3</div>
                <h3 class="step-title">Copy & Paste</h3>
                <p class="step-desc">Copy the formatted timestamps directly into your YouTube video description.</p>
            </div>
        </div>
    </div>
</section>

<!-- Stats Bar - Hidden for now
<section class="stats-bar-modern">
    <div class="stats-container">
        <div class="stat-card">
            <div class="stat-icon purple">🎬</div>
            <div class="stat-value" id="stat-total">0</div>
            <div class="stat-label">Videos Analyzed</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon blue">📊</div>
            <div class="stat-value" id="stat-today">0</div>
            <div class="stat-label">Today</div>
        </div>
        <div class="stat-card live">
            <div class="stat-icon green">👥</div>
            <div class="stat-value">
                <span class="live-dot"></span>
                <span id="stat-users">0</span>
            </div>
            <div class="stat-label">Active Now</div>
        </div>
    </div>
</section>
-->

<!-- Related Blog Posts -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Learn More</span>
        <h2 class="section-title">YouTube Chapters Guides</h2>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
            <a href="/how-to-add-chapters-to-youtube-videos" style="text-decoration: none;">
                <div class="feature-card" style="height: 100%;">
                    <div class="feature-icon">📚</div>
                    <div class="feature-title">How to Add Chapters to YouTube Videos</div>
                    <div class="feature-desc">Complete step-by-step guide to adding chapters that work. Learn the format, rules, and best practices.</div>
                </div>
            </a>
            <a href="/" style="text-decoration: none;">
                <div class="feature-card" style="height: 100%;">
                    <div class="feature-icon">📈</div>
                    <div class="feature-title">YouTube Video Analyzer</div>
                    <div class="feature-desc">Get a complete analysis of any YouTube video including engagement metrics and optimization tips.</div>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- Comparison Table -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Comparison</span>
        <h2 class="section-title">Why We're Different</h2>
        <p class="section-subtitle">We analyze your VIDEO CONTENT. They analyze your typed keywords.</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div class="table-responsive" style="border-radius: 16px; overflow: hidden; border: 1px solid var(--border-light);">
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead>
                    <tr>
                        <th style="background: #1a1a2e; color: white; padding: 16px; text-align: left; font-weight: 600; width: 34%;">Feature</th>
                        <th style="background: #1a1a2e; color: white; padding: 16px; text-align: center; width: 22%;">VidIQ</th>
                        <th style="background: #1a1a2e; color: white; padding: 16px; text-align: center; width: 22%;">TubeBuddy</th>
                        <th style="background: #e63946; color: white; padding: 16px; text-align: center; font-weight: 700; width: 22%;">InstantViews</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="background: var(--card-bg);">
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Pre-Upload Analysis</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #22c55e;">✅</td>
                    </tr>
                    <tr style="background: var(--bg-secondary);">
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Content-Driven (not keyword)</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #22c55e;">✅</td>
                    </tr>
                    <tr style="background: var(--card-bg);">
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Click Potential %</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #22c55e;">✅</td>
                    </tr>
                    <tr style="background: var(--bg-secondary);">
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Emotional Peaks</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #22c55e;">✅ Timestamped</td>
                    </tr>
                    <tr style="background: var(--card-bg);">
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Hook Score (0-100)</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #ef4444;">❌</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #22c55e;">✅ + Tips</td>
                    </tr>
                    <tr style="background: var(--bg-secondary);">
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">Languages</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: var(--text-muted);">Limited</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: var(--text-muted);">Limited</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; font-weight: 600; color: var(--brand-primary);">99+</td>
                    </tr>
                    <tr style="background: var(--card-bg);">
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light);">YouTube Studio Ready Output</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: var(--text-muted);">Partial</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: var(--text-muted);">Partial</td>
                        <td style="padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; color: #22c55e;">✅ Complete</td>
                    </tr>
                    <tr style="background: var(--bg-secondary);">
                        <td style="padding: 14px 16px;">Pay Per Video</td>
                        <td style="padding: 14px 16px; text-align: center; color: var(--text-muted);">$7.50-$50/mo</td>
                        <td style="padding: 14px 16px; text-align: center; color: var(--text-muted);">$4.99-$79/mo</td>
                        <td style="padding: 14px 16px; text-align: center; font-weight: 600; color: var(--brand-primary);">$2/video</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Pricing Section -->
<section class="section section-gray" id="pricing">
    <div class="section-header">
        <span class="section-badge">Pricing</span>
        <h2 class="section-title">Simple, Transparent Pricing</h2>
        <p class="section-subtitle">Pay per video or save with monthly plans. No hidden fees.</p>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <!-- Pricing Toggle -->
        <div class="pricing-toggle-wrapper">
            <div class="pricing-toggle">
                <button id="toggleCredits" class="pricing-toggle-btn active" onclick="if (!window.__cfRLUnblockHandlers) return false; togglePricing('credits')" data-cf-modified-3588e567512663a46ee4eb60-="">
                    <span>Credit Packs</span>
                    <span class="toggle-desc">One-time purchase</span>
                </button>
                <button id="toggleRecurring" class="pricing-toggle-btn" onclick="if (!window.__cfRLUnblockHandlers) return false; togglePricing('recurring')" data-cf-modified-3588e567512663a46ee4eb60-="">
                    <span>Monthly</span>
                    <span class="toggle-desc">Save up to 50%</span>
                </button>
            </div>
        </div>

        <!-- Credit Packs -->
        <div id="pricingCredits" class="pricing-grid pricing-grid-4">
            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Test</h3>
                    <p class="pricing-plan-desc">Try it out</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$2</span>
                    <span class="price-amount price-inr">₹99</span>
                </div>
                <div class="pricing-credits">1 video analysis</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Full 200+ data points</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Click Potential %</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>YouTube Studio ready</li>
                </ul>
                <a href="/signup" class="pricing-btn">Get Started</a>
            </div>

            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Starter</h3>
                    <p class="pricing-plan-desc">For casual creators</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$9.99</span>
                    <span class="price-amount price-inr">₹299</span>
                </div>
                <div class="pricing-credits">5 video credits</div>
                <div class="pricing-per-video price-usd">$2.00 per video</div>
                <div class="pricing-per-video price-inr">₹60 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Test</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Credits never expire</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Email support</li>
                </ul>
                <a href="/signup" class="pricing-btn">Get Started</a>
            </div>

            <div class="pricing-card pricing-card-featured">
                <div class="pricing-badge">Most Popular</div>
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Creator</h3>
                    <p class="pricing-plan-desc">For active creators</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$24.99</span>
                    <span class="price-amount price-inr">₹699</span>
                </div>
                <div class="pricing-credits">15 video credits</div>
                <div class="pricing-per-video price-usd">$1.67 per video</div>
                <div class="pricing-per-video price-inr">₹47 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Starter</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Priority support</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>17% savings</li>
                </ul>
                <a href="/signup" class="pricing-btn pricing-btn-primary">Get Started</a>
            </div>

            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Pro</h3>
                    <p class="pricing-plan-desc">For power users</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$49.99</span>
                    <span class="price-amount price-inr">₹1,499</span>
                </div>
                <div class="pricing-credits">40 video credits</div>
                <div class="pricing-per-video price-usd">$1.25 per video</div>
                <div class="pricing-per-video price-inr">₹37 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Creator</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Best per-video price</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>38% savings</li>
                </ul>
                <a href="/signup" class="pricing-btn">Get Started</a>
            </div>
        </div>

        <!-- Monthly Plans -->
        <div id="pricingRecurring" class="pricing-grid pricing-grid-3" style="display: none;">
            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Basic</h3>
                    <p class="pricing-plan-desc">For hobbyists</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$6.99</span>
                    <span class="price-amount price-inr">₹249</span>
                    <span class="price-period">/month</span>
                </div>
                <div class="pricing-credits">5 videos/month</div>
                <div class="pricing-per-video price-usd">$1.40 per video</div>
                <div class="pricing-per-video price-inr">₹50 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Full 200+ data points</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Unused credits roll over</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Cancel anytime</li>
                </ul>
                <a href="/signup" class="pricing-btn">Subscribe</a>
            </div>

            <div class="pricing-card pricing-card-featured">
                <div class="pricing-badge">Best Value</div>
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Growth</h3>
                    <p class="pricing-plan-desc">For serious creators</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$14.99</span>
                    <span class="price-amount price-inr">₹499</span>
                    <span class="price-period">/month</span>
                </div>
                <div class="pricing-credits">15 videos/month</div>
                <div class="pricing-per-video price-usd">$1.00 per video</div>
                <div class="pricing-per-video price-inr">₹33 per video</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Basic</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Priority support</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>50% savings vs one-time</li>
                </ul>
                <a href="/signup" class="pricing-btn pricing-btn-primary">Subscribe</a>
            </div>

            <div class="pricing-card">
                <div class="pricing-card-header">
                    <h3 class="pricing-plan-name">Unlimited</h3>
                    <p class="pricing-plan-desc">For agencies & teams</p>
                </div>
                <div class="pricing-price">
                    <span class="price-amount price-usd">$29.99</span>
                    <span class="price-amount price-inr">₹999</span>
                    <span class="price-period">/month</span>
                </div>
                <div class="pricing-credits">Unlimited videos</div>
                <div class="pricing-per-video">Analyze all you want</div>
                <ul class="pricing-features">
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Everything in Growth</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Unlimited analyses</li>
                    <li><svg class="check-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Team collaboration</li>
                </ul>
                <a href="/signup" class="pricing-btn">Subscribe</a>
            </div>
        </div>

        <p class="pricing-note">Free signup includes 1 video analysis. No credit card required.</p>
    </div>
</section>

<style>
/* Professional Pricing Styles */
.pricing-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}
.pricing-toggle {
    display: inline-flex;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 6px;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pricing-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}
.pricing-toggle-btn span:first-child {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-secondary);
}
.pricing-toggle-btn .toggle-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.pricing-toggle-btn.active {
    background: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pricing-toggle-btn.active span:first-child {
    color: white;
}
.pricing-toggle-btn.active .toggle-desc {
    color: rgba(255,255,255,0.7);
}

.pricing-grid {
    display: grid;
    gap: 24px;
}
.pricing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    transition: all 0.2s ease;
}
.pricing-card:hover {
    border-color: var(--text-muted);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.pricing-card-featured {
    border: 2px solid var(--brand-primary);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.03) 0%, var(--card-bg) 100%);
}
.pricing-card-featured:hover {
    border-color: var(--brand-primary);
}

.pricing-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: linear-gradient(135deg, var(--brand-primary) 0%, #dc2626 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.pricing-card-header {
    margin-bottom: 20px;
}
.pricing-plan-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}
.pricing-plan-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.pricing-price {
    margin-bottom: 8px;
}
.price-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1px;
    line-height: 1;
}
.price-period {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-muted);
}
.price-inr {
    display: none;
}

.pricing-credits {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.pricing-per-video {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.check-icon {
    width: 18px;
    height: 18px;
    color: #22c55e;
    flex-shrink: 0;
}

.pricing-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.pricing-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}
.pricing-btn-primary {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}
.pricing-btn-primary:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.pricing-note {
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pricing-grid-4, .pricing-grid-3 { grid-template-columns: 1fr; }
    .pricing-toggle-btn { min-width: 120px; padding: 10px 20px; }
    .price-amount { font-size: 36px; }
}
</style>

<script type="3588e567512663a46ee4eb60-text/javascript">
function togglePricing(type) {
    const credits = document.getElementById('pricingCredits');
    const recurring = document.getElementById('pricingRecurring');
    const btnCredits = document.getElementById('toggleCredits');
    const btnRecurring = document.getElementById('toggleRecurring');

    if (type === 'credits') {
        credits.style.display = 'grid';
        recurring.style.display = 'none';
        btnCredits.classList.add('active');
        btnRecurring.classList.remove('active');
    } else {
        credits.style.display = 'none';
        recurring.style.display = 'grid';
        btnRecurring.classList.add('active');
        btnCredits.classList.remove('active');
    }
}

// Detect India and show INR pricing
async function detectPricingRegion() {
    try {
        const response = await fetch('https://ipapi.co/json/', { timeout: 3000 });
        const data = await response.json();
        if (data && data.country_code && data.country_code.toLowerCase() === 'in') {
            document.querySelectorAll('.price-usd').forEach(el => el.style.display = 'none');
            document.querySelectorAll('.price-inr').forEach(el => el.style.display = 'inline');
        }
    } catch (e) {}
}
detectPricingRegion();
</script>

<!-- Pro Tips Section -->
<section class="section section-white">
    <div class="section-header">
        <span class="section-badge">Pro Tips</span>
        <h2 class="section-title">Maximize Your Video Performance</h2>
    </div>
    <div style="max-width: 1140px; margin: 0 auto; padding: 0 24px;">
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">🎯</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Analyze Before Upload</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Fix issues before posting, not after you lose views</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">🎣</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Perfect Your Hook</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Aim for 80+ Hook Score — first 30 seconds are crucial</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">📈</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Use Emotional Peaks</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Create thumbnails from high-emotion moments</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">📋</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Copy-Paste Metadata</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Use our YouTube Studio ready output directly</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">✅</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Fix High-Impact First</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Focus on "High" priority improvements only</div>
            </div>
            <div style="background: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-light);">
                <div style="font-size: 24px; margin-bottom: 8px;">🔄</div>
                <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;">Re-analyze After Edits</div>
                <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">Upload revised video to confirm improvements</div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="section section-gray" id="faq">
    <div class="section-header">
        <span class="section-badge">FAQ</span>
        <h2 class="section-title">Frequently Asked Questions</h2>
    </div>
    <div class="faq-list">
        <div class="faq-item"><button class="faq-question" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFaq(this)" data-cf-modified-3588e567512663a46ee4eb60-="">How is this different from VidIQ or TubeBuddy?<span class="faq-icon">+</span></button><div class="faq-answer"><p>VidIQ and TubeBuddy analyze <strong>keywords you type</strong>. We analyze your actual <strong>video content</strong>. They suggest titles based on search trends — we tell you if YOUR video will perform well based on what's actually in it. Plus, we work BEFORE you upload, so you can fix issues before losing views.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFaq(this)" data-cf-modified-3588e567512663a46ee4eb60-="">What is Click Potential %?<span class="faq-icon">+</span></button><div class="faq-answer"><p>Click Potential predicts how likely viewers are to click your video based on analyzing your <strong>actual content</strong> — hook strength, emotional peaks, title/thumbnail compatibility, and topic relevance. It's not based on keywords, but on what's really in your video.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFaq(this)" data-cf-modified-3588e567512663a46ee4eb60-="">What languages are supported?<span class="faq-icon">+</span></button><div class="faq-answer"><p>We support <strong>99+ languages</strong> including Hindi, Tamil, Telugu, Spanish, French, German, Japanese, Korean, Arabic, and many more. 30 languages have 85%+ accuracy confidence. We also offer <strong>mixed language output</strong> — perfect for creators who speak multiple languages in one video.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFaq(this)" data-cf-modified-3588e567512663a46ee4eb60-="">How does pricing work?<span class="faq-icon">+</span></button><div class="faq-answer"><p>Simple pay-per-video pricing. Buy credit packs ($2-$49.99) that never expire, or subscribe monthly for better per-video rates. <strong>Free signup includes 1 free video analysis</strong> — no credit card required. India users get special INR pricing.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFaq(this)" data-cf-modified-3588e567512663a46ee4eb60-="">Can I analyze videos before uploading to YouTube?<span class="faq-icon">+</span></button><div class="faq-answer"><p>Yes! That's our main differentiator. Upload your video file directly, get the full analysis, fix any issues, then upload to YouTube with confidence. You can also analyze existing YouTube videos via URL.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFaq(this)" data-cf-modified-3588e567512663a46ee4eb60-="">What do I get in a video analysis?<span class="faq-icon">+</span></button><div class="faq-answer"><p>200+ data points including: <strong>Click Potential %</strong>, Emotional Peaks (timestamped), Hook Score (0-100) with tips, Quality Scores (5 metrics), YouTube Studio ready metadata (title, description, tags, hashtags), Smart Chapters, and prioritized improvement suggestions.</p></div></div>
        <div class="faq-item"><button class="faq-question" onclick="if (!window.__cfRLUnblockHandlers) return false; toggleFaq(this)" data-cf-modified-3588e567512663a46ee4eb60-="">Do credits expire?<span class="faq-icon">+</span></button><div class="faq-answer"><p>No! Credit packs <strong>never expire</strong>. Buy once, use whenever you want. Monthly subscriptions include fresh credits each month, and unused credits roll over to the next month.</p></div></div>
    </div>
</section>

<!-- Bottom CTA -->
<section class="section section-dark cta-section">
    <div class="cta-content">
        <h2 class="cta-title">Know How Your Video Will Perform — Before You Post</h2>
        <p class="cta-subtitle">Stop guessing. Get Click Potential %, Hook Score, and YouTube Studio ready metadata in 30 seconds.</p>
        <div class="cta-buttons">
            <a href="/signup" class="btn btn-primary btn-lg">Start Free — 1 Video Included</a>
            <a href="#pricing" class="btn btn-outline btn-lg">View Pricing</a>
        </div>
    </div>
</section>


<!-- Modal Styles -->
<style>
/* ============================================
   GLOBAL MODAL SYSTEM
   ============================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
}

/* Modal Container */
.modal-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    background: var(--card-bg, #fff);
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

/* Wider on large screens */
@media (min-width: 1200px) {
    .modal-container {
        max-width: 1000px;
    }
}

@media (min-width: 1400px) {
    .modal-container {
        max-width: 1100px;
    }
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
}

.modal-title-icon {
    font-size: 24px;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--brand-primary, #ef4444);
    color: white;
}

/* Modal Body */
.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.modal-footer .btn {
    flex: 1;
}

/* ============================================
   RESULT MODAL SPECIFIC STYLES
   ============================================ */

/* Channel Info */
.modal-channel-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.modal-channel-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-light, #e5e7eb);
}

.modal-channel-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-bottom: 4px;
}

.modal-channel-meta {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Status Badge */
.modal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 24px;
}

.modal-status-badge.success {
    background: var(--success-bg, rgba(16, 185, 129, 0.1));
    color: var(--success, #10b981);
}

.modal-status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.modal-status-badge.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Stats Grid - 4 columns large, 2 columns small */
.modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Video Grid - 3 columns large, 1 column small */
.modal-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.modal-video-card {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-video-card:hover {
    border-color: var(--brand-primary, #ef4444);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.modal-video-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.modal-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-video-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.modal-video-body {
    padding: 8px 10px;
}

.modal-video-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #111);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.modal-video-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
}

.modal-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 16px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-stat-card {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.modal-stat-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.modal-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary, #111);
    margin-bottom: 4px;
}

.modal-stat-label {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

/* Progress Section */
.modal-progress-section {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.modal-progress-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-progress-item {
    margin-bottom: 16px;
}

.modal-progress-item:last-child {
    margin-bottom: 0;
}

.modal-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.modal-progress-label {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-progress-values {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #111);
}

.modal-progress-bar {
    height: 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.modal-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.modal-progress-fill.green { background: var(--success, #10b981); }
.modal-progress-fill.yellow { background: #f59e0b; }
.modal-progress-fill.red { background: #ef4444; }

/* Error State */
.modal-error {
    text-align: center;
    padding: 40px 20px;
}

.modal-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.modal-error-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-bottom: 8px;
}

.modal-error-message {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Loading State */
.modal-loading {
    text-align: center;
    padding: 60px 20px;
}

.modal-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light, #e5e7eb);
    border-top-color: var(--brand-primary, #ef4444);
    border-radius: 50%;
    animation: modalSpin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes modalSpin {
    to { transform: rotate(360deg); }
}

.modal-loading-text {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-video-grid {
        grid-template-columns: 1fr;
    }
    .modal-container {
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }
    .modal-body {
        padding: 20px;
    }
}

/* 2-Column Layout for monetization results */
.modal-2col-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .modal-2col-layout {
        grid-template-columns: 1fr;
    }
}

/* 2x2 Stats Grid */
.modal-stats-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 3-column video grid that becomes 2 on tablet, 1 on mobile */
.modal-video-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .modal-video-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .modal-video-grid-3 {
        grid-template-columns: 1fr;
    }
}
</style>

<!-- Result Modal Container -->
<div class="modal-overlay" id="resultModal">
    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-title">
                <span class="modal-title-icon" id="modalTitleIcon">📊</span>
                <span id="modalTitleText">Results</span>
            </div>
            <button class="modal-close" onclick="if (!window.__cfRLUnblockHandlers) return false; closeResultModal()" data-cf-modified-3588e567512663a46ee4eb60-="">&times;</button>
        </div>
        <div class="modal-body" id="modalBody">
            <!-- Populated by JavaScript -->
        </div>
        <div class="modal-footer" id="modalFooter">
            <button class="btn btn-outline" onclick="if (!window.__cfRLUnblockHandlers) return false; closeResultModal()" data-cf-modified-3588e567512663a46ee4eb60-="">Close</button>
            <button class="btn btn-primary" onclick="if (!window.__cfRLUnblockHandlers) return false; checkAnother()" id="modalCheckAnotherBtn" data-cf-modified-3588e567512663a46ee4eb60-="">Check Another</button>
        </div>
    </div>
</div>

<!-- Modal JavaScript -->
<script type="3588e567512663a46ee4eb60-text/javascript">
// Global Modal Functions
function openResultModal(title = 'Results', icon = '📊') {
    document.getElementById('modalTitleText').textContent = title;
    document.getElementById('modalTitleIcon').textContent = icon;
    document.getElementById('resultModal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeResultModal() {
    document.getElementById('resultModal').classList.remove('active');
    document.body.style.overflow = '';
}

function setModalContent(html) {
    document.getElementById('modalBody').innerHTML = html;
}

function setModalLoading(text = 'Loading...') {
    document.getElementById('modalBody').innerHTML = `
        <div class="modal-loading">
            <div class="modal-loading-spinner"></div>
            <div class="modal-loading-text">${text}</div>
        </div>
    `;
}

function setModalError(message) {
    document.getElementById('modalBody').innerHTML = `
        <div class="modal-error">
            <div class="modal-error-icon">⚠️</div>
            <div class="modal-error-title">Unable to Process</div>
            <div class="modal-error-message">${message}</div>
        </div>
    `;
}

function checkAnother() {
    closeResultModal();
    const input = document.getElementById('videoUrl');
    if (input) {
        input.value = '';
        input.focus();
    }
}

// Close on overlay click
document.getElementById('resultModal').addEventListener('click', function(e) {
    if (e.target === this) closeResultModal();
});

// Close on ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeResultModal();
});
</script>

<!-- Footer -->
<footer class="footer">
    <div class="footer-container">
        <div class="footer-grid">
            <div>
                <div class="footer-brand">Instant<span>Views</span></div>
                <p class="footer-desc">AI-powered YouTube optimization for creators who want more views, more subscribers, and more impact.</p>
            </div>
                        <div>
                <div class="footer-title">YouTube Tools</div>
                <ul class="footer-links">
                                        <li><a href="/youtube-channel-audit">Channel Audit</a></li>
                                        <li><a href="/youtube-subscriber-count">Subscriber Count</a></li>
                                        <li><a href="/youtube-money-calculator">Money Calculator</a></li>
                                        <li><a href="/youtube-monetization-checker">Monetization Checker</a></li>
                                        <li><a href="/youtube-timestamp-generator">Timestamp Generator</a></li>
                                        <li><a href="/tools">All Tools</a></li>
                                    </ul>
            </div>
                        <div>
                <div class="footer-title">Company</div>
                <ul class="footer-links">
                                        <li><a href="/about">About</a></li>
                                        <li><a href="/blog">Blog</a></li>
                                        <li><a href="/contact">Contact</a></li>
                                    </ul>
            </div>
                        <div>
                <div class="footer-title">Legal</div>
                <ul class="footer-links">
                                        <li><a href="/privacy-policy">Privacy Policy</a></li>
                                        <li><a href="/terms-of-service">Terms of Service</a></li>
                                        <li><a href="/refund-policy">Refund Policy</a></li>
                                        <li><a href="/disclaimer">Disclaimer</a></li>
                                        <li><a href="/cookie-policy">Cookie Policy</a></li>
                                        <li><a href="/dmca">DMCA</a></li>
                                        <li><a href="/sitemap">Sitemap</a></li>
                                    </ul>
            </div>
                    </div>
        <div class="footer-bottom">
            <div class="footer-copyright">&copy; 2026 InstantViews.net. All rights reserved. A product of Media Experts Pro LLC.</div>
            <div class="footer-attribution" style="margin-top: 8px; font-size: 12px; color: var(--text-muted);">
                YouTube data powered by <a href="https://www.youtube.com" target="_blank" rel="noopener" style="color: var(--text-tertiary);">YouTube</a> |
                <a href="https://www.youtube.com/t/terms" target="_blank" rel="noopener" style="color: var(--text-tertiary);">YouTube Terms</a> |
                <a href="https://policies.google.com/privacy" target="_blank" rel="noopener" style="color: var(--text-tertiary);">Google Privacy</a>
            </div>
        </div>
    </div>
</footer>

<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>

<!-- Core JavaScript -->
<script type="3588e567512663a46ee4eb60-text/javascript">
// ============================================
// THEME SYSTEM
// ============================================
(function initTheme() {
    const savedTheme = localStorage.getItem('theme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', theme);
})();

function toggleTheme() {
    const html = document.documentElement;
    const currentTheme = html.getAttribute('data-theme') || 'light';
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    html.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    html.style.transition = 'background-color 0.3s ease, color 0.3s ease';
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    if (!localStorage.getItem('theme')) {
        document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
    }
});

// ============================================
// NAVIGATION
// ============================================
// Scroll effect
window.addEventListener('scroll', () => {
    const nav = document.getElementById('nav');
    nav.classList.toggle('scrolled', window.scrollY > 50);
}, { passive: true });

// Mobile menu
function toggleMobileMenu() {
    const hamburger = document.querySelector('.nav-hamburger');
    const mobileMenu = document.getElementById('navMobile');
    hamburger.classList.toggle('active');
    mobileMenu.classList.toggle('active');
}

function closeMobileMenu() {
    const hamburger = document.querySelector('.nav-hamburger');
    const mobileMenu = document.getElementById('navMobile');
    hamburger.classList.remove('active');
    mobileMenu.classList.remove('active');
}

// Toggle mobile expandable section
function toggleMobileSection(element) {
    const section = element.parentElement;
    section.classList.toggle('active');
}

// Close mobile menu when clicking outside
document.addEventListener('click', function(e) {
    const nav = document.getElementById('nav');
    const mobileMenu = document.getElementById('navMobile');
    if (mobileMenu && mobileMenu.classList.contains('active') && !nav.contains(e.target)) {
        closeMobileMenu();
    }
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', function(e) {
        e.preventDefault();
        const t = document.querySelector(this.getAttribute('href'));
        if (t) t.scrollIntoView({ behavior: 'smooth' });
    });
});

// ============================================
// TOAST NOTIFICATIONS
// ============================================
function showToast(type, title, message, duration = 5000) {
    const container = document.getElementById('toastContainer');
    const icons = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' };
    const toast = document.createElement('div');
    toast.className = 'toast toast-' + type;
    toast.innerHTML = `
        <span class="toast-icon">${icons[type] || icons.info}</span>
        <div class="toast-content">
            <div class="toast-title">${title}</div>
            <div class="toast-message">${message}</div>
        </div>
        <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
    `;
    container.appendChild(toast);
    requestAnimationFrame(() => toast.classList.add('show'));
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
    }, duration);
}

// ============================================
// FAQ TOGGLE
// ============================================
function toggleFaq(btn) {
    const item = btn.parentElement;
    const isOpen = item.classList.contains('open');
    document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
    if (!isOpen) item.classList.add('open');
}

// ============================================
// CURRENCY TOGGLE (for pricing)
// ============================================
function toggleCurrency(currency) {
    document.querySelectorAll('.currency-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.currency === currency);
    });
    document.querySelectorAll('.pricing-amount[data-inr]').forEach(e => {
        e.textContent = currency === 'inr' ? e.dataset.inr : e.dataset.usd;
    });
    document.querySelectorAll('.pricing-currency[data-inr]').forEach(e => {
        e.textContent = currency === 'inr' ? e.dataset.inr : e.dataset.usd;
    });
}

// Auto-detect country for currency
(async function() {
    try {
        const response = await fetch('https://ipapi.co/json/');
        const data = await response.json();
        const isIndia = data.country_code === 'IN';
        toggleCurrency(isIndia ? 'inr' : 'usd');
    } catch (e) {
        toggleCurrency('inr');
    }
})();

console.log('✅ InstantViews loaded');
</script>

<!-- Enterprise Analytics (Deferred for Performance) -->
<script src="https://instantviews.net/assets/js/analytics.js?v=1.0.3" defer type="3588e567512663a46ee4eb60-text/javascript"></script>

<script type="3588e567512663a46ee4eb60-text/javascript">
const API_URL = 'https://instantviews.net/api/youtube-api-enhanced.php';
const STATS_API_URL = '/api/stats.php';
const TOOL_SLUG = 'timestamp-generator';

// Load stats
async function loadStats() {
    try {
        const r = await fetch(`${STATS_API_URL}?action=get&tool=${TOOL_SLUG}`);
        const d = await r.json();
        if (d.success) {
            document.getElementById('stat-total').textContent = formatStatNumber(d.stats.total_uses);
            document.getElementById('stat-today').textContent = formatStatNumber(d.stats.today_uses);
            document.getElementById('stat-users').textContent = formatStatNumber(d.stats.users_today);
        }
    } catch (e) {}
}

function formatStatNumber(n) {
    if (!n) return '0';
    n = parseInt(n);
    if (n >= 1000000) return (n/1000000).toFixed(1)+'M';
    if (n >= 1000) return (n/1000).toFixed(1)+'K';
    return n.toString();
}

loadStats();

function setLoading(loading, msg = 'Analyzing...') {
    const form = document.getElementById('analyzerForm');
    const loader = document.getElementById('analyzerLoading');
    if (loading) {
        loader.querySelector('.loading-text').textContent = msg;
        form.classList.add('loading');
        loader.classList.add('active');
    } else {
        form.classList.remove('loading');
        loader.classList.remove('active');
    }
}

document.getElementById('videoUrl').addEventListener('keydown', e => { if (e.key === 'Enter') analyzeVideo(); });

async function analyzeVideo() {
    const input = document.getElementById('videoUrl');
    const url = input.value.trim();
    if (!url) { showToast('warning', 'URL Required', 'Please enter a YouTube video URL.'); input.focus(); return; }

    setLoading(true, 'Analyzing video...');

    try {
        const response = await fetch(`${API_URL}?url=${encodeURIComponent(url)}`);
        if (!response.ok) throw new Error(`Server error (${response.status})`);

        const result = await response.json();
        if (!result.success) throw new Error(result.message || 'Failed to fetch video');

        const data = result.data;

        // Generate suggested timestamps based on video duration
        const duration = parseDuration(data.contentDetails?.duration || 'PT0S');
        const timestamps = generateSuggestedTimestamps(duration, data.snippet?.title || 'Video');

        displayTimestampResult(data, timestamps);

    } catch (e) {
        openResultModal('Error', '⚠️');
        setModalError(e.message || 'Network error. Please try again.');
    } finally {
        setLoading(false);
    }
}

function parseDuration(duration) {
    const match = duration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
    if (!match) return 0;
    const hours = parseInt(match[1] || 0);
    const minutes = parseInt(match[2] || 0);
    const seconds = parseInt(match[3] || 0);
    return hours * 3600 + minutes * 60 + seconds;
}

function formatTime(seconds) {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    if (h > 0) {
        return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    }
    return `${m}:${s.toString().padStart(2, '0')}`;
}

function generateSuggestedTimestamps(duration, title) {
    const timestamps = [];

    // Always start with 0:00
    timestamps.push({ time: 0, label: 'Introduction' });

    if (duration < 120) {
        // Short video (under 2 min) - just intro and outro
        if (duration > 30) {
            timestamps.push({ time: Math.floor(duration * 0.7), label: 'Summary' });
        }
    } else if (duration < 600) {
        // Medium video (2-10 min) - 3-4 chapters
        timestamps.push({ time: Math.floor(duration * 0.25), label: 'Main Topic' });
        timestamps.push({ time: Math.floor(duration * 0.6), label: 'Key Points' });
        if (duration > 300) {
            timestamps.push({ time: Math.floor(duration * 0.85), label: 'Conclusion' });
        }
    } else if (duration < 1800) {
        // Long video (10-30 min) - 5-6 chapters
        timestamps.push({ time: Math.floor(duration * 0.12), label: 'Overview' });
        timestamps.push({ time: Math.floor(duration * 0.3), label: 'Section 1' });
        timestamps.push({ time: Math.floor(duration * 0.5), label: 'Section 2' });
        timestamps.push({ time: Math.floor(duration * 0.7), label: 'Section 3' });
        timestamps.push({ time: Math.floor(duration * 0.9), label: 'Conclusion' });
    } else {
        // Very long video (30+ min) - more chapters
        const numChapters = Math.min(10, Math.floor(duration / 300) + 2);
        const interval = duration / numChapters;

        for (let i = 1; i < numChapters; i++) {
            timestamps.push({
                time: Math.floor(interval * i),
                label: `Part ${i}`
            });
        }
        timestamps.push({ time: Math.floor(duration * 0.95), label: 'Conclusion' });
    }

    return timestamps;
}

function displayTimestampResult(data, timestamps) {
    const thumbnail = data.snippet?.thumbnails?.medium?.url || data.snippet?.thumbnails?.default?.url || '';
    const title = data.snippet?.title || 'Video';
    const duration = parseDuration(data.contentDetails?.duration || 'PT0S');
    const views = parseInt(data.statistics?.viewCount || 0);
    const channelTitle = data.snippet?.channelTitle || 'Channel';

    let timestampText = timestamps.map(t => `${formatTime(t.time)} ${t.label}`).join('\n');

    const html = `
        <div class="video-info-card">
            <img src="${thumbnail}" class="video-thumbnail" alt="Video thumbnail">
            <div class="video-details">
                <div class="video-title">${escapeHtml(title)}</div>
                <div class="video-meta">
                    <div class="video-meta-item">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        ${formatTime(duration)}
                    </div>
                    <div class="video-meta-item">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        ${formatNumber(views)} views
                    </div>
                    <div class="video-meta-item">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        ${escapeHtml(channelTitle)}
                    </div>
                </div>
            </div>
        </div>

        <div class="timestamp-output">
            <div class="timestamp-header">
                <div class="timestamp-title">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    Generated Timestamps
                </div>
                <div class="timestamp-actions">
                    <button class="timestamp-btn timestamp-btn-primary" onclick="copyTimestamps()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                        Copy
                    </button>
                </div>
            </div>

            <div class="timestamp-list" id="timestampList">
                ${timestamps.map((t, i) => `
                    <div class="timestamp-item" data-index="${i}">
                        <span class="timestamp-time">${formatTime(t.time)}</span>
                        <input type="text" class="timestamp-label" value="${escapeHtml(t.label)}" style="flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 15px; outline: none;">
                    </div>
                `).join('')}
            </div>

            <div class="timestamp-preview" id="timestampPreview">${timestampText}</div>
        </div>

        <div style="margin-top: 20px; padding: 16px; background: rgba(34, 197, 94, 0.1); border-radius: 12px; border: 1px solid rgba(34, 197, 94, 0.2);">
            <div style="display: flex; align-items: center; gap: 10px; color: #22c55e; font-weight: 600; margin-bottom: 8px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                How to Use
            </div>
            <ol style="margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.8;">
                <li>Click "Copy" to copy the timestamps</li>
                <li>Go to your YouTube video and click "Edit"</li>
                <li>Paste the timestamps in your video description</li>
                <li>Save changes - chapters will appear within a few hours!</li>
            </ol>
        </div>
    `;

    openResultModal('Timestamp Generator', '⏱️');
    setModalContent(html);

    // Update preview when labels change
    document.querySelectorAll('#timestampList .timestamp-label').forEach((input, i) => {
        input.addEventListener('input', updatePreview);
    });
}

function updatePreview() {
    const items = document.querySelectorAll('#timestampList .timestamp-item');
    let text = '';
    items.forEach(item => {
        const time = item.querySelector('.timestamp-time').textContent;
        const label = item.querySelector('.timestamp-label').value;
        text += `${time} ${label}\n`;
    });
    document.getElementById('timestampPreview').textContent = text.trim();
}

function copyTimestamps() {
    const preview = document.getElementById('timestampPreview');
    navigator.clipboard.writeText(preview.textContent).then(() => {
        showToast('success', 'Copied!', 'Timestamps copied to clipboard');
    });
}

// Manual Timestamp Functions
function addTimestampRow() {
    const container = document.getElementById('timestampInputs');
    const rows = container.querySelectorAll('.timestamp-input-row');
    const lastRow = rows[rows.length - 1];

    // Get the last time and increment by 1 minute
    let lastTime = '0:00';
    if (lastRow) {
        lastTime = lastRow.querySelector('.timestamp-input-time').value || '0:00';
    }
    const nextTime = incrementTime(lastTime);

    const row = document.createElement('div');
    row.className = 'timestamp-input-row';
    row.innerHTML = `
        <input type="text" class="timestamp-input-time" placeholder="${nextTime}" value="${nextTime}">
        <input type="text" class="timestamp-input-label" placeholder="Chapter title...">
        <button class="timestamp-input-remove" onclick="removeTimestampRow(this)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
    `;
    container.appendChild(row);
    row.querySelector('.timestamp-input-label').focus();
}

function incrementTime(timeStr) {
    const parts = timeStr.split(':').map(Number);
    let seconds = 0;
    if (parts.length === 3) {
        seconds = parts[0] * 3600 + parts[1] * 60 + parts[2];
    } else if (parts.length === 2) {
        seconds = parts[0] * 60 + parts[1];
    }
    seconds += 60; // Add 1 minute
    return formatTime(seconds);
}

function removeTimestampRow(btn) {
    const row = btn.closest('.timestamp-input-row');
    const container = document.getElementById('timestampInputs');
    if (container.children.length > 1) {
        row.remove();
    }
}

function clearManualInputs() {
    const container = document.getElementById('timestampInputs');
    container.innerHTML = `
        <div class="timestamp-input-row">
            <input type="text" class="timestamp-input-time" placeholder="0:00" value="0:00">
            <input type="text" class="timestamp-input-label" placeholder="Introduction">
            <button class="timestamp-input-remove" onclick="removeTimestampRow(this)" style="visibility: hidden;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
    `;
    document.getElementById('manualOutput').style.display = 'none';
}

function generateManualOutput() {
    const rows = document.querySelectorAll('#timestampInputs .timestamp-input-row');
    let output = '';

    rows.forEach(row => {
        const time = row.querySelector('.timestamp-input-time').value.trim() || '0:00';
        const label = row.querySelector('.timestamp-input-label').value.trim() || 'Chapter';
        output += `${time} ${label}\n`;
    });

    document.getElementById('manualPreview').textContent = output.trim();
    document.getElementById('manualOutput').style.display = 'block';
}

function copyManualOutput() {
    const text = document.getElementById('manualPreview').textContent;
    navigator.clipboard.writeText(text).then(() => {
        showToast('success', 'Copied!', 'Timestamps copied to clipboard');
    });
}

function formatNumber(n) {
    if (!n) return '0';
    if (n >= 1000000000) return (n/1000000000).toFixed(1)+'B';
    if (n >= 1000000) return (n/1000000).toFixed(1)+'M';
    if (n >= 1000) return (n/1000).toFixed(1)+'K';
    return n.toString();
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text || '';
    return div.innerHTML;
}
</script><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="3588e567512663a46ee4eb60-|49" defer></script></body>
</html>
